1. Metadata 활용

정적 메타데이터

layout.tsx

export const metadata: Metadata = {
  title: 'cheolung\'s blog',
  description: '개봘 관련 이야기를 나누는 블로그입니다.',
};

layout.tsx or page.tsx에 정의

동적 메타 데이터

/app/posts/[..slug]/page.tsx

// ...
import { Metadata } from 'next';
 
// seo
export const generateMetadata = ({params}): Metadata => {
  const post = allPosts.find(
    (p) => p._raw.flattenedPath === params.slug.join('/')
  );
  return { 
    title: post.title,
    category: post.category,
    description: post.description,
    openGraph: {
      images: [{
        url: post.thumbnail,
      }]
    }
  }
}
 
// ...

동적 값이 필요한 메타데이터의 경우 generateMetadata 함수를 활용한다.
블로그 게시물 상세페이지에 활용하였다.
title : 사용자가 검색 결과에서 웹사이트를 입력하기 위해 클릭할 때 표시되는 내용
description : 제목에 있는 정보 보완, 구글에 따르면 해당 요소는 순위 지정 목적으로 고려되지 않지만 검색 결과에 대한 클릭률에 영향을 미칠 수 있다고 한다.
openGraph : 웹 사이트가 소셜 미디어에 공유될 때 미리보기에 사용되는 메타 데이터를 정의

ex) 카카오톡으로 공유를 할 때 페이지의 미리보기가 카드 형식 처럼 표시된다.
페이지를 들어가보면 메타 태그가 생성된 것을 확인해볼 수 있다.

2. sitemap

관련 공식문서 내용

검색엔진 크롤러가 사이트를 보다 효율적으로 색인화 할 수 있게 해준다.

/app/sitemap.ts

import { allPosts } from 'contentlayer/generated';
import { MetadataRoute } from 'next';
 
const postSiteMap: MetadataRoute.Sitemap = allPosts.map((post) => {
  return {
    url: `https://cheolung.dev/posts/${post._raw.flattenedPath}`,
    lastModified: new Date(),
    changeFrequency: 'daily',
    priority: 1,
  };
});
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://cheolung.dev',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: 'https://cheolung.dev/posts',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.9,
    },
    {
      url: 'https://cheolung.dev/algorithm',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.5,
    },
    ...postSiteMap,
  ];
}