Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Nuxt.js ve SSR ile SEO Dostu Uygulama Geliştirme

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde Nuxt.js ile server-side rendering (SSR) mantığını öğreneceksiniz.
SPA uygulamalarındaki SEO sorunlarını nasıl çözeceğinizi göreceksiniz.
Dinamik rotalar, layout yapısı ve sayfa bazlı SEO yöneteceksiniz.

Teknik Özet​

  • Problem: SPA uygulamaları SEO’da zayıftır
  • Çözüm: Nuxt.js ile SSR kullanımı
  • Sonuç: Sunucudan gelen, taranabilir HTML

Neden SSR Kullanmalıyız?​

1. Tarayıcılar JavaScript’i çalıştırır. 2. Arama motorları ise HTML’i tarar. 3. SSR, içeriği sunucuda üretir.

  • Bu sayede arama motorları tüm sayfayı görür.

Ön Gereksinimler​

Başlamadan önce şunlar yeterlidir:

  • Node.js 16.14.0 veya üzeri
  • Vue.js ve JavaScript temel bilgisi
  • Terminal kullanımı deneyimi

1️⃣ Nuxt.js Projesi Oluşturma​

  1. Terminalden yeni bir Nuxt projesi başlatın.
npx create-nuxt-app rabisu-havalimani-rehberi
  • Bu komut Nuxt.js proje yapısını oluşturur.
  • Kurulumda şu seçenekleri tercih edin:

1. Programlama dili: JavaScript

2. UI framework: Tailwind CSS

3. Rendering mode: Universal (SSR)

4. Deployment target: Server

- Projeyi çalıştırın:


cd rabisu-havalimani-rehberi
npm run dev

2️⃣ Yerel Veri Kaynağı Oluşturma​

  1. Dinamik sayfalar için örnek veri hazırlıyoruz.

mkdir data

// data/havalimanlari.js
export default [
  { isim: "İstanbul Havalimanı", kod: "IST", sehir: "İstanbul" },
  { isim: "Esenboğa Havalimanı", kod: "ESB", sehir: "Ankara" },
  { isim: "Adnan Menderes Havalimanı", kod: "ADB", sehir: "İzmir" }
]
  • Bu veri SSR ile sayfa üretiminde kullanılacaktır.

3️⃣ Nuxt ile Otomatik Rota Oluşturma​

  1. Nuxt, pages klasörüne göre rota üretir.
  2. Ek router dosyasına gerek yoktur.

Statik Sayfa​


<!-- pages/hakkimizda.vue -->
<template>
  <div>
    <h1>Hakkımızda</h1>
    <p>Bu proje Nuxt.js SSR örneğidir.</p>
  </div>
</template>
  • /hakkimizda yolu otomatik oluşur.

4️⃣ Dinamik Rota ve asyncData Kullanımı​

  1. Dinamik sayfalar _param.vue ile tanımlanır.

<!-- pages/havalimani/_kod.vue -->
<script>
import havalimanlari from '~/data/havalimanlari.js'

export default {
  asyncData(&#123; params &#125;) {
    const secilen = havalimanlari.find(
      h => h.kod === params.kod.toUpperCase()
    )
    return &#123; secilen &#125;
  }
}
</script>
  • asyncData sunucu tarafında çalışır.

5️⃣ Layout ile Ortak Sayfa Yapısı​

  1. Tekrarlanan alanlar için layout kullanılır.

<!-- layouts/DetayLayout.vue -->
<template>
  <div>
    <aside>{{ havalimani.sehir }}</aside>
    <main><Nuxt /></main>
  </div>
</template>

layout: 'DetayLayout'
  • Nuxt / sayfa içeriğini yerleştirir.

6️⃣ Dinamik SEO Meta Etiketleri​

  1. SSR sayesinde meta etiketler sunucuda üretilir.

head() {
  return {
    title: `${this.secilen.isim} | Havalimanı Bilgileri`,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: `${this.secilen.sehir} şehrindeki ${this.secilen.isim} hakkında bilgiler`
      }
    ]
  }
}
  • Bu bilgiler arama motorları için kritiktir.

❓ Sıkça Sorulan Sorular​

1. asyncData neden SEO için önemlidir? Veri sunucuda hazırlanır.

2. data ile farkı nedir? data tarayıcıda çalışır.

3. Layout ne sağlar? Kod tekrarını azaltır.

4. Nuxt SPA olabilir mi? Evet, SSR kapatılabilir.

Sonuç​

Bu rehberde Nuxt.js ile SSR kullandınız. SEO uyumlu dinamik sayfalar oluşturdunuz. Layout ve meta yönetimini öğrendiniz.

Nuxt.js projelerinizi güçlü sunucularla yayınlamak için Rabisu Bulut altyapısını hemen deneyebilirsiniz.