Nuxt 4 SEO ve Meta Etiketleri 2026: useHead, useSeoMeta ve Mülakat Soruları

Nuxt 4, SEO meta etiketlerini yönetmek için iki composable sunar: genel head elementleri için useHead ve tip güvenli SEO metadata için useSeoMeta. Nuxt 3'ün destek sonu 31 Temmuz 2026'da sona erecek olması nedeniyle, Nuxt 4.5'teki bu composable'ları anlamak teknik mülakatlara hazırlanan her Vue geliştiricisi için kritik öneme sahiptir.

useSeoMeta: Nuxt 4'te Tip Güvenli SEO Metadata

useSeoMeta composable'ı 100'den fazla tip tanımlı özellik içeren düz bir nesne kabul eder. Bu yaklaşım, Open Graph etiketlerinde name ile property özniteliklerini karıştırma gibi yaygın hataları ortadan kaldırır.

<!-- pages/product/[id].vue -->
<script setup lang="ts">
const product = await useFetch(`/api/products/${route.params.id}`)

useSeoMeta({
  title: () => product.data.value?.name,
  description: () => product.data.value?.description,
  ogTitle: () => product.data.value?.name,
  ogDescription: () => product.data.value?.description,
  ogImage: () => product.data.value?.imageUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image',
  twitterTitle: () => product.data.value?.name,
  twitterDescription: () => product.data.value?.description,
  twitterImage: () => product.data.value?.imageUrl,
})
</script>

Ok fonksiyonu sözdizimi () => value reaktif getter'lar oluşturur. product.data değiştiğinde meta etiketler otomatik olarak güncellenir. SEO etiketlerinin ilk render'dan sonra asla değişmediği statik sayfalar için bu reaktivite gereksiz yük oluşturur.

Daha İyi Performans İçin Sadece Sunucu Taraflı Meta Etiketler

Arama motoru crawler'ları ve GPTBot ve ClaudeBot gibi AI botları sadece ilk HTML yanıtını okur. JavaScript çalıştırmazlar. Bu, istemci tarafı meta etiket güncellemelerinin onlar için görünmez olduğu anlamına gelir.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'SharpSkill Hakkında',
    description: 'Geliştiriciler için teknik mülakat hazırlık platformu',
    ogTitle: 'SharpSkill Hakkında',
    ogDescription: 'Geliştiriciler için teknik mülakat hazırlık platformu',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

useSeoMeta'yı import.meta.server içine sarmak, composable'ın sadece SSR sırasında çalışmasını sağlar. Meta etiketler crawler'lara gönderilen HTML'de görünür, ancak istemci tarafında reaktif watcher'lar oluşturulmaz. Bu, bundle boyutunu küçültür ve hidrasyon performansını artırır.

Scriptler, Linkler ve Canonical URL'ler için useHead

useSeoMeta SEO metadata'sını kapsarken, useHead geri kalan her şeyi yönetir: harici scriptler, stil sayfaları, canonical URL'ler ve HTML/body öznitelikleri.

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

useHead({
  link: [
    {
      rel: 'canonical',
      href: `${config.public.siteUrl}/blog/${route.params.slug}`,
    },
    {
      rel: 'alternate',
      hreflang: 'fr',
      href: `${config.public.siteUrl}/fr/blog/${route.params.slug}`,
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        author: { '@type': 'Person', name: 'Anthony Fillion-Maillet' },
        datePublished: article.value?.publishedAt,
      }),
    },
  ],
})
</script>

link dizisi canonical URL'leri ve uluslararasılaştırma için hreflang etiketlerini yönetir. script dizisi zengin arama sonuçları için yapılandırılmış veri enjekte eder. Her ikisi de SEO için kritiktir ancak useSeoMeta'nın kapsamı dışındadır.

Meta Etiket Hiyerarşisi: App, Layout ve Page Seviyeleri

Nuxt 4, meta etiketleri üç seviyeden birleştirir: nuxt.config.ts (uygulama genelinde varsayılanlar), layout'lar ve sayfalar. Sayfa seviyesi etiketler layout seviyesi etiketleri, layout seviyesi etiketler ise uygulama seviyesi etiketleri geçersiz kılar.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s | SharpSkill',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

<!-- layouts/default.vue -->
<script setup lang="ts">
useSeoMeta({
  ogSiteName: 'SharpSkill',
  twitterSite: '@sharpskill',
})
</script>

<!-- pages/index.vue -->
<script setup lang="ts">
useSeoMeta({
  title: 'Teknik Mülakat Hazırlığı',
  description: 'Pratik sorular ve simüle mülakatlarla bir sonraki teknik mülakatınıza hazırlanın',
})
</script>

Son render edilen başlık "Teknik Mülakat Hazırlığı | SharpSkill" olur çünkü sayfa %s yer tutucu değerini sağlar ve yapılandırma şablonu sağlar. Bu hiyerarşi tekrarı önlerken sayfa bazında geçersiz kılmalara izin verir.

Yaygın Nuxt SEO Mülakat Soruları

Vue/Nuxt pozisyonları için teknik mülakatlar genellikle SSR ve SEO optimizasyonu hakkında sorular içerir. İşte mülakatçıların beklediği kalıplar.

useSeoMeta ne zaman reaktif getter'lar, ne zaman statik değerler kullanmalı?

Statik değerler sabit içerikli sayfalar için uygundur: landing page'ler, hakkımızda sayfaları, yasal belgeler. Reaktif getter'lar, meta etiketler getirilen verilere veya rota parametrelerine bağlı olduğunda gereklidir. Performans farkı ölçekte önemlidir: gereksiz watcher'lara sahip 50 sayfa bellek israf eder ve hidrasyonu yavaşlatır.

AI crawler'ları Googlebot'tan nasıl farklıdır?

Googlebot JavaScript çalıştırır ve istemci tarafı render'ı bekler. GPTBot ve ClaudeBot gibi AI crawler'lar ham HTML'i script çalıştırmadan getirir. Sunucu tarafında render edilen meta etiketler her ikisine de ulaşır. Sadece istemci tarafı meta etiketler ne AI botlarına ne de eski arama motorlarına ulaşır.

Open Graph etiketlerini en sık ne bozar?

Eksik og:image boyutları. Facebook ve LinkedIn OG verilerini agresif şekilde önbelleğe alır. Görsel boyutları eksik olduğunda platformlar küçük resimleri yanlış görüntüleyebilir veya hiç görüntülemeyebilir.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Vue sözdizimli kod editörünü gösteren makale önizlemesi',
})
</script>

ogImageWidth, ogImageHeight ve ogImageAlt dahil etmek render sorunlarını önler ve erişilebilirlik puanlarını iyileştirir.

Kullanıcı Tarafından Oluşturulan İçerik için useHeadSafe

Meta etiketler kullanıcı girdisi içerdiğinde XSS açıkları endişe kaynağı olur. useHeadSafe composable'ı değerleri enjeksiyondan önce temizler.

<!-- pages/profile/[username].vue -->
<script setup lang="ts">
const user = await useFetch(`/api/users/${route.params.username}`)

useHeadSafe({
  title: user.data.value?.displayName,
  meta: [
    { name: 'description', content: user.data.value?.bio },
  ],
})
</script>

<script>alert('xss')</script> gibi kötü amaçlı bir kullanıcı adı çalıştırılmak yerine escape edilir. Standart useHead temizleme yapmaz, bu nedenle güvenilmeyen içerik için useHeadSafe zorunludur.

Gelişmiş Gereksinimler için Nuxt SEO Modülü

Nuxt SEO modülü sitemap oluşturma, robots.txt yönetimi, schema.org işaretleme ve OG görsel oluşturmayı bir araya getirir. Yerleşik composable'ların ötesinde kapsamlı SEO araçları gerektiren projeler için bu modül boilerplate'i azaltır.

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://sharpskill.dev',
    name: 'SharpSkill',
  },
})

Modül rotalardan otomatik olarak sitemap'ler oluşturur, trailing slash normalleştirmesini yönetir ve yapılandırılmış veri için composable'lar sağlar. Büyük siteleri yöneten ekipler merkezi yapılandırmadan faydalanır.

Üretim için Nuxt 4 SEO En İyi Uygulamaları

• Tüm SEO etiketleri (title, description, Open Graph, Twitter Cards) için TypeScript otomatik tamamlaması ile useSeoMeta kullanımı
• Canonical URL'ler, hreflang etiketleri, yapılandırılmış veri ve harici scriptler için useHead kullanımı
• İstemci tarafı reaktivite yükünü ortadan kaldırmak için statik meta etiketleri import.meta.server içine sarma
• Sosyal medya paylaşım önizlemeleri için ogImageWidth, ogImageHeight ve ogImageAlt dahil etme
• XSS saldırılarını önlemek için kullanıcı tarafından oluşturulan içerikte useHeadSafe kullanımı
• Uygulama seviyesi varsayılanlarını nuxt.config.ts'de ayarlama ve sadece gerektiğinde sayfa seviyesinde geçersiz kılma
• Yapılandırılmış veriyi doğrulamak için Google Rich Results Test ile test etme
• Crawler davranışını simüle etmek için JavaScript devre dışıyken tarayıcı DevTools Network sekmesinde render'ı doğrulama