useSeo di Nuxt.js: Optimasi SEO untuk Aplikasi Modern

Updated: Agustus 2025 • Topik: SEO di Nuxt.js • Framework: Nuxt 3

Daftar Isi

• Apa itu useSeo di Nuxt.js?
• Mengapa SEO Penting di Aplikasi Nuxt?
• Instalasi & Persiapan useSeo
• Cara Menggunakan useSeo
• Contoh Implementasi useSeo
• Best Practice SEO di Nuxt.js
• Kesimpulan
• FAQ seputar useSeo di Nuxt

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:

<script setup lang="ts">
useSeo({
  title: 'Halaman Utama',
  description: 'Contoh meta description dengan useSeo di Nuxt 3'
})
</script>

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.ts
export default defineNuxtConfig({
  modules: ['nuxt-seo-kit']
})

b) @nuxtjs/schema-org – untuk structured data JSON-LD

npm install @nuxtjs/schema-org

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/schema-org']
})

Cara Menggunakan useSeo

Langkah sederhana penggunaan useSeo:

1. Import composable (sudah otomatis tersedia di Nuxt 3).
2. Panggil useSeo di dalam <script setup>.
3. Definisikan meta sesuai konten halaman.

Contoh Implementasi useSeo

<script setup lang="ts">
const route = useRoute()

useSeo({
  title: `Blog - ${route.params.slug}`,
  description: 'Panduan SEO di Nuxt 3 menggunakan useSeo composable.',
  ogTitle: `Blog - ${route.params.slug}`,
  ogDescription: 'Belajar mengatur meta tag di Nuxt dengan mudah.',
  ogImage: '/images/blog-cover.jpg',
  twitterCard: 'summary_large_image'
})
</script>

Best Practice SEO di Nuxt.js

• Gunakan title unik untuk setiap halaman.
• Buat meta description ≤160 karakter.
• Sediakan og:image berukuran 1200×630 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 seputar useSeo di Nuxt