Nuxt 4 SEO dan Meta Tags 2026: Panduan Lengkap useHead, useSeoMeta untuk Wawancara

Nuxt 4 menyediakan dua composable untuk mengelola meta tags SEO: useHead untuk elemen head umum dan useSeoMeta untuk metadata SEO dengan dukungan TypeScript. Dengan Nuxt 3 mencapai akhir masa dukungan pada 31 Juli 2026, pemahaman mendalam tentang composable ini di Nuxt 4.5 sangat penting bagi setiap developer Vue yang mempersiapkan diri untuk wawancara teknis.

useSeoMeta: Metadata SEO dengan Type-Safety di Nuxt 4

Composable useSeoMeta menerima objek datar dengan lebih dari 100 properti yang sudah di-type. Pendekatan ini menghilangkan kesalahan umum seperti kebingungan antara atribut name dengan property pada tag Open Graph.

<!-- pages/product/[id].vue -->
<script setup lang="ts">
const product = await useFetch(`/api/products/${route.params.id}`)

useSeoMeta({
  title: () => product.data.value?.name,
  description: () => product.data.value?.description,
  ogTitle: () => product.data.value?.name,
  ogDescription: () => product.data.value?.description,
  ogImage: () => product.data.value?.imageUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image',
  twitterTitle: () => product.data.value?.name,
  twitterDescription: () => product.data.value?.description,
  twitterImage: () => product.data.value?.imageUrl,
})
</script>

Sintaks arrow function () => value membuat getter yang reaktif. Ketika product.data berubah, meta tags akan diperbarui secara otomatis. Untuk halaman statis di mana tag SEO tidak pernah berubah setelah render awal, reaktivitas ini menambahkan overhead yang tidak perlu.

Meta Tags Server-Only untuk Performa Lebih Baik

Crawler mesin pencari dan bot AI seperti GPTBot dan ClaudeBot hanya membaca respons HTML awal. Mereka tidak mengeksekusi JavaScript. Ini berarti pembaruan meta tag di sisi klien tidak terlihat oleh mereka.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Tentang SharpSkill',
    description: 'Platform persiapan wawancara teknis untuk developer',
    ogTitle: 'Tentang SharpSkill',
    ogDescription: 'Platform persiapan wawancara teknis untuk developer',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Membungkus useSeoMeta dalam import.meta.server memastikan composable hanya berjalan selama SSR. Meta tags muncul di HTML yang dikirim ke crawler, tetapi tidak ada reactive watcher yang dibuat di klien. Ini mengurangi ukuran bundle dan meningkatkan performa hydration.

useHead untuk Scripts, Links, dan Canonical URLs

Sementara useSeoMeta mencakup metadata SEO, useHead menangani semua hal lainnya: external scripts, stylesheets, canonical URLs, dan atribut HTML/body.

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

useHead({
  link: [
    {
      rel: 'canonical',
      href: `${config.public.siteUrl}/blog/${route.params.slug}`,
    },
    {
      rel: 'alternate',
      hreflang: 'id',
      href: `${config.public.siteUrl}/id/blog/${route.params.slug}`,
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        author: { '@type': 'Person', name: 'Anthony Fillion-Maillet' },
        datePublished: article.value?.publishedAt,
      }),
    },
  ],
})
</script>

Array link menangani canonical URLs dan tag hreflang untuk internasionalisasi. Array script menyuntikkan structured data untuk hasil pencarian yang kaya. Keduanya sangat penting untuk SEO tetapi berada di luar cakupan useSeoMeta.

Hierarki Meta Tag: Level App, Layout, dan Page

Nuxt 4 menggabungkan meta tags dari tiga level: nuxt.config.ts (default seluruh aplikasi), layouts, dan pages. Tag level halaman menimpa tag level layout, yang menimpa tag level aplikasi.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s | SharpSkill',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

<!-- layouts/default.vue -->
<script setup lang="ts">
useSeoMeta({
  ogSiteName: 'SharpSkill',
  twitterSite: '@sharpskill',
})
</script>

<!-- pages/index.vue -->
<script setup lang="ts">
useSeoMeta({
  title: 'Persiapan Wawancara Teknis',
  description: 'Persiapkan diri untuk wawancara teknis berikutnya dengan latihan soal dan mock interview',
})
</script>

Judul akhir yang dirender menjadi "Persiapan Wawancara Teknis | SharpSkill" karena halaman menyediakan nilai placeholder %s dan config menyediakan template. Hierarki ini menghindari pengulangan sambil tetap memungkinkan override spesifik per halaman.

Pertanyaan Wawancara SEO Nuxt yang Umum

Wawancara teknis untuk posisi Vue/Nuxt sering menyertakan pertanyaan tentang SSR dan optimasi SEO. Berikut adalah pola yang diharapkan pewawancara.

Kapan useSeoMeta harus menggunakan reactive getter versus nilai statis?

Nilai statis cocok untuk halaman dengan konten tetap: landing pages, halaman about, halaman legal. Reactive getter diperlukan ketika meta tags bergantung pada data yang di-fetch atau parameter route. Perbedaan performa penting dalam skala besar: 50 halaman dengan watcher yang tidak perlu membuang memori dan memperlambat hydration.

Bagaimana perbedaan AI crawler dengan Googlebot?

Googlebot mengeksekusi JavaScript dan menunggu client-side rendering. AI crawler seperti GPTBot dan ClaudeBot mengambil HTML mentah tanpa mengeksekusi script. Meta tags yang di-render di server menjangkau keduanya. Meta tags client-only tidak menjangkau bot AI maupun mesin pencari lama.

Apa yang paling sering merusak tag Open Graph?

Dimensi og:image yang hilang. Facebook dan LinkedIn meng-cache data OG secara agresif. Ketika dimensi gambar hilang, platform mungkin menampilkan thumbnail dengan tidak benar atau tidak sama sekali.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Preview artikel menampilkan editor kode dengan sintaks Vue',
})
</script>

Menyertakan ogImageWidth, ogImageHeight, dan ogImageAlt mencegah masalah rendering dan meningkatkan skor aksesibilitas.

useHeadSafe untuk User-Generated Content

Ketika meta tags menyertakan input pengguna, kerentanan XSS menjadi perhatian. Composable useHeadSafe membersihkan nilai sebelum injection.

<!-- pages/profile/[username].vue -->
<script setup lang="ts">
const user = await useFetch(`/api/users/${route.params.username}`)

useHeadSafe({
  title: user.data.value?.displayName,
  meta: [
    { name: 'description', content: user.data.value?.bio },
  ],
})
</script>

Username berbahaya seperti <script>alert('xss')</script> akan di-escape daripada dieksekusi. useHead standar tidak melakukan sanitasi, jadi useHeadSafe wajib untuk konten yang tidak dipercaya.

Modul Nuxt SEO untuk Kebutuhan Lanjutan

Modul Nuxt SEO menggabungkan sitemap generation, manajemen robots.txt, markup schema.org, dan OG image generation. Untuk proyek yang membutuhkan tooling SEO komprehensif di luar composable bawaan, modul ini mengurangi boilerplate.

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://sharpskill.dev',
    name: 'SharpSkill',
  },
})

Modul ini auto-generate sitemap dari routes, menangani normalisasi trailing slash, dan menyediakan composable untuk structured data. Tim yang memelihara situs besar mendapat manfaat dari konfigurasi terpusat.

Best Practices SEO Nuxt 4 untuk Produksi

• Gunakan useSeoMeta untuk semua tag SEO (title, description, Open Graph, Twitter Cards) dengan autocompletion TypeScript
• Gunakan useHead untuk canonical URLs, tag hreflang, structured data, dan external scripts
• Bungkus meta tags statis dalam import.meta.server untuk menghilangkan overhead reaktivitas di sisi klien
• Sertakan ogImageWidth, ogImageHeight, dan ogImageAlt untuk preview berbagi sosial
• Gunakan useHeadSafe untuk konten yang dibuat pengguna untuk mencegah serangan XSS
• Tetapkan default level aplikasi di nuxt.config.ts dan override di level halaman hanya jika diperlukan
• Uji dengan Google Rich Results Test untuk memvalidasi structured data
• Verifikasi rendering di tab Network DevTools browser dengan JavaScript dinonaktifkan untuk mensimulasikan perilaku crawler