Cara Menambahkan Tag Meta di Nuxt.js
Table of content:
Nuxt.js adalah kerangka kerja yang kuat untuk membangun aplikasi Vue.js yang dirender di sisi server. Selain memberikan dasar yang kuat untuk membangun aplikasi yang kompleks, Nuxt.js juga memudahkan untuk menambahkan tag meta ke halaman Anda.
Cari tahu cara memasukkan tag meta di aplikasi Nuxt Anda untuk meningkatkan SEO dan visibilitas situs Anda di media sosial.
Tag meta adalah cuplikan kode yang memberikan informasi tentang halaman web. Tag ini ada di sumber HTML, sama seperti konten halaman Anda, tetapi tidak terlihat di halaman itu sendiri.
Baca Juga:
Tag meta dapat memberikan informasi seperti judul halaman, deskripsi, dan kata kunci. Mereka juga digunakan untuk memberikan informasi untuk berbagi media sosial dan optimisasi mesin pencari.
Sebelum mulai menambahkan tag meta, buat aplikasi Nuxt.js baru. Untuk itu, pastikan Anda telah menginstal Node.js di perangkat Anda. Kemudian, buka terminal Anda dan jalankan perintah berikut:
npx create-nuxt-app my-app Ini akan membuat aplikasi Nuxt.js baru di direktori bernama my-app. Ikuti petunjuk untuk mengonfigurasi aplikasi Anda sesuai kebutuhan.
Menambahkan Tag Meta Secara Global
Salah satu cara untuk menambahkan tag meta ke aplikasi Nuxt.js Anda adalah dengan menambahkannya secara global. Untuk melakukannya, tambahkan tag judul dan dua tag meta: satu untuk rangkaian karakter dan satu lagi untuk viewport. Buka milikmu nuxt.config.js file dan tambahkan properti head ke file module.exports obyek:
module.exports = {
head: {
title: 'My App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
} Menambahkan Tag Meta pada Halaman Tunggal
Terkadang Anda mungkin ingin menambahkan tag meta hanya ke halaman tertentu di aplikasi Anda. Untuk melakukannya, Anda dapat menambahkan properti head ke definisi komponen untuk halaman tersebut:
<template>
<div>
<h1>About Us</h1>
</div>
</template><script>
export default {
head: {
title: 'About Us',
meta: [
{ name: 'description', content: 'Learn more about our company' }
]
}
}
</script>
Menambahkan Tag Meta Secara Dinamis
Menambahkan tag meta secara dinamis memungkinkan Anda membuat tag meta khusus untuk setiap halaman, bergantung pada kontennya. Ini dapat berguna ketika Anda memiliki banyak halaman dengan berbagai jenis konten, dan Anda ingin mengoptimalkannya untuk mesin pencari dan berbagi media sosial.
Misalnya, Anda memiliki bagian blog di aplikasi Nuxt.js dengan banyak postingan. Untuk mengoptimalkan setiap posting blog untuk mesin pencari dan media sosial, Anda dapat membuat tag meta secara dinamis untuknya.
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template><script>
export default {
async asyncData({ params }) {
const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
.then(res => res.json())
return { post }
},
head() {
return {
title: this.post.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.body },
{ hid: 'og:title', property: 'og:title', content: this.post.title },
{ hid: 'og:description', property: 'og:description', content: this.post.body },
{ hid: 'og:image', property: 'og:image', content: this.post.image },
{ hid: 'og:url', property: 'og:url', content: `https://example.com/blog/${this.post.id}` },
{ hid: 'article:published_time', property: 'article:published_time', content: this.post.date },
{ hid: 'article:author', property: 'article:author', content: this.post.author },
{ hid: 'article:section', property: 'article:section', content: this.post.category }
]
}
}
}
</script>
Dengan membuat tag meta ini secara dinamis, Anda dapat memberikan informasi yang lebih mendetail tentang setiap postingan blog ke mesin telusur dan platform media sosial. Ini dapat membantu meningkatkan visibilitas, rasio klik-tayang, dan keterlibatan untuk postingan blog kita.
Menjalankan Aplikasi
Setelah Anda menambahkan tag meta ke aplikasi Nuxt.js, Anda harus menjalankannya untuk melihat perubahan yang terjadi. Anda dapat melakukannya menggunakan server pengembangan Nuxt.js, yang mengikuti proses yang sama seperti aplikasi React.js.
Untuk memulai server pengembangan, buka terminal Anda, arahkan ke direktori aplikasi Anda, dan jalankan perintah berikut:
npm run dev Ini akan memulai server pengembangan dan meluncurkan aplikasi Anda di browser web. Jika Anda membuka sumber halaman browser dan melihat bagian kepala, Anda akan melihat tag meta.
Penting untuk diperhatikan bahwa tag meta yang dibuat oleh Nuxt.js hanya dapat dilihat oleh mesin telusur dan platform media sosial saat laman dirender di sisi server. Jika Anda menggunakan perenderan sisi klien, tag meta mungkin tidak terlihat oleh mesin telusur dan platform media sosial.
Selain meningkatkan tampilan halaman web Anda saat dibagikan di platform media sosial, meta tag dapat meningkatkan peringkat situs Anda di hasil mesin pencari. Dengan memberikan informasi meta-tag yang akurat dan relevan, Anda dapat membantu mesin telusur memahami konten laman web kami dan memeringkatnya lebih tinggi untuk kueri penelusuran yang relevan.
Artikel Terkait
