Menambahkan Meta Tag SEO di NuxtJS

March 12, 2021 3 min read
SEO menjadi elemen penting dalam meningkatkan brand awareness dan trafik web. Tak terkecuali untuk web dengan framework NuxtJS sekalipun.

SEO menjadi elemen penting dalam meningkatkan brand awareness dan trafik web. Tak terkecuali untuk web dengan framework NuxtJS sekalipun.

Mungkin ada beberapa yang masih bingung bagaimana cara memasang meta tag SEO di Nuxtjs? Berikut ini caranya.

Memasang Meta Tag SEO di NuxtJS

NuxtJS memberikan 3 pilihan cara memasang meta tag.

  1. Memasangnya secara global di nuxt.config.js.
  2. Memasangnya secara lokal di halaman tertentu sebagai objek.
  3. Memasangnya secara lokal di halaman tertentu sebagai function.

Memasang Meta Tag Secara Global

Ini adalah cara yang paling sering saya gunakan, karena kita hanya perlu menempatkan kode meta sekali saja di nuxt.config.js.

Biasanya untuk menambahkan kode tag global seperti favicon, file css external dari FontAwesome (misalnya), hingga kode verifikasi meta tag Google Search Console.

export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'deskripsi web'
      },
      {
        name: 'google-site-verification',
        content: 'kode verifikasi google search console'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

Dengan memasangnya secara global, meta tag akan muncul di semua halaman.

Memasangnya Secara Local di Halaman Tertentu

Misalnya kita akan menambahkan meta tag hanya untuk halaman pages/index.vue.

<script>
export default {
  head: {
    title: 'Judul Halaman',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Deskripsi Halaman'
      }
    ],
  }
}
</script>

Jika menggunakan cara ini, kekurangannya kita harus memasangnya di semua halaman satu-persatu.

Selain itu, kita juga bisa memasangnya secara lokal di suatu halaman dan mengaturnya sebagai fungsi.

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Judul halaman'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Deskripsi halaman'
          }
        ]
      }
    }
  }
</script>

Pada dasarnya, NuxtJS menggunakan modul vue-meta untuk menampilkan meta tag.

Pastikan untuk menambahkan kode identifier unik seperti hid agar tidak terjadi duplikasi saat kita menggunakannya di komponen lain.

Menambahkan Resource External di NuxtJS

Kita juga bisa menambahkan resource external seperti CSS, atau Javascript di bagian head NuxtJS.

Ada dua cara untuk menambahkannya, yaitu secara global, dan secara local seperti pada meta tag.

Menambahkan Resource External Secara Global

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

Menambahkan Resource External Secara Lokal

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>

Dokumentasi

Jika masih bingung bagaimana cara memasangnya, kamu bisa cek beberapa dokumentasi berikut.

  1. Dokumentasi Meta Tag NuxtJS
  2. Dokumentasi vue-meta

Terima kasih sudah membaca artikel "Menambahkan Meta Tag SEO di NuxtJS"
Bagikan
Silahkan Login untuk berkomentar.