# Nuxt.js SEO: Kapsamlı Optimizasyon Rehberi

> Nuxt.js SEO rehberi: SSR, SSG, performans ve meta etiket optimizasyonu ile arama motoru sıralamanızı artırın. Uzman ipuçları ve adım adım kılavuz.

Published: 2026-03-25 · Updated: 2026-03-25 · Author: Erhan Kocabas · Source: https://bilarna.com/tr/blog/nuxt-js-seo · Markdown: https://bilarna.com/tr/blog/nuxt-js-seo.txt

---

## Nuxt.js SEO Nedir?

Nuxt.js SEO, Nuxt.js JavaScript framework'ü ile geliştirilmiş web uygulamalarının arama motorlarında daha iyi bulunabilirliği ve sıralaması için yapılan teknik ve içerik odaklı optimizasyon çalışmalarının bütünüdür. Bu çalışmalar, modern bir tek sayfa uygulaması (SPA) veya evrensel uygulamanın (SSR/SSG) geleneksel SEO gereksinimleri ile uyumlu hale getirilmesini amaçlar.

Ana sorun, geliştiricilerin performans ve kullanıcı deneyimini optimize ederken, projenin "görünmez" içeriği, yavaş indekslenme veya zayıf sosyal paylaşım önizlemeleri gibi SEO engelleriyle karşılaşmasıdır.

- **Sunucu Taraflı Oluşturma (SSR)** — Arama motoru botlarına ve sosyal medya crawler'larına tamamen oluşturulmuş HTML sayfaları sunarak içeriğin anında erişilebilir olmasını sağlar.

- **Statik Site Oluşturma (SSG)** — Derleme zamanında önceden oluşturulmuş HTML, CSS ve JavaScript dosyaları oluşturur. Bu, inanılmaz hız, güvenlik ve kolay barındırma sağlarken mükemmel SEO performansı sunar.

- **Meta Etiket Yönetimi** — vue-meta entegrasyonu ile her route için dinamik başlık, açıklama, Open Graph ve Twitter Card etiketlerini kolayca yönetmeyi sağlar.

- **Otomatik Route Oluşturma** — pages/ dizin yapısına göre otomatik oluşturulan rotalar, temiz ve anlaşılır URL yapıları (SEO-friendly slugs) için mükemmel bir temel sağlar.

- **Sitemap.xml ve Robots.txt Oluşturma** — @nuxtjs/sitemap gibi modüllerle, uygulamanızın rotalarını otomatik olarak içeren dinamik site haritaları oluşturulabilir.

- **Performans Optimizasyonu** — Code splitting, lazy loading, görüntü optimizasyonu (nuxt/image) ve modern asset sıkıştırma teknikleri, Core Web Vitals puanlarını doğrudan etkileyen hızı artırır.

- **Structured Data (Schema.org)** — JSON-LD formatında yapılandırılmış verileri sayfalara ekleyerek arama motorlarının içeriğinizi daha iyi anlamasını ve zengin sonuçlar göstermesini sağlar.

- **Canonical URL'ler** — Yinelenen içerik sorunlarını önlemek için her sayfa için doğru kanonik URL etiketlerini ayarlamayı kolaylaştırır.

Bu yaklaşımlar, özellikle içerik yoğun siteler (haber, e-ticaret, blog), pazarlama sayfaları ve kurumsal web siteleri geliştiren ekipler için kritik öneme sahiptir. Geliştirme hızını yavaşlatmadan, uygulamanın organik trafik potansiyelini tamamen ortaya çıkarır.

**Özetle:** Nuxt.js SEO, framework'ün sunduğu SSR, SSG ve modüller ile, modern web uygulamalarını arama motorları için optimize etme sürecidir.

## İşletmeler İçin Neden Önemli?

Nuxt.js SEO'yu göz ardı etmek, önemli bir teknik yatırım yapılan bir projede organik trafik kanalının tamamen verimsiz kalması veya hiç çalışmaması anlamına gelir. Görünüşte harika çalışan bir uygulama, arama sonuçlarında "görünmez" olabilir.

- **Yatırımın boşa gitmesi** → Hızlı ve kullanıcı dostu bir Nuxt.js uygulaması geliştirmek önemli bir kaynak ayırır. SEO olmadan, bu yatırımdan organik büyüme ve müşteri kazanımı olarak geri dönüş alınamaz.

- **Rekabet gerisinde kalma** → Rakip siteler temel SEO'larını halletmişse, siz daha iyi bir ürün sunsanız bile arama sonuçlarında çok gerilerde yer alırsınız.

- **Sosyal medya paylaşım sorunları** → Open Graph etiketleri olmadan, link paylaşıldığında çekici bir başlık, açıklama veya görsel görünmez. Bu, sosyal trafik potansiyelini düşürür.

- **Yavaş indekslenme ve tarama bütçesi israfı** → Client-side rendering'a (CSR) güvenmek, arama motoru botlarının içeriğinizi görmesi için JavaScript'i çalıştırmasını beklemelerine neden olur. Bu, indekslenmeyi yavaşlatır ve botların crawl bütçesini verimsiz kullanır.

- **Düşük dönüşüm oranları** → Zayıf Core Web Vitals (özellikle LCP, FID, CLS), arama motoru sıralamasını düşürmenin yanı sıra, yüklenmesi yavaş veya "atlayan" bir site, ziyaretçilerin hemen çıkma oranını artırır ve satışları düşürür.

- **Teknik borç ve yeniden yapılandırma maliyeti** → Proje ilerledikten sonra temel SEO yapılarını eklemek, mimaride önemli değişiklikler gerektirebilir ve beklenmedik maliyetler doğurabilir.

- **Pazarlama çabalarının etkisiz kalması** → İçerik pazarlaması veya backlink çalışmaları yapılsa bile, altyapı SEO'ya hazır değilse bu çabaların etkisi sınırlı kalır.

- **Uluslararası pazara açılamama** → Hreflang etiketleri gibi çok dilli SEO tekniklerini uygulamak, Nuxt.js'te kolaydır. Bunları kullanmamak, farklı bölgelerdeki arama görünürlüğünü kısıtlar.

**Özetle:** Nuxt.js SEO'ya yatırım yapmamak, geliştirme bütçesinin büyük bir kısmının organik trafik getirisi olmadan kaybedilmesi riskini taşır.

## Adım Adım Kılavuz

Nuxt.js projenizi SEO'ya hazır hale getirmek, dağınık dokümanlar ve teknik terimler arasında kaybolmak zorunda değildir. Bu adımlar, en kritik noktaları pratik bir şekilde ele alır.

### Adım 1: Render Modunu Belirleyin ve Yapılandırın

Yanlış render modu seçmek, performans ve SEO arasında gereksiz bir denge kurmanıza neden olur. Nuxt.js'in gücü, ihtiyacınıza göre mod seçebilmenizdir.

**Universal (SSR)** modu, her sayfa isteğinde sunucuda dinamik olarak oluşturulur. En yüksek SEO performansı ve kişiselleştirilmiş içerik için idealdir. **Static (SSG)** modu, build zamanında tüm sayfaları önceden oluşturur. Blazing-fast hız, güvenlik ve ölçeklenebilirlik sunar. İçerik sık değişmeyen pazarlama siteleri, bloglar ve dokümantasyon için mükemmeldir. nuxt.config.js dosyanızdaki `ssr` ve `target` ayarlarıyla yapılandırın.

### Adım 2: Meta Etiketleri Dinamik Hale Getirin

Tüm sayfalarınız aynı başlık ve açıklamayı gösteriyorsa, arama motorları içeriğinizi ayırt edemez. Nuxt.js, her sayfa bileşeninde bir `head()` metodu veya `vue-meta` ile meta etiketleri tanımlamanıza izin verir.

- Sayfa başlığını, meta açıklamasını ve anahtar kelimeleri her route için dinamik olarak ayarlayın.

- **Open Graph (og:title, og:description, og:image)** ve **Twitter Card** etiketlerini mutlaka ekleyin. Görseller için `og:image:width` ve `og:image:height` belirtin.

- viewport, robots ve charset gibi temel meta etiketlerini unutmayın.

**Hızlı test:** Sayfanızın kaynağını görüntüleyin (Ctrl+U) veya Twitter Card Validator gibi bir araç kullanarak meta etiketlerinizin doğru çıktığını kontrol edin.

### Adım 3: Temiz ve Anlaşılır URL Yapısı Oluşturun

Karmaşık, parametre dolu URL'ler kullanıcılar ve botlar için anlamsızdır. Nuxt.js'in `pages/` dizin yapısı, otomatik olarak temiz rotalar oluşturur. Dinamik rotalar için `pages/blog/_slug.vue` gibi bir yapı kullanın. Bu, `/blog/nuxt-js-seo-ipuclari` gibi SEO dostu bir URL oluşturacaktır. `nuxt.config.js` içinde `router.extendRoutes` kullanarak veya `@nuxtjs/router` modülü ile özel route kuralları da tanımlayabilirsiniz.

### Adım 4: Performansı ve Core Web Vitals'i Optimize Edin

Yavaş bir site hem kullanıcıları kaçırır hem de Google sıralamasını düşürür. Nuxt.js'in performans araçlarını kullanın.

- **Görüntü Optimizasyonu:** `@nuxt/image` modülünü kullanın. Görselleri otomatik olarak boyutlandırır, modern formatlara dönüştürür (WebP) ve lazy loading uygular.

- **Code Splitting & Lazy Loading:** Nuxt.js bunu varsayılan olarak yapar. Büyük bileşenler için `` ile `defineAsyncComponent` kullanın veya `() => import('...')` sözdiziminden yararlanın.

- **Font ve Asset Optimizasyonu:** Web fontlarını `preconnect` ve `preload` edin. Kritik CSS'yi satır içi (inline) ekleyin.

**Nasıl doğrularsınız:** Google PageSpeed Insights veya Lighthouse (Chrome DevTools) ile test edin. Özellikle Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Interaction to Next Paint (INP) metriklerine odaklanın.

### Adım 5: Site Haritası ve Robots.txt Dosyasını Ekleyin

Arama motorları sitenizin yapısını ve hangi sayfaların taranması gerektiğini bilmez. `@nuxtjs/sitemap` modülünü yükleyip yapılandırarak, otomatik olarak `/sitemap.xml` dosyası oluşturabilirsiniz. Projeniz statikse, build sırasında bu dosya oluşturulur. `@nuxtjs/robots` modülü ile de özelleştirilmiş bir `robots.txt` dosyası ekleyebilirsiniz.

### Adım 6: Schema.org ile Yapılandırılmış Verileri Uygulayın

Arama motorları, sayfa içeriğinizin bağlamını tam olarak anlamakta zorlanabilir. JSON-LD formatını kullanarak yapılandırılmış veri ekleyin. Bir blog gönderisi için `Article`, bir ürün sayfası için `Product`, kurumsal bir site için `Organization` şeması kullanın. Bu verileri, her sayfanın `head()` bölümüne `` etiketi içinde yerleştirin. Google'ın Rich Results Test aracı ile kurulumunuzu doğrulayın.

### Adım 7: Canonical URL'leri ve Hreflang Etiketlerini Yönetin

Benzer içerikli veya farklı dil sürümleri olan sayfalar, "yinelenen içerik" cezası riski oluşturur. Her sayfa için, `- ` etiketi ile ana (kanonik) sürümün URL'sini belirtin. Çok dilli bir siteniz varsa, `` etiketlerini kullanarak her dil ve bölge varyantını işaretleyin. Nuxt.js i18n modülü gibi araçlar bu süreci otomatikleştirebilir.

### Adım 8: Tarama ve İndeksleme Sonrası İzleme

Yaptığınız değişikliklerin etkisini ölçmezseniz, optimizasyon süreciniz kör bir şekilde ilerler. Google Search Console'u projenize bağlayın. Burada URL'lerinizin nasıl tarandığına, indekslendiğine ve hangi sorgularda göründüğüne dair verileri izleyin. Hata ve uyarıları düzenli olarak kontrol edin.

**Özetle:** Bu 8 adım, Nuxt.js projenizi render modundan izlemeye kadar, arama motorları için tamamen şeffaf ve optimize hale getirmenizi sağlar.

## Yaygın Hatalar ve Kırmızı Bayraklar

Bu hatalar genellikle SEO'nun bir kerelik bir kurulum değil, geliştirme sürecinin bir parçası olduğu gerçeğinin gözden kaçırılmasından kaynaklanır.

**Yalnızca Client-Side Rendering'a (CSR) güvenmek** → Arama motorları içeriği göremez veya çok yavaş görür. **Çözüm:** Evrensel (SSR) veya Statik (SSG) moda geçin.

- **Tüm sayfalar için aynı meta açıklamayı kullanmak** → Tüm sayfalar aynı snippet'i gösterir, tıklama oranı düşer. **Çözüm:** Her sayfa bileşeni için benzersiz, açıklayıcı `head()` bilgileri tanımlayın.

- **Görselleri optimize etmemek** → Büyük görseller LCP (Largest Contentful Paint) süresini uzatır, performans puanını düşürür. **Çözüm:** `@nuxt/image` modülünü kullanarak görselleri boyutlandırın, sıkıştırın ve lazy load edin.

- **404 hataları veren dahili linkler** → Kullanıcı deneyimini bozar ve tarama bütçesini ziyan eder. **Çözüm:** Nuxt Link (``) bileşenini kullanın ve düzenli olarak broken link taraması yapın.

- **JavaScript içine gizlenmiş kritik içerik** → Botlar içeriği çıkaramayabilir. **Çözüm:** SSR/SSG kullanın ve hayati metinlerin HTML'de doğrudan mevcut olduğundan emin olun.

- **Site haritası (sitemap) oluşturmayı unutmak** → Yeni sayfaların keşfedilmesi ve indekslenmesi gecikir. **Çözüm:** `@nuxtjs/sitemap` modülünü kurup yapılandırın.

- **Mobil uyumluluğu test etmemek** → Mobil-first indekslemede ciddi sıralama kayıpları yaşanır. **Çözüm:** Tüm geliştirme sürecinde mobil cihazlarda test edin ve Lighthouse raporlarını inceleyin.

- **Core Web Vitals'i görmezden gelmek** → Doğrudan Google sıralama faktörüdür, kullanıcı deneyimini bozar. **Çözüm:** PageSpeed Insights ile düzenli test yapın ve LCP, CLS, INP metriklerini iyileştirin.

- **Structured Data (JSON-LD) eklememek** → Zengin sonuçlar (snippets) elde etme şansını kaybedersiniz. **Çözüm:** Ana sayfa türleri için temel Schema.org işaretlemelerini ekleyin.

**Özetle:** Bu hatalardan kaçınmak, teknik olarak üstün bir Nuxt.js uygulamasını, organik trafik getiren bir varlığa dönüştürmenin anahtarıdır.

## Araçlar ve Kaynaklar

Doğru araçları seçmek, Nuxt.js SEO sürecini otomatikleştirip doğruluğunu garanti etmenizi sağlar.

- **Performans ve Denetim Araçları** — Google PageSpeed Insights, Lighthouse (Chrome DevTools içinde) ve WebPageTest, site hızınızı ve Core Web Vitals'i analiz eder. Hangi optimizasyonların öncelikli olduğunu gösterir.

- **Nu.js SEO Modülleri** — Resmi topluluk modülleri (@nuxtjs/sitemap, @nuxtjs/robots, @nuxt/image) temel SEO ihtiyaçlarını kod tekrarına gerek kalmadan çözer. Kullanmamak büyük bir zaman kaybıdır.

- **Arama Motoru Yönetim Konsolları** — Google Search Console ve Bing Webmaster Tools, sitenizin nasıl tarandığını, indekslendiğini ve performans gösterdiğini izlemek için vazgeçilmezdir. Hataları ve iyileştirme fırsatlarını bildirir.

- **Yapılandırılmış Veri Test Araçları** — Google's Rich Results Test ve Schema.org Validator, JSON-LD işaretlemenizin doğruluğunu ve zengin sonuç üretme potansiyelini kontrol eder.

- **Meta Etiket ve Önizleme Doğrulayıcıları** — Facebook Sharing Debugger ve Twitter Card Validator, sosyal medya paylaşımlarında başlık, açıklama ve görselinizin nasıl görüneceğini test etmenizi sağlar.

- **Teknik SEO Tarama Araçları** — Screaming Frog SEO Spider veya Sitebulb gibi araçlar, büyük sitelerdeki broken link'leri, meta etiket eksikliklerini, yapısal sorunları tespit etmek için kullanılır.

- **Çok Dilli SEO Eklentileri** — `@nuxtjs/i18n` gibi modüller, hreflang etiketlerinin otomatik oluşturulması ve dil bazlı URL yapılandırması için kritik öneme sahiptir.

- **Resmi Dokümantasyon ve Topluluk** — Nuxt.js SEO dokümantasyonu, MDN Web Docs'taki SEO temelleri ve Nuxt.js Discord topluluğu, sorunlarınızı çözmek için en güncel ve güvenilir bilgi kaynaklarıdır.

**Özetle:** Bu araç kategorileri, Nuxt.js SEO sürecinizin her aşamasını ölçülebilir, yönetilebilir ve verimli hale getirir.

## Bilarna Nasıl Yardımcı Olabilir?

Nuxt.js SEO için doğru araçları veya bu optimizasyonları uygulayacak güvenilir bir geliştirme ekibi bulmak, zaman alıcı ve riskli bir süreç olabilir.

Bilarna, işletmelerin ihtiyaçlarına uygun, önceden doğrulanmış yazılım ve hizmet sağlayıcılarını bulmalarını sağlayan, yapay zeka destekli bir B2B pazar yeridir. SEO uzmanlığı gerektiren Nuxt.js projeleriniz için, platformumuz özel olarak doğrulama sürecinden geçmiş front-end geliştirme ajanslarını, SEO danışmanlık firmalarını ve performans optimizasyon uzmanlarını eşleştirmenize olanak tanır.

AI destekli eşleştirme sistemi, projenizin teknik gereksinimlerini (örneğin, mevcut Nuxt.js sürümü, SSR/SSG ihtiyacı, içerik yönetim sistemi entegrasyonu) ve iş hedeflerinizi analiz ederek en uygun birkaç teklifi sunar. Böylece, uzun araştırma ve referans kontrolü süreçlerini hızlandırarak, güvenilir bir tedarikçi ile hızlıca iletişime geçmenizi sağlarız.

Bilarna'nın Doğrulanmış Sağlayıcı Programı, sağlayıcıların portföylerini, uzmanlık alanlarını ve geçmiş iş referanslarını şeffaf bir şekilde sunmalarını gerektirir. Bu da, bir Nuxt.js SEO projesi için teknik beceri ve deneyim açısından doğru kararı vermenize yardımcı olur.

## Sık Sorulan Sorular

### S: Nuxt.js ile statik site (SSG) oluşturmak SEO için gerçekten yeterli mi? Dinamik içeriklerde sorun yaşar mıyım?

Evet, statik site oluşturma (SSG), çoğu durumda en iyi SEO performansını sunar. Önceden oluşturulmuş HTML dosyaları anında sunulduğu için Core Web Vitals puanları mükemmeldir. Dinamik içerikler (kullanıcı girişi, gerçek zamanlı veri) için, istemci tarafında API çağrıları yapabilir veya artımlı statik yeniden oluşturma (ISR) benzeri bir strateji uygulamak üzere `nuxt generate` komutunu düzenli aralıklarla (CI/CD pipeline ile) çalıştırabilirsiniz. İçeriğinizin sıklıkla değiştiği büyük ölçekli projelerde, Universal (SSR) modu daha uygun olabilir.

### S: Vue.js SPA'mı Nuxt.js'e geçirmem şart mı? SEO için daha basit bir çözüm var mı?

Nuxt.js'e geçiş büyük bir iş gibi görünebilir. Daha basit bir geçici çözüm, Vue.js SPA'nız için Prerender (ön oluşturma) kullanmaktır. `prerender-spa-plugin` gibi araçlarla, belirli rotalarınız için statik HTML snapshots'lar oluşturabilirsiniz. Ancak bu, büyük ve sık güncellenen sitelerde sürdürülebilir değildir ve tam bir Nuxt.js SSR/SSG deneyimi sunmaz. Uzun vadede ve ölçeklenebilirlik için Nuxt.js'e geçiş en sağlam çözümdür.

### S: Meta etiketlerim doğru görünüyor ama Google farklı bir açıklama gösteriyor. Neden?

Google, meta açıklamanızı kullanmak zorunda değildir. Sayfa içeriğinden veya başka kaynaklardan, kullanıcı sorgusuyla daha alakalı olduğunu düşündüğü bir snippet oluşturabilir. Bunu önlemek için: meta açıklamanızın ilgili anahtar kelimeleri içerdiğinden ve sayfa içeriğini doğru şekilde özetlediğinden emin olun. Ana mesajınızı sayfanın ilk paragrafında net bir şekilde belirtin. Yine de, meta açıklamayı doğru girmek, Google'ın kullanma ihtimalini yüksek oranda artırır.

### S: Nuxt.js SEO için mutlaka eklenmesi gereken en önemli 3 Nuxt modülü hangisidir?

Yeni başlayanlar için temel ihtiyaçları karşılayan üç modül:

- **`@nuxtjs/sitemap`**: Otomatik site haritası oluşturur.

- **`@nuxt/image`**: Görsel optimizasyonu ve lazy loading ile Core Web Vitals'i iyileştirir.

- **`@nuxtjs/robots`**: robots.txt kurallarını yönetmeyi kolaylaştırır.

Bu modüller, büyük bir kod yükü olmadan temel SEO altyapısını kurmanızı sağlar.

### S: SSR modunda çalışan bir Nuxt.js uygulamamın SEO'su, aşırı yüklenme (overload) durumunda etkilenir mi?

Evet, etkilenir. Sunucu aşırı yüklendiğinde ve yanıt süreleri uzadığında, sayfa oluşturma gecikmeleri yaşanabilir. Bu, botların sayfalarınızı yavaş taramasına veya zaman aşımına uğramasına neden olarak indekslemeyi olumsuz etkileyebilir. Çözüm, sunucu tarafında yeterli ölçeklendirme (scaling), caching (Redis, CDN) ve bir ters proxy (Nginx) kullanmaktır. Kritik, değişmeyen sayfalar için bileşen seviyesinde önbelleğe alma (`nuxt/server` utils) da büyük yardımcı olur.

### S: Nuxt.js projemdeki tüm SEO ayarlarını nasıl düzenli olarak denetleyebilirim?

SEO tek seferlik bir görev değildir. Düzenli denetim için:

- **Google Search Console'u** haftalık kontrol edin: Kapsam ve performans raporlarına bakın.

- Her büyük güncellemeden sonra bir **Lighthouse denetimi** yapın.

- Her çeyrekte bir **teknik SEO crawler** (örn. Screaming Frog) ile tüm sitenizi tarayın.

- İçerik ekledikçe veya değiştirdikçe, ilgili sayfaların meta verilerini ve yapılandırılmış verilerini güncelleyin.

Bu süreçleri otomatikleştirmek için CI/CD pipeline'ınıza basit script'ler ekleyebilirsiniz.

---
*Published on [Bilarna](https://bilarna.com) — AI Visibility & B2B SaaS marketplace*