Optimasi SEO untuk Website Next.js: Panduan Lengkap

SEO (Search Engine Optimization) adalah kunci agar website Anda ditemukan di Google. Next.js menyediakan banyak fitur built-in untuk optimasi SEO.

Kenapa SEO Penting?

93% pencarian online dimulai dari search engine
75% user tidak pernah scroll ke halaman 2 Google
Organic traffic gratis vs paid advertising

Metadata di Next.js

Static Metadata

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

export const metadata: Metadata = {
  title: 'Judul Halaman | Nama Website',
  description: 'Deskripsi halaman yang muncul di Google (max 160 karakter)',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
};

Dynamic Metadata

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.image],
    },
  };
}

Open Graph & Twitter Cards

Untuk tampilan yang bagus saat di-share di social media:

export const metadata: Metadata = {
  openGraph: {
    title: 'Judul OG',
    description: 'Deskripsi untuk social media',
    url: 'https://website.com/halaman',
    siteName: 'Nama Website',
    images: [
      {
        url: 'https://website.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Deskripsi gambar',
      },
    ],
    locale: 'id_ID',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Judul Twitter',
    description: 'Deskripsi Twitter',
    images: ['https://website.com/twitter-image.png'],
  },
};

Structured Data (JSON-LD)

Structured data membantu Google memahami konten Anda:

Organization Schema

// app/layout.tsx
export default function RootLayout({ children }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'Metro New Technology',
    url: 'https://metronewtech.site',
    logo: 'https://metronewtech.site/logo.png',
    sameAs: [
      'https://github.com/miawwmiaww',
    ],
  };

  return (
    <html>
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Article Schema (untuk Blog)

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  description: post.description,
  image: post.image,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  author: {
    '@type': 'Person',
    name: post.author,
  },
};

BreadcrumbList Schema

const breadcrumbSchema = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    {
      '@type': 'ListItem',
      position: 1,
      name: 'Home',
      item: 'https://website.com',
    },
    {
      '@type': 'ListItem',
      position: 2,
      name: 'Blog',
      item: 'https://website.com/blog',
    },
    {
      '@type': 'ListItem',
      position: 3,
      name: post.title,
      item: `https://website.com/blog/${post.slug}`,
    },
  ],
};

Sitemap

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  
  const blogUrls = posts.map((post) => ({
    url: `https://website.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'monthly' as const,
    priority: 0.8,
  }));

  return [
    {
      url: 'https://website.com',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
    },
    ...blogUrls,
  ];
}

Robots.txt

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/admin/'],
    },
    sitemap: 'https://website.com/sitemap.xml',
  };
}

Performance Optimization

Image Optimization

import Image from 'next/image';

// ✅ Gunakan next/image
<Image
  src="/hero.jpg"
  alt="Deskripsi gambar yang SEO-friendly"
  width={1200}
  height={630}
  priority // untuk above-the-fold images
/>

Core Web Vitals

| Metric | Target | Cara Optimize | |--------|--------|---------------| | LCP | < 2.5s | Optimize images, preload fonts | | FID | < 100ms | Minimize JS, code splitting | | CLS | < 0.1 | Set image dimensions, avoid dynamic content |

Technical SEO Checklist

[ ] HTTPS enabled
[ ] Mobile responsive
[ ] Fast loading (< 3 seconds)
[ ] Proper heading structure (H1, H2, H3)
[ ] Alt text untuk semua images
[ ] Internal linking
[ ] External links ke sumber terpercaya
[ ] Canonical URLs
[ ] 404 page yang proper
[ ] Sitemap submitted ke Google Search Console

Submit ke Google Search Console

Buka Google Search Console
Add property (website Anda)
Verify ownership
Submit sitemap (https://website.com/sitemap.xml)
Request indexing untuk halaman penting

Kesimpulan

SEO adalah kombinasi dari:

Technical SEO - Metadata, structured data, performance
Content SEO - Konten berkualitas, keywords relevan
Off-page SEO - Backlinks, social signals

Next.js memberikan tools yang powerful untuk technical SEO. Kombinasikan dengan konten berkualitas dan Anda akan melihat peningkatan traffic organic.

Optimasi SEO adalah proses ongoing. Monitor performa di Google Search Console dan terus improve!