Tutorial SEO Metadata Next.js: generateMetadata sampai JSON-LD

export function buildCanonical(locale: SiteLocale, path = ""): string {
  const url = `${BASE_URL}/${locale}${path}`;
  return url.endsWith("/") ? url : `${url}/`;
}

export function buildLanguageAlternates(path = ""): Record<string, string> {
  return {
    en: buildCanonical("en", path),
    id: buildCanonical("id", path),
    "x-default": buildCanonical("en", path),
  };
}

Semua URL di situs ini dibangun di sini, dan tidak di tempat lain. buildCanonical selalu mengembalikan alamat absolut dengan garis miring di akhir, sesuai pengaturan trailingSlash situs. buildLanguageAlternates mengembalikan en, id, dan x-default, dan x-default menunjuk ke bahasa Inggris.

  return {
    // Absolute: post titles are written to sit inside Google's ~63-character
    // budget, and the root layout's "%s | Matthews Wong" template would add 16
    // more and truncate every one of them. That template used to be suppressed
    // by the plain-string title in blog/layout.tsx, which no longer sets one.
    title: { absolute: title },
    description,
    keywords: blog.keywords,
    alternates: {
      canonical,
      languages: buildLanguageAlternates(routePath),
    },

Metadata sebuah post. Canonical-nya adalah URL halaman itu sendiri dalam bahasanya sendiri, dan peta bahasa berasal dari helper yang sama. Title-nya absolute karena sudah ditulis agar muat sekitar 63 karakter; template di root akan menambah ekor merek dan memotongnya.

    title: {
      default: seo.title,
      // Kept as a safety net for any route that sets a plain-string title.
      // Every page with length-budgeted copy sets `title: { absolute }`, which
      // bypasses this so the brand tail is not appended twice.
      template: "%s | Matthews Wong",
    },

Root layout masih menyimpan template, tetapi komentarnya sendiri menyebutnya jaring pengaman. Konvensi situs ini adalah setiap halaman memakai title.absolute dengan ekor merek yang sudah termasuk, jadi template jarang terpakai.

    // Absolute: the title already carries the brand tail, so the root
    // layout's "%s | Matthews Wong" template would append a second one.
    title: { absolute: seo.title },

Layout ini hanya mengatur title absolute. Di Next.js 15.5.7, template yang diteruskan ke segmen anak berasal dari segmen terdekat yang mendeklarasikannya, jadi semua yang berada di bawah /education kehilangan template root. Halaman thesis di bawahnya menyebut hal ini di komentar dan mengatur title absolute sendiri.

        url: buildCanonical(locale, path),
        lastModified: routeLastModified[path],
        priority: route.priority,
        changeFrequency: route.changeFrequency,
        images: routeImages[path],
        videos: routeVideos[path]?.(locale),
        alternates: {
          languages: buildLanguageAlternates(path),
        },

Satu entri sitemap. URL, alternate bahasa, dan tanggal modifikasi terakhir semuanya berasal dari data, dan alternate memakai ulang helper dari lib/seo.ts, sehingga sitemap dan tag head tidak bisa berbeda. Google mengabaikan baris priority dan changeFrequency di sini; keduanya tidak berbahaya tetapi tidak bekerja.

const ALLOW = ["/", "/api/v1/"];
const DISALLOW = ["/private/", "/admin/", "/api/"];

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: "*", allow: ALLOW, disallow: DISALLOW },
      ...AI_CRAWLERS.map((userAgent) => ({
        userAgent,
        allow: ALLOW,
        disallow: DISALLOW,
      })),
    ],
    host: BASE_URL,
    sitemap: `${BASE_URL}/sitemap.xml`,
  };
}

robots.ts menyusun aturannya dari dua array bersama, sehingga crawler umum dan setiap crawler AI bernama mendapat kebijakan yang sama. Baris sitemap mengarahkan crawler ke satu daftar halaman yang nyata.

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

JSON-LD dari server component, seperti yang disarankan dokumentasi: tag script biasa yang diberi data polos. Yang akan saya ubah: dokumentasi membersihkan output dengan replace karakter kurang-dari, dan kode ini tidak. Datanya milik kita sendiri, tetapi kebiasaan itu hanya butuh satu pemanggilan.