ProgrammingFrontendReact

[Gatsby] Head API

, , , ,

Gatsby Head API

Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다.

react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다.

1
2
// ex)
export const Head = () => <title>Home Page</title>;

SEO Component 를 사용하여 Head 함수를 정의할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
// src/components/Seo.tsx
import React from 'react';

interface ISeoProps {
  title: string;
}

export default function Seo({ title }: ISeoProps) {
  return <title>{title} | Hello!</title>;
}
1
2
3
4
5
6
7
8
9
// index.tsx
import * as React from 'react';
import Seo from '../components/Seo';

export default function IndexPage() {
  return <div>Welcome</div>;
}

export const Head = () => <Seo title="Home Page" />;

Usage notes

Gatsby Head를 사용할 때 다음 사항에 유의해야 합니다.

  • 컴포넌트가 아닌 페이지 내부에서만 Head export 를 정의할 수 있습니다.
  • Gatsby Head 의 내용은 페이지 마운트 해제 시 지워지므로 각 페이지가 <head>에 필요한 내용을 정의하는지 확인해야 합니다.
  • Head 함수는 유효한 JSX를 반환해야 합니다.
  • Head 함수 내부의 유효한 태그는 link, meta, style, title, base, script 및 noscript 입니다.

참고

Share