Head를 거치고 말을 내뱉자 (?)

React, Gatsby, Next.js에서 head 태그 작성법 (feat. SEO/오픈그래프/트위터카드)

2023.11.13수정

React/Gatsby와 Next.js는 <head /> 작성법에 다소 차이가 있습니다.

내용 부분은 같지만 컴포넌트가 다릅니다.

이번 포스팅에서는 React/Gatsby 그리고 Next.js에서 <head /> 작성법을 알아봅니다.

React/Gatsby

React와 Gatsby는 react-helmet을 사용합니다. 패키지를 설치 후, 패키지를 import 합니다.

import { Helmet } from 'react-helmet';

<Helmet />은 return 내부에서 사용합니다.

<Helmet titleTemplate="%s | 웹사이트 이름">
  <title>웹페이지 이름</title>
  <meta property="og:title" content="웹페이지 이름" />
  // 기타 meta 태그 나열
</Helmet>

Next.js에서는 자체적으로 <head />를 처리할 수 있습니다.

import Head from 'next/head';

Next.js 역시 마찬가지로 return 내부에서 Head를 사용합니다.

<Head>
  <title>웹페이지 이름 | 웹사이트 이름</title>
  <meta property="og:title" content="웹페이지 이름" />
  // 기타 meta 태그 나열
</Head>

변수 받아서 처리하는 자세한 방법은 시간 날 때 언젠가 포스팅 해보도록 할께요~

FIN!