# Next.js SEO: Kapsamlı Optimizasyon Rehberi > Next.js SEO rehberi: SSR, SSG, meta etiketleri ve performans optimizasyonu adımlarıyla sitenizin arama motoru sıralamasını yükseltin. Published: 2026-03-25 · Updated: 2026-03-25 · Author: Erhan Kocabas · Source: https://bilarna.com/tr/blog/next-js-seo · Markdown: https://bilarna.com/tr/blog/next-js-seo.txt --- ## Next.js SEO Nedir? Next.js SEO, Next.js React framework'ü ile geliştirilmiş web uygulamalarının arama motorlarında daha iyi görünürlük ve performans kazanması için yapılan teknik ve içerik optimizasyonu çalışmalarının tamamıdır. Next.js'nin sunduğu sunucu taraflı render (SSR), statik site oluşturma (SSG) ve dinamik meta tag yönetimi gibi güçlü özellikleri, doğru şekilde yapılandırılmazsa, projenizin arama sonuçlarında hiç görünmemesine veya zayıf performans göstermesine yol açabilir. - **Sunucu Taraflı Render (SSR)**: Sayfa içeriğinin sunucuda render edilip tamamlanmış HTML olarak tarayıcıya gönderilmesi. Arama motoru botlarının içeriği anında görmesini sağlar. - **Statik Site Oluşturma (SSG)**: Build zamanında sayfaların önceden HTML'ye dönüştürülmesi. Mükemmel performans ve SEO için idealdir, içeriğiniz sık güncellenmiyorsa tercih edilir. - **Dinamik Meta Verileri**: next/head bileşeni veya App Router'daki yerleşik API'ler kullanılarak her sayfa için başlık, açıklama ve Open Graph etiketlerinin dinamik olarak ayarlanması. - **Canonical URL'ler**: Aynı veya benzer içeriğe sahip sayfalar için ana ("canonical") URL'nin belirtilmesi, arama motorlarının içeriği doğru indekslemesini sağlar. - **Performans Optimizasyonu**: Next.js'nin otomatik resim optimizasyonu, font optimizasyonu ve kod bölümleme (code splitting) özelliklerinin etkin kullanımı; Core Web Vital puanlarını doğrudan yükseltir. - **XML Site Haritası**: Next.js yapılandırması veya basit bir API rotası kullanılarak, sitenizdeki tüm önemli sayfaların listelendiği bir XML site haritasının otomatik oluşturulması. - **Yapılandırılmış Veri (Schema Markup)**: Ürün, blog gönderisi, SSS sayfası gibi içerik türlerini arama motorlarına açıklamak için JSON-LD formatında yapılandırılmış veri eklenmesi. - **Robot.txt ve robots Meta Etiketleri**: Arama motoru tarayıcılarının hangi sayfaları tarayıp indeksleyebileceğini kontrol eden dosya ve direktiflerin yapılandırılması. Next.js SEO, özellikle hızı, kullanıcı deneyimi ve arama motoru görünürlüğü kritik öncelik olan e-ticaret siteleri, içerik yayın platformları ve B2B hizmet siteleri için hayati önem taşır. Temel amacı, framework'ün teknik avantajlarını, arama motorlarının beklentileriyle uyumlu hale getirmektir. **Özetle:** Next.js SEO, framework'ün sunduğu SSR, SSG ve optimizasyon araçlarını doğru yapılandırarak sitenizin hem arama motorları hem de kullanıcılar için en iyi performansı göstermesini sağlamaktır. ## İşletmeler İçin Neden Önemlidir? Next.js SEO'yu göz ardı etmek, modern bir teknoloji yığını kullanmanıza rağmen, rakiplerinizin basit WordPress sitelerinin bile gerisinde kalarak organik trafik ve potansiyel müşteri kaybetmeniz anlamına gelebilir. - **Görünmezlik ve Trafik Kaybı**: Sayfalarınız istemci taraflı render (CSR) ile yükleniyorsa, arama motoru botları boş bir HTML sayfası görür. Bu, içeriğinizin hiç indekslenmemesine, dolayısıyla organik trafik alamamanıza neden olur. Çözüm: SSR veya SSG kullanarak içeriğin sunucuda hazır halde gönderilmesini sağlamak. - **Zayıf Kullanıcı Deneyimi ve Yüksek Hemen Çıkma Oranı**: Yavaş yüklenen, geç etkileşime giren sayfalar kullanıcıları kaybeder. Next.js'nin performans özellikleri kullanılmazsa, bu sorun yaşanır. Çözüm: Yerleşik resim/font optimizasyonu ve kod bölümlemeyi etkinleştirerek Core Web Vital skorlarını iyileştirmek. - **Tekrarlanan İçerik ve Otorite Dağılması**: Dinamik parametreler (sıralama, filtreleme) canonical URL belirtilmeden kullanılırsa, arama motorları aynı içeriğin farklı URL'lerde olduğunu düşünerek sitenizin otoritesini böler. Çözüm: Her sayfa için doğru canonical URL'yi dinamik olarak tanımlamak. - **Sosyal Medyada Zayıf Paylaşım Önizlemeleri** next/head kullanılmadan paylaşılan sayfalar, rastgele bir görsel ve eksik bir açıklamayla görünür. Çözüm: Her sayfa için dinamik Open Graph (og:title, og:description, og:image) ve Twitter Card etiketleri oluşturmak. - **Mobil Kullanıcıların Kaybı**: Performansı optimize edilmemiş Next.js siteleri, mobil cihazlarda özellikle yavaş çalışır. Google'ın mobil-first indekslemesi nedeniyle bu, sıralamalarda büyük düşüş getirir. Çözüm: Lighthouse gibi araçlarla düzenli mobil performans testleri yapmak ve optimizasyonları uygulamak. - **Yapılandırılmış Veri Fırsatlarının Kaçırılması**: Ürünleriniz, blog yazılarınız veya SSS sayfalarınız için zengin sonuçlar (rich snippets) oluşturulmaz. Bu, tıklama oranınızı (CTR) düşük tutar. Çözüm: İlgili sayfalara JSON-LD formatında Schema Markup eklemek. - **Zaman ve Bütçe İsrafı**: Geliştirme ekibiniz harika bir uygulama oluşturur ancak SEO temelleri atlanırsa, pazarlama ekibi trafik çekmek için mücadele eder. Çözüm: Proje başlangıcında SEO'yu geliştirme sürecine entegre etmek (SEO by Design). - **Rekabet Dezavantajı** Rakipleriniz Next.js SEO'yu doğru uygulayıp daha hızlı, daha görünür sitelere sahip olurken, siz teknik borçla uğraşırsınız. Çözüm: Bu rehberdeki adımları izleyerek temel optimizasyonları uygulamak ve düzenli denetimler yapmak. **Özetle:** Next.js SEO'ya yatırım yapmak, geliştirme maliyetinizi boşa çıkarmamak, rakiplerinize karşı teknik bir üstünlük kurmak ve organik büyüme kanalınızı güvence altına almak için kritiktir. ## Adım Adım Kılavuz Next.js SEO, birçok teknik seçenek arasında hangi yapılandırmanın ne zaman kullanılacağı konusunda kafa karışıklığı yaratabilir. ### Adım 1: Render Yönteminizi Doğru Seçin (SSR, SSG veya ISR) Yanlış render yöntemi, ya yavaş performansa ya da güncellenmeyen içeriğe yol açar. Her sayfa türü için en uygun yöntemi belirleyin. - **Statik Site Oluşturma (SSG - getStaticProps)**: Marketing sayfaları, blog yazıları, ürün kataloğu gibi build zamanında oluşturulabilen, nadiren güncellenen sayfalar için kullanın. En iyi performans ve SEO sonucunu verir. - **Sunucu Taraflı Render (SSR - getServerSideProps)**: Kullanıcıya özel dashboard'lar, sık değişen gerçek zamanlı veri içeren sayfalar için kullanın. Her istekte sunucuda render edilir, SEO dostudur ama SSG'den daha yavaştır. - **Artımlı Statik Yenileme (ISR)**: SSG'nin avantajlarını korurken belirli aralıklarla sayfayı yeniden oluşturmanıza izin verir. Haber siteleri veya sık ama anlık olmayan güncelleme gerektiren ürün sayfaları için idealdir. ### Adım 2: Dinamik Meta Verilerini Yapılandırın Tüm sayfalarınız aynı başlık ve açıklamayı gösteriyorsa, arama motorları içeriğinizi ayırt edemez. App Router (generateMetadata) veya Pages Router (next/head) kullanarak her sayfa için benzersiz meta veriler oluşturun. **Hızlı Test:** Sayfanıza sağ tıklayıp "Sayfa Kaynağını Görüntüle" dediğinizde, ve <meta name="description"> etiketlerinin sayfa içeriğiyle eşleştiğini görmelisiniz. ### Adım 3: Doğru Canonical URL'leri Ayarlayın Filtreleme veya sıralama parametreleri içeren sayfalar, arama motorlarında "tekrarlanan içerik" olarak işaretlenebilir. next/head içinde veya generateMetadata fonksiyonunda, sayfanın ana (canonical) versiyonunun URL'sini belirtin. ### Adım 4: Bir XML Site Haritası Oluşturun Arama motorları, özellikle yeni sitelerde tüm sayfalarınızı keşfedemeyebilir. next-sitemap gibi bir paket kullanarak veya basit bir API rotası (app/sitemap.xml/route.js) yazarak, tüm statik ve dinamik rotalarınızı içeren bir site haritası oluşturun ve robots.txt dosyanıza ekleyin. ### Adım 5: Yapılandırılmış Veri (Schema Markup) Ekleyin Arama sonuçlarında zengin snippet'ler görünmez, bu da düşük tıklama oranı demektir. JSON-LD formatını kullanarak, sayfa türünüze uygun şemayı (örneğin, Article, Product, FAQPage) komut dosyası olarak sayfanıza ekleyin. Google'ın Zengin Sonuçlar Test Aracı ile doğrulayın. ### Adım 6: Resim ve Font Optimizasyonunu Zorunlu Hale Getirin Optimize edilmemiş medya dosyaları, sayfa hızını kritik şekilde düşürür. Yerleşik <Image /> bileşenini (boyut, format ve lazy loading otomatik optimizasyonu için) ve next/font modülünü (yerel fontları önceden yükleyerek) mutlaka kullanın. ### Adım 7: Robots.txt ve Meta Robots'u Yönetin Arama motorları, geliştirme aşamasındaki veya özel sayfaları tarayarak indeksleyebilir. Projenizin kök dizininde bir robots.txt dosyası oluşturun veya next.config.js içinde yapılandırın. Belirli sayfaları noindex yapmak için robots meta etiketini kullanın. ### Adım 8: Performansı Düzenli Olarak Denetleyin ve Test Edin Performans, bir kere ayarlandığında sabit kalmaz. Yeni özellikler ekledikçe bozulabilir. Google PageSpeed Insights, Lighthouse CI ve Next.js Analytics ile düzenli performans ve Core Web Vital ölçümleri yapın. Hedef: Mobilde 90+ puan. **Özetle:** Next.js SEO, render yöntemi seçimiyle başlayıp, meta veriler, site haritası, yapılandırılmış veri ve sürekli performans optimizasyonu ile devam eden sistematik bir süreçtir. ## Yaygın Hatalar ve Kırmızı Bayraklar Bu hatalar, genellikle Next.js'in SEO konusunda "kutudan çıkar çıkmaz hazır" olduğu yanılgısından veya React geliştirme alışkanlıklarının SEO gerekliliklerinin önüne geçmesinden kaynaklanır. - **İstemci Taraflı Veri Getirme ile SSR'yi Karıştırmak**: useEffect içinde API çağrısı yapmak, içeriğin istemcide yüklenmesine neden olur. Arama motoru botları bu veriyi göremez. **Düzeltme:** Sunucuda veri getirmek için getServerSideProps, getStaticProps veya App Router'daki sunucu bileşenlerini kullanın. - **Tek Bir Meta Açıklaması Kullanmak**: Tüm site için next.config.js'te genel bir açıklama tanımlamak, tüm sayfaların aynı açıklamayı göstermesine sebep olur. Bu, arama motorlarının sayfalarınızı ayırt etmesini zorlaştırır. **Düzeltme:** Her sayfa bileşeni için dinamik meta veri oluşturun. - **Canonical URL'yi Unutmak**: Özellikle e-ticet sitelerinde, filtreleme parametreleri (?color=red&size=m) canonical tag olmadan çok sayıda tekrarlanan içerik URL'si yaratır. **Düzeltme:** Temel ürün sayfası URL'sini canonical olarak her varyant sayfasında belirtin. - **Yerel <img> Etiketi Kullanmak**: Standart HTML <img> etiketi, resimleri optimize etmez. Büyük dosyalar sayfa hızını düşürür. **Düzeltme:** Boyut, format ve lazy loading sağlayan Next.js <Image /> bileşenine geçin. - **Site Haritasını Manuel Tutmak** Yeni sayfalar ekledikçe site haritasını manuel güncellemeyi unutmak, yeni sayfaların keşfedilmesini geciktirir. **Düzeltme:** next-sitemap gibi dinamik site haritası oluşturan bir çözüm uygulayın. - **404 Hatalarını ve Kırık Linkleri Görmezden Gelmek**: Yeniden yapılandırılan veya kaldırılan sayfalar için yönlendirme (redirect) tanımlamamak, kullanıcı deneyimini bozar ve tarama bütçesini ziyan eder. **Düzeltme:** next.config.js içinde kalıcı yönlendirmeler (301 redirects) ekleyin ve düzenli denetim yapın. - **Sosyal Paylaşım Önizlemelerini Test Etmemek**: Open Graph etiketleri eklemek, doğru çalıştıkları anlamına gelmez. Bozuk görseller veya kesilmiş açıklamalar paylaşım etkinliğini düşürür. **Düzeltme:** Facebook Şahit Geliştirici veya LinkedIn Post Inspector gibi araçlarla her önemli sayfayı test edin. - **Performans Optimizasyonunu "Sonraya" Bırakmak**: SEO, proje sonunda bir "eklenti" gibi düşünülür. Bu, temel mimari hataların düzeltilmesini zorlaştırır. **Düzeltme:** SEO gerekliliklerini proje başlangıcında (tasarım aşamasında) tanımlayın ve geliştirme sürecine dahil edin. **Özetle:** En kritik hatalar, sunucuda içerik sağlamamak, meta verileri dinamik yönetmemek ve performansı sürekli izlememektir. ## Araçlar ve Kaynaklar Doğru araçları seçmek, Next.js SEO sürecini otomatikleştirip doğruluğunu garanti ederken, yanlış seçimler zaman kaybına neden olabilir. - **Next.js Yerleşik SEO Araçları** — next/head, next/image, next/font ve App Router'daki Metadata API'si. Framework'ün bir parçası oldukları için entegrasyonu sorunsuzdur ve temel SEO ihtiyaçlarını karşılar. - **Site Haritası Oluşturucular** — next-sitemap gibi paketler. Statik ve dinamik rotalarınızı otomatik tarayarak, Google'a uygun XML site haritaları oluşturma sorununu çözer. Yeni bir sayfa eklediğinizde site haritanız otomatik güncellenir. - **Schema İşaretleme Doğrulayıcıları** — Google'ın Zengin Sonuçlar Test Aracı ve Schema.org Markup Validator. JSON-LD'nizin sözdizimsel olarak doğru ve arama motorları tarafından anlaşılır olduğunu doğrulama sorununu çözer. - **Performans ve Denetim Araçları** — Lighthouse, PageSpeed Insights ve WebPageTest. Sayfa hızı, erişilebilirlik ve SEO konularında otomatik denetim yaparak zayıf noktaları tespit etme sorununu çözer. Geliştirme ve production ortamlarında düzenli kullanılmalıdır. - **SEO İzleme ve Rakip Analiz Araçları** — Ahrefs, SEMrush veya Screaming Frog (küçük ölçekli). Sıralamalarınızı, backlink profilinizi ve teknik SEO sorunlarını izleme, ayrıca rakiplerinizin performansını analiz etme ihtiyacını karşılar. - **Canonical ve Yönlendirme Denetleyicileri** — Tarayıcı eklentileri (SEO Meta in 1 Click) veya Screaming Frog. Sayfalarınızdaki canonical tag'lerin ve 301 yönlendirmelerin doğru çalışıp çalışmadığını hızlıca kontrol etme sorununu çözer. - **Resim Optimizasyon ve CDN Hizmetleri** — Next.js Image bileşeninin yanı sıra, Cloudinary veya Imgix gibi hizmetler. Çok sayıda veya çok büyük görseli farklı cihaz ve ekran boyutları için otomatik optimize etme ve hızlı teslim etme sorununu çözer. - **Resmi Dokümantasyon ve Topluluk** — Next.js SEO Dokümantasyonu ve GitHub tartışmaları. En güncel en iyi uygulamaları ve karşılaşılan spesifik hataların çözümlerini öğrenme ihtiyacını karşılar. **Özetle:** İhtiyacınız olan araçlar, otomatik site haritası oluşturma, performans denetimi, schema doğrulama ve sürekli izleme işlevlerini kapsamalıdır. ## Bilarna Nasıl Yardımcı Olabilir? Next.js SEO'yu uygulamak, doğru uzmanlığa sahip geliştirici veya ajansı bulma ve güvenilir üçüncü parti hizmetleri seçme zorluğunu da beraberinde getirir. Bilarna, bu zorluğu AI destekli bir B2B pazar yeri olarak çözer. Platformumuz, Next.js geliştirme ve teknik SEO konusunda doğrulanmış uzmanlara sahip yazılım ve hizmet sağlayıcılarını, ihtiyaç duyan işletmelerle buluşturur. Projenizin ölçeğine ve karmaşıklığına uygun, önceden filtrelenmiş seçenekler sunarız. AI destekli eşleştirme sistemi, firmanızın gereksinimlerini (bütçe, zaman çizelgesi, teknik stack) analiz ederek en uygun sağlayıcı adaylarını önerir. Ayrıca, "Doğrulanmış Sağlayıcı" programımız, sağlayıcıların yetkinliklerini ve geçmiş performanslarını bağımsız şekilde değerlendirir, böylece kararınızı daha güvenilir bilgilerle verebilirsiniz. ## Sık Sorulan Sorular ### S: Next.js'de SSR kullanmak SEO için her zaman şart mıdır? Hayır, şart değildir. Statik Site Oluşturma (SSG), içeriğiniz build zamanında oluşturulabiliyorsa (blog, ürün kataloğu) SSR'den çok daha iyi performans ve SEO sonucu verir. SSR, yalnızca her kullanıcı isteğinde değişen verileri (kişiselleştirilmiş içerik, gerçek zamanlı veri) sunmanız gerektiğinde kullanılmalıdır. **Sonuç:** Önce içeriğinizin dinamiklik seviyesini analiz edin, sonra render yöntemine karar verin. ### S: Next.js Image bileşeni, SEO için neden bu kadar önemli? Çünkü Core Web Vital metriklerinden biri olan Largest Contentful Paint (LCP) üzerinde doğrudan etkisi vardır. <Image /> bileşeni: - Resimleri modern formatlara (WebP) dönüştürür. - Cihaz boyutuna uygun boyutta sunar. - Lazy loading uygulayarak ilk görüntü alanındaki resimlerin öncelikli yüklenmesini sağlar. Tüm bunlar sayfa hızını artırır, bu da Google sıralamasını olumlu etkiler. **Sonuç:** Standart <img> etiketini asla kullanmayın, her zaman Next.js Image bileşenine geçin. ### S: App Router (Next.js 13+) ile Pages Router arasında SEO açısından fark var mı? Temel SEO prensipleri aynıdır, ancak uygulama yöntemi farklılık gösterir. App Router, sunucu bileşenleri (Server Components) ve yerleşik generateMetadata API'si sayesinde meta veri yönetimini daha basit ve verimli hale getirir. Sunucu bileşenleri varsayılan olarak sunucuda render edildiği için, istemcide veri getirme hatası riskini de azaltır. **Sonuç:** Yeni bir projeye App Router ile başlamanız SEO uygulamalarını kolaylaştıracaktır. ### S: Next.js projemde "SEO eklentisi" kullanmalı mıyım? Next.js, temel SEO ihtiyaçlarını (meta tag'ler, site haritası, resim optimizasyonu) yerleşik olarak karşılar. "next-seo" gibi popüler paketler, yapılandırmayı daha merkezi ve okunabilir hale getirebilir ancak zorunlu değildir. Bu paketler, özellikle Pages Router kullanıyorsanız yararlı olabilir. **Sonuç:** Paket eklemeden önce, ihtiyacınız olan özelliğin Next.js tarafından zaten sunulup sunulmadığını kontrol edin. ### S: Dinamik yönlendirmeler (dynamic routes) için SEO'yu nasıl optimize ederim? Dinamik yönlendirmelerde ([slug].js) iki kritik nokta vardır: - **getStaticPaths** ile tüm olası yolları (paths) önceden oluşturmayı (fallback: 'blocking' veya true ile) düşünün. Bu, statik sayfaların SEO avantajını sağlar. - Dinamik meta verileri, getStaticProps içinde alınan veriye göre oluşturun. Her blog yazısı veya ürün sayfası için benzersiz başlık ve açıklama şarttır. **Sonuç:** Dinamik içerik için SSG/ISR kullanın ve her sayfanın meta verisini API'den gelen veriyle doldurun. ### S: Next.js sitemin SEO performansını ne sıklıkla kontrol etmeliyim? Teknik bir denetimi, büyük bir güncelleme (framework versiyonu, tema değişikliği, yeni modül ekleme) sonrasında mutlaka yapın. Performans ve sıralama izlemesini ise aylık olarak gerçekleştirin. Core Web Vital skorlarında ani düşüş veya organik trafikte azalma gibi kırmızı bayraklar için uyarı sistemleri kurun. **Sonuç:** Büyük değişikliklerden sonra tam denetim, diğer zamanlarda ise düzenli aylık izleme yapın. --- *Published on [Bilarna](https://bilarna.com) — AI Visibility & B2B SaaS marketplace*