Gatsby Head API 사용하기

2022년 08월 10일

Gatsby

# Gatsby# SEO# Head API# react-helmet

📕 목차

들어가며
페이지에서 Gatsby Head 사용하기
중복을 제거하자
주의 사항
Head 함수 정의하기
Head 함수에 Typescript 적용하기
<html> 와 <body> 편집하기
더 읽어볼 거리

들어가며

검색엔진 최적화를 위해 페이지 메타데이터를 설정할 필요가 있습니다. 기존에 Gatsby 에서는 react-helmet 을 사용하여 페이지의 head에 메타데이터를 추가하고는 했습니다. 이번에 소개해드릴 기능인, gatsby@4.19.0 버전에 추가된 Gatsby Head API는 기존의 react-helmet 보다 더 가볍고 빠르다고 합니다.

페이지에서 Gatsby Head 사용하기

페이지에 메타데이터를 설정하기 위해서는 Head named function을 export 하면 됩니다.

import * as React from "react"

const Page = () => <div>Hello World</div>
export default Page

export function Head() {
  return <title>Hello World</title>
}

화살표 함수 문법 또한 사용이 가능합니다.

export const Head = () => <title>Hello World</title>

React Fragments를 사용해서 다양한 메타태그를 설정할 수 있습니다.

export const Head = () => (
  <>
    <title>Hello World</title>
    <meta name="description" content="Hello World" />
  </>
)

다른 파일의 Head 함수를 가져와서 다시 re-export 할수도 있습니다.

import * as React from "react"

const Page = () => <div>Hello World</div>
export default Page

export { Head } from "../another/location"

중복을 제거하자

다양한 컴포넌트를 섞어 사용하다보면 동일한 메타태그를 사용해 중복이 발생하는 경우가 있습니다. 이때, 중복을 제거하고 하나의 메타 태그만 사용하려면 태그에 id 속성을 사용하면 오직 하나의 태그만 렌더링됩니다. 다음 예제를 통해 자세히 알아보겠습니다.

const SEO = ({ children }) => (
  <>
    <title>Hello World</title>
    <link id="icon" rel="icon" href="global-icon" />
    {children}
  </>
)

export const Head = () => (
  <SEO>
    <link id="icon" rel="icon" href="icon-specific-for-this-page" />
  </SEO>
)

위의 예제에서는 두 개의 link 메타 태그를 사용한 것을 볼 수 있습니다. 해당 컴포넌트를 펼쳐 보면 다음과 같이 됩니다.

<>
  <title>Hello World</title>
  <link id="icon" rel="icon" href="global-icon" />
  <link id="icon" rel="icon" href="icon-specific-for-this-page" />
</>

만약 리스트에서 같은 id가 여러개 있다면, 마지막 아이템이 승자가 되고 HTML에서 사용됩니다.

주의 사항

Gatsby Head를 사용할때 이러한 것들을 인지하고 있어야 합니다.

페이지 내부에서만 Head export를 정의해야합니다.

컴포넌트 내부에서 사용하면 안됩니다.
Gatsby Head의 내용은 페이지를 마운트 해제하면 지워지므로 각 페이지가 필요한 내용을 에 정의해야 합니다.
Head 함수는 유효한 JSX를 반환해야합니다.
Head 함수 내에 유효한 태그는 아래의 7 가지 입니다.

link, meta, style, title , base, script, noscript
Head 함수 내에 <script type="application/Id+json"> 과 같은 데이터 블록을 사용할 수 있지만, 동적 스크립트는 페이지 혹은 컴포넌트 내에서 Gatsby Script Component와 함께 로드될 때 더 잘 동작합니다.
같은 페이지에서 Head API와 react-helmet을 사용하는 건 예상하지 못한 결과를 생성하기 때문에 지원하지 않습니다.

Head 함수 정의하기

Head 함수는 다음과 같은 속성들을 전달받습니다.

location.pathname : Location object를 반환합니다.
params : 페이지가 matchPath를 가질 때 URL parameters를 전달합니다.
data : GraphQL query를 통해 페이지로 전달되는 데이터를 받아볼 수 있습니다.
pageContext : gatsby-node.js 내에서 페이지 생성할 때 전달하는 컨텍스트 정보를 동일하게 받아볼 수 있습니다.

export const Head = ({ location, params, data, pageContext }) => (
  <>
    <title>{pageContext.title}</title>
    <meta name="description" content={data.page.description} />
    <meta
      name="twitter:url"
      content={`https://www.foobar.tld/${location.pathname}`}
    />
  </>
)

Head 함수에 Typescript 적용하기

Gatsby에서 타입스크립트를 사용하고 있다면 HeadProps 를 Gatsby Head API

import * as React from "react"
import type { HeadProps } from "gatsby"

const Page = () => <div>Hello World</div>

export default Page

export function Head(props: HeadProps) {
  return <title>Hello World</title>
}

HeadProps의 타입정의를 살펴보겠습니다. 타입스크립트의 제네릭을 사용해 DataType과 PageContextType을 받는 것을 볼 수있습니다. 그 외에도 위에서 언급한 location과 params를 살펴볼 수 있습니다.

export type HeadProps<DataType = object, PageContextType = object> = {27 days ago • Jude Agboola [feat(gatsby): Gatsby Head API (#35980)]
  location: {
    /**
     * Returns the Location object's URL's path.
     */
    pathname: string;
  }
  /** The URL parameters when the page has a `matchPath` */
  params: Record<string, string>
  /**
   * Data passed into the page via an exported GraphQL query.
   */
  data: DataType
  /**
   * A context object which is passed in during the creation of the page.
   */
  pageContext: PageContextType
}

`<html>` 와 `<body>` 편집하기

Gatsby Head의 범위는 페이지의 태그를 수정합니다. 만약 혹은 와 같은 태그를 편집하려면 Gatsby Server Rendering API를 사용하면 됩니다.

태그를 수정하는 일반적인 사용사례는 `lang` attribute를 추가하는 것이 있습니다. 이것은 다음과 같이 하면됩니다.

exports.onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" })
}

Hacker