Nuxt.js ve SEO: Meta Tag’ler Nasıl Eklenir?

1. İlk olarak, projenizin nuxt.config.js dosyasına gitmeniz gerekiyor. Bu dosya, Nuxt.js projesindeki yapılandırmayı kontrol ettiğiniz yerdir.
2. Daha sonra, meta etiketlerini eklemek istediğiniz sayfanın adını belirleyin. Örneğin, ana sayfa için index.vue dosyasını kullanabilirsiniz.
3. Şimdi, head nesnesini oluşturmanız gerekiyor. Bu nesne, sayfanın head bölümüne eklenecek meta etiketlerini içerecektir. Örneğin, aşağıdaki kodu kullanabilirsiniz:

export default {
  head: {
    title: 'Nuxt.js ile SEO uyumlu web sitesi oluşturma',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Nuxt.js kullanarak hızlı ve SEO uyumlu bir web sitesi oluşturma'
      }
    ]
  }
}

Bu örnekte, head nesnesi title ve meta özellikleri içeriyor. title özelliği, sayfanın başlığını belirtirken, meta özelliği, description adında bir meta etiketi ekliyor.

4. Meta etiketi eklerken hid özelliğini kullanmak önemlidir. Bu özellik, Nuxt.js’in aynı hid özelliğine sahip meta etiketlerini birleştirmesini sağlar. Bu, aynı meta etiketinin birden fazla kez eklenmesini önleyecektir.
5. Meta etiketleri için diğer özellikleri de ekleyebilirsiniz. Örneğin, name özelliği, meta etiketinin adını belirtirken, content özelliği, meta etiketinin içeriğini belirtir.
6. Birden fazla meta etiketi eklemek isterseniz, meta özelliğine bir dizi ekleyebilirsiniz. Örneğin, aşağıdaki kodda author ve keywords meta etiketleri eklenmiştir:

export default {
  head: {
    title: 'Nuxt.js ile SEO uyumlu web sitesi oluşturma',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Nuxt.js kullanarak hızlı ve SEO uyumlu bir web sitesi oluşturma'
      },
      {
        hid: 'author',
        name: 'author',
        content: 'John Doe'
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content: 'Nuxt.js, Vue.js, web development, SEO'
      }
    ]
  }
}

Bu örnekte, author ve keywords meta etiketleri eklenmiştir.

Sonuç olarak, Nuxt.js ile meta etiketleri eklemek oldukça kolaydır. head nesnesi, meta etiketleri gibi diğer başlık etiketlerini de içerebilir. Örneğin, aşağıdaki kodda link özelliği kullanılarak sayfaya CSS dosyası eklenir:

export default {
  head: {
    title: 'Nuxt.js ile SEO uyumlu web sitesi oluşturma',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Nuxt.js kullanarak hızlı ve SEO uyumlu bir web sitesi oluşturma'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'styles.css'
      }
    ]
  }
}

Bu örnekte, link özelliği kullanılarak styles.css dosyası sayfaya eklenir.

Nuxt.js ile meta etiketleri eklemek, sayfanızın SEO dostu olmasına yardımcı olabilir. Meta etiketleri, arama motorlarının sayfanızı daha iyi anlamasına yardımcı olabilir ve arama sonuçlarında görüntülenen bilgileri değiştirebilir.

Umarım bu blog yazısı size yardımcı olur! Nuxt.js ile SEO uyumlu web siteleri oluşturma hakkında daha fazla bilgi edinmek isterseniz, Nuxt.js belgelerine göz atabilirsiniz.