Panduan Lengkap Meta Tag Next.js 15 — Dari og:image hingga hreflang

Ringkasan Kunci

• Next.js 15 memungkinkan pengelolaan Metadata API untuk meta tag statis dan dinamis secara deklaratif.
• Fungsi generateMetadata() dapat secara otomatis menghasilkan og:image, title, dan description dinamis untuk setiap halaman.
• Pengaturan Twitter Card, hreflang, URL kanonik, dan data terstruktur (JSON-LD) dapat dikontrol dalam satu file.
• Meta tag yang salah dapat langsung menyebabkan kesalahan pratinjau sosial dan penurunan peringkat pencarian, jadi pastikan untuk memeriksa dengan alat pemeriksa meta tag sebelum distribusi.

Apa itu Metadata API Next.js 15?

App Router yang diperkenalkan sejak Next.js 13 menyediakan Metadata API yang menggantikan cara komponen . Di Next.js 15, API ini semakin canggih, memungkinkan pengendalian meta tag melalui dua cara: mengekspor objek metadata dari file layout.tsx dan page.tsx, atau menggunakan fungsi generateMetadata().

Metadata Statis

Bentuk paling sederhana adalah dengan mengekspor objek metadata secara langsung.

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Panduan Meta Tag Next.js 15',
  description: 'Segala hal tentang meta tag Next.js, dari og:image hingga hreflang',
}

Cara ini cocok untuk halaman statis di mana konten ditentukan pada saat build. Digunakan untuk halaman beranda blog atau halaman pengantar yang tidak sering berubah.

Metadata Dinamis: generateMetadata()

Untuk blog post atau halaman detail produk yang kontennya bervariasi tergantung parameter URL, gunakan fungsi generateMetadata().

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }
}

generateMetadata() dijalankan di server sehingga memungkinkan untuk melakukan query database atau panggilan API eksternal. Nilai yang dikembalikan adalah tipe Metadata yang secara otomatis disuntikkan oleh Next.js ke dalam tag .

Bagaimana cara mengatur og:image dengan benar?

Gambar Open Graph adalah gambar pratinjau yang muncul saat tautan dibagikan di platform sosial seperti KakaoTalk, Slack, dan Twitter. Jika diatur dengan salah, gambar kosong atau tata letak yang rusak dapat muncul, yang secara signifikan menurunkan rasio klik.

Pengaturan dasar og:image

export const metadata: Metadata = {
  openGraph: {
    title: 'Judul Halaman',
    description: 'Deskripsi Halaman',
    url: 'https://example.com/blog/my-post',
    siteName: 'Nama Situs',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'Gambar Utama Postingan',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

Pembuatan og:image dinamis di Next.js — ImageResponse

Next.js 15 mendukung kemampuan untuk merender gambar OG secara dinamis di server menggunakan ImageResponse dari next/og. Anda dapat mengontrol desain melalui kode tanpa perlu pengeditan gambar terpisah.

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Judul Default'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Kemudian, referensikan endpoint tersebut di generateMetadata().

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

Pengaturan Twitter Card

Twitter (sekarang X) menggunakan spesifikasi meta tag sendiri, tetapi Next.js Metadata API mengelolanya secara terintegrasi dengan kunci twitter.

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Judul Halaman',
    description: 'Deskripsi Halaman',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

Nilai card dapat dipilih dari summary, summary_large_image, app, player. Untuk blog post, summary_large_image adalah yang paling sesuai.

Cara Menyelesaikan SEO Multibahasa dengan hreflang

Tag hreflang adalah sinyal yang memberi tahu mesin pencari tentang versi bahasa dan wilayah dari konten yang sama. Jika situs Anda mengoperasikan versi dalam bahasa Korea dan Inggris, Anda harus mengaturnya. Jika pengaturan terlewat, Google dapat menganggap halaman berdasarkan bahasa sebagai konten duplikat dan memberikan kerugian dalam eksposur pencarian.

Pengaturan hreflang dengan alternates

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
  },
}

Next.js secara otomatis menghasilkan tag seperti di bawah ini berdasarkan pengaturan ini.

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

Pentingnya pengaturan URL kanonik

URL kanonik adalah tag yang memberi tahu mesin pencari bahwa "URL ini adalah yang asli" ketika konten yang sama atau mirip ada di beberapa URL. Jika terjadi URL duplikat karena paginasi, parameter UTM, atau perbedaan www, tanpa pengaturan kanonik, skor pencarian akan terdistribusi.

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

Gunakan jalur absolut dan pastikan konsistensi penggunaan HTTPS dan keberadaan www di seluruh situs.

Mendapatkan hasil kaya dengan data terstruktur (JSON-LD)

Data terstruktur memungkinkan hasil kaya yang menampilkan informasi tambahan seperti bintang, penulis, dan tanggal posting di hasil pencarian. Di Next.js,