개츠비에서 html head를 조작하기 위해서는 어떻게 해야할지 알아보자.

Gatsby Head API

Gatsby에는 페이지의 문서 head 에 요소를 추가할 수 있는 내보내기 기능이 내장되어있다.

업데이트 이전에는 React Helmet으로 조작이 가능했지만, 개츠비 공식문서에서 성능상으로 뛰어나다고하는 gatsby head API으로 적용하였다.

1. 각 페이지 Head에 적용

각 페이지마다 export const Head 안에 내용을 추가해서 요소를 추가할 수 있다.

COPY

export const Head = () => (
  <>
    <title>Just Do It!</title>
    <meta name="description" content=""/>
    <script async src="..." crossorigin="anonymous"></script>
  </>
);

2. 중복 방지를 위해 SEO 컴포넌트 생성

각 페이지마다 코드를 작성하는 건 꽤나 번거로우니, 중복되는 코드를 컴포넌트로 만들어 관리해주자.

SEO.js

COPY

import { siteUrl, ogImage } from "../../gatsby-meta-config";

const SEO = ({ ogImage, title, description, url }) => {
  return (
    <>
      <title>Just Do It!</title>
      <meta property="og:image" content={siteUrl + `${ogImage}`} />
      <meta property="og:image:width" content="400" />
      <meta property="og:image:height" content="50" />
      <meta name="google-adsense-account" content="ca-pub-****"></meta>
      <script async src="..." crossorigin="anonymous"></script>
    </>
  );
};

export default SEO;

COPY

// 각 page.js 에 추가
import { ogImage } from "../../gatsby-meta-config";
export const Head = () => (
  <>
    <SEO ogImage={ogImage} />
  </>
);

3. 메타 태그, 스크립트 추가하기

SEO 최적화를 위해 meta 태그들을 추가하고, 소셜 미디어로 공유될 때 우선적으로 활용되는 오픈 그래프 태그도 추가했다.

SEO.js

COPY

const SEO = ({ ogImage }) => {
  return (
    <>
      <title>Just Do It!</title>
      <meta property="og:type" content="website"/> 
      <meta property="og:title" content="페이지 제목"/>
      <meta property="og:description" content="페이지 설명"/>
      <meta property="og:image" content={siteUrl + `${ogImage}`} />
      <meta property="og:image:width" content="400" />
      <meta property="og:image:height" content="50" />
      <meta property="og:url" content="https://just-doit.me"/>
    </>
  );
};

JustDoIt.me

Gatsby Head API로 메타태그를 적용해보자.(ogImage)

Gatsby Head API

1. 각 페이지 Head에 적용

2. 중복 방지를 위해 SEO 컴포넌트 생성

3. 메타 태그, 스크립트 추가하기

참고문서