2️블로그 템플릿 살펴보기

블로그 템플릿에서 기본으로 제공하는 기능 중 일반적인 Next.js 블로그에서 살펴보지 않았던 요소들을 살펴봅니다.

OpenGraph 이미지

라우트 핸들러(/og/route.tsx)와 ImageResponse를 조합해서 동적인 OpenGraph 이미지를 생성합니다. og 이미지라고 부르는 이 동적 이미지는 URL을 공유했을 때 미리보기 화면을 제공하는데 활용됩니다.

robots.ts

robots.txt 파일은 검색 엔진 최적화를 위해 필요합니다. 검색 엔진 최적화를 위한 크롤링에 필요한 규칙을 정의하는 파일입니다.

반면, 템플릿에서는 txt 파일이 아닌 ts 파일로 정의되고 있습니다. 이는 동적으로 Robots 객체를 생성해 robots.txt와 같은 역할을 하는 함수를 정의할 수 있는 파일입니다.

sitemap.ts

sitemap.xml 파일 역시 검색 엔진 최적화에 한 축을 담당합니다. 이름처럼 크롤링을 위한 지도를 제공합니다.

역시나 템플릿에서는 ts 파일로 정의하고 있습니다. 마찬가지로 동적으로 Sitemap 객체를 생성해 sitemap.xml과 같은 역할을 할 수 있는 함수를 정의하는 파일입니다.

RSS

웹 피드를 위한 XML 기반 형식입니다. 콘텐츠 배포와 구독에 사용됩니다. 이를 적용하면 사용자가 웹사이트를 직접 방문하지 않고도 새로운 콘텐츠를 쉽게 확인할 수 있습니다.

템플릿에서는 라우트 핸들러로 /rss 경로를 만들어 적용하고 있습니다. 빌드할 때마다 게시글을 모두 조회해 피드를 구성하고 있습니다.

JSON-LD

검색 엔진이 블로그의 컨텐츠를 잘 해석할 수 있도록 돕는 포맷입니다. /[slug]/page.tsx 경로에 script 태그로 형식에 맞춰 값을 생성하고 있습니다. 블로그 게시글임을 명시해 검색 엔진에서 블로그 게시글을 찾길 원하는 사람에게 먼저 노출할 수 있도록 하고 있습니다.

<script
  type="application/ld+json"
  suppressHydrationWarning
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      headline: post.metadata.title,
      datePublished: post.metadata.publishedAt,
      dateModified: post.metadata.publishedAt,
      description: post.metadata.summary,
      image: post.metadata.image
        ? `${baseUrl}${post.metadata.image}`
        : `/og?title=${encodeURIComponent(post.metadata.title)}`,
      url: `${baseUrl}/blog/${post.slug}`,
      author: {
        "@type": "Person",
        name: "My Portfolio",
      },
    }),
  }}
/>