Next.js SEO 100점 만들기 — 메타데이터, sitemap, robots.txt

// app/blog/[slug]/layout.tsx
import type { Metadata } from "next";

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = getPost(params.slug);

  return {
    title: post.metaTitle,           // 60자 이내 권장
    description: post.metaDescription, // 155자 이내 권장
    keywords: post.tags,
    authors: [{ name: post.author }],

    // ⭐ canonical URL — 중복 인덱싱 방지
    alternates: {
      canonical: `/blog/${post.slug}`,
    },

    // Open Graph — SNS 공유 시 표시
    openGraph: {
      title: post.metaTitle,
      description: post.metaDescription,
      url: `https://example.com/blog/${post.slug}`,
      type: "article",
      images: [{
        url: "https://example.com/opengraph-image",
        width: 1200, height: 630,
        alt: post.title,
      }],
    },

    // Twitter Card
    twitter: {
      card: "summary_large_image",
      title: post.metaTitle,
      description: post.metaDescription,
    },
  };
}

// app/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function Image() {
  return new ImageResponse(
    (
      <div style={{
        display: "flex",
        width: "100%",
        height: "100%",
        background: "linear-gradient(135deg, #1a1a2e, #16213e)",
        color: "white",
        alignItems: "center",
        justifyContent: "center",
        fontSize: 60,
        fontWeight: 700,
      }}>
        Your Site Name
      </div>
    ),
    { ...size }
  );
}

// app/sitemap.xml/route.ts
import { getAllPosts } from "@/lib/blog";

export async function GET() {
  const posts = getAllPosts();
  const baseUrl = "https://example.com";

  const staticPages = [
    { url: "/", lastmod: new Date().toISOString(), priority: 1.0 },
    { url: "/blog", lastmod: new Date().toISOString(), priority: 0.8 },
    { url: "/services/web", priority: 0.8 },
    { url: "/support", priority: 0.5 },
  ];

  const blogPages = posts.map(post => ({
    url: `/blog/${post.slug}`,
    lastmod: post.date,
    priority: 0.7,
  }));

  const pages = [...staticPages, ...blogPages];

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(p => `  <url>
    <loc>${baseUrl}${p.url}</loc>
    ${p.lastmod ? `<lastmod>${p.lastmod}</lastmod>` : ""}
    <priority>${p.priority || 0.5}</priority>
  </url>`).join("\n")}
</urlset>`;

  return new Response(xml, {
    headers: { "Content-Type": "application/xml" },
  });
}

// app/robots.txt/route.ts
export function GET() {
  const content = `User-agent: *
Allow: /
Disallow: /admin
Disallow: /api/
Disallow: /auth/

Sitemap: https://example.com/sitemap.xml`;

  return new Response(content, {
    headers: { "Content-Type": "text/plain" },
  });
}

// components/blog/BlogJsonLd.tsx
export function BlogJsonLd({ post }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.title,
    description: post.excerpt,
    datePublished: post.date,
    author: {
      "@type": "Person",
      name: post.author,
    },
    publisher: {
      "@type": "Organization",
      name: "Treeru",
      url: "https://example.com",
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": `https://example.com/blog/${post.slug}`,
    },
  };

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

// IndexNow API 호출
// Bing, Yandex, Naver(일부)에서 지원

const response = await fetch(
  "https://api.indexnow.org/indexnow", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      host: "example.com",
      key: "your-indexnow-key",
      urlList: [
        "https://example.com/blog/new-post",
        "https://example.com/blog/updated-post",
      ],
    }),
  }
);

// 200 OK → 제출 성공
// 키 파일을 example.com/your-key.txt에 배치 필요