SEO 1. [Next.js] - Metadata로 SEO 처리하기

kim yeseul·2023년 11월 23일

SEO(Search Engine Optimization, 검색 엔진 최적화)란?

웹에 올리는 컨텐츠가 구글, 네이버와 같은 검색 엔진으로부터 제대로 인식될 수 있도록 최적화하는 작업이다. 최적화를 하는 방법에는 좋은 콘텐츠를 제공하거나 웹 접근성, 성능적으로 뛰어난 웹을 개발하는 방법 등이 있는데 가장 기본적인 방법으론 해당 페이지에 적합한 메타태그를 삽입해서 크롤러가 웹을 분석해 인덱싱하는데 도움을 주는 검색 엔진 최적화가 있다.

구글에서는 최대한 많은 페이지가 인덱싱 되는 것이 검색 엔진 최적화에 도움이 된다고 언급했기 때문에 각 페이지마다 해당 페이지의 용도를 잘 설명해주는 메타 태그를 삽입해주는 것이 좋다.

Next 12에서 Head 컴포넌트로 메타태그 삽입하기

Next js의 경우 자체적으로 Head 컴포넌트를 제공하는데 해당 컴포넌트를 사용하면 손쉽게 메타태그를 삽입할 수 있다.

Title

타이틀 태그는 다음 두 가지 이유로 가장 중요한 SEO 요소 중 하나이다.

첫째, 사용자가 검색 결과에서 웹 사이트를 입력하기 위해 클릭할 때 표시되는 내용

둘째, Google이 우리가 개발한 페이지 내용을 이해하기 위해 사용하는 주요 요소 중 하나이다. 제목에 키워드를 사용하는 것이 일반적으로 검색 엔진에서 순위를 높이는 데 도움이 되므로 권장된다.

예시

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

Description

description 메타 태그는 SEO의 또 다른 중요 요소다. 구글에 따르면 해당 요소는 순위 지정 목적으로 고려되지 않지만 검색 결과에 대한 클릭률에 영향을 미칠 수 있다.

description 메타 태그를 사용하여 제목에 있는 정보를 보완할 수 있다. 제목에 맞지 않는 키워드가 있으면 여기에 있는 내용에 대한 키워드를 더 입력한다. 사용자의 검색에 키워드가 포함되어 있으면 이러한 키워드가 굵게 표시된다.

예시

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

화면 예시

코드 작성 예시

import Head from 'next/head';

function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}

export default IndexPage;

Open Graph

오픈 그래프 태그는 웹 사이트가 소셜 미디어에 공유될 때 미리보기에 사용되는 메타 데이터를 정의하기 위한 태그이다.

예를 들어 카카오톡과 같은 소셜 서비스를 이용할 때 웹 페이지의 링크를 공유하는 일이 많이 생긴다. 이때 페이지의 미리보기가 카드 형식처럼 표시되어 해당 페이지의 메인 제목과 설명이 나타나는 것을 본 적이 있을 것이다.

이렇게 SNS 메신저를 통해 웹 링크를 공유하는 경우가 많아지며 메타 태그의 사용도가 점점 넓어지게 되었고 이를 오픈 그래프 프로토콜 표준을 따라 웹 페이지 미리보기를 지원하는 것이다.

태그 사용 예로

<meta property="og:type" content="website" />

위와 같은 형태로 property="og:" 에 값을 넣어주는데 중요 태그 위주만 정리해보았다.

og:type : 웹 페이지 유형
og:title : 웹 페이지 타이틀
og:description : 웹 페이지 설명
og:url : 웹 페이지 주소
og:locale : 웹 페이지 언어 선택
og:image : 웹 페이지 썸네일, 이미지 주소

내가 이전에 작업한 프로젝트 내용으로 예시 작성해보았다.

components/MetaHead

import Head from "next/head";

const MetaHead = ({ title, description, url, image }) => {
  return (
    <Head>
      <title>{title || "누구나누리"}</title>
      <meta
        name="description"
        content={
          description ||
          "누구나 누릴 수 있는 서울 문화 예술 행사 공간"
        }
      />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <meta property="og:title" content={title || "누구나누리"} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={url || "https://nuguna-nuri.vercel.app"} />
      <meta property="og:image" content={image} />
      <meta property="og:article:author" content="누구나누리" />
    </Head>
  );
};
export default MetaHead;

위 코드를 SEO를 적용하고 싶은 페이지 컴포넌트에 import해서 각 값을 적용해준다. 예를 들어 동적 라우팅이나 다른 페이지에 props를 통해 페이지별로 오픈 그래프를 적용해 미리보기 생성 시 값을 다르게 보여줄 수 있는 것이다.

const TestPage = () => {
  return (
    <>
    	<MetaHead title='테스트' />
    </>
  )
}

예를 들어 위와 같은 코드에 title에 '테스트'를 전달하면 해당 페이지에서는 title이 누구나누리가 아닌 테스트로 설정된다.

그렇다면 Next 13에서는 어떻게 적용할까?

Next 13에서는 SEO 및 웹 공유성 향상을 위해 애플리케이션 메타데이터 정의를 위한 Metadata API가 있다.

여기서 애플리케이션 메타데이터에는 meta 및 link 태그를 말한다.

애플리케이션에서 메타데이터를 추가하는 방법은 두 가지가 있다

1) Config-based Metadata

layout.js 또는 page.js 파일에서 정적인 'metadata' 개체 또는 동적인 'generateMetadata' 함수를 내보낸다.

2) File-based Metadata

정적 또는 동적으로 생성된 특수 파일을 루트 세그먼트에 추가한다.

이 두 옵션을 사용하면 Next.js는 페이지에 해당하는 <head> 요소를 자동으로 생성한다. 또한 ImageReponse 컨스트럭터를 사용하여 동적 오픈 그래프 이미지를 생성할 수 있다.

Static Metadata(정적 메타데이터)

정적 메타데이터를 정의하려면 layout.js 또는 정적 page.js (Server Component 방식) 파일에서 메타데이터 개체를 내보낸다.

나의 경험으로는 app 방식으로 next를 cra 하게 되면 최상위 layout.tsx에 metadata를 작성할 수 있는 기본 코드가 생성된다.

app/layout.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout() {}

Dynamic Metadata(동적 메타데이터)

generateMetadata 함수를 사용하여 동적 값이 필요한 메타데이터를 fetch할 수 있다.

예시 코드

app/products/[id]/page.tsx

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

File-based metadata

favicon.ico, apple-icon.jpg, and icon.jpg
opengraph-image.jpg and twitter-image.jpg
robots.txt
sitemap.xml

meta data 우선 순위

metadata는 page.js 파일은 물론, 중첩 적용된 여러 layout.js 파일에서 정의할 수 있다. 이렇게 여러 파일들에 적용된 meta data는 다음과 같은 우선순위로 적용된다.

페이지(page.js) : 우선 순위 가장 높다.
중첩 레이아웃(nested layout)
루트 레이아웃(root layout) : 우선 순위 가장 낮다.

reference
[NEXT.js] SEO 처리하기 (feat. Head, meta 태그)
Next 공식 문서, Pages Router Metadata
Next.js SEO 최적화 적용하기
Next 공식 문서, App Router Metadata
[Next.js 13] head 태그 - title 및 meta 데이터 추가/수정 방법(Metadata API)
출처: https://curryyou.tistory.com/550 [카레유:티스토리]

kim yeseul

출발선 앞의 준비된 마음가짐, 떨림, 설렘을 가진 주니어 개발자

이전 포스트

Lighthouse를 통해 실제 배포한 웹 사이트에 성능 최적화를 해보자!

다음 포스트