Nuxt Image & SEO Modüllerini Performanslı Kullanma

Modern web geliştirmede performans = SEO.

Arama motorları artık yalnızca sayfa içeriğine değil, yüklenme hızına, görsel optimizasyonuna ve meta verilerine de önem veriyor.
İşte burada iki Nuxt modülü sahneye çıkıyor: @nuxt/image ve @nuxt/seo.
Bu yazıda, bu iki modülü birlikte nasıl kullanabileceğini, performans skorunu nasıl uçurabileceğini anlatıyorum.

1. Nuxt Image — Görsel Optimizasyonun Otomatik Pilotu

Kurulum

1️⃣ Paketi yükle:

npm install @nuxt/image

2️⃣ Ardından nuxt.config.ts dosyana modülü ekle:

export default defineNuxtConfig({
  modules: ['@nuxt/image']
})

Temel Kullanım

<template>
  <NuxtImg src="/images/hero.jpg" width="800" height="400" alt="Hero Görseli" />
</template>

Nuxt, bu görseli otomatik optimize eder, uygun formatta (webp, avif) sunar ve lazy-load uygular.

Özellikler

• Lazy Loading: Görseller yalnızca görünür olduklarında yüklenir.
• Format Dönüştürme: Tarayıcı destekliyorsa WebP veya AVIF’e dönüştürülür.
• Responsive Breakpoints: Farklı ekranlar için otomatik boyutlar oluşturur.
• Cache & CDN Desteği: Cloudinary, IPX, ImageKit gibi sağlayıcılarla entegre.

Responsive Örnek

<NuxtImg
  src="/images/banner.jpg"
  sizes="sm:400px md:800px lg:1200px"
  format="webp"
  alt="Responsive Banner"
/>

Görselin her ekran için en uygun boyutu yüklenir. Lighthouse bunu çok sever.

IPX ile Lokalde Optimizasyon

Varsayılan olarak Nuxt Image IPX motorunu kullanır. Bu, local veya CDN tabanlı görsel işleme sağlar.

image: {
  domains: ['cdn.site.com'],
  provider: 'ipx',
  quality: 80,
  screens: { sm: 320, md: 768, lg: 1200 }
}

💡İpucu: Görsellerini public/ klasörüne değil, assets/ klasörüne koyarsan IPX pipeline’dan geçer, yani sıkıştırılır ve cache’lenir.

2. Nuxt SEO — Meta Etiketleri Otomatik Yönet

Nuxt 3’te SEO artık bir eklenti değil, bir sistem. @nuxt/seo modülü, meta tag’leri, Open Graph, Twitter Card ve yapılandırılmış veriyi yönetir.

Kurulum

1️⃣ Paketi yükle:

npm install @nuxt/seo

2️⃣ Ardından nuxt.config.ts dosyana modülü ekle:

export default defineNuxtConfig({
  modules: ['@nuxt/seo']
})

Temel Kullanım

<script setup>
useSeoMeta({
  title: 'Nuxt 3 SEO Örneği',
  description: 'SEO meta tag yönetimini otomatikleştirin',
  ogImage: '/images/preview.jpg',
  twitterCard: 'summary_large_image'
})
</script>

useSeoMeta sayesinde meta tag’leri her sayfa özelinde dinamik olarak tanımlayabilirsin.

Dinamik Başlıklar

useHead({
  titleTemplate: (title) => `${title} | MySite`
})

Tüm sayfalarda markanı otomatik ekleyen şık bir çözüm.

Open Graph & Schema

SEO modülü Open Graph (Facebook, LinkedIn) ve Twitter meta’larını da yönetir.
Ayrıca yapılandırılmış veri (schema.org JSON-LD) desteğiyle arama snippet’lerini zenginleştirebilirsin.

useSchemaOrg([
  defineWebSite({
    name: 'MySite',
    url: 'https://mysite.com'
  }),
  defineWebPage({
    name: 'Blog Yazısı',
    description: 'Vue, Nuxt ve React üzerine teknik içerikler.'
  })
])

Sonuç: Google artık sayfanın ne hakkında olduğunu tahmin etmek zorunda kalmaz — doğrudan anlarsın.

Birlikte Kullanım Stratejisi

Performans + SEO = Kazan-Kazan.
Aşağıdaki örnek, her ikisini birlikte nasıl optimize edeceğini gösteriyor:

<template>
  <article>
    <NuxtImg src="/images/article-cover.jpg" alt="Blog Kapak" width="1200" height="630" />
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </article>
</template>

<script setup>
const { data: post } = await useAsyncData('post', () => $fetch('/api/post'))
useSeoMeta({
  title: post.value.title,
  description: post.value.description,
  ogImage: `/images/article-cover.jpg`,
  twitterCard: 'summary_large_image'
})
</script>

Bu örnekle:

• Görsel optimize edilir.
• Lazy-load uygulanır.
• SEO meta’ları dinamik şekilde oluşturulur.
• SSR ile arama motorlarına tam içerik sunulur. 🔍

Dikkat Edilmesi Gerekenler

• NuxtImg kullanırken width ve height parametrelerini belirtmek layout shift (CLS) hatalarını önler.
• Meta verilerde duplicate tag oluşturmamaya dikkat et. Aynı title veya description birden fazla kez render edilirse Google kararsız kalabilir.
• useSeoMeta yalnızca setup() içinde çağrılmalıdır — aksi halde reactive veriler senkronize edilmez.

Lighthouse Skorunu Artırmak İçin Ek İpuçları

• Görsellerde AVIF formatı kullan.
• Lazy-load threshold’unu IntersectionObserver ile özelleştir.
• meta[name='theme-color'] ekle, mobil tarayıcı uyumunu artır.
• Sitemap modülüyle (örneğin @nuxtjs/sitemap) sayfalarını otomatik indekslet.

npm install @nuxtjs/sitemap

export default defineNuxtConfig({
  sitemap: {
    siteUrl: 'https://mysite.com',
    autoLastmod: true
  }
})

Sonuç

Nuxt Image ve SEO modülleri birlikte kullanıldığında, sayfanın hem görsel optimizasyonu hem de arama motoru görünürlüğü maksimum seviyeye çıkar.

Kısaca:

• NuxtImg → daha hızlı yüklenen, responsive, sıkıştırılmış görseller.
• useSeoMeta → daha doğru meta veriler, zengin arama sonuçları.
• useSchemaOrg → Google’a doğrudan senin kim olduğunu anlatır.