SEO Teknis untuk Next.js: Checklist Lengkap yang Bikin Website Anda Rank di 2026

SEO Teknis Next.js: Dari Dasar Sampai Advanced

Banyak website bagus yang tidak pernah muncul di halaman pertama Google bukan karena kontennya jelek, tapi karena SEO teknisnya berantakan. Ini checklist lengkap yang kami terapkan di setiap project.

1. Metadata yang Benar di Next.js 16

// app/layout.tsx
import type { Metadata, Viewport } from "next"

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#2563eb",
}

export const metadata: Metadata = {
  metadataBase: new URL("https://digiupti.com"),
  title: {
    default: "Digital Uptime - Jasa Pembuatan Website & Aplikasi",
    template: "%s | Digital Uptime"
  },
  description: "Jasa pembuatan website profesional, aplikasi mobile, dan solusi digital untuk bisnis Indonesia.",
  openGraph: {
    type: "website",
    locale: "id_ID",
    url: "https://digiupti.com",
    siteName: "Digital Uptime",
    images: [{
      url: "/og-image.jpg",
      width: 1200,
      height: 630,
    }]
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1,
    }
  }
}

2. Metadata Dinamis untuk Blog

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  if (!post) return { title: "Artikel tidak ditemukan" }

  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://digiupti.com/blog/${slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.created_at,
      authors: [post.author_name],
      images: [{ url: post.cover_image || "/og-default.jpg", width: 1200, height: 630 }]
    }
  }
}

3. Sitemap Otomatis

// app/sitemap.ts
import { MetadataRoute } from "next"

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const supabase = await createClient()
  const { data: posts } = await supabase
    .from("blog_posts")
    .select("slug, updated_at")
    .eq("published", true)

  const blogUrls = (posts ?? []).map(post => ({
    url: `https://digiupti.com/blog/${post.slug}`,
    lastModified: new Date(post.updated_at),
    changeFrequency: "monthly" as const,
    priority: 0.7
  }))

  return [
    { url: "https://digiupti.com", lastModified: new Date(), changeFrequency: "weekly", priority: 1 },
    { url: "https://digiupti.com/blog", lastModified: new Date(), changeFrequency: "daily", priority: 0.9 },
    ...blogUrls
  ]
}

4. Schema Markup (JSON-LD)

export function ArticleSchema({ post }: { post: BlogPost }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": post.title,
    "description": post.excerpt,
    "author": {
      "@type": "Person",
      "name": post.author_name
    },
    "publisher": {
      "@type": "Organization",
      "name": "Digital Uptime",
      "logo": {
        "@type": "ImageObject",
        "url": "https://digiupti.com/logo.png"
      }
    },
    "datePublished": post.created_at,
    "dateModified": post.updated_at,
  }

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

5. Checklist SEO Teknis Lengkap

On-page:

• Title tag unik, 50-60 karakter
• Meta description unik, 150-160 karakter
• H1 satu per halaman, mengandung keyword utama
• Alt text pada semua gambar
• Internal linking yang relevan

Teknis:

• Sitemap.xml terdaftar di Google Search Console
• robots.txt tidak blokir halaman penting
• Canonical URL di semua halaman
• HTTPS aktif dengan sertifikat valid
• Core Web Vitals lulus (LCP < 2.5s, CLS < 0.1, INP < 200ms)

Structured data:

• Organization schema di homepage
• Article schema di halaman blog
• FAQ schema jika ada FAQ

Cek implementasi SEO website Anda? Kami menyediakan audit SEO gratis untuk website bisnis.