Web

Dil Seçici Nasıl Tasarlanır? Çok Dilli Sitelerde Doğru Kullanım Rehberi

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

Kısa cevap

Dil seçici nedir ve çok dilli bir sitede neden önemlidir?

Dil seçici, çok dilli bir sitede ziyaretçinin aynı sayfanın başka dildeki sürümüne tek dokunuşla geçmesini sağlayan arayüz öğesidir. İyi bir dil seçici göze çarpan bir yerde durur, dil adlarını o dilin kendisiyle yazar, bayrak kullanmaz, kullanıcıyı zorla yönlendirmez ve hreflang ile aynı sayfa eşleşmesini izler.

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

Bu rehberde dil seçici tasarımını baştan sona ele alıyoruz: yerleşim, etiket dili, mobil davranış, otomatik yönlendirmenin sakıncaları, hreflang ile ilişki ve erişilebilirlik. Talha Aslan ve ekibi olarak çok dilli sitelerde en sık gördüğümüz sorun, ekiplerin dil seçiciyi son anda eklenen bir süs gibi görmesidir. Oysa bu küçük bileşen, yabancı ziyaretçinin siteyle ilk temasını belirler. Üstelik arama motorlarının sürümleri keşfetmesine de yardım eder.

Yazının sonunda yayın öncesi kontrol listesi ve farklı tasarım seçeneklerini karşılaştıran bir tablo bulacaksınız. Örnekler gerçek müşteri vakası değil, açıkça "örnek senaryo" olarak kurgulanmıştır.

Dil seçici sitede nereye konmalı?

Kısa cevap: her sayfada, aynı yerde ve ilk bakışta fark edeceğiniz biçimde. W3C Uluslararasılaştırma ekibinin dil müzakeresi üzerine yazdığı rehber alternatif dil bağlantılarının saklanmaması gerektiğini ve genellikle sayfanın göze çarpan bir köşesinde durmasını önerir. Ziyaretçi dil değiştirmek istediğinde gözünü önce sağ üst köşeye ya da üst menünün sonuna gezdirir. Bu nedenle biz de bileşeni genellikle başlık alanının sağ ucuna yerleştiriyoruz.

Ayrıca altbilgiye (footer) ikinci bir kopya koymak işe yarar. Uzun bir sayfanın sonuna gelen kullanıcı, yukarı kaydırmadan dil değiştirebilir. Ancak iki kopyayı aynı mantıkla kurun; ikisi de aynı hedef sayfalara gitmeli.

  • Masaüstünde: üst menünün sağ ucu, arama ve iletişim düğmesinin yanı.
  • Mobilde: menü düğmesinin yanında ya da açılan menünün en üstünde.
  • Altbilgide: sitenin yasal bağlantılarının yakınında ikinci bir kopya.
  • Uzak durmanız gereken yer: yalnız iletişim sayfasında ya da kaydırmalı bir bandın içinde.

Kısacası kullanıcı dil seçiciyi aramamalı, hemen görmeli. Yerini her sayfada sabit tutarsanız kullanıcı onu bir kez tanıyıp sonra hiç düşünmeden kullanmaya başlar.

Bayrak mı kullanmalısınız, dil adı mı?

Dil adı kullanın. Bayrak bir ülkeyi temsil eder, dil ise sınırları aşar. İspanyolcayı onlarca ülkede insanlar ana dil olarak konuşuyor; İsviçre ise birden fazla resmi dile sahiptir. W3C rehberi de bayrakların yalnız çevirisi olan sayfalara bağlantı vermek için uygun olmadığını açıkça söyler. Bayrak, ancak içerik gerçekten ülkeye göre değişiyorsa, örneğin farklı fiyat ve teslimat koşulları sunan bölgesel mağazalarda anlam kazanır.

Örnek senaryo: Almanca bir sayfaya Alman bayrağı koyduğunuzu düşünün. Avusturyalı ya da İsviçreli bir ziyaretçi bu bayrağı kendi dili olarak görmeyebilir. Benzer biçimde İngilizce için İngiltere bayrağı seçerseniz ABD veya Hindistan’dan gelen okur kendini dışarıda kalmış gibi hisseder. Üstelik bayraklar küçük boyutta birbirine benzer ve renk körlüğü olan kullanıcılar için ayırt etmek zorlaşır.

Bu yüzden önerimiz sade: metin etiketi birincil olsun. Görsel bir işaret istiyorsanız evrensel dil simgesi olarak bilinen küre veya dil ikonunu metnin yanında kullanın. Böylece kullanıcı bileşeni hemen tanır ve doğru mesajı alır.

Dil adlarını hangi dilde yazmalısınız?

Her dili kendi adıyla yazın: "Türkçe", "English", "Deutsch", "Français". Bu yaklaşıma endonim, yani bir dilin kendi konuşucularının kullandığı ad diyoruz. Mantığı basit: sayfanın dilini anlamayan kişi, menüde kendi dilini ancak tanıdığı biçimde görürse bulabilir. Japonca bir sayfaya düşen Türk ziyaretçi "トルコ語" yazısını okuyamaz, ama "Türkçe" kelimesini hemen fark eder.

W3C’nin WCAG 2.2 "Language of Parts" açıklaması da tam olarak bu örneği verir: her bağlantının metni, o dilin kendi dilindeki adıdır ve her bağlantı kendi dil kodunu taşır. Böylece ekran okuyucular "Deutsch" kelimesini Türkçe kurallarla değil Almanca telaffuzla seslendirir.

  • Dil adını kısaltmayın; "DE" yerine "Deutsch" yazın, kısa kodu isterseniz yanına ekleyin.
  • Büyük harf kuralını o dilin geleneğine göre belirleyin; Fransızcada dil adlarını cümle içinde küçük harfle yazarlar ama menüde baş harfi büyük kullanmak yaygındır.
  • Aynı listede karışık yazım kullanmayın; ya hepsi tam ad ya hepsi tam ad artı kod olsun.

Ayrıca aktif dili listede belirgin biçimde işaretleyin. Kullanıcı hangi dilde olduğunu bilmeli; aksi halde "neden değişmedi" diye aynı seçeneğe tekrar tekrar tıklar.

Dropdown menü mü, açık liste mi daha iyi?

Cevap dil sayısına bağlı. İki veya üç dil sunuyorsanız açık bağlantılar çoğu zaman en hızlı çözümdür: "Türkçe | English | Deutsch" gibi yan yana bir dizi, tek tıkla geçiş sağlar. Kullanıcı menü açmak zorunda kalmaz ve tüm seçenekleri bir bakışta görür.

Öte yandan dil sayısı beşi, onu geçtiğinde açık liste başlık alanını kalabalıklaştırır. Bu noktada dropdown, yani aşağı doğru açılan menü mantıklı hale gelir. W3C rehberi de çok sayıda dil olduğunda dropdown listenin işe yarayabileceğini, ancak denetimin amacının dilden bağımsız biçimde anlaşılması gerektiğini vurgular. Yani menüyü açan düğmeye yalnız "Dil" yazısı değil, bir dil ikonu ve mevcut dilin adı da koyun.

Örnek senaryo: altı dilde hizmet veren bir turizm firması düşünün. Masaüstünde dil ikonu ve "English" yazısını gösteren bir düğme, tıklandığında altı dili alfabetik değil kullanım sıklığına göre sıralayan bir panel açar. Mobilde ise aynı liste, menünün en üstünde açık bağlantılar olarak durur. Böylece her ekran kendi koşuluna uygun bir deneyim sunar.

Hangi biçimi seçerseniz seçin, dropdown menüyü yalnız fareyle üzerine gelince açılan bir yapıyla kurmayın. Dokunmatik ekranlarda ve klavyeyle gezinmede bu davranış çoğu zaman çalışmaz.

Mobilde dil seçici nasıl tasarlanmalı?

Mobilde küçük ekran yüzünden tasarımcılar sıklıkla dil seçiciyi hamburger menünün en altına gömer. Bu, yabancı ziyaretçi için kötü bir başlangıçtır; çünkü sayfanın dilini anlamayan kişi menüyü açıp en alta inmeyi akıl etmeyebilir. Bu nedenle dil geçişini mobilde de ilk ekranda tutmanızı öneriyoruz.

  1. Başlık çubuğuna menü düğmesinin yanına küçük bir dil ikonu ve iki harfli kod koyun.
  2. İkona dokunulduğunda tam ekran ya da alttan açılan bir panelde dil adlarını listeleyin.
  3. Her seçeneği parmakla rahat dokunabileceğiniz yükseklikte tasarlayın; birbirine yapışık bağlantılardan kaçının.
  4. Panelde aktif dili işaretleyin ve kapatma düğmesini net bir yerde tutun.
  5. Seçimden sonra kullanıcıyı aynı içeriğin yeni dildeki sürümüne götürün.

Ayrıca dokunma hedeflerinin boyutu önemli. WCAG 2.2, işaretçi hedefleri için asgari boyut ve aralık beklentisi tanımlar; güncel eşiği W3C’nin resmi belgesinden kontrol etmenizi öneririz. Sahada gördüğümüz en yaygın sorun, üç dil kodunun dar bir alana sıkıştırılması ve yanlış dile dokunulmasıdır.

Kısacası mobilde hedef, dil değiştirmeyi iki dokunuşu geçmeyen bir işleme indirmektir.

Otomatik dil yönlendirmesi neden sakıncalı?

Otomatik yönlendirme, ziyaretçiyi IP adresine ya da tarayıcı diline bakarak kendiliğinden başka bir dil sürümüne göndermektir. Kâğıt üzerinde kullanıcı dostu bir fikir gibi duruyor, ama pratikte iki ciddi soruna yol açar. Birincisi kullanıcı tarafındadır: Almanya’da yaşayan bir Türk, Türkçe sayfayı açmak isterken Almanca sürüme atılabilir. İkincisi arama motoru tarafındadır.

Google, çok bölgeli siteleri yönetme rehberinde kullanıcıları bir dil sürümünden ötekine otomatik yönlendirmekten kaçınmayı önerir; çünkü bu yönlendirme hem kullanıcıların hem de arama motorlarının tüm sürümleri görmesini engelleyebilir. Ayrıca Googlebot’un genellikle ABD’den taradığı ve Accept-Language başlığı göndermediğini de Google aynı sayfada açıklıyor. Yani dil ya da konuma göre yönlendirme, Google’ın bazı sürümleri hiç keşfedememesine yol açabilir.

Bu konunun SEO tarafını IP’ye göre otomatik dil yönlendirmesinin SEO etkisi yazımızda ayrıntılı ele aldık. Tasarım açısından vereceğimiz karar ise net: zorla yönlendirme yerine, kullanıcıya seçim hakkı tanıyan bir öneri gösterin.

Tarayıcı dili algılandığında ne yapmalısınız?

Tarayıcının bildirdiği dil tercihini tamamen yok saymak zorunda değilsiniz. Doğru yaklaşım, bu bilgiyi bir öneri için kullanmaktır. Örneğin Almanca tercih eden bir ziyaretçi Türkçe sayfaya geldiğinde, sayfanın üstünde ince bir bant belirir: "Diese Seite gibt es auch auf Deutsch" ve yanında bir bağlantı. Kullanıcı isterse geçer, istemezse bandı kapatır.

Bu bandı tasarlarken birkaç ilkeye dikkat edin. Bandı önerdiği dilde yazın; çünkü onu okuyacak kişi o dili konuşuyor. Ayrıca bant içeriği aşağı itip sayfa kaymasına yol açmamalı. Sayfa yüklendikten sonra beliren ve düzeni oynatan öğeler hem okumayı bozar hem de görsel kararlılık ölçümlerini olumsuz etkiler.

  • Öneri bandını yalnız sürüm gerçekten varsa gösterin.
  • Kapatma düğmesini belirgin yapın ve kapatma kararını hatırlayın.
  • Arama motoru tarayıcılarına farklı bir sayfa sunmayın; bant herkes için aynı mantıkla çalışsın.
  • Bandı tam ekran bir pencereye dönüştürmeyin; içeriği kapatan öğeler kullanıcıyı rahatsız eder.

Böylece tarayıcı tercihinden yararlanırsınız, ama son sözü kullanıcıya bırakırsınız.

Kullanıcının dil seçimini nasıl hatırlamalısınız?

Ziyaretçi bir kez dil seçtiyse, site o kararı saygıyla korumalı. W3C rehberi, kullanıcı dil değiştirdiğinde tercihin bir çerez ya da tarayıcı depolamasıyla saklanabileceğini ve sonraki sayfaların bu seçime göre sunulabileceğini anlatır. Ancak burada ince bir ayrım var: tercihi hatırlamak, adres yapısının yerini almamalı.

Her dil sürümünün kendi kalıcı adresi olmalı; örneğin example.com/de/ gibi. Çerez yalnızca kullanıcının daha önce seçtiği dili hatırlayıp öneri bandını ya da ana sayfa girişini kişiselleştirmeli. Aynı adres, çereze göre farklı dilde içerik gösterirse arama motorları hangi dili dizine ekleyeceğini kestiremez. Üstelik paylaşılan bağlantı, alıcıda başka bir dilde açılabilir.

Örnek senaryo: bir kullanıcı Almanca sürüme geçti ve sonra Türkçe bir blog bağlantısına tıkladı. Doğru davranış, bağlantının işaret ettiği Türkçe sayfayı açmak ve üstte Almanca sürüm önerisi göstermektir. Yanlış davranış ise kullanıcıyı sessizce Almanca ana sayfaya atmaktır. Bağlantının hedefi her zaman tercihin önünde gelir.

Dil değiştiğinde kullanıcı hangi sayfaya gitmeli?

Aynı içeriğin karşılığına gitmeli. Bu, dil seçicinin en çok ihmal edilen kuralıdır. Ürün sayfasını okuyan biri İngilizceye geçtiğinde ana sayfaya düşerse aradığı içeriği baştan bulmak zorunda kalır ve çoğu zaman vazgeçer.

Bunun için sitenizin her sayfası, diğer dillerdeki karşılığını bilmeli. İçerik yönetim sisteminde sayfaları birbirine bağlayan bir çeviri ilişkisi kurarsanız, sistem dil seçici bağlantılarını bu ilişkiden otomatik üretir. Böylece elle güncellenen ve zamanla kırılan bağlantılardan kurtulursunuz. Dahası aynı eşleşme tablosu, hreflang etiketlerinin de kaynağı olur.

  • Ürün sayfası → aynı ürünün diğer dildeki sayfası.
  • Blog yazısı → aynı yazının çevirisi; çeviri yoksa dilin blog ana sayfası.
  • Kategori sayfası → aynı kategorinin karşılığı.
  • Arama sonuçları ve filtreli sayfalar → mümkünse aynı sorgu ve filtrelerle karşılık gelen sayfa.

Bu kuralı test etmek basittir. Sitenizden rastgele on sayfa seçin ve her birinde dili değiştirin. Ardından açılan adresin aynı içeriğin çevirisi olup olmadığına bakın. Örneğin bir hizmet sayfasından İngilizceye geçtiğinizde İngilizce hizmet sayfası yerine ana sayfa açılıyorsa eşleşme eksiktir. Bu testi her yeni içerik yayınından sonra tekrarlamak, kırık eşleşmeleri büyümeden yakalamanızı sağlar.

Kısacası dil seçici bir "ana sayfaya dön" düğmesi değildir; bulunduğunuz yeri koruyan bir çeviri anahtarıdır.

Çevirisi olmayan sayfada dil seçici ne göstermeli?

Her sayfanın her dilde karşılığı olmayabilir. Örneğin yalnız Türkiye’deki müşterilere yönelik bir kampanya sayfası için hiç İngilizce sürüm hazırlamamış olabilirsiniz. Bu durumda üç seçeneğiniz var ve hepsinin artısı eksisi farklı.

Birinci seçenek, eksik dili listede pasif göstermek ve yanına "bu sayfa bu dilde mevcut değil" notu düşmektir. İkinci seçenek, eksik dilin bağlantısını o dilin en yakın üst sayfasına, örneğin ilgili kategoriye ya da ana sayfaya yönlendirmektir. Üçüncüsü ise eksik dili listeden tamamen kaldırmaktır; ancak bu, kullanıcıda "site bu dili artık desteklemiyor" izlenimi bırakabilir.

Biz genellikle ikinci seçeneği öneriyoruz, bir koşulla: kullanıcı nereye gittiğini bilmeli. Bağlantının yanında kısa bir açıklama ya da hedef sayfada "aradığınız içerik bu dilde yok, ilgili bölüm burada" mesajı bu belirsizliği giderir. Öte yandan çeviri ilişkisi olmayan sayfalar arasında hreflang bağı kurmayın; çünkü hreflang yalnız gerçekten eşdeğer sayfaları eşleştirmek içindir.

Dil seçici ile hreflang arasındaki ilişki nedir?

Dil seçici insanlar için, hreflang ise arama motorları için aynı bilgiyi taşır: "bu sayfanın şu dillerde karşılıkları var." İkisini aynı kaynaktan besleyin ve birbiriyle çelişmesine izin vermeyin. Google’ın yerel sürümler belgesi her dil sürümünün kendisini ve diğer tüm sürümleri listelemesini ister; iki sayfa birbirini göstermiyorsa etiketler yok sayılabilir.

Pratikte sık gördüğümüz hata şudur: dil seçici A sayfasını B’ye bağlar, ama hreflang A’yı C’ye eşleştirir. Bu durumda kullanıcı ile arama motoru farklı haritalar görür. Çözüm, tek bir çeviri eşleşme tablosu tutmak ve hem bağlantıları hem etiketleri o tablodan üretmektir.

hreflang’ın temellerini hreflang etiketi rehberimizde anlattık; etiketleri hızlıca hazırlamak için hreflang oluşturucu aracımızı kullanabilirsiniz. Ayrıca dil seçici bağlantıları, Google’ın da önerdiği gibi tarayıcının diğer sürümleri bulmasına yardım eden normal HTML bağlantıları olmalı; yalnız betikle tetiklenen ve adresi olmayan düğmeler bu işi görmez.

x-default ve dil seçim sayfası ne zaman gerekir?

x-default, ziyaretçinin dil tercihi sitenizdeki hiçbir sürümle eşleşmediğinde Google’ın ona sunacağı yedek sayfayı belirten hreflang değeridir. Google’ın belgesi bu değerin dil seçici sayfaları için tasarlandığını ve en iyi onlarla çalıştığını belirtir. Yani küresel bir giriş sayfanız varsa, x-default için en doğal aday odur.

Peki her siteye ayrı bir dil seçim sayfası gerekir mi? Hayır. Üç dilli bir kurumsal sitede ana dil sürümünü x-default yapmak çoğu zaman yeterlidir. Ancak çok sayıda ülke ve dil kombinasyonu sunan sitelerde, kullanıcının önce bölge ve dil seçtiği bir giriş sayfası anlamlı olabilir.

  • Giriş sayfası tüm dil adlarını kendi dillerinde ve tek ekranda göstermeli.
  • Sayfa boş bir "seçim kapısı" olmamalı; kısa marka tanıtımı ve gezinme bağlantıları içermeli.
  • Seçim yapıldıktan sonra kullanıcıyı her girişte yeniden bu sayfaya zorlamayın.
  • x-default ile işaretlediğiniz sayfanın da diğer sürümlerle karşılıklı hreflang bağı olmalı.

Örnek senaryo: Türkçe, İngilizce ve Almanca sunan bir sanayi firması düşünün. Firma İngilizce sürümü x-default olarak işaretler; böylece İspanyolca ya da Arapça tarayıcı ayarıyla gelen bir ziyaretçi, en geniş kitleye hitap eden sürümü görür. Aynı firma ileride on ülkeye açılırsa, o zaman ayrı bir giriş sayfası tasarlamayı değerlendirebilir.

Böylece eşleşmeyen dillerden gelen ziyaretçiler de boş bir sayfaya değil, yön bulabilecekleri bir girişe ulaşır.

Erişilebilir bir dil seçiciyi nasıl kurarsınız?

Erişilebilirlik, dil seçicide birkaç somut ayrıntıya dayanır ve hepsini kavram düzeyinde uygulamak kolaydır. Önce her dil bağlantısının metnini kendi dil koduyla işaretleyin; HTML’de bu, bağlantıya o dilin lang niteliğini vermek anlamına gelir. Ayrıca hedef sayfanın dilini belirten hreflang niteliğini de bağlantıya ekleyebilirsiniz.

  1. Bağlantı metni dil adı olsun, yalnız bayrak görseli değil; görsel kullanıyorsanız metin alternatifi verin.
  2. Aktif dili hem görsel olarak hem de ekran okuyucuya bildirecek biçimde işaretleyin; aria-current gibi bir durum niteliği bu iş için uygundur.
  3. Dropdown menünün düğmesine "Dil seçin" gibi anlaşılır bir erişilebilir ad verin ve menünün açık ya da kapalı durumunu bildirin.
  4. Menüyü klavyeyle açılabilir, gezilebilir ve Esc ile kapatılabilir yapın.
  5. Odak göstergesini kaldırmayın; kullanıcı hangi dilin üzerinde olduğunu görmeli.

Unutmayın, sayfanın genel dilini belirten lang niteliği de doğru olmalı. Bu konuyu html lang hatası yazımızda anlattık. Erişilebilirliğin genel çerçevesi için web erişilebilirliği ve WCAG rehberimize göz atabilirsiniz.

Dil ve bölgeyi birlikte nasıl sunmalısınız?

Bazı sitelerde dil tek başına yeterli değildir; fiyat, para birimi, kargo ve yasal metinler ülkeye göre değişir. Bu durumda iki ayrı soru sorarsınız: "Hangi dili okumak istiyorsunuz?" ve "Hangi ülkeye alışveriş yapıyorsunuz?" Bu iki soruyu tek bir bayrak listesinde birleştirmek karışıklığa yol açar.

Örnek senaryo: İsviçre’ye satış yapan bir e-ticaret sitesi Almanca, Fransızca ve İtalyanca sunuyor. Doğru tasarımda kullanıcı önce bölgeyi (İsviçre) seçer, sonra o bölgede desteklenen diller arasında tercih yapar. Bölge seçicinin yanında bayrak kullanmak burada makul olabilir, çünkü bayrak gerçekten ülkeyi temsil ediyor; dil seçeneklerinde ise yine dil adları durur.

Ayrıca bölge değişince fiyatların ve stok bilgisinin de güncellendiğini kullanıcıya açıkça gösterin. Para birimi sessizce değişirse kullanıcının güveni sarsılır. Bu tür sitelerde birden fazla bölge sürümü olacağı için çok dilli web sitesi SEO rehberimizdeki adres yapısı seçeneklerine de göz atmanızı öneririz.

Dil seçici türlerinin karşılaştırması

Aşağıdaki tablo, sahada en sık karşılaştığımız dil seçici biçimlerini kullanım durumuna göre karşılaştırır. Değerlendirmeler saha tecrübesine dayalı genel eğilimlerdir, her site için kesin sonuç değildir.

BiçimNe zaman uygun?ArtısıKritik nokta
Yan yana açık bağlantılar2-3 dilTek tıkla geçiş, tüm seçenekler görünürMobilde dar alana sığdırırken dokunma hedefleri küçülmemeli
Açılır menü4 ve üzeri dilBaşlık alanını sade tutarKlavye ve dokunmatik erişim, açık/kapalı durum bildirimi
Altbilgi listesiDestek kopyası olarakUzun sayfanın sonunda kolay erişimTek başına yeterli değil, üstte de bulunmalı
Dil seçim (giriş) sayfasıÇok ülke ve dil kombinasyonux-default için doğal adayHer girişte zorla gösterilmemeli
Öneri bandıTarayıcı dili farklı olduğundaZorlamadan yönlendirirSayfa kaymasına yol açmamalı, kapatma hatırlanmalı
Bayrak simgeleriYalnız ülkeye göre değişen içerikBölge seçiminde tanıdıkDil seçimi için uygun değil

Çoğu kurumsal sitede en iyi sonuç, üstte açık bağlantı ya da açılır menü, altta destek kopyası ve gerekirse tarayıcı diline göre öneri bandından oluşan birleşik bir yapıdır.

Dil seçici tasarımında en sık yapılan hatalar nelerdir?

Yıllar içinde incelediğimiz çok dilli sitelerde aynı hataların tekrarlandığını görüyoruz. Çoğunun kökeninde, ekibin bileşeni tasarım aşamasında değil yayına birkaç gün kala eklemesi yatıyor. Aşağıdaki liste bu hataları ve kısa çözümlerini özetliyor.

  • Dil adları sayfanın dilinde: Türkçe sayfada "Almanca" yazıyor; çözüm "Deutsch" yazmak.
  • Tek işaret bayrak; çözüm metin etiketi.
  • Dil değişince kullanıcı ana sayfaya düşüyor; çözüm sayfa düzeyinde eşleşme.
  • IP’ye göre zorla yönlendirme var; çözüm öneri bandı.
  • Dil bağlantıları adres taşımayan betik düğmeleri; çözüm gerçek bağlantı.
  • Hreflang ile dil seçici farklı sayfaları eşleştiriyor; çözüm tek eşleşme tablosu.
  • Mobilde dil seçici menünün en altında kaybolmuş; çözüm başlık çubuğunda ikon.
  • Otomatik çeviri eklentisi, adresi değiştirmeden içeriği çeviriyor; çözüm her dil için kalıcı adres.

Son madde özellikle önemli. Tarayıcı içinde anlık çeviri yapan eklentiler kullanıcıya hızlı bir çözüm sunar, ama arama motoru açısından ayrı bir dil sürümü oluşturmaz. Dolayısıyla bu yaklaşım, gerçek çok dilli yapının yerini tutmaz.

Dil seçici için yayın öncesi kontrol listesi

Yeni bir çok dilli siteyi yayına almadan önce ekibimiz aşağıdaki listeyi tek tek kontrol ediyor. Siz de kendi sitenizde aynı adımları uygulayabilirsiniz.

  1. Dil seçici her sayfada aynı konumda duruyor mu?
  2. Dil adları kendi dillerinde ve kendi dil koduyla işaretli mi?
  3. Bayrağı yalnız bölge seçiminde mi kullanıyorsunuz?
  4. Her dil bağlantısı aynı içeriğin karşılığına gidiyor mu?
  5. Çevirisi olmayan sayfalar için tutarlı bir davranış belirlediniz mi?
  6. Otomatik yönlendirme kapalı mı, yerine öneri bandı mı var?
  7. Hreflang eşleşmeleri dil seçici bağlantılarıyla birebir aynı mı ve karşılıklı mı?
  8. Mobilde dil değiştirmek en fazla iki dokunuş mu?
  9. Klavyeyle menüyü açıp kapatabiliyor ve tüm dillere ulaşabiliyor musunuz?
  10. Ekran okuyucu aktif dili ve menü durumunu doğru bildiriyor mu?

Bu listedeki her "hayır", ya kullanıcıyı kaybettiren ya da arama motorunun bir sürümü gözden kaçırmasına yol açan bir boşluk demektir. Listeyi her büyük tasarım değişikliğinden sonra yeniden uygulamanızı öneririz.

Dil seçiciyi sitenize birlikte nasıl kurarız?

Çok dilli bir sitede dil seçici; içerik modeli, adres yapısı, hreflang ve erişilebilirlik kararlarının kesiştiği noktadır. Bu yüzden onu ayrı bir eklenti gibi değil, sitenin mimarisinin parçası olarak kurmak gerekir. Talha Aslan ve ekibi olarak web tasarım hizmetimizde çeviri eşleşme tablosunu baştan tasarlıyor, dil seçiciyi ve hreflang etiketlerini aynı kaynaktan üretiyoruz.

Mevcut sitenizde dil geçişi kullanıcıyı ana sayfaya atıyorsa, bayraklar karışıklık yaratıyorsa ya da Google bazı dil sürümlerinizi bulamıyorsa, bunu sitenizde biz kurarız. Önce mevcut yapıyı inceliyor, sonra kapsamı ve takvimi netleştiren yazılı bir teklif hazırlıyoruz. Teklif almak için web tasarım sayfamızdaki iletişim formunu kullanabilirsiniz.

Bu süreçte yalnız görsel bileşeni değil, içerik yönetim panelinde çeviri ilişkisini yönetecek kişilerin iş akışını da düşünüyoruz. Çünkü eşleşmeyi doğru tutmak, uzun vadede tasarımdan daha çok emek isteyen kısımdır.

Kısaca: iyi bir dil seçicinin özeti

İyi bir dil seçici kolay bulunan, öngörülebilir ve dürüst bir bileşendir. Her sayfada aynı yerde durur, dilleri kendi adlarıyla yazar, bayrak yerine metin kullanır ve kullanıcıyı bulunduğu içeriğin karşılığına götürür. Ayrıca kullanıcıyı zorla yönlendirmez, yalnız önerir ve seçimini hatırlar.

Arka planda ise aynı çeviri eşleşmesi hem dil seçici bağlantılarını hem hreflang etiketlerini besler. Böylece insanlar ve arama motorları sitenizin aynı haritasını görür. Bu ilkeleri uyguladığınızda dil seçici, yabancı ziyaretçinin güvenini kazanan ilk temas noktasına dönüşür.

Sıkça Sorulan Sorular

Dil seçicide bayrak kullanmak yanlış mı?
Dil seçimi için çoğu durumda evet, yanlış bir tercihtir. Bayrak ülkeyi temsil eder; dil ise birden fazla ülkede konuşulabilir ve bir ülkede birden fazla dil olabilir. Bu yüzden dil adlarını kendi dillerinde yazın. Bayrak yalnız içerik gerçekten ülkeye göre değişiyorsa, örneğin fiyat ve kargo koşulları farklı bölgesel mağazalarda anlam taşır.
Ziyaretçiyi tarayıcı diline göre otomatik yönlendirmeli miyim?
Hayır, zorla yönlendirmeyi önermiyoruz. Google, dil sürümleri arasında otomatik yönlendirmenin kullanıcıların ve arama motorlarının tüm sürümleri görmesini engelleyebileceğini belirtir. Bunun yerine tarayıcı dili farklıysa sayfanın üstünde kapatılabilir bir öneri bandı gösterin. Böylece kullanıcı kendi kararını verir ve tüm sürümler taranabilir kalır.
Dil seçici SEO’yu doğrudan etkiler mi?
Dil seçici tek başına bir sıralama etkeni değildir, ama dolaylı olarak önemlidir. Gerçek bağlantılardan oluşan bir dil seçici, arama motorlarının diğer dil sürümlerini keşfetmesine yardım eder. Ayrıca hreflang ile aynı eşleşmeyi kullanırsa çelişkili sinyal oluşmaz. Betikle çalışan ve adres taşımayan düğmeler ise bu keşif katkısını sağlamaz.
Dil değiştirince kullanıcı ana sayfaya mı gitmeli?
Hayır, kullanıcı bulunduğu içeriğin diğer dildeki karşılığına gitmeli. Ürün ya da blog sayfasından ana sayfaya düşen ziyaretçi aradığını yeniden bulmak zorunda kalır. Çeviri yoksa dilin en yakın üst sayfasına yönlendirin ve bunu kullanıcıya açıkça belirtin. Eşleşmeyi içerik yönetim sisteminde tek bir tablodan yönetmek işinizi kolaylaştırır.
Dil adlarını hangi dilde yazmalıyım?
Her dili kendi adıyla yazın: Türkçe, English, Deutsch, Français gibi. Sayfanın dilini anlamayan ziyaretçi menüde kendi dilini ancak tanıdığı biçimde görürse bulur. W3C örneği de bu yaklaşımı kullanır ve her bağlantıyı kendi dil koduyla işaretler. Böylece ekran okuyucular dil adlarını doğru telaffuzla seslendirir.
Üç dilli bir sitede açılır menü mü kullanmalıyım?
Üç dil için çoğu zaman yan yana açık bağlantılar daha pratiktir. Kullanıcı menü açmadan tüm seçenekleri görür ve tek tıkla geçer. Dil sayısı dört ya da beşi geçtiğinde açılır menü başlık alanını sade tutar. Hangi biçimi seçerseniz seçin, klavye ve dokunmatik erişimi mutlaka test edin.
  • dil seçici
  • çok dilli web sitesi
  • hreflang
  • web tasarım
  • erişilebilirlik
  • kullanıcı deneyimi
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.