SEO 최적화: 검색 결과에 잘 보이는 블로그 만들기

// src/app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://www.seung-woo.me"),
  title: {
    default: "Seungwoo Lee",
    template: "%s — Seungwoo Lee",
  },
  description: "개발, 여행, 일상 — 기록하고 싶은 모든 것을 담는 블로그",
  robots: {
    index: true,
    follow: true,
  },
  alternates: {
    canonical: "/",
  },
};

// src/app/layout.tsx
export const metadata: Metadata = {
  // ...
  openGraph: {
    type: "website",
    locale: "ko_KR",
    siteName: "Seungwoo Lee",
    images: [{ url: "/og-default.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    images: ["/og-default.png"],
  },
};

// src/app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  const ogImg = post.ogImage || post.thumbnail || "/og-default.png";
 
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      publishedTime: post.date,
      modifiedTime: post.updated,
      tags: post.tags,
      images: [{ url: ogImg, width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
      images: [ogImg],
    },
    alternates: {
      canonical: `/blog/${slug}`,
    },
  };
}

// src/app/admin/layout.tsx
export const metadata: Metadata = {
  title: "Admin",
  robots: { index: false, follow: false },
};
 
// src/app/not-found.tsx
export const metadata: Metadata = {
  title: "404",
  robots: { index: false, follow: true },
};

// src/app/layout.tsx
<script type="application/ld+json" dangerouslySetInnerHTML={{
  __html: JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "Seungwoo Lee",
    url: "https://www.seung-woo.me",
    description: "개발, 여행, 일상 — 기록하고 싶은 모든 것을 담는 블로그",
    inLanguage: "ko-KR",
    author: {
      "@type": "Person",
      name: "이승우",
      url: "https://www.seung-woo.me/about",
    },
  }),
}} />

// src/app/blog/[slug]/page.tsx
const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: post.title,
  description: post.description,
  image: [imageUrl],
  datePublished: post.date,
  dateModified: post.updated,
  inLanguage: "ko-KR",
  isAccessibleForFree: true,
  ...(post.tags.length > 0 && { keywords: post.tags.join(", ") }),
  author: {
    "@type": "Person",
    name: "이승우",
    url: `${siteUrl}/about`,
  },
  mainEntityOfPage: {
    "@type": "WebPage",
    "@id": postUrl,
  },
};

...(post.series && {
  isPartOf: {
    "@type": "CreativeWorkSeries",
    name: post.series,
  },
}),

// src/app/about/page.tsx
const personJsonLd = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "이승우",
  jobTitle: "Frontend Engineer",
  sameAs: [
    "https://github.com/starhn87",
    "https://www.linkedin.com/in/seungwoo-lee-279897257/",
  ],
  knowsAbout: ["Frontend Development", "React", "Next.js", "TypeScript"],
};

// src/app/sitemap.ts
export default function sitemap(): MetadataRoute.Sitemap {
  const posts = getAllPosts();
 
  const postEntries = posts.map((post) => ({
    url: `${BASE_URL}/blog/${post.slug}`,
    lastModified: new Date(post.updated),
    images: post.thumbnail ? [post.thumbnail] : undefined,
  }));
 
  return [
    { url: BASE_URL, lastModified: new Date() },
    { url: `${BASE_URL}/blog`, lastModified: new Date() },
    { url: `${BASE_URL}/about`, lastModified: new Date() },
    ...postEntries,
  ];
}

// src/app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/admin/",
    },
    sitemap: "https://www.seung-woo.me/sitemap.xml",
  };
}

// src/app/feed.xml/route.ts
export const dynamic = "force-static";
 
export function GET() {
  const posts = getAllPosts();
 
  const items = posts.map((post) => {
    const url = `${SITE_URL}/blog/${post.slug}`;
    return `<item>
      <title>${escapeXml(post.title)}</title>
      <link>${url}</link>
      <guid isPermaLink="true">${url}</guid>
      <description>${escapeXml(post.description)}</description>
      <pubDate>${new Date(post.date).toUTCString()}</pubDate>
      ${post.tags.map((t) => `<category>${escapeXml(t)}</category>`).join("\n")}
    </item>`;
  }).join("\n");
 
  // RSS 2.0 XML 반환
}

// 블로그 포스트 페이지
<article>
  <header>
    <h1>{post.title}</h1>    {/* 페이지당 하나 */}
    <time dateTime={post.date}>...</time>
  </header>
  {/* MDX 본문의 ##은 h2, ###은 h3으로 렌더링 */}
</article>

// PostCard 컴포넌트
<article>
  <time dateTime={post.date}>
    {new Date(post.date).toLocaleDateString("ko-KR")}
  </time>
  <h2>{post.title}</h2>
</article>

<html lang="ko">

// scripts/check-mdx-alt.ts
// 마크다운 이미지: ![alt](src) 에서 alt가 비어있으면 에러
// JSX 이미지: <Img />, <ImageZoom /> 에서 alt가 없거나 비어있으면 에러
// 코드 블록 내 이미지는 검사에서 제외

// src/app/layout.tsx
<a href="#main" className="sr-only focus:not-sr-only ...">
  메인 콘텐츠로 이동
</a>
<main id="main">...</main>

// 모든 버튼에 type 명시
<button type="button" onClick={toggle}>...</button>

<button aria-label="검색 초기화">
  <X size={16} />
</button>
 
<a href="https://github.com/..." aria-label="GitHub" rel="noopener noreferrer">
  <Github size={20} />
</a>

title: "Cloudflare Vectorize + Workers AI로 시맨틱 검색 만들기"
description: "클라이언트 검색의 한계를 느끼고 Cloudflare Workers AI + Vectorize로 전환한 과정이에요."

// src/app/blog/[slug]/page.tsx
export function generateStaticParams() {
  return getAllPosts().map((post) => ({ slug: post.slug }));
}

// src/app/layout.tsx
verification: {
  google: "{인증 코드}",
},

verification: {
  other: {
    "naver-site-verification": "{인증 코드}",
  },
},