메타데이터

메타데이터는 SEO에 있어서 필수적인 역할을 합니다.

보통 HTML의 head부분에 위치한 meta태그를 통해 정의되는데, 이 정보는 검색 엔진이 페이지의 내용을 이해하는 데 도움을 줍니다.

Next에서는 layout.tsx이나 page.tsx에서 정적인 metadata를 정의하는 편입니다.

만약 동적인 metadata가 필요한 상황이라면 동적으로 metadata를 만들 수도 있씁니다. (아래의 예시처럼요!)

export async function generateMetadata({
  params,
}: {
  params: {
    slug: string;
  };
}): Promise<Metadata> {
  const post = getPostBySlug(params.slug, [
    'title',
    'content',
    'excerpt',
    'date',
    'author',
    'image',
  ]);

  const dynamicMetaTag: Metadata = {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `${getCurrentBasePath()}/blog/${decodeURIComponent(
        params.slug
      )}`,
    },
    openGraph: {
      type: 'website',
      siteName: `${post.title}`,
      locale: 'ko-KR',
    },
    keywords: post.title,

    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
      },
    },
    viewport: {
      width: 'device-width',
      initialScale: 1,
    },
    verification: {
      google: 'g3Daim29whdK1ZzL1CE6pvkYyvSgM5-6C898-TVjiz0',
    },
  };
  return dynamicMetaTag;
}

JSON-LD

SEO를 최적화 하는 또 다른 방법 중 하나는 JSON-LD를 사용하는 것입니다.

JSON-LD는 웹 사이트의 데이터를 구조화 해, 검색 엔진이 콘텐츠를 더 잘 이해하도록 도와줍니다.

JSON-LD는 Javascript Object Notation for Linked Data의 약자입니다.

말 그대로 연결된 데이터를 JSON형식으로 표현해주는데,

예를 들어 제품 정보나 제품 리스트의 정보를 JSON-LD형식으로 마크업 하면, 해당 제품의 정보를 직접 보여줄 수 있게 됩니다.

보통 이 JSON-LD도 layout이나 page에 정의하는 편인데요,