Web

Siteye Google Haritası Gömmek Hızı Yavaşlatır mı? Daha Hafif 4 Yöntem

Talha Aslan 15 dakikalık okuma 1 görüntülenme

Kısa cevap

Siteye Google haritası gömmek hızı yavaşlatır mı?

Evet, standart Google haritası iframe'i sayfayı yavaşlatabilir; çünkü harita açıldığı anda kendi betiklerini, yazı tiplerini ve görsel karolarını ayrı bir kaynaktan indirir. Ancak etkiyi büyük ölçüde siz belirlersiniz: tembel yükleme, tıklayınca açılan önizleme ya da mobilde yol tarifi düğmesi bu yükü neredeyse sıfıra indirir.

Tüm detaylar ve örnekler için yazıya devam edin

Biz Talha Aslan ve ekibi olarak iletişim sayfası, şube sayfası ya da ana sayfanın alt kısmına Google haritası eklemek isteyen pek çok işletmeyle çalıştık. Bu yazıda haritanın gerçekte ne kadar yük getirdiğini, hangi durumda sorun çıkardığını ve daha hafif yöntemleri adım adım anlatıyoruz. Ayrıca her yöntemi hangi sayfa tipine önerdiğimizi de paylaşıyoruz.

Gömülü harita sayfaya tam olarak ne yükler?

Gömülü harita aslında sayfanızın içinde açılan ikinci bir web sayfasıdır. Yani tarayıcı sizin içeriğinizin yanında Google'ın harita uygulamasını da baştan kurar. Bu nedenle tek satırlık bir kod gibi görünse de arkasında çok sayıda istek vardır.

  • Harita arayüzünü çalıştıran JavaScript dosyaları.
  • Yakınlaştırma düğmeleri ve etiketler için yazı tipleri ve stil dosyaları.
  • Haritanın kendisini oluşturan karo görselleri.
  • Ölçüm ve oturum için kullanılan ek bağlantılar.

Örneğin bir hizmet sayfasında metin, birkaç görsel ve form varsa, haritanın getirdiği dosyalar toplam indirmenin önemli bir bölümünü oluşturabilir. Kesin miktar konuma, yakınlaştırma düzeyine ve tarayıcıya göre değişir; bu yüzden kendi sayfanızda ölçmenizi öneririz. Tarayıcının geliştirici araçlarındaki ağ sekmesi size haritanın kaç istek attığını ve kaç kilobayt indirdiğini açıkça gösterir.

Bir başka nokta da bağlantı kurulumudur. Tarayıcı her yeni alan adı için ayrı bir bağlantı açar; bu da özellikle yavaş mobil ağlarda ek bekleme demektir. Dolayısıyla haritanın maliyeti yalnız indirilen dosya boyutundan ibaret değildir.

Google haritası hangi hız ölçümlerini etkiler?

Google haritası en çok ana iş parçacığını meşgul ederek ve bant genişliğini paylaşarak zarar verir. Dolayısıyla etkisi tek bir sayıda değil, birkaç ölçümde birden kendini gösterir. Core Web Vitals değerlerinin ne anlama geldiğini Core Web Vitals rehberimizde ayrıntılı anlattık; burada yalnız haritayla ilişkisini özetliyoruz.

  • LCP (en büyük içerik boyaması): harita dosyaları ana görselinizle bant genişliği için yarışırsa ana görsel geç gelir.
  • INP (etkileşimden sonraki boyama): harita betikleri çalışırken kullanıcı düğmeye basarsa tepki gecikebilir.
  • CLS (görsel kayma): harita kutusuna yükseklik vermezseniz içerik yüklenince aşağı kayar.

Öte yandan harita sayfanın en altındaysa ve tembel yükleniyorsa bu üç ölçüme etkisi çoğu zaman belirgin olmaz. Kısacası sorun haritanın kendisinden çok, nereye ve nasıl yerleştirildiğinden doğar.

Örnek senaryo: bir restoran sitesinde harita menü görselinin hemen altında duruyor ve sayfa açılır açılmaz yükleniyor. Bu durumda telefon kullanıcısı menüyü okumak isterken tarayıcı aynı anda harita dosyalarıyla uğraşır. Haritayı aşağı alıp tembel yüklediğinizde menü görseli öne geçer.

Harita ilk ekranda mı, sayfanın altında mı olmalı?

Çoğu işletme sitesinde haritanın ilk ekranda durmasına gerek yoktur. Ziyaretçi önce ne yaptığınızı, nerede hizmet verdiğinizi ve size nasıl ulaşacağını okumak ister. Bu yüzden biz haritayı genellikle iletişim bilgilerinin hemen altına ya da sayfanın son bölümüne koyuyoruz.

Ancak bazı sayfalarda konum asıl içeriktir. Örneğin bir otoparkın, bir etkinlik alanının ya da birden çok şubenin listelendiği sayfada harita ziyaretçinin aradığı şeyin ta kendisidir. Böyle bir durumda haritayı yukarı alırsınız, fakat yine de tıklayınca yüklenen bir önizleme kullanmanızı öneririz.

Basit bir kural işinize yarar: kullanıcı haritayı görmeden kararını verebiliyorsa harita aşağıda kalsın. Konum karar için şartsa harita yukarı çıksın ama ağır kodu ilk anda yüklemesin. İletişim sayfasının genel yapısını merak ediyorsanız iletişim sayfası nasıl olmalı yazımıza göz atabilirsiniz.

Ayrıca konumu ilk ekranda tek satırlık bir adresle göstermek çoğu zaman yeterlidir. Kullanıcı daha fazlasını isterse aşağıdaki harita alanına ya da yol tarifi bağlantısına geçer. Böylece ilk izlenim hızlı kalır.

Tembel yükleme (loading lazy) haritada nasıl çalışır?

Tembel yükleme, ekranda görünmeyen bir öğenin kullanıcı ona yaklaşana kadar indirilmemesi demektir. iframe etiketine loading niteliğini lazy değeriyle eklediğinizde tarayıcı haritayı ilk anda yüklemez. web.dev'in iframe tembel yükleme rehberine göre bu yöntem veri tasarrufu sağlar, diğer içeriği hızlandırır ve bellek kullanımını azaltır.

Ayrıca bu nitelik artık büyük tarayıcıların hepsi destekliyor; yani ek kütüphane gerekmez. Nitelik yazılmazsa tarayıcı haritayı hemen yükler, çünkü varsayılan davranış budur.

Yine de tembel yüklemenin bir sınırı vardır. Harita ilk ekranın içindeyse tarayıcı onu zaten ekranda sayar ve hemen indirir. Dolayısıyla bu yöntem ancak sayfanın aşağısındaki haritalar için tam fayda sağlar. Görseller ve diğer öğeler için genel mantığı lazy load rehberimizde anlattık.

Bir de şunu bilmekte fayda var: tarayıcı haritayı kullanıcı tam o noktaya gelmeden biraz önce indirmeye başlar. Yani kullanıcı genellikle boş bir kutu görmez. Ancak yavaş bağlantıda kısa bir bekleme yaşanabilir; bu yüzden kutuya sade bir arka plan rengi vermenizi öneririz.

Tıklayınca yüklenen statik önizleme nedir?

Bu yöntemde sayfaya gerçek harita yerine haritaya benzeyen hafif bir görsel koyarsınız. Görselin üzerinde "Haritayı aç" gibi net bir düğme durur. Kullanıcı tıkladığında betik gerçek Google haritası iframe'ini o anda ekler. Web geliştiriciler bu yaklaşıma "cephe" (facade) der.

web.dev'in üçüncü taraf gömme önerileri de etkileşim gerekmeyen yerlerde canlı haritayı bir görselle değiştirmeyi önerir. Bu görseli ekran görüntüsünden hazırlayıp WebP biçimine çevirebilir ya da Google'ın statik harita hizmetiyle üretebilirsiniz.

Böylece haritayı hiç açmayan ziyaretçi hiçbir harita kodu indirmez. Üstelik haritayı açan kişi de kendi isteğiyle açtığı için bekleme süresini daha kolay kabul eder. Bizim sahada en sık önerdiğimiz yöntem budur.

Önizleme görselini Google'ın statik harita hizmetiyle üretirseniz genellikle bir API anahtarı gerekir. Kullanım koşulları ve ücretlendirme zamanla değişebileceği için güncel durumu resmi belgelerden kontrol edin.

Statik önizlemeyi adım adım nasıl kurarsınız?

Bu kurulumu kod bilgisi gerektiren ama karmaşık olmayan birkaç adımda tamamlarsınız. Kavram olarak süreç şöyledir:

  1. İşletmenizin bulunduğu bölgenin net bir harita görüntüsünü hazırlayın; işaretçinin ortada durmasına dikkat edin.
  2. Görseli WebP biçimine çevirin ve sayfadaki gerçek ölçüsüne göre küçültün.
  3. Görsele anlamlı bir alternatif metin yazın, örneğin işletme adı ve semt.
  4. Görselin üstüne "Haritayı aç" yazan gerçek bir düğme koyun.
  5. Düğmeye basılınca iframe'i aynı ölçüde ekleyen küçük bir betik yazın.
  6. Betik çalışmazsa düğme Google Haritalar bağlantısına gitsin; böylece kimse boşlukta kalmaz.

Pek çok site son adımı atlıyor. Oysa betik engelleyici kullanan ya da bağlantısı zayıf olan kullanıcı için bu yedek bağlantı hayat kurtarır. Ayrıca düğmenin klavyeyle de çalışması gerekir, yani bir bağlantı ya da gerçek düğme etiketi olmalıdır.

Kurulumdan sonra düğmeye birkaç farklı cihazda basıp haritanın doğru konumda açıldığını kontrol edin. Ayrıca yavaş bağlantıda kullanıcıya kısa bir yükleniyor işareti göstermek beklemeyi daha anlaşılır kılar.

Google haritası yöntemleri birbirinden nasıl farklıdır?

Aşağıdaki tablo dört yaygın yaklaşımı yan yana koyar. Değerlendirme saha tecrübemize dayanır; kesin performans sonucu için kendi sayfanızda ölçüm yapın.

Yöntemİlk yükEtkileşimKurulum zorluğuEn uygun yer
Doğrudan iframeYüksekTamÇok kolayHaritanın asıl içerik olduğu sayfa
iframe ve loading lazyAşağıdaysa düşükTamÇok kolaySayfa altındaki harita
Tıklayınca yüklenen önizlemeÇok düşükTıklama sonrası tamOrtaİletişim ve şube sayfaları
Yalnız yol tarifi düğmesiYok denecek kadar azHarita uygulamasındaKolayMobil görünüm, kısa açılış sayfası

Gördüğünüz gibi en hızlı seçenek her zaman en iyi seçenek değildir. Örneğin şubelerini karşılaştıran bir kullanıcı haritayı sayfada görmek isteyebilir. Bu nedenle seçimi sayfanın amacına göre yaparsınız.

Mobilde harita yerine yol tarifi düğmesi daha mı iyi?

Çoğu durumda evet. Telefondaki ziyaretçi küçük bir kutudaki haritayı parmakla kaydırırken güçlük çeker; üstelik sayfayı kaydırmak isterken yanlışlıkla haritayı kaydırır. Buna karşılık "Yol tarifi al" düğmesi telefonda kurulu harita uygulamasını açar ve kullanıcıyı doğrudan rotaya götürür.

Google'ın Maps URL belgelerine göre bu bağlantıyı herhangi bir API anahtarı olmadan kurarsınız. Yol tarifi biçiminde api parametresi 1 olur ve destination parametresine adres ya da enlem boylam yazarsınız. Başlangıç noktası verilmezse uygulama genellikle kullanıcının o anki konumunu kullanır.

Böylece mobil sayfa hiç harita kodu yüklemez, kullanıcı da tek dokunuşla yola çıkar. Düğmeyi başparmağın rahat ulaştığı alana yerleştirmek için başparmak bölgesi rehberimize bakabilirsiniz.

Düğme metnini de net tutun. "Yol tarifi al" ya da "Haritada aç" gibi eylem bildiren bir ifade, "Tıklayın" gibi belirsiz bir metinden çok daha anlaşılırdır.

Masaüstü ve mobil için farklı çözüm kullanmak doğru mu?

Doğrudur ve çoğu zaman en dengeli sonuç budur. Masaüstünde geniş ekran, fare ve hızlı bağlantı olduğu için tıklayınca yüklenen önizleme rahat çalışır. Mobilde ise ekran dar olduğu için yol tarifi düğmesi ve adres satırı yeterli olur.

Ancak burada bir tuzak vardır. Haritayı mobilde CSS ile gizleyip masaüstünde gösterirseniz, gizli iframe çoğu durumda yine de indirilebilir. Yani görünmeyen harita telefonda veri harcamaya devam eder. Bu yüzden iframe'i yalnız gerektiği anda betikle eklemek daha güvenli bir yoldur.

Örnek senaryo: bir diş kliniği sitesinde masaüstü kullanıcı önizlemeye tıklayıp haritayı açar, mobil kullanıcı ise adresin altında büyük bir "Yol tarifi al" düğmesi görür. Her iki kullanıcı da aradığını bulur ve hiçbiri gereksiz kod indirmez. Sitenizin telefonda nasıl davrandığını mobil uyumluluk testi aracımızla hızlıca kontrol edebilirsiniz.

Kırılma noktasını da dikkatle seçin. Tablet gibi ara boyutlarda hangi çözümün görüneceğine önceden karar verirseniz tasarım her ekranda tutarlı kalır.

Harita kutusu sayfa kaymasına nasıl yol açar?

Harita kutusuna genişlik ve yükseklik vermezseniz tarayıcı başta ona yer ayırmaz. Sonradan yüklenme anında altındaki içerik aşağı kayar; ziyaretçi de okuduğu satırı kaybeder. Bu kayma CLS değerini bozar ve özellikle mobilde can sıkar.

Çözüm basittir: iframe'e ya da önizleme görseline açık genişlik ve yükseklik değerleri verirsiniz. Duyarlı tasarımda ise en boy oranını sabitleyen bir CSS kuralı kullanırsınız. Böylece harita gelmeden önce de kutu aynı boyutta durur.

  • Önizleme görseli ile iframe aynı ölçüde olsun.
  • Kutunun arka planına açık bir renk verin; boş beyaz alan kırık bir izlenim bırakır.
  • Harita kutusunun üstüne yüklenince açılan duyuru ya da şerit koymayın.

Kısacası yer ayırmak, haritanın ne zaman yüklendiğinden bağımsız olarak kaymayı önler.

Google haritası gizlilik ve çerez açısından ne getirir?

Gömülü Google haritası açıldığında kullanıcının tarayıcısı Google sunucularına bağlanır. Bu bağlantı IP adresi gibi teknik bilgileri taşır ve hizmet kendi çerezlerini ya da benzeri depolamayı kullanabilir. Dolayısıyla harita, sitenizin gizlilik ve çerez metinlerini doğrudan ilgilendirir.

Avrupa ve Türkiye'deki veri koruma kuralları açısından pek çok site, haritayı kullanıcı onay vermeden yüklememeyi tercih eder. Tıklayınca yüklenen önizleme burada da işe yarar; çünkü kullanıcı düğmeye basana kadar Google'a hiçbir istek gitmez. Düğmenin yanına "Haritayı açtığınızda Google'a bağlanırsınız" gibi kısa bir not eklersiniz.

Bu bölüm hukuki danışmanlık değildir; kendi durumunuz için hukuk danışmanınıza başvurun. Genel çerçeveyi KVKK ve GDPR uyumlu web sitesi yazımızda, onay ekranının tasarımını ise çerez bandı tasarımı rehberimizde anlattık.

Çerez bandı ile harita nasıl birlikte çalışır?

Çerez bandı kullanıyorsanız harita, onay gerektiren öğeler arasında yer alabilir. Bu durumda kullanıcı reddederse tarayıcı haritayı açmaz. Ancak boş bir kutu bırakmak kötü bir deneyimdir, çünkü kullanıcı neden harita göremediğini anlamaz.

Bu yüzden biz reddedilen durumda bile işe yarayan bir yedek gösteriyoruz. Önizleme görseli yerinde kalır, altında adres yazılı olur ve "Haritayı aç" düğmesi tıklanınca tek seferlik onay ister. Ayrıca yanına Google Haritalar'da açan normal bir bağlantı koyarız.

  1. Kullanıcı bandı reddeder ve sayfayı okumaya devam eder.
  2. Harita alanında önizleme görseli ve adres yerinde kalır.
  3. Kullanıcı düğmeye basar, kısa bir açıklama ile onay verir.
  4. Tarayıcı haritayı açar ya da kullanıcı yeni sekmede Google Haritalar'ı açar.

Böylece hem kullanıcının tercihine saygı duyarsınız hem de kimseyi konum bilgisinden mahrum bırakmazsınız.

Bir de tercih değişikliğini düşünün. Kullanıcı daha sonra onayını geri çekmek isterse bunu kolayca yapabilmelidir. Bu yüzden çerez tercihlerine dönme bağlantısını sayfanın alt kısmında görünür tutarız.

Birden çok şube varsa haritayı nasıl göstermelisiniz?

Çok şubeli işletmelerde her şube için ayrı bir iframe koymak en ağır seçenektir. Örneğin beş şubeyi aynı sayfada beş harita ile listelerseniz, tarayıcı beş ayrı harita uygulaması kurar. Bu da hem mobilde hem masaüstünde ciddi yavaşlama yaratabilir.

Bunun yerine şubeleri önce bir liste ya da kart düzeninde gösterirsiniz. Her kart adresi, çalışma saatini ve "Yol tarifi al" bağlantısını içerir. Haritayı görmek isteyen kullanıcı ilgili karttaki önizlemeye tıklar ve sayfa yalnız o şubenin haritasını açar.

Öte yandan her şubenin kendi sayfası varsa haritayı o sayfaya taşırsınız. Böylece ana liste hafif kalır ve şube sayfası yerel aramalarda daha net bir sinyal verir. Haritalarda görünürlüğü artırmak ayrı bir konudur; onu Google Haritalar SEO yazımızda ele aldık.

Bunun yanında şube listesini il ya da semte göre gruplamak, kullanıcının en yakın şubeyi haritasız bulmasını kolaylaştırır.

Gömülü harita yerel SEO'ya katkı sağlar mı?

Bu konuda yaygın bir yanlış inanç var. Sitenize Google haritası gömmenin tek başına sıralamanızı yükselttiğini gösteren resmi bir Google açıklaması bilmiyoruz. Harita, kullanıcıya konumu gösteren bir arayüz öğesidir; sıralama hilesi değildir.

Yerel görünürlük için asıl önemli olan tutarlı ad, adres ve telefon bilgisi, eksiksiz bir işletme profili ve sayfadaki net konum metnidir. Yani adresinizi metin olarak yazmak, haritayı göstermekten daha değerlidir; çünkü arama motorları metni doğrudan okur.

Dolayısıyla haritayı SEO için değil, kullanıcı için koyarsınız. Bu bakış açısı kararı da kolaylaştırır: kullanıcıya en hızlı ve en net konum bilgisini hangi yöntem veriyorsa onu seçersiniz. Çoğu sayfada bu, adres metni artı önizleme ya da yol tarifi düğmesidir.

Bunun yanında yapılandırılmış veri de konum bilgisini makinelerin anlayacağı biçimde sunar. Ancak bu ayrı bir konudur ve haritanın hızıyla doğrudan ilgili değildir; burada yalnız harita kararını netleştirmek istiyoruz.

WordPress eklentileri ve sayfa oluşturucular hızı nasıl etkiler?

Pek çok WordPress teması ve sayfa oluşturucu, harita için hazır bir blok sunar. Bu bloklar kullanışlıdır ama bazıları haritayı her sayfada yükleyen ek betikler getirir. Yani haritayı yalnız iletişim sayfasına koysanız bile kod tüm sitede çalışabilir.

Bu yüzden harita bloğu ekledikten sonra haritanın olmadığı bir sayfayı açıp ağ sekmesine bakarsınız. Orada harita ile ilgili istek görüyorsanız eklenti gereksiz yük getiriyor demektir. JavaScript yükünün genel etkisini JavaScript ve site hızı yazımızda anlattık.

Ayrıca bazı harita eklentileri API anahtarı ister ve kendi kütüphanelerini yükler. Basit bir konum gösterimi için çoğu zaman bu kadar ağır bir yapıya gerek yoktur. Tek bir önizleme görseli ve tek bir bağlantı aynı işi görür.

Örnek senaryo: tema ayarlarında harita modülü açık kalmış ve site her sayfada harita kütüphanesini yüklüyor. Modülü kapatıp iletişim sayfasına önizleme eklediğinizde diğer sayfalar bu yükten kurtulur.

Google haritası performansını nasıl ölçersiniz?

Ölçmeden karar vermemek gerekir. Neyse ki bunun için ücretli bir araca ihtiyacınız yok. Tarayıcının geliştirici araçları ve Google'ın hız test araçları yeterli bilgiyi verir.

  1. Sayfayı gizli pencerede açın ve geliştirici araçlarının ağ sekmesini başlatın.
  2. Toplam istek sayısını ve indirilen veri miktarını not alın.
  3. Haritayı geçici olarak kaldırıp aynı ölçümü tekrarlayın.
  4. İki sonucu karşılaştırın; fark haritanın gerçek maliyetidir.
  5. Aynı karşılaştırmayı mobil hız kısıtlamasıyla da yapın.

Örnek senaryo: haritalı ve haritasız iki ölçüm arasında belirgin bir istek farkı görüyorsanız, önizleme yöntemine geçmek için güçlü bir gerekçeniz olur. Fark küçükse ve harita sayfanın altındaysa, tembel yükleme genellikle yeterlidir.

Ölçümü tek seferle bırakmayın. Tema ya da eklenti güncellemesinden sonra aynı testi tekrar edin; çünkü küçük bir değişiklik harita kodunu yeniden tüm sayfalara taşıyabilir.

Erişilebilirlik için harita alanında nelere dikkat etmelisiniz?

Harita görsel bir öğedir; ekran okuyucu kullanan bir ziyaretçi için tek başına anlam taşımaz. Bu nedenle haritanın yanındaki adres metni şarttır. Adres, haritadan bağımsız olarak okunabilir olmalıdır.

  • iframe'e anlamlı bir title niteliği verin, örneğin "İşletme adı konum haritası".
  • Önizleme görselinin alternatif metnini boş bırakmayın.
  • "Haritayı aç" düğmesi klavyeyle odaklanabilsin ve odak çizgisi görünsün.
  • Harita içinde klavye tuzağı oluşursa kullanıcının sayfaya dönebileceği bir yol bırakın.

Üstelik bu düzenlemeler herkesin işine yarar. Örneğin güneş altında ekranı zor gören biri de adres metnini haritadan daha hızlı okur. Kısacası erişilebilir harita alanı, aynı zamanda daha kullanışlı bir harita alanıdır.

Bunun yanında renk kontrastına da bakın. Önizleme üzerindeki düğme metni arka plandaki harita renklerine karışmamalı; gerekirse düğmeye düz bir zemin verin.

Harita yerine adres bloğu ne zaman yeterlidir?

Pek çok işletme haritayı alışkanlıkla ekler. Oysa bazı durumlarda iyi tasarlanmış bir adres bloğu haritadan daha fazla iş görür. Örneğin müşterileriniz sizi zaten tanıyorsa ya da hizmeti yerinde veriyorsanız, ziyaretçinin rotaya değil telefona ihtiyacı vardır.

İyi bir adres bloğu şu parçaları içerir:

  • Açık adres, semt ve şehir, kopyalanabilir metin olarak.
  • Bilinen bir yer işareti, örneğin "metro çıkışının karşısı".
  • Çalışma saatleri ve tatil günleri.
  • Tıklanabilir telefon numarası ve yol tarifi bağlantısı.
  • Otopark ya da toplu taşıma için kısa bir not.

Böylece kullanıcı haritaya bakmadan da sizi bulur. Üstelik bu blok sayfaya neredeyse hiç yük getirmez. Biz özellikle hizmet bölgesi geniş olan işletmelerde haritayı tamamen kaldırıp bu bloğu öne çıkarıyoruz. Ardından bir süre form ve arama tıklamalarını izleyip kararın doğru olup olmadığını kontrol ediyoruz.

Google haritası hangi sayfa tiplerinde gerçekten gerekir?

Haritanın gerçekten değer kattığı sayfalar sınırlıdır. Bu yüzden her sayfa tipi için ayrı düşünmek gerekir. Aşağıdaki liste bizim sahada kullandığımız kaba bir ayrımdır.

  • İletişim sayfası: önizleme ya da yol tarifi düğmesi yeterli olur.
  • Şube sayfası: önizleme ve adres bloğu birlikte iyi çalışır.
  • Etkinlik ya da organizasyon sayfası: giriş kapısını gösteren harita faydalıdır.
  • Ana sayfa: harita çoğu zaman gereksizdir, adres satırı yeterlidir.
  • Blog yazısı: konum konusu yoksa harita hiç gerekmez.

Ancak bu liste kesin bir kural değildir. Örneğin turistik bir işletmede ziyaretçi bölgeyi hiç bilmiyorsa haritayı ana sayfada görmek isteyebilir. Bu durumda yine önizleme yöntemini kullanırsınız ve canlı haritayı kullanıcının isteğine bırakırsınız. Kısacası ihtiyacı sayfanın amacı belirler, alışkanlık değil.

Önizleme görselini nasıl hafif tutarsınız?

Önizleme yönteminin faydası görselin hafif olmasına bağlıdır. Ağır bir PNG dosyası koyarsanız harita kodundan kurtulurken başka bir yük eklemiş olursunuz. Bu yüzden görseli de en az sayfadaki diğer görseller kadar dikkatle hazırlarsınız.

  1. Görseli sayfada gösterdiğiniz en geniş boyuttan büyük kaydetmeyin.
  2. WebP gibi modern bir biçim seçin; renk sayısı az olan harita görüntüleri bu biçimde iyi sıkışır.
  3. Mobil ve masaüstü için iki farklı ölçü hazırlayın.
  4. Görsel ilk ekranda değilse ona da tembel yükleme uygulayın.
  5. Görselin üstüne gereksiz yazı koymayın; adres zaten yanında metin olarak durur.

Ayrıca görseli zaman zaman güncellemeyi unutmayın. Örneğin işletmeniz taşınırsa eski önizleme yanlış konumu gösterir ve kullanıcıyı yanıltır. Bu nedenle adres değiştiğinde önizlemeyi, adres bloğunu ve yol tarifi bağlantısını aynı anda düzenlersiniz.

Haritayı sitenize biz kurmalı mıyız?

Haritanın kendisi küçük bir parça gibi görünse de doğru kurulması tasarım, hız, gizlilik ve mobil kullanım kararlarını bir arada gerektirir. Bu yüzden biz bu bölümü sayfanın geri kalanıyla birlikte planlıyoruz. Önizleme görselini, yol tarifi düğmesini ve onay akışını sitenizin diline uygun hazırlıyoruz.

Sitenizde harita alanını hafif ve kullanışlı hale getirmek istiyorsanız web tasarım hizmetimiz kapsamında bu bölümü sizin için kurabiliriz. Kapsamı netleştirmek için sayfadan teklif isteyebilirsiniz.

Harita alanı için kontrol listesi neleri içerir?

Yayına almadan önce aşağıdaki listeyi tek tek kontrol edin. Bu liste, yukarıda anlattığımız kararların kısa bir özetidir.

  • Harita gerçekten gerekli mi, yoksa adres metni ve yol tarifi düğmesi yeterli mi?
  • Harita ilk ekranın dışında mı, değilse önizleme var mı?
  • iframe'de loading lazy ve anlamlı bir title niteliği var mı?
  • Kutunun genişliği ve yüksekliği için önceden yer var mı?
  • Mobilde yol tarifi düğmesi başparmak bölgesinde mi?
  • Çerez tercihi reddedilince yedek bağlantı çalışıyor mu?
  • Haritanın olmadığı sayfalarda harita kodu çalışıyor mu?
  • Haritalı ve haritasız ölçümü karşılaştırdınız mı?

Bu listeyi geçen bir harita alanı hem hızlı hem kullanışlı olur. Eğer birkaç maddede takılıyorsanız, ekibimiz web tasarım projesinin parçası olarak bu ayarları sizin yerinize yapabilir; ihtiyacınızı yazın, size uygun teklifi hazırlayalım.

Sıkça Sorulan Sorular

Google haritası iframe'i SEO sıralamasını düşürür mü?
Doğrudan düşürdüğünü gösteren resmi bir bilgi bilmiyoruz. Ancak harita sayfayı yavaşlatırsa kullanıcı deneyimi ve Core Web Vitals değerleri kötüleşebilir. Bu nedenle haritayı tembel yükleme ya da tıklayınca açılan önizleme ile eklemenizi öneririz. Böylece ziyaretçiye konum bilgisini eksiksiz sunarsınız ve hem de hız kaybını en aza indirirsiniz. Ölçümü mutlaka kendi sayfanızda yapın.
loading lazy eklemek tek başına yeterli mi?
Harita sayfanın altındaysa çoğu durumda yeterlidir. Ancak harita ilk ekrandaysa tarayıcı onu görünür sayar ve hemen indirir. Bu durumda tıklayınca yüklenen önizleme daha iyi sonuç verir. Ayrıca kutuya genişlik ve yükseklik vermeyi unutmayın; aksi halde yüklenme sırasında sayfa kayar ve okuyan kişi satırını kaybeder.
Yol tarifi bağlantısı için API anahtarı gerekir mi?
Hayır. Google'ın Maps URL belgelerine göre yol tarifi bağlantısını API anahtarı olmadan oluşturursunuz. Bağlantıda api parametresi 1 olur ve hedef adresi destination parametresine yazarsınız. Kullanıcı telefondaysa bağlantı genellikle harita uygulamasını açar ve rotayı doğrudan başlatır. Böylece mobil sayfa hiç harita kodu indirmez ve hızlı kalır.
Haritayı mobilde CSS ile gizlemek veri tasarrufu sağlar mı?
Çoğu zaman sağlamaz. Görünmeyen bir iframe yine de indirilebilir, yani telefon gereksiz veri harcar. Daha güvenli yol, iframe'i yalnız kullanıcı istediğinde ya da yalnız geniş ekranlarda betikle eklemektir. Mobilde ise adres metni ve büyük bir yol tarifi düğmesi çoğu kullanıcıya yeter. Bu yaklaşım hem veri hem pil tasarrufu sağlar.
Statik harita görseli için ne kullanabilirim?
Haritanın ekran görüntüsünü alıp WebP biçimine çevirebilir ya da Google'ın statik harita hizmetini kullanabilirsiniz. Statik harita hizmeti genellikle bir API anahtarı ister; güncel koşulları resmi belgelerden kontrol edin. Görsele anlamlı bir alternatif metin yazmayı ve üzerine net bir açma düğmesi koymayı unutmayın. Görseli sayfadaki gerçek ölçüsünde kaydedin.
Çerez onayı olmadan harita göstermek sorun olur mu?
Bu, bulunduğunuz ülkenin kurallarına ve sitenizin yapısına bağlıdır; hukuki danışmanlık değildir. Pek çok site haritayı kullanıcı onayı gelene kadar yüklemez. Tıklayınca yüklenen önizleme bu yaklaşımı kolaylaştırır, çünkü düğmeye basılana kadar Google'a istek gitmez. Kesin değerlendirme için hukuk danışmanınıza başvurun ve metinlerinizi güncel tutun.
  • google haritası
  • site hızı
  • lazy load
  • core web vitals
  • iletişim sayfası
  • web tasarım
Paylaş:
Talha Aslan

Google Partner dijital pazarlama uzmanı. 2012’den beri SEO, Google Ads, web tasarım ve e-ticaret projelerinde sahada; bu blogda gördüğünüz her yazı o deneyimden çıkar.

Sıradaki proje

Projeniz için teklif alın.

Talebiniz doğrudan Talha Aslan ve ekibine ulaşır: stratejiyi Talha kurar, uygulamayı deneyimli ekip yürütür. Aynı gün dönüş yapar, kapsamı, takvimi ve tutarı yazılı teklifle 1 iş günü içinde göndeririz.