[Next.js] next.js 에서 meta tag 손쉽게 적용하기 (feat. next-seo)

next.js에서 seo를 위해 meta 적용하는 방법은 크게 2가지가 있다.

 

1) _document.tsx 와 next/head를 이용하여 meta tag를 삽입

2) next-seo 패키지를 통해 더 쉽게 meta tag 설정

 

여기서는 next-seo 패키지를 통해 meta tag를 설정해보겠다.

 

[Next.js에서 next-seo를 통해 Meta tag 손쉽게 적용하기]

 

1. next-seo 설치하기

npm install next-seo

https://github.com/garmeeh/next-seo

GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

 

2. 일반 페이지에  ✨공통적인 ✨ default meta tag 값 적용하기 

몇몇 특정 페이지를 제외하고, 많은 페이지에서 대표적으로 설정한 meta tag 내용들은 동일할 것이다.

이때, 각각의 페이지에 같은 코드를 집어 넣어 meta tag를 설정하는 것은 코드를 길게 만들 뿐이다.

 

그래서, _app.tsx 파일 안에 공통으로 적용할 meta tag를 설정하자!

 

이때, meta tag에 대한 내용에 대해서는 간편하고, 모듈적으로 관리하기 위해,

next-seo.config.js 파일을 생성하여 그 파일을 import 하도록 하였다.

 

 

1) next-seo.config.js 생성
- 루트 위치에 생성

export default {
  titleTemplate: '%s | 서비스명', 
  defaultTitle: 'title',
  description: 'description',
  canonical: 'https://yalliyalli.com',
  openGraph: {
    type: 'website',
    url: '서비스 URL',
    title: '서비스 opengraph Title',
    description:
      '서비스 opengraph decription',
    image: '서비스 opengraph image',
  },
};

내가 사용한 meta tag 값들은 다음과 같다.

속성 이름만 보면, 대강 어떤 역할인지 알겠지만,

next-seo에서 기본으로 제공하는 속성에 대해 아래에 기술해 놓았다.

(혹시, meta tag 속성에 대해 알고 싶다면, https://uni-s-code.tistory.com/49 참조!)

 

 

2) _app.tsx에 default meta tag 값 적용하기

_app.tsx에서 next-seo에서 DefaultSeo를 import 하고

앞에서 미리 설정한 default meta tag를 가져온 후 아래와 같이 적용하면 된다.

//_app.tsx
import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...SEO} />
    </>
);

 

 

3. 특정 page에  ✨custom ✨ meta tag 적용하기

default meta tag가 아닌, 페이지의 특징에 맞는 meta tag에 적용하고 싶은 경우,

그 페이지에 직접 NextSeo를 삽입하면 된다.

DefaultSeo를 오버라이드 하는 구조이므로, 속성을 전부 적지 않을 경우 DefaultSeo에서 설정한 값이 적용이 된다.

 

import { NextSeo } from 'next-seo';

const CustomComponent = ()=>{
	return (
		<>
			<NextSeo title="title example" description="description example" />
		</>
	)

}

export default CustomComponent;

 

4. next-seo options

next-seo에서 자주 사용할 수 있는 속성들을 표로 정리하였다.

titleTemplate	string	title template 을 지정하면, title을 formatting 할 수 있다.
title	string	페이지마다 넣고자 하는 title를 지정 가능.
defaultTitle	string	title이 없을 경우 default Title로 셋팅이 된다.
description	string	meta tag의 description
noindex	boolean (default false)	색인 생성할지 말지
nofollow	boolean (default false)	페이지 내 링크 수집할지 말지
additionalMetaTags	array	next-seo에서 정의된 속성이 아닌 다른 meta tag 속성 정의 가능

 

 

🔥 [이슈] dynamic page 에서 custom한 tag가 설정되지 않을때 ! 

next.js는 페이지를 서버사이드에서 만들고, 클라이언트에서 첫 렌더링할 때 메타 태그들이 html로 부착이 된다.

그래서 getServerSideProps를 통해, seo meta tag에 필요한 value들을 가져와서, 부쳐야 한다.

 

import { NextSeo } from 'next-seo';

function DynamicPage({ title, description }) {
  return (
    <>
      <NextSeo
        title={title}
        description={description}
      />
      <div>
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
    </>
  );
}

export async function getServerSideProps() {
  // Fetch data for dynamic page
  const data = ...

  return {
    props: {
      title: data.title,
      description: data.description,
    },
  };
}

 

 

감사합니다 :)