SEO Next.js #2: Optimasi Metadata dan Structured Data

Sebelumnya saya sudah membuat artikel SEO Next.js Crawling dan Indexing

Selanjutnya berfokus pada optimasi halaman website agar lebih mudah dipahami oleh Google dan terlihat lebih baik saat dibagikan ke media sosial.

1. Metadata halaman

Metadata berisi informasi dasar tentang sebuah halaman, seperti judul dan deskripsi.

Contohnya:

Judul halaman About
Deskripsi halaman Blog
Judul artikel
Deskripsi singkat artikel

Metadata membantu Google memahami isi halaman sebelum menampilkannya di hasil pencarian.

Konfigurasi SEO dikumpulkan di misal:

configs/seo.ts

Contoh metadata dasar di halaman Next.js:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About — Erlangga Hidayatullah',
  description: 'Tentang Erlangga Hidayatullah, software engineer dari Indonesia.',
};

Metadata yang digunakan bersama beberapa halaman sebaiknya disimpan di configs/seo.ts, kemudian diimpor ke file halaman agar lebih mudah dirawat tapi ini opsional.

2. Canonical URL

Canonical URL memberi tahu Google alamat utama dari sebuah halaman.

Contoh canonical URL:

https://erlanggaht.com/blog

Di Next.js, canonical ditulis menggunakan alternates:

export const metadata: Metadata = {
  title: 'Blog — Erlangga Hidayatullah',
  alternates: {
    canonical: '/blog',
  },
};

Untuk artikel dinamis:

alternates: {
  canonical: `/blog/${article.slug}`,
},

Hal ini membantu mencegah Google menganggap beberapa URL sebagai halaman duplikat.

3. Open Graph

Open Graph mengatur tampilan link ketika dibagikan ke Facebook, WhatsApp, dan aplikasi lainnya.

Informasi yang digunakan meliputi:

Judul
Deskripsi
Gambar preview
URL halaman

Website menggunakan fallback image berikut:

public/images/og-image.png

Lokasi gambar dan konfigurasi fallback:

export const OG_IMAGE = '/images/og-image.png';

Contoh Open Graph:

openGraph: {
  type: 'website',
  title: 'Erlangga Hidayatullah — Software Engineer',
  description: 'Website personal dan portofolio Erlanggaht.',
  images: [{
    url: OG_IMAGE,
    alt: 'Erlanggaht — Software Engineer',
  }],
},

Jika artikel memiliki cover image, gambar tersebut digunakan sebagai preview. Jika tidak, website menggunakan fallback image.

4. Twitter Card

Twitter Card memiliki fungsi yang sama seperti Open Graph, tetapi digunakan untuk mengatur tampilan link di X/Twitter.

Website menggunakan tipe:

summary_large_image

Dengan begitu, link dapat menampilkan gambar preview yang lebih besar.

5. Structured Data atau JSON-LD

JSON-LD adalah data terstruktur yang membantu Google memahami jenis dan isi halaman.

Schema yang digunakan:

WebSite untuk halaman Home
ProfilePage untuk halaman About
Person untuk identitas Erlangga Hidayatullah
Article untuk setiap artikel Blog

JSON-LD tidak mengubah tampilan website. Data ini hanya dibaca oleh mesin pencari.

Contoh JSON-LD untuk halaman Home:

const websiteSchema = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Erlanggaht',
  url: 'https://erlanggaht.com',
};

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }}
/>

Contoh schema untuk artikel:

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: article.title,
  author: { '@type': 'Person', name: article.author },
  datePublished: new Date(article.createdAt).toISOString(),
  mainEntityOfPage: `https://erlanggaht.com/blog/${article.slug}`,
};

6. Optimasi slug artikel

Slug adalah bagian URL setelah /blog/.

Contoh slug yang baik:

/blog/belajar-nextjs

Slug dibuat dari judul artikel menggunakan huruf kecil dan tanda hubung.

Slug artikel lama dipertahankan ketika judul artikel diedit. Cara ini menjaga URL yang sudah dibaca Google agar tidak berubah dan menghasilkan broken link.

7. Internal linking

Internal linking adalah link yang menghubungkan satu halaman website dengan halaman lain di website yang sama.

Contohnya:

Home menuju About
Home menuju Work
Home menuju Blog
Artikel menuju artikel lain
Artikel menuju halaman Work

Internal linking membantu pengunjung menemukan konten lain dan membantu Google memahami hubungan antarhalaman.

8. Alt text gambar

Setiap gambar perlu memiliki atribut alt yang menjelaskan isi gambar.

Contoh:

<Image src="/images/og-image.png" alt="Erlanggaht Software Engineer" />

Alt text membantu aksesibilitas dan membantu Google memahami gambar.

9. Validasi SEO

Setelah website di-deploy, halaman dapat diperiksa menggunakan Google Rich Results Test.

Pengujian dilakukan setelah deploy agar Google membaca HTML terbaru dari domain publik.

Halaman yang perlu diuji:

https://erlanggaht.com/
https://erlanggaht.com/about
https://erlanggaht.com/blog
https://erlanggaht.com/blog/slug-artikel

Jika ada perubahan SEO, lakukan deploy terlebih dahulu sebelum melakukan pengujian ulang.

Kesimpulan

Artikel ini membuat website Erlanggaht memiliki struktur SEO yang lebih rapi, metadata yang lebih lengkap, preview link yang lebih baik, dan informasi terstruktur untuk Google.