Next.js SEO: Render, Metadata ve Çok Dilli Kurulum
Kocaeli'de bir makine parçaları üreticisinin pazarlama sorumlusu, yeni kurulan Next.js sitesinin yayına girdiği ilk hafta arama sonuçlarında hiç görünmediğini fark etti. Site görsel olarak hazırdı, sayfalar sorunsuz açılıyordu. Ama Google Search Console'da dizine eklenen sayfa sayısı sıfıra yakındı. Ekipteki geliştiriciler "site çalışıyor, sorun SEO'da" derken, pazarlama tarafı tam tersini düşünüyordu.
Bu tür anlaşmazlıklar genelde iki tarafın da kısmen haklı çıkmasıyla sonuçlanır. Next.js gibi React tabanlı bir çatıyla kurulan sitelerde arama motoru görünürlüğü, tasarımdan veya içerik kalitesinden önce render stratejisine, metadata yönetimine ve çok dilli yapının kurgusuna bağlıdır. Bu üç konu doğru kurulmadığında site teknik olarak çalışır ama arama motoru onu ya göremez ya da yanlış görür.
Belirti: sayfalar açılıyor ama Google dizine almıyor
Söz konusu üretici firmanın sitesinde ürün sayfaları tarayıcıda sorunsuz görünüyordu. Kullanıcı sayfayı açtığında ürün adı, fiyat bilgisi ve teknik özellikler saniyeler içinde ekrana geliyordu. Sorun, bu içeriğin tarayıcıda JavaScript çalıştıktan sonra oluşmasıydı. Googlebot ilk HTML'i çektiğinde karşısında boş bir iskelet buluyordu.
Search Console'daki URL denetimi aracıyla sayfa kaynağına bakıldığında durum netleşti: sayfanın render edilmiş görünümü doluydu ama ham HTML neredeyse boştu. Bu, istemci tarafı render kullanan, yani sayfa içeriğini tarayıcıda JavaScript ile sonradan oluşturan bir kurulumun klasik belirtisi. Googlebot JavaScript çalıştırabilir, fakat bunu her sayfa için garanti bir öncelikle yapmaz. Tarama bütçesi kısıtlıysa veya sayfa karmaşıksa render adımı gecikir ya da eksik kalır.
Kök neden: render stratejisinin proje başında seçilmemiş olması
Next.js projede render stratejisi tek bir ayar değil, sayfa sayfa verilebilen bir karardır. Ekip bu kararı erkenden netleştirmediğinde varsayılan davranışlar devreye girer ve bu varsayılanlar her zaman SEO'ya en uygun seçenek olmaz. Üretici firmanın projesinde geliştiriciler hız kazanmak için büyük ölçüde istemci tarafı veri çekimi kullanmıştı, bu da arama motoru için görünürlüğü düşürmüştü.
Next.js'te üç temel yaklaşım var. Sunucu tarafı render, her istek geldiğinde sayfayı sunucuda oluşturup tam HTML olarak gönderir. Statik site oluşturma, sayfayı derleme anında bir kez üretir ve CDN üzerinden dağıtır. Artımlı statik yenileme ise statik sayfayı belirli aralıklarla veya talep üzerine arka planda günceller.
Ürün kataloğu gibi sık değişmeyen ama tamamen statik de olmayan içerikler için artımlı statik yenileme genelde en dengeli seçenek. Haber veya stok durumu gibi anlık veriler için sunucu tarafı render daha uygun düşer.
Hangi sayfa hangi stratejiyi hak ediyor
Üretici firmanın sitesinde kurumsal sayfalar, yani hakkımızda, iletişim, sertifikalar gibi bölümler derleme anında üretilip statik kalabilirdi; çünkü içerik ayda belki bir kez değişiyordu. Ürün sayfaları ise fiyat ve stok bilgisi içerdiğinden artımlı statik yenileme ile saatlik veya günlük tazeleme almalıydı. Blog yazıları gibi sık yayınlanan içerikler için de statik üretim yeterliydi, yeter ki yeni yazı eklendiğinde yeniden derleme tetiklensin.
Denenen ama yetmeyen çözüm: sadece meta etiketleri düzeltmek
İlk müdahale girişimi, geliştirici ekibin sayfa başlıklarını ve açıklama etiketlerini elden geçirmesiydi. Başlıklar kısaltıldı, açıklamalar yeniden yazıldı, Open Graph etiketleri eklendi. Bir hafta sonra dizine ekleme oranı yine değişmedi. Çünkü sorun metadata içeriğinde değil, bu metadata'nın Googlebot'a hiç ulaşmamasındaydı.
Next.js'in metadata API'si, her sayfa veya layout dosyasında bir metadata nesnesi ya da generateMetadata fonksiyonu tanımlamaya izin verir. Ancak bu API sunucu tarafında çalışır. Sayfa istemci tarafında render ediliyorsa, metadata doğru yazılmış olsa bile Googlebot'un gördüğü ilk HTML'de eksik kalabilir. Ekip, metadata'yı doğru yere taşımadan önce üstteki render sorununu çözmek zorunda kaldı.
Metadata tarafında dikkat edilmesi gereken bir diğer nokta, dinamik sayfalarda, örneğin [slug] gibi parametrik rotalarda, her ürün veya yazı için ayrı başlık ve açıklama üretilmesi. generateMetadata fonksiyonu veritabanından veya içerik yönetim sisteminden veri çekip her sayfaya özgü etiketler oluşturabilir. Bunu yapmadan tüm sayfalara aynı statik başlığı vermek, yüzlerce ürün sayfasının Google'da birebir aynı başlıkla görünmesine yol açar.
İşleyen çözüm: render, metadata ve dil yapısını birlikte kurmak
Üretici firmanın ekibi sonunda üç katmanı birlikte ele aldı. Önce ürün sayfaları artımlı statik yenilemeye geçirildi; sayfa önce sunucuda tam HTML olarak üretilip önbelleğe alındı, stok veya fiyat değiştiğinde arka planda yeniden oluşturuldu. Bu sayede Googlebot ilk istekte dolu bir HTML görmeye başladı.
Ardından her ürün sayfasına generateMetadata ile özel başlık, açıklama ve kanonik URL eklendi. Kanonik etiket, aynı ürünün filtre veya sıralama parametreleriyle farklı URL'lerde görünmesi durumunda hangi adresin asıl sayfa sayıldığını Google'a bildirir. Bu olmadan aynı ürün onlarca varyant URL'si altında tekrar tekrar dizine girebilir ve içerik tekrarı sinyali oluşturabilir.
Son katman çok dilli yapıydı. Firma Türkçe ve İngilizce içerik sunmak istiyordu; bunun için her sayfanın hreflang etiketiyle kardeş dil sürümüne işaret etmesi gerekiyordu. Next.js'te bu, App Router'daki [locale] segment yapısıyla veya next-intl, next-i18next gibi kütüphanelerle kurulabilir. Her iki durumda da her sayfanın head kısmına diğer dil sürümlerinin URL'lerini bildiren hreflang bağlantıları eklenir. Bu etiketler eksik olduğunda Google, Türkçe ve İngilizce sayfaları birbirinden habersiz iki ayrı site gibi değerlendirebilir ve aramada hangisini göstereceğine kendi başına karar verir; bu da genelde istenmeyen sonuçlar doğurur.
Çok dilli yapıda sık gözden kaçan ayrıntı
Dil klasörleme yapısı kurulduktan sonra bile her dil sürümünün kendi meta başlığına, açıklamasına ve URL yapısına sahip olması gerekir. Sadece metni çevirip aynı meta etiketleri kopyalamak hreflang'ın amacını zayıflatır. Ayrıca varsayılan dil için x-default hreflang değeri tanımlanmazsa, konum veya tarayıcı diline göre yönlendirilen kullanıcılar bazen yanlış dil sürümüne düşebilir.
Çözümün maliyeti ve nereye kadar gittiği
Bu üç katmanı birlikte kurmak, tek başına bir metadata düzeltmesinden daha fazla geliştirme zamanı gerektirir. Render stratejisinin sayfa sayfa gözden geçirilmesi, dinamik metadata fonksiyonlarının yazılması ve çok dilli rota yapısının kurulması, projenin kapsamına göre birkaç haftalık ek bir çalışma anlamına gelebilir.
Bu durum, projenin başında doğru kurulsaydı neredeyse ek maliyetsiz olacak bir işin, sonradan müdahale edildiğinde neden daha pahalıya geldiğini gösteren tipik bir örnek.
Bu kurulumun bir sınırı da var: render ve metadata düzgün çalışsa bile, içerik kalitesi düşükse veya sayfa hızı yavaşsa arama motoru görünürlüğü yine sınırlı kalır. Teknik altyapı içeriğin görülebilir olmasını sağlar; içeriğin tıklanır ve sıralanır olması ayrı bir çabayı gerektirir. Bu noktada arama motoru optimizasyonu çalışmasını teknik kurulumla birlikte yürütmek, iki ayrı ekibin birbirinden habersiz çalışmasından daha tutarlı sonuç verir.
Biz SUNS Tech olarak Next.js projelerinde web tasarım ve geliştirme sürecini kurgularken render stratejisini ve metadata yapısını proje planının bir parçası olarak ele alıyoruz, sonradan yama gibi eklenecek bir detay olarak değil. Çok dilli siteler veya karmaşık ürün katalogları için teknik kurulumla eş zamanlı bir SEO planlaması yapmak, sonradan tekrar dokunma ihtiyacını büyük ölçüde azaltıyor.
Üretici firmanın sitesinde bu değişiklikler yapıldıktan sonra Search Console'daki dizine ekleme oranı birkaç hafta içinde belirgin şekilde arttı. Bu süre, Googlebot'un siteyi yeniden tarayıp eski ve yeni sürümleri karşılaştırması için gereken doğal bir gecikmeydi, anlık bir sonuç değildi.
Benzer render ve çok dilli yapı kararlarıyla kurduğumuz projelere portfolyomuzdan göz atabilirsiniz. Next.js sitenizde benzer bir dizine ekleme veya çok dilli görünürlük sorunu yaşıyorsanız, mevcut kurulumu birlikte gözden geçirmek için teklif al sayfasından bize ulaşabilirsiniz.
