# Vue.js SEO: Kapsamlı Teknik Rehber ve En İyi Uygulamalar

> Vue.js SEO rehberi: Vue.js SPA ve SSR uygulamalarınızın arama motorlarında görünürlüğünü artırmak için adım adım teknik kılavuz ve en iyi uygulamalar.

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

---

## Vue.js SEO Nedir?

Vue.js SEO, Vue.js JavaScript framework'ü ile oluşturulmuş tek sayfalı uygulamaların (SPA) ve sunucu taraflı işlenen (SSR) uygulamaların arama motorlarında görünürlüğünü ve indekslenmesini iyileştirmek için uygulanan teknikler ve stratejiler bütünüdür.

Bu konu, geliştirme sürecinde SEO'nun düşünülmemesi nedeniyle, yüksek bütçeli bir web uygulamasının arama sonuçlarında hiç görünmemesi ve trafik kaybı gibi ciddi riskleri ele alır.

- **Sunucu Taraflı İşleme (SSR)** — Vue.js uygulamasının HTML içeriğini sunucuda oluşturarak tarayıcılara ve arama botlarına tam sayfayı gönderme yöntemi.

- **Static Site Generation (SSG)** — Nuxt.js gibi framework'lerle, derleme zamanında tüm sayfaların statik HTML'ye dönüştürülmesi. İndekslenme ve hız için en uygun yöntemlerden biridir.

- **Hydration** — Sunucuda oluşturulmuş statik HTML'yi, tarayıcıda Vue.js'in devralarak etkileşimli bir uygulamaya dönüştürme süreci.

- **Meta Etiket Yönetimi** — vue-meta gibi kütüphanelerle, her bir route için dinamik olarak başlık (title), açıklama (description) ve diğer SEO meta etiketlerinin ayarlanması.

- **Kritik İçeriğin Görünürlüğü** — JavaScript yüklenmeden önce arama botlarının görmesi gereken temel metin ve bağlantıların sunucu yanıtında mutlaka bulunması.

- **Yapılandırılmış Veri (Structured Data)** — Arama motorlarının içeriği daha iyi anlaması için JSON-LD formatında sayfa bağlamı ve işletme bilgileri eklemek.

- **Canonical URL'ler** — Benzer içerikli veya farklı parametreli sayfalar için asıl (kanonik) sayfa bağlantısını belirterek içerik tekrarı sorununu önlemek.

- **Sayfa Hızı Optimizasyonu** — Kod bölme (code splitting), görüntü optimizasyonu ve önbellekleme gibi Vue.js özel tekniklerle yükleme sürelerini kısaltmak.

Bu konu, teknik ekibi olan ve Vue.js'te ürün geliştiren startup'lar, SaaS şirketleri ve e-ticaret platformları için kritik öneme sahiptir. Temel amacı, geliştiricilerin tercih ettiği modern bir teknolojinin, pazarlama ve görünürlük hedefleriyle çatışmasını engellemektir.

**Özetle:** Vue.js SEO, JavaScript ağırlıklı modern web uygulamalarının arama motorları tarafından doğru şekilde bulunup sıralanabilmesini sağlayan teknik bir disiplindir.

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

Vue.js SEO'yu görmezden gelmek, yatırım yapılan dijital ürünün arama motoru trafiği potansiyelinin büyük kısmına erişememesi anlamına gelir. Bu da organik büyümenin engellenmesine ve pazarlama bütçesinin daha pahalı kanallara kaymasına yol açar.

- **Yatırım Kaybı** — Geliştirme için harcanan onbinlerce lira, site indekslenmediği için boşa gider. Çözüm: Proje başlangıcında mimariyi SSR veya SSG'ye uygun seçmek.

- **Rekabet Kaybı** — Daha basit, statik bir site kullanan rakibiniz, sizin Vue.js uygulamanızdan daha üst sıralarda çıkabilir. Çözüm: Teknik SEO performansını rakibin sitesini analiz ederek kıyaslamak ve iyileştirmek.

- **Zayıf Kullanıcı Deneyimi (UX)** — Yavaş yüklenen bir SPA, hem kullanıcıları kaybettirir hem de Core Web Vitals puanlarını düşürerek sıralamayı etkiler. Çözüm: Lighthouse gibi araçlarla düzenli performans denetimi yapmak.

- **İçerik Erişilemezliği** — Blog, ürün açıklamaları gibi dinamik içerikler arama botlarına boş sayfa olarak görünebilir. Çözüm: Google'ın URL Denetleme aracı ile bot görünümünü test etmek.

- **Ölçülemeyen ROI** — Organik trafik gelmediği için pazarlama faaliyetlerinin geri dönüşümü doğru hesaplanamaz. Çözüm: Proje başında SEO hedeflerini ve izlenecek metrikleri tanımlamak.

- **Teknik Borç** — İlerleyen dönemde SEO eklemek, baştan uygun şekilde yapmaktan çok daha maliyetli ve karmaşık hale gelir. Çözüm: MVP aşamasında bile temel SSR/SSG yapısını kurmak.

- **Yerel SEO ve Listeleme Sorunları** — İşletme bilgileri, iletişim sayfaları botlar tarafından okunamazsa Google İşletme Profili performansı düşer. Çözüm: Kritik işletme bilgilerini JSON-LD ile işaretlemek ve SSR'de sunmak.

- **Uluslararası Pazara Açılma Engeli** — Hedeflenen bölgelerdeki dil ve bölgesel sürümler (hreflang etiketleri) doğru uygulanmazsa, uluslararası trafik kaybedilir. Çözüm: Nuxt.js i18n modülü gibi çözümlerle hreflang'ı route bazlı yönetmek.

**Özetle:** Vue.js SEO'ya öncelik vermemek, ürününüzün çevrimiçi varlığının büyük bir kısmının görünmez olması riskini doğurur.

## Adım Adım Kılavuz

Vue.js ve SEO'yu bir araya getirmek, geleneksel web sitelerinden farklı bir yaklaşım gerektirdiği için ilk etapta karmaşık görünebilir.

### Adım 1: Temel Mimari Kararını Verin

İlk engel, "SPA, SSR mi yoksa SSG mi?" ikilemidir. Yanlış seçim, proje ilerledikçe büyük teknik değişikliklere yol açar. **Statik içerik ağırlıklı site veya blog** için Nuxt.js ile Static Site Generation (SSG) seçin. **Sık sık güncellenen, kullanıcı oturumuna bağlı uygulamalar** (dashboard, admin paneli) için Sunucu Taraflı İşleme (SSR) veya Universal Mode'u tercih edin. Geliştirme ve barındırma maliyetini de bu karara dahil edin.

### Adım 2: Doğru Framework veya Kütüphaneyi Kurun

Vanilla Vue.js ile SEO'yu sıfırdan yönetmek zordur. Hızlı ve sağlam bir başlangıç için Nuxt.js framework'ünü kullanın. Nuxt.js, SSR, SSG, route bazlı meta yönetimi ve performans optimizasyonlarını varsayılan olarak sunar. Pure Vue.js kullanmak zorundaysanız, `vue-meta` kütüphanesini ve `@vue/server-renderer` paketini projenize ekleyin.

### Adım 3: Route Bazlı Meta Etiketlerini Yapılandırın

Her sayfanın benzersiz başlık ve açıklaması olmaması, tüm sitenin aynı meta bilgilerle indekslenmesine neden olur. Nuxt.js'te her bir `.vue` dosyasının içine bir `head()` metodu tanımlayın. Vue.js + vue-meta kullanıyorsanız, `metaInfo` özelliğini kullanın. Aşağıdaki bilgileri dinamik olarak ayarlayabilmelisiniz:

- **Sayfa başlığı (title)**

- **Meta açıklaması (description)**

- **Open Graph / Twitter Card etiketleri** (sosyal paylaşım için)

- **Canonical URL**

### Adım 4: Kritik İçeriğin Sunucu Tarafında Geldiğinden Emin Olun

En büyük tuzak, önemli metinlerin JavaScript yüklendikten sonra görünmesidir. Botlar bu içeriği göremez. Sayfanızın ana başlığını, ilk paragrafını ve temel bağlantılarını Vue template'inizde (`` içinde) doğrudan yazın, bunların API'den sonra gelmesine izin vermeyin. Test etmek için tarayıcınızda JavaScript'i devre dışı bırakın veya sayfanın "Kaynağı Görüntüle" sekmesinde bu içerikleri arayın.

### Adım 5: Yapılandırılmış Veriyi (JSON-LD) Ekleyin

Arama motorları sayfanızın ne hakkında olduğunu tam anlamıyor. Bu, zengin sonuçlarda (snippet) görünmemenize sebep olur. Vue bileşeninizin `` bölümüne, sayfa türüne uygun (ör. Article, LocalBusiness, Product) bir JSON-LD script'i ekleyin. Bu veriyi de SSR/SSG ile sunucu tarafında HTML'ye gömülü hale getirin. Google'ın Zengin Sonuç Test aracı ile doğrulayın.

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

Yavaş bir Vue uygulaması, kullanıcıları kaybettirir ve sıralamayı düşürür. Aşağıdaki optimizasyonları uygulayın:

- **Kod Bölme (Code Splitting):** Vue Router ile `import()` kullanarak route bazlı bölme yapın.

- **Görüntü Optimizasyonu:** Görüntüleri lazy-load edin, modern formatlara (WebP) dönüştürün ve uygun boyutlandırın.

- **Önbellekleme:** Statik varlıklar için uzun süreli önbellekleme başlıkları (Cache-Control) kullanın.

- **SSR Önbelleği:** Yoğun trafikli ve nadiren değişen sayfalar için sunucu tarafında önbellek mekanizması kurun.

Hızlı kontrol için Google PageSpeed Insights veya Lighthouse kullanın ve First Contentful Paint (FCP), Largest Contentful Paint (LCP) metriklerine odaklanın.

### Adım 7: Site Haritası (XML Sitemap) ve robots.txt Dosyası Oluşturun

Arama motorları dinamik rotalarınızı keşfedemeyebilir. Nuxt.js'te `@nuxtjs/sitemap` modülü gibi araçlarla otomatik XML site haritası oluşturun. Pure Vue projelerinde, build aşamasında rotalarınızdan site haritası üreten bir script yazın. `robots.txt` dosyanızın, arama motorlarının SSR/API endpoint'lerinizi taramasını engellemediğinden emin olun.

### Adım 8: Sürekli İzleme ve Test Yapın

Deploy sonrası bir şeyler bozulabilir ve siz fark etmeyebilirsiniz. Google Search Console'u projenize ekleyin. "URL Denetleme" aracı ile önemli sayfalarınızı düzenli olarak bot gözünden kontrol edin. Performans ve indeksleme raporlarını haftalık inceleyin. Yeni bir özellik eklediğinizde, SEO gereksinimlerini tanım listesine (definition of done) dahil edin.

**Özetle:** Vue.js SEO, doğru mimari seçimiyle başlayan, meta yönetimi, içerik sunumu ve performans optimizasyonuyla devam eden sistematik bir süreçtir.

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

Bu hatalar genellikle, geliştirme sürecinde SEO'nun "sonradan eklenebilir" bir özellik olarak görülmesinden kaynaklanır.

- **Sadece İstemci Tarafında İşleme (CSR)** — Tüm uygulama tek bir HTML dosyasından yüklenir, botlar boş sayfa görür. **Düzeltme:** SSR veya SSG'ye geçiş yapın. Geçici çözüm olarak "prerender-spa-plugin" gibi araçlarla önemli sayfaları önceden oluşturabilirsiniz.

- **API'den Gelen İçeriğin Botlara Gizli Kalması** — Kullanıcı verilerini gösteren sayfalar, API'ye botların erişememesi nedeniyle boş çıkar. **Düzeltme:** SSR modunda, API isteklerini sunucu tarafında yapın ve sonucu HTML'ye gömün. Veya bu sayfaları robots.txt ile engelleyin.

- **# (Hash) Tabanlı Routing Kullanmak** — `example.com/#/urun` gibi URL'ler, geleneksel olarak arama motorları tarafından farklı sayfalar olarak algılanmaz. **Düzeltme:** Vue Router'da history modunu (`createWebHistory`) kullanın ve sunucunuzu tüm rotaları `index.html`'e yönlendirecek şekilde yapılandırın.

- **Yavaş Hydration** — SSR yapılmış büyük bir sayfanın tarayıcıda etkileşimli hale gelmesi çok uzun sürer, kullanıcı tıklamasına cevap vermez. **Düzeltme:** Bileşenleri lazy-load edin, gereksiz başlangıç JavaScript'ini azaltın ve `v-once` gibi direktiflerle statik kısımları optimize edin.

- **Meta Etiketlerin Yanlış Yönetilmesi** — Tüm site için sabit başlık/açıklama kullanmak veya etiketleri gecikmeli olarak güncellemek. **Düzeltme:** Meta kütüphanenizin SSR uyumlu olduğundan emin olun ve her route değişikliğinde etiketlerin anında güncellendiğini test edin.

- **Görüntü ve Fontların Performansı Bozması** — Optimize edilmemiş büyük varlıklar, LCP süresini uzatarak sıralamayı düşürür. **Düzeltme:** Görüntüleri otomatik optimize eden (ör. Nuxt Image) modüller kullanın ve critical fontları preload edin.

- **Google Search Console'u Yapılandırmamak** — Hatalar ve indeksleme sorunları görünmez kalır. **Düzeltme:** Siteyi Search Console'a ekleyin, site haritasını gönderin ve "URL Denetleme" aracını aktif olarak kullanın.

- **Dinamik İçeriğin Sonsuz Scroll ile Sunulması** — Arama botları "daha fazla yükle" butonuna tıklayamaz, alt sayfalardaki içeriği göremez. **Düzeltme:** Sonsuz scroll yerine pagination (sayfalandırma) kullanın veya "view-all" bağlantısı gibi botların takip edebileceği statik bir link sağlayın.

**Özetle:** En kritik hata, Vue.js projesini bir web sitesi değil de sadece bir uygulama olarak görerek, arama motorlarının onu anlama ihtiyacını tamamen göz ardı etmektir.

## Araçlar ve Kaynaklar

Doğru araçları seçmek, Vue.js SEO sürecini karmaşıklıktan çıkarıp yönetilebilir hale getirir.

- **SSR/SSG Framework'leri** — Nuxt.js, bu konuda en kapsamlı ve topluluk desteği güçlü çözümdür. VitePress, dokümantasyon siteleri için hafif bir SSG alternatifidir.

- **Meta Etiket Yönetim Kütüphaneleri** — `vue-meta` (Vue 2) ve `@unhead/vue` (Vue 3), başlık ve meta etiketlerini bileşen bazında yönetmek için kullanılır. Nuxt.js bunu yerleşik olarak sunar.

- **Performans ve Denetim Araçları** — Google Lighthouse, PageSpeed Insights ve WebPageTest, sayfa hızı ve Core Web Vitals metriklerini ölçmek için temel araçlardır. Build zamanında denetim için `vue-lighthouse` gibi paketler kullanılabilir.

- **Bot Benzetim ve Debug Araçları** — Google'ın URL Denetleme aracı (Search Console içinde) ve `curl` veya `wget` ile JavaScript'siz sayfa kaynağını çekmek, botların ne gördüğünü anlamanın en garantili yoludur.

- **Yapılandırılmış Veri (Schema) Araçları** — Schema.org sitesi referans için, Google'ın Zengin Sonuç Test aracı ise doğrulama için kullanılır. JSON-LD'yı elle veya kütüphanelerle oluşturabilirsiniz.

- **Görüntü ve Varlık Optimizasyonu** — Nuxt Image modülü, `sharp` kütüphanesi veya Cloudinary gibi bulut servisleri, görüntüleri otomatik optimize eder ve modern formatlara dönüştürür.

- **Site Haritası Oluşturucular** — `sitemap` gibi npm paketleri veya Nuxt.js modülleri (`@nuxtjs/sitemap`), dinamik rotalarınızdan otomatik XML site haritası üretir.

- **SEO İzleme ve Analiz Platformları** — Ahrefs, SEMrush veya Screaming Frog, daha geniş kapsamlı teknik SEO denetimi, sıralama takibi ve rakip analizi için kullanılır.

**Özetle:** Vue.js SEO süreci, geliştirme (Nuxt.js), test (Lighthouse, URL Denetleme) ve izleme (Search Console) araçlarının kombinasyonuyla yönetilir.

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

Vue.js SEO uzmanlığı gerektiren teknik bir konudur ve doğru ajansı veya freelance uzmanı bulmak zaman alıcı ve riskli olabilir.

Bilarna, bu tür spesifik ihtiyaçlar için işletmeleri önceden doğrulanmış yazılım ve hizmet sağlayıcılarıyla buluşturan, yapay zeka destekli bir B2B pazar yeridir. Platformumuz, Vue.js geliştirme ve teknik SEO konusunda kanıtlanmış yeteneklere sahip ajansları ve uzmanları listeler.

Doğrulanmış Sağlayıcı Programımız sayesinde, portföylerini, uzmanlık alanlarını ve geçmiş iş referanslarını inceleyebilirsiniz. Bilarna'nın AI eşleştirme sistemi, projenizin gereksinimlerini (örn., "Nuxt.js SSR geçişi ve performans optimizasyonu") analiz ederek size en uygun birkaç teklif sunar, böylece karşılaştırmalı değerlendirme yapmanız kolaylaşır.

## Sık Sorulan Sorular

### S: Vue.js ile yapılmış bir SPA'm var ve hiç indekslenmiyor. İlk ve acil adımım ne olmalı?

İlk acil adım, sitenizin mevcut durumunu Google'ın gözünden anlamaktır. Google Search Console'a site haritanızı ekleyin ve "URL Denetleme" aracı ile ana sayfanızı taratın. Eğer bot sayfayı boş görüyorsa, en hızlı geçici çözüm, kritik sayfalarınızı (ana sayfa, iletişim, hakkımızda) "prerender-spa-plugin" gibi bir araçla build aşamasında statik HTML'ye dönüştürmektir. Uzun vadeli çözüm ise Nuxt.js gibi bir framework'e geçiş planlamaktır.

### S: Nuxt.js'te "universal" mod (SSR) ile "static" mod (SSG) arasında nasıl seçim yapmalıyım?

Seçiminiz içeriğinizin **dinamiklik derecesine** ve **barındırma altyapınıza** bağlıdır.

- **Static (SSG) seçin eğer:** İçeriğiniz build zamanında biliniyorsa (blog yazıları, ürün kataloğu, dokümantasyon). Daha hızlı, daha güvenli ve ölçeklenebilirdir. Netlify, Vercel gibi platformlara kolay deploy edilir.

- **Universal (SSR) seçin eğer:** Her kullanıcı için özelleşmiş veri gösteriyorsanız (kullanıcı dashboard'u, gerçek zamanlı veri) veya içeriğiniz çok sık (dakikada) güncelleniyorsa. Sunucu maliyeti ve yapılandırması daha karmaşıktır.

Nuxt.js, büyük projelerde her iki modu hibrit şekilde kullanmanıza da olanak tanır.

### S: Vue.js uygulamamda sayfalar çok hızlı yükleniyor ama Google PageSpeed Insights LCP (Largest Contentful Paint) puanım düşük. Neden?

Bu durum genellikle, sayfanın **görsel olarak hızlı** yüklenmesine rağmen, LCP adayı olan (genellikle büyük bir görsel veya başlık) elemanın **JavaScript hydration tamamlanana kadar** "istikrarlı" sayılmamasından kaynaklanır. Çözümler:

- LCP elemanı olan görseli `preload` etmek.

- Bu kritik elemanı içeren Vue bileşenini, synchronous bir bileşen olarak işaretlemek veya SSR'de doğru şekilde işlendiğinden emin olmak.

- Hydration'ı hızlandırmak için gereksiz başlangıç JavaScript'ini azaltmak (code splitting).

LCP'nizin ne olduğunu anlamak için Lighthouse raporundaki "Performance" sekmesindeki "Trace" özelliğini kullanın.

### S: Vue.js projemde yapılandırılmış veriyi (JSON-LD) nasıl dinamik olarak eklerim? SSR'de çalışır mı?

Evet, JSON-LD'yi SSR ile dinamik olarak eklemelisiniz. Nuxt.js kullanıyorsanız, `useHead` veya `useSchemaOrg` gibi composable'ları kullanabilirsiniz. Pure Vue + SSR projenizde, bileşenin `setup()` veya `created()` hook'unda JSON-LD nesnesini oluşturup, sunucu tarafında `renderToString` fonksiyonuna iletebilir ve template'inizde `` etiketi içine yerleştirebilirsiniz. Önemli olan, bu script'in sunucu tarafında oluşturulan HTML'de bulunmasıdır.

### S: SSR modunda çalışan uygulamamın sunucu yükü çok artıyor. Performansı nasıl ölçeklendirebilirim?

SSR sunucu yükünü azaltmanın birkaç yolu vardır:

- **Önbellekleme:** Mikro önbellek (micro-caching) kullanın. Nginx veya CDN (Cloudflare, Varnish) ile, birkaç saniyeliğine bile olsa, tamamen aynı olan SSR çıktısını önbelleğe alın.

- **İstek Azaltma (Rate Limiting):** Botların ve kötü niyetli taramaların sunucunuzu meşgul etmesini engelleyin.

- **CDN ile Dağıtım:** Statik varlıkları (CSS, JS, görseller) bir CDN'den servis edin.

- **Hybrid Yapı:** Nadiren değişen sayfaları (blog yazıları) SSG'ye, kişiselleştirilmiş sayfaları SSR'ye alın. Nuxt.js buna "Hybrid Rendering" ile izin verir.

Performans izleme araçları (New Relic, Datadog) ile sunucu metriklerinizi sürekli takip edin.

### S: E-ticaret sitem Vue.js ile yapıldı, binlerce ürün sayfam var. Her biri için SSR mümkün mü?

Binlerce dinamik sayfa için saf SSR, sunucu yükü açısından verimsiz olabilir. En iyi yaklaşım **Incremental Static Regeneration (ISR)** veya benzeri bir stratejidir. Nuxt.js ile, `nitro` motoru sayesinde bu mümkündür. Yapılandırmanızda, ürün sayfalarının build zamanında veya ilk istekte statik olarak oluşturulmasını, belirli bir aralıkla (örn., 1 saatte bir) yeniden oluşturulmasını sağlayabilirsiniz. Bu, hem performans (statik dosya) hem de güncellilik (periyodik yenileme) sağlar. Ürün stoku gibi çok sık değişen bilgiler için, sayfada istemci tarafında bir API çağrısı yaparak bu kısmı dinamik tutabilirsiniz.

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