Nuxt.js ile En İyi SEO Ayarları

Sizlere en beğendiğim framework çeşitlerinden biri olan, Nuxt.js ‘de  meta etiketleri ve en iyi HTML yapısı gibi SEO özelliklerinin nasıl başarılı bir şekilde yapılması gerektiğini paylaşacağım. Her şeyden önce Nuxt.js ‘in ne olduğunu bildiğinizi düşünüyorum. Eğer bu konu ile ilgili detaylı bilgi isterseniz. Nuxt.js Nedir? Makalemizi okuyabilirsiniz.

Title & Description

Olmazsa olmaz konulardan Title (Başlık) ve Description (Açıklama)

Bu iki meta etiketi sayesinde sayfalar Google, Yandex, Bing gibi tüm arama motorlarında görünecektir. İkisinin de belirli sınırlamaları vardır. Bu SEO biliyorum diyen herkesin bilmesi gereken temel bilgilerin en başında gelir.

Title (Başlık): 60 karakter

Description (Açıklama): 160 karakter

Nuxt.js ‘de bu head fonksiyonu ile basit bir şekilde yapılmaktadır.

// ~/pages/index.vue

head() {
    title: "Brunos Digital | Dönüşüm = Gelecek",
    meta: [
        {
          hid: "description",
          name: "description",
          content: "Kendi geliştirdiği yazılımlarla dijital pazarlama.."
        }
    ]
}

Title Değişken Olarak Sabitleme

Örneğin, başlıktaki her sayfada sabit bir değişken girip, sayfaya göre değişken atamak isterseniz bunu titleTemplate anahtarı ile nuxt.config.js yapılandırma dosyanızda tanımlayabilirsiniz. Aşağıdaki örnekte %s sayfalarda kullanılan değişken olarak ifade edilir ve her sayfanın sonuna – Brunos Digital eklenir.

// nuxt.config.js

head: {
  titleTemplate: "%s - Brunos Digital",
}

Sayfa Dili Ayarları (Language)

Web sitenizde kullandığınız dili belirtmelisiniz. Sitenizin yalnızca bir dili varsa, nuxt.config.js yapılandırma dosyasından ayarlayabilirsiniz.

// nuxt.config.js

head: {
  htmlAttrs: {
    lang: "tr",
  }
}

i18n paketi kullanıyorsanız aşağıdaki şekilde layout dosyasından dinamikleştirerek sayfa dilini rahatlıkla ayarlayabilirsiniz.

// ~/layouts/default.vue

head() {
  return {
    htmlAttrs: {
      lang: this.$i18n.locale
  }
}

Canonical

Canonical etiketi, sayfanızın orijinal içeriğinin hangi URL ‘de olduğunu ve her sayfa için ayarlanması gerektiğini göstermektedir. Tüm arama motorları, belirtilen Canonical URL ‘yi alaka düzeyine göre algılayacaktır.

// ~/pages/index.vue

head() {
  return {
    link: [
      {
        hid: 'canonical',
        rel: 'canonical',
        href: 'https://brunos.digital'
      }
    ]
  }
}

Open Graph (OGP)

OGP, o sayfayı açıklayan her sayfa için belirli meta verileri depoladığınız önemli bir etikettir. Bu bilgiler, örneğin sayfanızı sosyal medyada paylaşan kullanıcıların veya örneğin whatsapp üzerinde bir sayfayı paylaştığınızda önizlemeli algılayıp gruplayarak card modülü şekilde gösterilmesine olanak tanır.

OGP ayarlamak yalnız <meta> etiketleri ile mümkündür. Bunun için sayfadaki head fonksiyonunun içine aşağıdaki kodları yazıyoruz. Ayrıca açıklama olarak dil vs gibi seçeneklerde eklenebilir, ayrıntılı olarak OGP sayfasına bakabilirsiniz.

// ~/pages/index.vue

head() {
  return {
    meta: [
      {
        hid: "og:title",
        property: "og:title",
        content: "Brunos Digital | Dönüşüm = Gelecek"
      {
        hid: "og:description",
        property: "og:description",
        content: "Kendi geliştirdiği yazılımlarla dijital pazarlama.."
      },
      {
        hid: "og:type",
        property: "og:type",
        content: "website"
      },
      {
        hid: "og:image",
        property: "og:image",
        content: "https://brunos.digital/seo_image.jpg"
      },
      {
        hid: "og:url",
        property: "og:url",
        content: "https://brunos.digital"
      },
      {
        property: "og:locale",
        content: "tr_TR"
      }
    ]
  }
}

Diğer tüm özellikler için bizimle iletişime geçebilirsiniz.