> For the complete documentation index, see [llms.txt](https://book.hajoeun.dev/friendly-next-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://book.hajoeun.dev/friendly-next-js/part-3-next.js/undefined-3/undefined-1.md).

# 블로그 템플릿 살펴보기

블로그 템플릿에서 기본으로 제공하는 기능 중 일반적인 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 태그로 형식에 맞춰 값을 생성하고 있습니다. 블로그 게시글임을 명시해 검색 엔진에서 블로그 게시글을 찾길 원하는 사람에게 먼저 노출할 수 있도록 하고 있습니다.

```jsx
<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",
      },
    }),
  }}
/>

```