Merhaba geli\u015ftiriciler! Bug\u00fcn sizlere, sekiz farkl\u0131 dilde hizmet veren kapsaml\u0131 bir web uygulamam\u0131 Next.js 16’ya ta\u015f\u0131ma s\u00fcrecimde ya\u015fad\u0131\u011f\u0131m zorluklar\u0131 ve \u00f6zellikle Google Search Console (GSC) ile olan “kavgalar\u0131m\u0131” anlataca\u011f\u0131m. Modern web geli\u015ftirmenin sundu\u011fu yenilikleri kucaklarken, \u00e7ok dilli SEO’nun inceliklerini g\u00f6z ard\u0131 etmenin ne gibi sonu\u00e7lar do\u011furabilece\u011fini kendi tecr\u00fcbelerimle aktaraca\u011f\u0131m. Bu makale, benzer bir ge\u00e7i\u015f yapmay\u0131 d\u00fc\u015f\u00fcnen veya mevcut \u00e7ok dilli Next.js projelerinde SEO sorunlar\u0131 ya\u015fayan herkes i\u00e7in de\u011ferli bilgiler sunmay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n
Uygulamam\u0131z\u0131n eski altyap\u0131s\u0131, y\u0131llar i\u00e7inde biriken teknik bor\u00e7lar ve performans darbo\u011fazlar\u0131 nedeniyle s\u00fcrd\u00fcr\u00fclemez hale gelmi\u015fti. Yeni nesil web standartlar\u0131na uyum sa\u011flamak, geli\u015ftirici deneyimini iyile\u015ftirmek ve son kullan\u0131c\u0131ya daha h\u0131zl\u0131, daha dinamik bir deneyim sunmak amac\u0131yla Next.js 16’ya ge\u00e7i\u015f karar\u0131 ald\u0131k.<\/p>\n
Next.js 16 ile gelen App Router ve Sunucu Bile\u015fenleri (Server Components), \u00f6zellikle veri \u00e7ekme (data fetching) ve performans optimizasyonu konular\u0131nda devrim niteli\u011finde yenilikler sunuyordu. \u00c7ok dilli bir uygulamada, her dil i\u00e7in ayr\u0131 ayr\u0131 veri \u00e7ekme ve render etme s\u00fcre\u00e7lerinin optimize edilmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131yordu. Sunucu Bile\u015fenleri, bu y\u00fck\u00fc istemciden sunucuya ta\u015f\u0131yarak ilk y\u00fckleme s\u00fcrelerini (FCP, LCP) k\u0131saltma potansiyeli ta\u015f\u0131yordu.<\/p>\n
Eski yap\u0131m\u0131zda, \u00e7ok dillilik y\u00f6netimi i\u00e7in karma\u015f\u0131k bir yap\u0131 kullan\u0131yorduk. Next.js’in yerle\u015fik i18n (uluslararas\u0131la\u015fma) deste\u011fi ve App Router’\u0131n getirdi\u011fi d\u00fczenli dosya sistemi tabanl\u0131 y\u00f6nlendirme, hem kod okunabilirli\u011fini art\u0131racak hem de yeni \u00f6zelliklerin daha h\u0131zl\u0131 geli\u015ftirilmesine olanak tan\u0131yacakt\u0131. Bu ge\u00e7i\u015fin, uzun vadede geli\u015ftirici verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131raca\u011f\u0131na inan\u0131yorduk.<\/p>\n
Uygulamam\u0131z\u0131n sekiz dili desteklemesi, ta\u015f\u0131ma s\u00fcrecinin en kritik ve karma\u015f\u0131k y\u00f6nlerinden biriydi. Eski sistemde kulland\u0131\u011f\u0131m\u0131z yakla\u015f\u0131mlar ile Next.js 16’n\u0131n sundu\u011fu \u00e7\u00f6z\u00fcmler aras\u0131nda ciddi farkl\u0131l\u0131klar vard\u0131.<\/p>\n
\u00d6nceki altyap\u0131m\u0131zda, \u00e7ok dillilik genellikle istemci taraf\u0131nda, URL parametreleri veya alt alan adlar\u0131 (subdomain) ile y\u00f6netiliyordu. \u00d6rne\u011fin, Next.js 16 ile birlikte App Router, \u00e7ok dillilik i\u00e7in daha esnek ve g\u00fc\u00e7l\u00fc bir yap\u0131 sunuyor. <\/code><\/p>\n Bu yap\u0131land\u0131rma, her dil i\u00e7in ayr\u0131 bir sayfa yolu olu\u015fturmay\u0131 ve sunucu taraf\u0131nda dilin kolayca tespit edilmesini sa\u011fl\u0131yordu. Ayr\u0131ca, dil dosyalar\u0131n\u0131 dinamik olarak y\u00fcklemek i\u00e7in Ta\u015f\u0131ma s\u00fcreci, tahmin etti\u011fimizden \u00e7ok daha fazla teknik zorlukla doluydu. \u00d6zellikle eski kod taban\u0131n\u0131n modern Next.js yap\u0131s\u0131na uyarlanmas\u0131 zaman ald\u0131.<\/p>\n Uygulamam\u0131z\u0131n y\u00fczlerce bile\u015feni vard\u0131 ve bunlar\u0131n \u00e7o\u011funu Next.js 16'n\u0131n Sunucu Bile\u015fenleri ve \u0130stemci Bile\u015fenleri ayr\u0131m\u0131na g\u00f6re yeniden d\u00fczenlememiz gerekti. Hangi bile\u015fenin sunucuda, hangisinin istemcide \u00e7al\u0131\u015fmas\u0131 gerekti\u011fine karar vermek, performans ve etkile\u015fim dengesini kurmak kritikti. Eski sistemde API \u00e7a\u011fr\u0131lar\u0131 genellikle istemci taraf\u0131nda yap\u0131l\u0131yordu. Next.js 16 ile birlikte, Sunucu Bile\u015fenlerinde Uygulamay\u0131 Next.js 16'ya ta\u015f\u0131y\u0131p canl\u0131ya ald\u0131ktan sonra, Google Search Console'dan gelen bildirimler adeta bir \u00e7\u0131\u011fl\u0131k gibiydi. Bekledi\u011fimizin aksine, GSC'deki performans metrikleri d\u00fc\u015f\u00fc\u015fe ge\u00e7mi\u015f, dizinleme sorunlar\u0131 ba\u015f g\u00f6stermi\u015fti.<\/p>\n GSC'de \"Dizinlenen Sayfalar\" grafi\u011fi h\u0131zla d\u00fc\u015f\u00fc\u015fe ge\u00e7mi\u015fti. Yeni URL yap\u0131land\u0131rmam\u0131z\u0131n (\u00f6rne\u011fin, En can s\u0131k\u0131c\u0131 sorunlardan biri de \"Yinelenen \u0130\u00e7erik\" uyar\u0131lar\u0131yd\u0131. GSC, farkl\u0131 dil s\u00fcr\u00fcmlerini (\u00f6rne\u011fin, \u00c7ok dilli uygulamalar i\u00e7in hayati \u00f6nem ta\u015f\u0131yan GSC'nin \u00e7\u0131\u011fl\u0131klar\u0131 \u00fczerine detayl\u0131 bir k\u00f6k neden ara\u015ft\u0131rmas\u0131na giri\u015ftik. Sorunlar\u0131n temelinde, Next.js 16'n\u0131n yeni i18n yap\u0131s\u0131 ile geleneksel SEO prensiplerini do\u011fru bir \u015fekilde birle\u015ftiremememiz yat\u0131yordu.<\/p>\n <\/code><\/p>\n Bizim durumumuzda, bu etiketleri ya hi\u00e7 eklememi\u015f ya da yanl\u0131\u015f bir \u015fekilde eklemi\u015ftik. \u00d6zellikle dinamik rotalar i\u00e7in Next.js App Router'\u0131n dinamik rotalar\u0131 ( Sorunlar\u0131 tespit ettikten sonra, GSC'nin \u00e7\u0131\u011fl\u0131klar\u0131n\u0131 susturmak ve SEO performans\u0131m\u0131z\u0131 geri kazanmak i\u00e7in kapsaml\u0131 bir strateji geli\u015ftirdik.<\/p>\n Her sayfa i\u00e7in t\u00fcm dil varyasyonlar\u0131n\u0131 i\u00e7eren <\/code><\/p>\n Bu yakla\u015f\u0131m, her sayfa i\u00e7in do\u011fru Her sayfan\u0131n kendi dil ve yoluna uygun Arama motorlar\u0131n\u0131n t\u00fcm dil varyasyonlar\u0131n\u0131 kolayca ke\u015ffetmesi i\u00e7in \u00e7ok dilli bir site haritas\u0131 ( <\/code><\/p>\n Bu yap\u0131, arama motorlar\u0131n\u0131n t\u00fcm dil ve sayfa varyasyonlar\u0131n\u0131 eksiksiz bir \u015fekilde taramas\u0131n\u0131 ve dizinlemesini kolayla\u015ft\u0131rd\u0131.<\/p>\n Kullan\u0131c\u0131lar\u0131n tercih ettikleri dile otomatik olarak y\u00f6nlendirilmesi i\u00e7in Bu ta\u015f\u0131ma s\u00fcreci ve sonras\u0131ndaki SEO sorunlar\u0131, bize \u00e7ok de\u011ferli dersler \u00f6\u011fretti.<\/p>\n Herhangi bir b\u00fcy\u00fck ta\u015f\u0131ma veya yeni \u00f6zellik geli\u015ftirme s\u00fcrecinde, SEO'nun sadece sonradan eklenecek bir \u015fey olmad\u0131\u011f\u0131n\u0131, projenin temel mimarisine dahil edilmesi gereken kritik bir unsur oldu\u011funu bir kez daha anlad\u0131k. \u00d6zellikle \u00e7ok dilli uygulamalarda, GSC, web sitenizin arama motoru performans\u0131n\u0131 izlemek i\u00e7in paha bi\u00e7ilmez bir ara\u00e7t\u0131r. Herhangi bir b\u00fcy\u00fck de\u011fi\u015fiklikten sonra GSC verilerini yak\u0131ndan takip etmek, olas\u0131 sorunlar\u0131 erken tespit etmek ve h\u0131zl\u0131ca m\u00fcdahale etmek i\u00e7in hayati \u00f6nem ta\u015f\u0131r. \"URL Denetleme\" arac\u0131, belirli URL'lerin Google taraf\u0131ndan nas\u0131l g\u00f6r\u00fcld\u00fc\u011f\u00fcn\u00fc anlamak i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n Next.js 16'n\u0131n sundu\u011fu yeni \u00f6zellikler harika olsa da, \u00e7ok dilli uygulamalar i\u00e7in SEO entegrasyonu konusunda baz\u0131 incelikler bar\u0131nd\u0131r\u0131yor. 8 dilli uygulamam\u0131z\u0131 Next.js 16'ya ta\u015f\u0131ma maceram\u0131z, modern web geli\u015ftirmenin getirdi\u011fi f\u0131rsatlar\u0131 ve beraberindeki zorluklar\u0131 net bir \u015fekilde ortaya koydu. Performans ve geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck kazan\u0131mlar elde etsek de, \u00e7ok dilli SEO'nun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 hafife alman\u0131n bedelini Google Search Console'dan gelen \"\u00e7\u0131\u011fl\u0131klarla\" \u00f6dedik. Ancak bu s\u00fcre\u00e7, bize Genellikle alt dizin (subpath) yap\u0131s\u0131 ( Next.js 13 ve \u00fczeri s\u00fcr\u00fcmlerde Bu genellikle * Her dil i\u00e7in \u00f6zelle\u015ftirilmi\u015f example.com\/en\/page<\/code> veya en.example.com\/page<\/code> gibi yap\u0131lar kullan\u0131yorduk. Dil dosyalar\u0131, uygulaman\u0131n ba\u015flang\u0131c\u0131nda y\u00fckleniyor ve React Context API arac\u0131l\u0131\u011f\u0131yla bile\u015fenlere aktar\u0131l\u0131yordu. Bu yakla\u015f\u0131m, ilk y\u00fcklemede t\u00fcm dil dosyalar\u0131n\u0131n indirilmesine neden olabiliyor ve SEO a\u00e7\u0131s\u0131ndan baz\u0131 zorluklar \u00e7\u0131kar\u0131yordu. \u00d6zellikle arama motorlar\u0131n\u0131n her dil s\u00fcr\u00fcm\u00fcn\u00fc do\u011fru bir \u015fekilde dizinlemesi i\u00e7in \u00f6zel \u00f6nlemler almak gerekiyordu.<\/p>\nNext.js 16 ile i18n Entegrasyonu<\/h4>\n
next.config.js<\/code> dosyas\u0131 \u00fczerinden i18n<\/code> yap\u0131land\u0131rmas\u0131, alt dizin (subpath) veya alan ad\u0131 (domain) tabanl\u0131 dil y\u00f6nlendirmesini kolayla\u015ft\u0131r\u0131yor. Bizim tercihimiz, \/[lang]\/<\/code> \u015feklinde alt dizin tabanl\u0131 bir yap\u0131ya ge\u00e7mek oldu (\u00f6rne\u011fin, \/tr\/hakkimizda<\/code>, \/en\/about-us<\/code>).<\/p>\n\n\/\/ next.config.js\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n i18n: {\n locales: ['en', 'tr', 'de', 'fr', 'es', 'it', 'pt', 'nl'],\n defaultLocale: 'en',\n localeDetection: false, \/\/ Manuel dil tespiti i\u00e7in false\n },\n \/\/ ... di\u011fer ayarlar\n};\n\nmodule.exports = nextConfig;\n<\/pre>\nreact-i18next<\/code> veya benzeri k\u00fct\u00fcphaneleri Sunucu Bile\u015fenleri ve \u0130stemci Bile\u015fenleri aras\u0131nda entegre etmek gerekiyordu.<\/p>\nTa\u015f\u0131ma S\u00fcreci ve \u0130lk Ba\u015far\u0131s\u0131zl\u0131klar<\/h3>\n
Bile\u015fenleri Yeniden Yazma ve Adaptasyon<\/h4>\n
use client<\/code> direktifi, bu ayr\u0131m\u0131 yaparken kilit rol oynad\u0131.<\/p>\nVeri \u00c7ekme Stratejileri ve \u00d6nbellekleme<\/h4>\n
fetch<\/code> API'sinin do\u011frudan kullan\u0131lmas\u0131 ve otomatik \u00f6nbellekleme yetenekleri, veri \u00e7ekme stratejimizi tamamen de\u011fi\u015ftirdi. Ancak bu yeni yakla\u015f\u0131m, baz\u0131 durumlarda beklenmedik \u00f6nbellekleme sorunlar\u0131na yol a\u00e7t\u0131 ve g\u00fcncel verilerin do\u011fru bir \u015fekilde g\u00f6sterilmesini engelledi.<\/p>\nGoogle Search Console'un \u00c7\u0131\u011fl\u0131klar\u0131: Sorun Ne?<\/h3>\n
Dizinleme Sorunlar\u0131 ve Sayfa Say\u0131s\u0131nda D\u00fc\u015f\u00fc\u015f<\/h4>\n
\/tr\/sayfa<\/code> yerine \/sayfa<\/code> veya farkl\u0131 bir dil yap\u0131s\u0131) arama motorlar\u0131 taraf\u0131ndan do\u011fru bir \u015fekilde alg\u0131lanmad\u0131\u011f\u0131 a\u00e7\u0131kt\u0131. Bir\u00e7ok sayfa \"Taranmad\u0131\" veya \"Dizinlenmedi\" olarak i\u015faretleniyordu. Bu, uygulaman\u0131n arama motoru g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcn ciddi \u015fekilde zarar g\u00f6rd\u00fc\u011f\u00fc anlam\u0131na geliyordu.<\/p>\nYinelenen \u0130\u00e7erik Uyar\u0131lar\u0131<\/h4>\n
\/tr\/hakkimizda<\/code> ve \/en\/about-us<\/code>) veya hatta dil i\u00e7indeki farkl\u0131 URL varyasyonlar\u0131n\u0131 (\u00f6rne\u011fin, \/tr\/hakkimizda<\/code> ve \/hakkimizda<\/code>) ayr\u0131 ayr\u0131 veya yinelenen i\u00e7erik olarak alg\u0131l\u0131yordu. Bu durum, arama motorlar\u0131n\u0131n hangi sayfan\u0131n \"ana\" s\u00fcr\u00fcm oldu\u011funu belirlemesini zorla\u015ft\u0131r\u0131yor ve s\u0131ralamam\u0131z\u0131 olumsuz etkiliyordu.<\/p>\nHreflang Hatalar\u0131 ve Yanl\u0131\u015f Dil Tespiti<\/h4>\n
hreflang<\/code> etiketlerinde de sorunlar ya\u015f\u0131yorduk. GSC, hreflang<\/code> etiketlerinin yanl\u0131\u015f uyguland\u0131\u011f\u0131n\u0131, kar\u015f\u0131l\u0131kl\u0131 referanslar\u0131n eksik oldu\u011funu veya ge\u00e7ersiz dil kodlar\u0131 kullan\u0131ld\u0131\u011f\u0131n\u0131 belirtiyordu. Bu da Google'\u0131n kullan\u0131c\u0131ya do\u011fru dildeki sayfay\u0131 sunmas\u0131n\u0131 engelliyor ve uluslararas\u0131 SEO performans\u0131m\u0131z\u0131 baltal\u0131yordu.<\/p>\nK\u00f6k Nedeni Ara\u015ft\u0131rmas\u0131: i18n ve SEO Kesi\u015fimi<\/h3>\n
Hreflang Etiketlerinin \u00d6nemi ve Yanl\u0131\u015f Kullan\u0131m\u0131<\/h4>\n
hreflang<\/code> etiketleri, arama motorlar\u0131na bir sayfan\u0131n farkl\u0131 dil veya b\u00f6lge varyasyonlar\u0131n\u0131 bildirmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin:<\/p>\n\n\n\n\n\n<\/pre>\nhreflang<\/code> etiketlerini do\u011fru bir \u015fekilde olu\u015fturmak, Next.js'in Sunucu Bile\u015fenleri yap\u0131s\u0131nda ekstra dikkat gerektiriyordu. Her sayfa i\u00e7in t\u00fcm dil varyasyonlar\u0131n\u0131 manuel olarak eklemek yerine, dinamik olarak olu\u015fturulacak bir yap\u0131ya ihtiyac\u0131m\u0131z vard\u0131.<\/p>\nCanonical URL'lerin Karma\u015fas\u0131<\/h4>\n
canonical<\/code> etiketleri, yinelenen i\u00e7erik sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in kullan\u0131l\u0131r ve arama motorlar\u0131na bir sayfan\u0131n tercih edilen (ana) URL'sini bildirir. Next.js 16'da, \u00f6zellikle locale<\/code> (dil) parametresiyle \u00e7al\u0131\u015fan dinamik rotalarda, do\u011fru canonical<\/code> URL'yi belirlemek karma\u015f\u0131k hale gelebiliyordu. \u00d6rne\u011fin, \/tr\/hakkimizda<\/code> sayfas\u0131 i\u00e7in canonical<\/code> URL'nin \/tr\/hakkimizda<\/code> olmas\u0131 gerekirken, yanl\u0131\u015fl\u0131kla \/hakkimizda<\/code> veya ba\u015fka bir dilin URL'si olarak ayarlanm\u0131\u015f olabiliyordu.<\/p>\nDinamik Rota ve Dil Entegrasyonu<\/h4>\n
[slug]<\/code>, [...slug]<\/code>) ile dil parametrelerini ([lang]<\/code>) birle\u015ftirmek, URL yap\u0131s\u0131n\u0131 ve dolay\u0131s\u0131yla SEO'yu do\u011frudan etkiliyordu. \u00d6rne\u011fin, app\/[lang]\/[category]\/[slug]\/page.js<\/code> gibi bir yap\u0131 kullan\u0131rken, her dil i\u00e7in benzersiz ve do\u011fru URL'lerin olu\u015fturuldu\u011fundan emin olmak gerekiyordu. Aksi takdirde, arama motorlar\u0131 ayn\u0131 i\u00e7eri\u011fi farkl\u0131 URL'lerde g\u00f6rerek yinelenen i\u00e7erik olarak i\u015faretleyebiliyordu.<\/p>\n\u00c7\u00f6z\u00fcm Yollar\u0131 ve Uygulanan Stratejiler<\/h3>\n
Do\u011fru Hreflang Uygulamas\u0131<\/h4>\n
hreflang<\/code> etiketlerini <\/code> b\u00f6l\u00fcm\u00fcne dinamik olarak ekledik. Bunu, Next.js'in generateMetadata<\/code> fonksiyonunu kullanarak veya bir layout bile\u015feni i\u00e7inde Head<\/code> bile\u015feni ile ger\u00e7ekle\u015ftirdik.<\/p>\n\n\/\/ app\/[lang]\/[slug]\/page.js (veya layout.js i\u00e7inde)\nimport { getDictionary } from '@\/lib\/dictionaries'; \/\/ Dil dosyalar\u0131n\u0131 \u00e7eken bir fonksiyon\nimport { Metadata } from 'next';\n\nexport async function generateMetadata({ params }): Promisehttps:\/\/example.com\/${lang}\/${slug}<\/code>,\n languages: {\n 'en-US': https:\/\/example.com\/en\/${slug}<\/code>,\n 'tr-TR': https:\/\/example.com\/tr\/${slug}<\/code>,\n \/\/ ... di\u011fer diller\n 'x-default': https:\/\/example.com\/en\/${slug}<\/code>, \/\/ Varsay\u0131lan dil\n },\n };\n\n return {\n title: dictionary.pageTitles[slug], \/\/ Dinamik ba\u015fl\u0131k\n description: dictionary.pageDescriptions[slug], \/\/ Dinamik a\u00e7\u0131klama\n alternates: alternatveUrls,\n };\n}\n<\/pre>\nhreflang<\/code> ve canonical<\/code> etiketlerinin otomatik olarak olu\u015fturulmas\u0131n\u0131 sa\u011flad\u0131.<\/p>\nCanonical URL'lerin Kesinle\u015ftirilmesi<\/h4>\n
canonical<\/code> URL'sini do\u011fru bir \u015fekilde ayarlad\u0131k. Bu, Next.js'in metadata<\/code> API'si ile kolayca y\u00f6netilebiliyor. \u00d6zellikle dil se\u00e7imi olmayan bir varsay\u0131lan URL'ye sahipsek (\u00f6rne\u011fin, example.com\/about-us<\/code>), bu sayfan\u0131n da di\u011fer dil varyasyonlar\u0131na hreflang<\/code> ile referans vermesi ve kendisinin canonical<\/code> olarak i\u015faretlenmesi sa\u011fland\u0131.<\/p>\n\u00c7ok Dilli Site Haritas\u0131 (Sitemap) Olu\u015fturma<\/h4>\n
sitemap.xml<\/code>) olu\u015fturduk. Bu site haritas\u0131, her dil i\u00e7in ayr\u0131 bir URL listesi i\u00e7ermeli ve her URL i\u00e7in hreflang<\/code> referanslar\u0131n\u0131 bar\u0131nd\u0131rmal\u0131d\u0131r. Next.js 16'da, app\/sitemap.js<\/code> dosyas\u0131n\u0131 kullanarak dinamik olarak site haritas\u0131 olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n\n\/\/ app\/sitemap.js\nimport { getPosts } from '@\/lib\/api'; \/\/ \u0130\u00e7erikleri \u00e7eken bir fonksiyon\n\nconst locales = ['en', 'tr', 'de']; \/\/ Desteklenen diller\n\nexport default async function sitemap() {\n const posts = await getPosts(); \/\/ T\u00fcm dillerdeki g\u00f6nderileri \u00e7ek\n\n const postEntries = locales.flatMap((lang) =>\n posts.map((post) => ({\n url: https:\/\/example.com\/${lang}\/blog\/${post.slug}<\/code>,\n lastModified: new Date(post.updatedAt),\n alternates: {\n languages: locales.reduce((acc, currentLang) => {\n acc[currentLang] = https:\/\/example.com\/${currentLang}\/blog\/${post.slug}<\/code>;\n return acc;\n }, {}),\n },\n }))\n );\n\n return [\n {\n url: 'https:\/\/example.com',\n lastModified: new Date(),\n alternates: {\n languages: locales.reduce((acc, lang) => {\n acc[lang] = https:\/\/example.com\/${lang}<\/code>;\n return acc;\n }, {}),\n },\n },\n ...postEntries,\n ];\n}\n<\/pre>\nDil Y\u00f6nlendirme ve Kullan\u0131c\u0131 Deneyimi<\/h4>\n
next.config.js<\/code> i\u00e7indeki localeDetection<\/code> ayar\u0131n\u0131 false<\/code> yaparak manuel bir y\u00f6nlendirme stratejisi izledik. Taray\u0131c\u0131 dilini tespit edip, hen\u00fcz dil se\u00e7imi yapmam\u0131\u015f kullan\u0131c\u0131lar\u0131 uygun dil s\u00fcr\u00fcm\u00fcne y\u00f6nlendiren bir mekanizma kurduk. Bu, hem kullan\u0131c\u0131 deneyimini iyile\u015ftirdi hem de arama motorlar\u0131n\u0131n yanl\u0131\u015f dil s\u00fcr\u00fcm\u00fcn\u00fc dizinlemesini engelledi.<\/p>\nDersler ve Gelecek \u0130\u00e7in \u00d6neriler<\/h3>\n
SEO'yu En Ba\u015f\u0131ndan D\u00fc\u015f\u00fcnmek<\/h4>\n
hreflang<\/code> ve canonical<\/code> gibi etiketlerin do\u011fru bir \u015fekilde uygulanmas\u0131, projenin ba\u015flang\u0131c\u0131ndan itibaren planlanmal\u0131d\u0131r.<\/p>\nGoogle Search Console'u Yak\u0131ndan Takip Etmek<\/h4>\n
Next.js i18n ve SEO Entegrasyonunda Dikkat Edilmesi Gerekenler<\/h4>\n
generateMetadata<\/code> fonksiyonu, alternates<\/code> \u00f6zelli\u011fi ile hreflang<\/code> ve canonical<\/code> etiketlerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir yol sunuyor. Ancak bu API'yi do\u011fru bir \u015fekilde kullanmak ve t\u00fcm sayfa tipleri i\u00e7in tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak kritik.<\/p>\nSonu\u00e7<\/h3>\n
hreflang<\/code> etiketlerinin, canonical<\/code> URL'lerin ve \u00e7ok dilli site haritalar\u0131n\u0131n do\u011fru uygulanmas\u0131n\u0131n ne kadar kritik oldu\u011funu \u00f6\u011fretti. Umar\u0131m bu tecr\u00fcbeler, sizin benzer projelerinizde kar\u015f\u0131la\u015fabilece\u011finiz sorunlar\u0131 \u00f6nlemenize yard\u0131mc\u0131 olur ve SEO dostu, \u00e7ok dilli Next.js uygulamalar\u0131 geli\u015ftirmenize katk\u0131 sa\u011flar. Unutmay\u0131n, iyi bir kullan\u0131c\u0131 deneyimi kadar, arama motoru deneyimi de ba\u015far\u0131n\u0131n anahtar\u0131d\u0131r.<\/p>\nSSS (S\u0131k Sorulan Sorular)<\/h3>\n
Next.js 16'da \u00e7ok dilli bir uygulama i\u00e7in en iyi URL yap\u0131s\u0131 nedir?<\/h4>\n
example.com\/en\/page<\/code>) \u00f6nerilir. Bu yap\u0131, Next.js'in yerle\u015fik i18n y\u00f6nlendirme sistemiyle iyi \u00e7al\u0131\u015f\u0131r ve alan ad\u0131 (domain) tabanl\u0131 yap\u0131ya g\u00f6re daha kolay y\u00f6netilebilir.<\/p>\nHreflang etiketlerini Next.js 16'da nas\u0131l do\u011fru bir \u015fekilde ekleyebilirim?<\/h4>\n
app<\/code> dizini kullan\u0131yorsan\u0131z, generateMetadata<\/code> fonksiyonu i\u00e7inde alternates<\/code> \u00f6zelli\u011fini kullanarak hreflang<\/code> etiketlerini dinamik olarak ekleyebilirsiniz. Her dil i\u00e7in canonical<\/code> ve languages<\/code> nesnelerini do\u011fru bir \u015fekilde yap\u0131land\u0131rman\u0131z gerekir.<\/p>\nGoogle Search Console'da \"Yinelenen \u0130\u00e7erik\" uyar\u0131lar\u0131 al\u0131yorum, ne yapmal\u0131y\u0131m?<\/h4>\n
canonical<\/code> etiketlerinin yanl\u0131\u015f yap\u0131land\u0131r\u0131lmas\u0131ndan veya hreflang<\/code> etiketlerinin eksik olmas\u0131ndan kaynaklan\u0131r. Her sayfan\u0131n kendi diline ait URL'sini canonical<\/code> olarak i\u015faretledi\u011finizden ve t\u00fcm dil varyasyonlar\u0131n\u0131 hreflang<\/code> ile belirtti\u011finizden emin olun. Ayr\u0131ca, \u00e7ok dilli bir site haritas\u0131 g\u00f6nderdi\u011finizden emin olun.<\/p>\nNext.js'de dil tespiti i\u00e7in
localeDetection<\/code> ayar\u0131n\u0131 true<\/code> mu false<\/code> mu yapmal\u0131y\u0131m?<\/h4>\nlocaleDetection: true<\/code> (varsay\u0131lan) Next.js'in taray\u0131c\u0131 diline g\u00f6re otomatik y\u00f6nlendirme yapmas\u0131n\u0131 sa\u011flar. Ancak bu, SEO i\u00e7in bazen sorun yaratabilir (\u00f6rne\u011fin, Googlebot'un farkl\u0131 bir dildeki i\u00e7eri\u011fi taramas\u0131na neden olabilir). Genellikle, localeDetection: false<\/code> yaparak manuel bir dil y\u00f6nlendirme mekanizmas\u0131 kurmak ve kullan\u0131c\u0131ya dil se\u00e7imi sunmak daha kontroll\u00fc bir yakla\u015f\u0131md\u0131r.<\/p>\n\u00c7ok dilli bir Next.js uygulamas\u0131nda SEO performans\u0131n\u0131 art\u0131rmak i\u00e7in ba\u015fka neler yapabilirim?<\/h4>\n
title<\/code> ve description<\/code> meta etiketleri kullan\u0131n.
\n* G\u00f6rseller i\u00e7in alt<\/code> etiketlerini her dilde optimize edin.
\n* Yerel arama motorlar\u0131 i\u00e7in yerel dizinlere kay\u0131t olun (\u00f6rne\u011fin, Yandex i\u00e7in Rusya).
\n* Sayfa h\u0131z\u0131n\u0131 (Core Web Vitals) t\u00fcm dil varyasyonlar\u0131 i\u00e7in optimize edin.
\n* Kullan\u0131c\u0131lar\u0131n kolayca dil de\u011fi\u015ftirebilece\u011fi g\u00f6r\u00fcn\u00fcr bir dil se\u00e7ici sunun.<\/p>\n","protected":false},"excerpt":{"rendered":"8 Dilli Uygulamam\u0131 Next.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37299","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n