Vue Meta Setup Untuk Gridsome Biar Meta Tag Keceh

Vue Meta Setup Untuk Gridsome Biar Meta Tag Keceh

Pada kali ini saya akan menjelaskan tentang seo pada Vue JS, package yang tersedia untuk Gridsome adalah menggunakan Vue Meta yang bisa anda lihat di link ini. Sebenarnya ada package lain yang support. tapi menurut saya biar enak integrasinya makanya menggunakan Package yang sudah tersedia di Gridsome.

Belajar VueJs untuk Blog ini cukup rumit untuk pemula seperti saya. Saya menggunakan Starter dari Gridsome Blog. yang bisa di clone disini Gridsome Starter Blog atau gunakan Command :

git clone https://github.com/gridsome/gridsome-starter-blog.git blogstarter
cd blogstarter
# Jika menggunakan yarnpackage bisa menggunakan yarn
yarn
gridsome develop

Mari kita lihat directory projectnya. di file Post.vue lokasinya di src/templates/Post.vue dan edit / tambahkan baris kode :

metaInfo () {
  return {
    title: this.$page.post.title,
    description: this.$page.post.description,
    meta: [
      { property: "og:type", content: 'website' },
      { property: "og:title", content: this.$page.post.title },
      { property: "og:description", content: this.$page.post.description },
      { property: "og:url", content: this.postUrl },
      { property: "og:image", content: this.$page.post.coverImage },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: this.$page.post.title },
      { name: "twitter:description", content: this.$page.post.description },
      { name: "twitter:site", content: "@nakamuraagatha" },
      { name: "twitter:creator", content: "@nakamuraagatha" },
      { name: "twitter:image", content: this.$page.post.coverImage },
    ],
  }
}

Untuk Memanggil config yang ada di grisome.config.js url slug postUrl bisa menggunakan :

computed: {
  postUrl () {
    let siteUrl = this.config.siteUrl
    let postSlug = this.$page.post.slug
    return postSlug ? `${siteUrl}/${postSlug}/` : `${siteUrl}/${slugify(this.$page.post.title)}/`
  }
},

Tambahkan juga query static pada Post.vue jika dibutuhkan :

<static-query>
query {
  metaData {
    siteName
    siteDescription
    siteUrl
  }
}
</static-query>

Ketika Project Gridsome anda di Upload maka akan error. itu penyebabnya anda tidak import config nya di Layout, Sekarang buka file src/layouts/Default.vue dan tambahkan di bagian script :

<script>
import Logo from '~/components/Logo.vue'
import config from '~/.temp/config.js';

export default {
  props: {
    showLogo: { default: true }
  },
  components: {
    Logo
  },

  computed: {
    config () {
      return config
    }
  }
}
</script>

Nah sekarang seonya mantap ndan...silahkan tinggal di deploy aja ya