Cara Menambahkan Tag Meta di Nuxt.js

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.

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 memilikinya Node.js terpasang di perangkat Anda. Kemudian, buka terminal Anda dan jalankan perintah berikut:

npx buat-nuxt-aplikasi aplikasi saya

Ini akan membuat aplikasi Nuxt.js baru di direktori bernama my-app. Ikuti petunjuk untuk mengonfigurasi aplikasi Anda sesuai kebutuhan.

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:

modul.ekspor = {
 kepala: {
 judul: 'Aplikasi Saya',
 meta: [
 { charset: 'utf-8' },
 { nama: 'jarak pandang', isi: '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: