블로그 SEO 실전 — 내부 링크, relatedPosts, 시리즈 네비게이션

// _meta.json — 각 글에 relatedPosts 설정
// 이미지 최적화 글
{
  "slug": "image-optimization-pagespeed-36mb-to-800kb",
  "relatedPosts": [
    "nextjs-pagespeed-optimization-38-to-88",  // 허브 글
    "lcp-optimization-motion-opacity-trap",     // LCP 글
    "nextjs-img-vs-image-pagespeed"             // img vs Image
  ]
}

// 허브 글에서도 역방향 연결
{
  "slug": "nextjs-pagespeed-optimization-38-to-88",
  "relatedPosts": [
    "image-optimization-pagespeed-36mb-to-800kb",
    "cls-zero-typewriter-animation-fix",
    "korean-webfont-pagespeed-render-blocking-css",
    "lcp-optimization-motion-opacity-trap"
  ]
}

// lib/blog.ts — 관련 글 조회 로직
export function getRelatedPosts(
  currentSlug: string,
  tags: string[],
  category: string,
  manualRelated: string[] = [],
  limit: number = 5
) {
  // 1순위: _meta.json에서 직접 지정한 글
  const manual = manualRelated
    .map(slug => getPost(slug))
    .filter(Boolean);

  // 2순위: 같은 태그를 가진 글 (자동)
  const byTag = getAllPosts()
    .filter(p => p.slug !== currentSlug)
    .filter(p => p.tags.some(t => tags.includes(t)))
    .sort((a, b) => /* 태그 겹침 수 내림차순 */);

  // 중복 제거 후 limit개 반환
  return [...manual, ...byTag]
    .filter(unique)
    .slice(0, limit);
}

// 시리즈 네비게이션 컴포넌트 예시
function SeriesNav({ currentSlug, series }) {
  const currentIndex = series.findIndex(
    s => s.slug === currentSlug
  );

  return (
    <div className="border rounded-xl p-4 my-8">
      <h3 className="font-bold mb-3">
        {series.title} ({currentIndex + 1}/{series.items.length})
      </h3>

      <div className="space-y-1">
        {series.items.map((item, idx) => (
          <Link
            key={item.slug}
            href={`/blog/${item.slug}`}
            className={idx === currentIndex
              ? "font-bold text-primary"
              : "text-muted-foreground hover:text-foreground"
            }
          >
            {idx + 1}편: {item.title}
          </Link>
        ))}
      </div>

      <div className="flex justify-between mt-4">
        {currentIndex > 0 && (
          <Link href={series.items[currentIndex - 1].slug}>
            ← 이전 편
          </Link>
        )}
        {currentIndex < series.items.length - 1 && (
          <Link href={series.items[currentIndex + 1].slug}>
            다음 편 →
          </Link>
        )}
      </div>
    </div>
  );
}

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

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

  const items = posts.map(post => `
    <item>
      <title>${escapeXml(post.title)}</title>
      <link>${baseUrl}/blog/${post.slug}</link>
      <description>${escapeXml(post.excerpt)}</description>
      <pubDate>${new Date(post.date).toUTCString()}</pubDate>
      <guid>${baseUrl}/blog/${post.slug}</guid>
      <category>${post.category}</category>
    </item>`).join("");

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Your Blog</title>
    <link>${baseUrl}/blog</link>
    <description>블로그 설명</description>
    <atom:link href="${baseUrl}/feed.xml"
      rel="self" type="application/rss+xml"/>
    ${items}
  </channel>
</rss>`;

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

// app/layout.tsx metadata에 추가
export const metadata = {
  alternates: {
    types: {
      "application/rss+xml": "/feed.xml",
    },
  },
};