Menambahkan Social Meta Tag di NuxtJS

March 16, 2021 3 min read
Pelajari bagaimana cara menambahkan social media meta tag di NuxtJS untuk mengoptimalkan SEO dan social sharing yang lebih baik.

Sebelumnya sudah kita pelajari bagaimana menambahkan meta tag SEO di NuxtJS. Masih tentang meta tag SEO, kali ini kita akan belajar bagaimana menambahkan meta tag social untuk optimasi social sharing.

Social meta tag berguna untuk memastikan jejaring sosial seperti Facebook dan Twitter bisa mendapatkan data yang sesuai untuk ditampilkan ketika konten dibagikan, sehingga akan meningkatkan dan mengundang trafik yang lebih optimal.

Menambahkan Social Meta Tag di NuxtJS

Secara default, cara termudah untuk menambahkan meta tag adalah dengan menggunakan Nuxt Social Share yang merupakan plugin komunitas yang sudah ada sejak lama. Plugin ini bagus untuk penggunaan sederhana tetapi tidak cukup fleksibel untuk mengontrol data.

Pertama, install terlebih dahulu menggunakan NPM atau Yarn.

// gunakan NPM

npm i nuxt-social-meta --save

// atau menggunakan YARN

yarn add nuxt-social-meta



Tambahkan modul pada nuxtjs.config.js seperti berikut ini.

module.exports = {
  modules: [
    ...[
      "nuxt-social-meta",
      {
        url: "URL situs web",
        title: "Judul situs/halaman",
        site_name: "Nama situs web",
        description: "Deskripsi",
        img: "Link ke gambar yang ada di folder static",
        locale: "en_US",
        twitter: "@username_twitter",
        twitter_card: "summary_large_image",
        themeColor: "#warna-custom",
      },
    ],
  ],
};



Setelah itu, jalankan perintah yarn dev atau npm run dev, dan lihat bagian "head", meta tag sudah berhasil ditambahkan.

Akan tetapi muncul masalah baru, semua halaman memiliki judul dan social meta tag yang sama. Bagaimana solusinya?

Kita bisa memasangnya secara custom, dengan membuat plugin khusus dan mengisinya dengan fungsi sederhana untuk menghasilkan metadata unik dari setiap halaman yang berbeda.

Buatlah sebuah file dengan nama social-meta.js di folder plugin, lalu masukkan kode berikut.

function socialMeta(options) {
    // Semua meta tag
    const metaTags = [
        // Global
        { name: "author", content: options.url },
        { name: "publisher", content: options.url },
        { name: "apple-mobile-web-app-title", content: options.title },
        { name: "theme-color", content: options.themeColor },

        // Facebook & LinkedIn
        { property: "og:title", content: options.title },
        { property: "og:description", content: options.description },
        { property: "og:type", content: "website" },
        { property: "og:url", content: options.url },
        { property: "og:image", content: options.img },
        { property: "og:image:alt", content: options.title + ' page cover' },
        { property: "og:locale", content: options.locale },
        { property: "og:site_name", content: options.site_name },

        // Twitter
        { name: "twitter:card", content: options.twitter_card },
        { name: "twitter:site", content: options.twitter },
        { name: "twitter:creator", content: options.twitter },
        { name: "twitter:title", content: options.title },
        { name: "twitter:description", content: options.description },
        { name: "twitter:image", content: options.img },
    ];

    // Menambahkan meta tag ke head situs
    return metaTags.map((tag) => {
        if (tag.content !== undefined && tag.content !== null) {
            if (tag.hasOwnProperty("name")) {
                return {
                    hid: tag.name,
                    name: tag.name,
                    content: tag.content,
                }
            } else if(tag.hasOwnProperty("property")){
                return {
                    hid: tag.property,
                    property: tag.property,
                    content: tag.content,
                }
            }
        }
    })
}

export default ({ app }, inject) => {
    inject('socialMeta', socialMeta)
}


Selanjutnya, gunakan helper di halaman mana pun yang kita inginkan untuk menampilkan social meta tag. Sebagai contoh, kita akan menampilkannya di halaman Index situs kita.

head () {
    const description = 'Deskripsi website'

    return {
      title: 'Homepage',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: description
        },
        ...this.$socialMeta({
          url: "url-web.com",
          title: "Judul halaman",
          site_name: "Nama situs",
          description: description,
          img: 'gambar-thumbnail.jpg',
          locale: "en",
          twitter: "@username_twitter",
          twitter_card: "summary_large_image",
          themeColor: "#000000",
        })
      ]
    }
  }


Selanjutnya, jalankan perintah yarn dev atau npm run dev, dan lihat bagian "head", meta tag sudah berhasil ditambahkan.

Sekarang tinggal kita tambahkan meta pag di halaman lain menggunakan helper diatas.


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