Updated: Agustus 2025 • Topik: SEO di Nuxt.js • Framework: Nuxt 3
Daftar Isi
Apa itu useSeo di Nuxt.js?
useSeo
adalah composable bawaan Nuxt 3 untuk mengatur meta tag di setiap halaman. Dengan useSeo
, developer bisa mendefinisikan title, description, Open Graph, dan Twitter Card langsung di dalam script setup tanpa konfigurasi manual.
Mengapa SEO Penting di Aplikasi Nuxt?
Aplikasi Nuxt biasanya digunakan untuk SPA (Single Page Application) atau SSR (Server Side Rendering). Agar website mudah ditemukan Google, setiap halaman harus memiliki meta tag yang relevan dan unik. Dengan SEO yang baik:
Website lebih mudah terindeks di Google.
CTR (Click Through Rate) meningkat karena title & description menarik.
Tampilan share di sosial media jadi lebih profesional.
Instalasi & Persiapan useSeo
1. Gunakan useSeo langsung di Nuxt 3
Tidak perlu instalasi tambahan, cukup pastikan project sudah dibuat dengan Nuxt 3:
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
Kemudian, di dalam halaman gunakan useSeo
:
<
2. Instalasi modul pendukung (opsional)
Untuk fitur SEO lebih lanjut, bisa menambahkan modul tambahan:
a) nuxt-seo-kit – optimasi SEO otomatis
npm install nuxt-seo-kit
// nuxt.config.tsexport default defineNuxtConfig({
b) @nuxtjs/schema-org – untuk structured data JSON-LD
npm
// nuxt.config.tsexport default defineNuxtConfig({
Cara Menggunakan useSeo
Langkah sederhana penggunaan useSeo
:
Import composable (sudah otomatis tersedia di Nuxt 3).
Panggil
useSeo
di dalam<script setup>
.Definisikan meta sesuai konten halaman.
Contoh Implementasi useSeo
<script setup lang=
Best Practice SEO di Nuxt.js
Gunakan title unik untuk setiap halaman.
Buat meta description ≤160 karakter.
Sediakan og:image berukuran 1200x630 px untuk social preview.
Perhatikan struktur heading (H1, H2, H3).
Aktifkan sitemap & robots.txt agar Google lebih cepat indexing.
Kesimpulan
useSeo
mempermudah developer Nuxt dalam mengatur SEO dasar setiap halaman. Untuk kebutuhan lanjutan, bisa dipadukan dengan modul seperti nuxt-seo-kit
atau @nuxtjs/schema-org
. Dengan SEO yang baik, aplikasi Nuxt tidak hanya cepat tapi juga mudah ditemukan mesin pencari.
FAQ
Apa fungsi utama useSeo?
Untuk mengatur meta title, description, Open Graph, dan Twitter Card di setiap halaman Nuxt.
Apakah useSeo perlu instalasi tambahan?
Tidak. Secara default sudah ada di Nuxt 3. Modul tambahan hanya opsional, untuk fitur JSON-LD
Apakah useSEO bisa dipakai di Nuxt 2?
Tidak, di Nuxt 2 gunakan head()
.
Bagaimana menambahkan JSON-LD?
Install modul @nuxtjs/schema-org
agar structured data otomatis dibuat.
Apakah useSEO cukup untuk ranking di Google?
useSeo membantu meta tag, tapi SEO penuh juga butuh konten berkualitas, kecepatan website, dan backlink.