NextJS의 장점인 SEO를 최대한 활용하기 위해 next/head 로 부터 <HEAD> 태그를 사용하여 이 페이지의 정보를 웹 크롤러가 알 수 있게 한다.
기본적으로 크롤러는 html 문서를 읽는다고 알고 있다. 문서를 로딩한 뒤에 자바스크립트가 실행되는데 이 때 변경되는 문서 내용은 크롤러마다 다르게 해석한다. 그렇기 때문에 검색 엔진 최적화를 하려면 항상 서버 사이드에서 만든 문서에 크롤러에게 노출할 내용을 담아야 한다.
사용법
기본적으로 페이지에서 next/head 에서 Head 를 import 하여 다음과 같이 사용한다.
import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>홈</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<div>이 페이지는 메인 페이지입니다.</div>
</>
);
}주의사항
커스텀 Document 파일인 _document.js 에서 작성되는 <Head> 태그와는 다르다. _document.js에서 사용된 <Head> 의 구성 요소는 모든 페이지에서 공통적으로 적용되는 코드만 사용해야하고, <title> 태그와 같이 모든 페이지에서 다른 경우에는 페이지 또는 구성 요소에서 next/head 의 <Head> 태그를 사용하는 것이 좋다.
Refereces
