[Next.js] SEO와 Metadata

Front-End/Next.js 2024. 11. 11. 22:09

 

01. SEO (Search Engine Optimization)

SEO는 검색 엔진 최적화로, 웹에 올리는 콘텐츠가 구글, 크롬 등과 같은 검색 엔진으로부터 제대로 인식될 수 있도록 최적화하는 작업이다. 웹사이트나 웹 페이지를 검색 엔진에서 높은 순위로 노출시키기 위해 SEO는 필요하다.

이를 통해 웹사이트로의 트래픽을 증가시키고, 비즈니스의 성과를 높이는데 기여할 수 있다.

 

SEO를 적용하기 위해서는 meta 태그 혹은 metadata를 사용할 수 있다.

적절히 구현된 메타데이터는 검색 엔진의 웹 페이지를 정확하게 색인화하고 순위를 지정하여, 검색 결과에서 상위에 노출될 수 있게 해준다. 즉, 웹 사이트의 정보가 사용자에게 잘 전달되기 위해서는 검색 엔진에서 적절히 인식되고 노출되어야 하며 이를 위해 메타데이터를 사용해야 한다. 메타데이터는 웹페이지의 사용자 유입을 증가시키는데 중요한 역할을 하는 것이다.

 

 

 

02. metadata

메타데이터는 웹 페이지의 데이터를 설명하는 정보이다.

주로 <meta> 태그나 <link> 태그를 사용해 HTML 문서의 <head> 영역에 정의되며, 웹사이트의 검색 엔진 최적화(SEO)와 링크 공유 시 미리보기 정보 제공에 중요한 역할을 한다. 예를 들어, 메타데이터는 검색 엔진이 페이지의 주제나 내용을 인식하게 도와 페이지 순위를 결정하고, 소셜 미디어에서 링크를 공유할 때 나타나는 제목(title), 설명(description), 이미지(image)를 제공한다.

 

Q. 메타데이터는 왜 서버 컴포넌트에서만 사용할까?

Next.js에서 메타데이터는 서버 컴포넌트에서만 설정할 수 있다. 그 이유는 아래와 같다.

  • SEO 최적화 : 메타데이터를 서버에서 렌더링해야 검색 엔진이 이를 인식해 올바른 검색 결과를 제공한다. 클라이언트 컴포넌트에서 설정할 경우, 메타데이터가 렌더링되지 않아 검색 엔진이 이를 확인하지 못할 수 있다.

 

 

 

03. Next.js에서 SEO를 위한 metadata 설정 방법

Next.js에서는 효율적인 메타데이터 관리를 위해 크게 두가지 주요 방법을 제공한다.

이때 메타데이터를 설정할 때 Next.js 버전별로 지원하는 방식이 다르니 본인의 Next.js 프로젝트의 버전 요구사항에 맞게 사용해야 한다.

 

#1. Config-based Metadata

layout.js나 page.js 파일 내에 metadata를 설정하는 방식이다.

Next.js 13에서는 Config-based metadata 설정 방식을 도입하였다.

 

◼︎ 정적 메타데이터 객체를 사용하는 방법

metadata 객체를 통해 직접 정적인 메타 데이터를 정의하는 방식이다.

정적 메타데이터는 변하지 않는 정보를 사용하여 설정된다. 주로 사이트의 기본 정보를 담고 있거나, 변하지 않는 데이터 정보를 담고 있을 때 주로 사용한다. 주로 웹사이트의 주제, 키워드를 이용한 제목, 기본 설명 등을 해당 방법을 통해 작성할 수 있다.

// app/page.js
export const metadata = {
  title: 'Home Page',
  description: 'Welcome to the homepage of our site.',
};

 

 

◼︎ 동적 메타데이터 생성 (generateMetadata)

페이지의 동적 콘텐츠에 따라 메타데이터를 생성해야 하는 경우, generateMetadata 함수를 사용한다.

이 함수는 데이터를 비동기적으로 가져올 수 있어, API 응답에 따라 메타데이터를 동적으로 설정할 수 있다. 페이지의 컨텍스트 정보를 바탕으로 메타데이터를 생성하며, 동적으로 변경되는 부분에 유용하게 사용된다.

 

예를 들어, 상품 상세 페이지에서 상품의 이름이나 설명을 메타데이터로 설정하는 경우에 generateMetadata를 이용하여 설정할 수 있다.

동적 메타데이터를 생성하기 위해서는 서버에서 데이터를 패치하는 과정이 필요하다. Next.js의 서버 사이드 렌더링 기능을 활용하여 페이지 요청 시마다 최신 데이터를 불러와 메타데이터를 아래와 같이 생성할 수 있다.

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
  return {
    title: post.title,
    description: post.excerpt,
  };
}

 

Next.js의 generateMetadata는 Dynamic API를 통해 SSR로 데이터를 가져올 수 있다.

즉, API에서 데이터를 가져와 페이지의 요청마다 최신 메타데이터를 생성할 수 있으며, 이로 인해 동적인 콘턴츠에도 SEO를 적용할 수 있게 된다.

 

 

#2. File-based Metadata

Next.js 14에서는 파일 기반 메타데이터 기능이 추가되었다.

이 기능을 사용하면 각 페이지나 라우트 세그먼트에 대해 메타데이터를 JSON 파일로 관리할 수 있다.

이 방법은 특히 아이콘, 소셜 미디어 이미지, robots.txt, 사이트맵 등과 같은 리소스를 처리하는데 유용하다.

 

💡 파일 기반 메타데이터 동작 방식

각 페이지나 라우트 세그먼트에 metadata.json 파일을 추가하면, Next.js가 이 파일을 자동으로 로드하여 해당 페이지의 메타데이터로 사용한다. 예를 들어, /blog 경로에 다음과 같은 metadata.json 파일을 두면 해당 페이지의 메타데이터로 설정된다.

// app/blog/metadata.json
{
  "title": "My Blog",
  "description": "A blog about web development",
  "keywords": ["Next.js", "SEO", "JavaScript"]
}

사용자가 /blog 경로에 접근하면, Next.js는 이 파일을 읽어 페이지의 메타데이터를 설정한다.

이를 통해 SEO나 소셜 미디어에서 페이지가 어떻게 표시될지 제어할 수 있다.

 

💡 파일 기반 메타데이터 장점

  • 각 페이지에 대해 메타데이터를 따로 설정하는 대신 JSON 파일을 사용하여 메타데이터를 관리하면 설정이 간소화되고 유지보수가 쉬워진다.
  • 메타데이터 설정을 코드와 분리하여, 페이지의 내용과 동작을 정의하는 데 집중할 수 있다.
  • 아이콘이나 OpenGraph 이미지 같은 자산을 자동으로 처리할 수 있다. 예를 들어, 사이트의 아이콘과 소셜 미디어에서 공유될 이미지를 정의하는 것이 간편해진다.

 

 

 

 

04. metadata 템플릿 적용

Next.js에서 메타데이터를 설정할 때, 각 페이지마다 title이나 description 등이 중복되면 관리가 번거롭다.

특히, title에서 사이트 이름은 공통이지만 페이지별 타이틀만 다르게 설정하고 싶을 때, 모든 페이지에서 직접 메타데이터를 작성하면 코드 중복이 발생할 수 있다.

이를 해결하기 위해 Next.js는 메타데이터 템플릿 기능을 제공한다. 이 기능을 활용하면 title의 형식을 일관되게 적용할 수 있어 중복 코드를 줄이고 유지보수를 간편하게 할 수 있다.

 

💡 템플릿 적용 예시

// app/layout.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s | Next Movies", // 템플릿 설정
    default: "Next Movies", // 기본값 설정
  },
  description: "The best movies on the best framework",
};

 

  • template:
    • %s는 각 페이지에서 지정할 동적 타이틀 자리
    • 예를 들어, 특정 페이지에서 title: "Home"으로 설정하면 최종 타이틀은 "Home | Next Movies"
  • default:
    • 만약 페이지에서 title을 설정하지 않으면 기본값으로 "Next Movies"가 사용
// app/page.tsx
export const metadata = {
  title: "Home",
};

// app/about/page.tsx
export const metadata = {
  title: "About Us",
};

 

 

각 페이지 별로 메타데이터를 위와 같이 설정한다면 / (홈페이지)에서 메타데이터의 Title은 "Home | Next Movies",

/about 경로에서는 "About Us | Next Movies"가 출력될 것이다.

반응형

'Front-End > Next.js' 카테고리의 다른 글

[Next.js] 이미지 최적화 : next/image  (15) 2024.11.14
[Next.js] 폰트 최적화 : next/font(Google Font & Local Font)  (10) 2024.11.13
[Next.js] CSS Styling : Tailwind, CSS Module, clsx  (6) 2024.11.12
[Next.js] Routing : Layout / Route Groups / Dynamic Routes(동적 라우팅)  (11) 2024.10.09
[Next.js] 렌더링 동작 원리 with Hydration, use client  (2) 2024.10.08