FE 2022. 12. 8.

[Next.js] 프로젝트에 head 설정하기 (next/Head, _document.js, /app.head.js)

 

 

 

 

목표

<head>의 역할과, Next.js 프로젝트에서 <head>를 설정하는 방법 배우기

 

 

예상 소요시간

10분

 

 

 

Next.js의 가장 큰 장점은 SSR, 즉 서버사이드 렌더링입니다. HTML이 먼저 로딩된 상태로 앱이 그려지기 때문에 CSR보다 더 SEO에 최적화되어 있죠. 이러한 SEO를 가장 효과적으로 뒷받쳐 주는 역할이 바로 <head>입니다. <head>를 잘 활용하면 그만큼 검색엔진에 노출되기 쉬워집니다. 그렇다면 <head>에는 어떤 것들이 들어있길래 SEO에 있어 중요하다고 하는 것일까요?? next.js에서 head는 어떻게 작성할 수 있을까요?

SSR : Server Side Rendering의 줄임말. 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식을 의미한다. 빈 스크립트가 아닌 내용이 채워진 HTML가 검색엔진에 노출되기 때문에 검색엔진에 더욱 최적화된다는 장점이 있다.

 

 

 

 

<head>와 메타데이터

 

HTML은 크게 head와 body로 이루어져 있습니다. 그 중 <head>는 비록 화면에서는 보이지 않지만, 그 속에는 웹에 대한 수많은 메타데이터를 담고 있는 역할을 합니다. 그리고 바로 이 메타데이터가 SEO에서 중요한 역할을 합니다.

 

메타데이터는 뭘까요?

메타데이터는 다른 데이터를 설명해주는 데이터를 의미합니다. 즉 웹에서의 메타데이터는 웹을 설명해주는 데이터입니다. 웹페이지 제목, 작가, 설명, 아이콘 등등 head에 담겨있는 수많은 메타데이터들을 통해 우리는 검색엔진에게 우리 웹 페이지에 대해 어필할 수 있게 됩니다. 메타데이터를 잘 작성해야만 검색엔진이 우리의 웹 페이지를 찾기 더욱 쉬워집니다.

 

 

head에 담기는 메타데이터들은 대표적으로 아래와 같은 것들이 있습니다.

<head>
    // 인코딩을 특정하는 메타데이터
    <meta charset="UTF-8" />
    // 웹페이지 제목에 대한 메타데이터
    <title>Document</title>
    // 저자에 대한 메타데이터
    <meta name="author" content="작가" />
    // 웹페이지 설명에 대한 메타데이터
    <meta name="description" content="설명" />
    // 트위터 등 특정 플랫폼을 위한 독자적인 메타데이터들도 있습니다.
    <meta name="twitter:title" content="Mozilla Developer Network" />
    // 아이콘에 대한 메타데이터
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>

 

 

 

 

 

 

Next.js에서 head를 작성하는 방법

 

 

next/Head

next/Head는 현재 next.js에서 가장 대중적인 방법입니다. Next.js에서 기본적으로 제공되는 기능이기에 import만으로도 간편하게 사용할 수 있다는 장점이 있습니다. 또한 Head 컴포넌트는 _app.jsx에서 사용하여 전역적으로 설정 할 수 있으며, 각 page마다 따로 설정하여 페이지마다 다른 태그를 지니도록 할 수도 있습니다.

 

next/Head을 사용하는 코드는 아래와 같습니다.

// Head 컴포넌트를 import
import Head from "next/head";

function Component({}) {
  return (
    <>
    // Head 컴포넌트 내부에 html 태그를 작성하여 head 작성
      <Head>
        <title>제목</title>
        <meta name="description" content="컴포넌트" />
      </Head>
    </>
  );
}

 

 

 

중복된 Head는 가장 내부에 쓰여진 Head가 우선순위를 가지게 됩니다.

import Head from "next/head";

function Component({}) {
  return (
    <>
      <Head>
        <title>외부</title>
      </Head>
      // 내부 Head가 우선적으로 적용된다.
       <Head>
        <title>내부</title>
      </Head>
    </>
  );
}

 

 

 

_document.js

 

두번째 방법은 _document.js입니다. page 폴더 내부에 _document.js 파일은 head에 관한 설정을 모든 페이지에 전역적으로 뿌려주는 역할을 합니다. 하지만 title을 사용할 수 없는 등 next/Head에 비해 제약사항이 있기 때문에 주의해서 사용할 필요가 있습니다.

 

_document.js의 사용 방법은 아래와 같습니다.

// /pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

 

 

 

/app/head.js

 

마지막 방법으로는 /app 폴더 내부에 head.js 파일을 작성하는 것입니다. 이 방법은 Next.js v13이상부터 적용되는 베타 버전이며, 기존의 pages 폴더를 통해 페이지를 라우팅 하는 것이 아닌 /app 폴더를 통해 라우팅을 정의하였을 때만 사용 가능합니다. 가장 최신 기술이라는 장점이 있지만, 그만큼 불안정하며, 기존의 레거시 코드에 적용하려면 migration 과정을 거쳐야 한다는 단점이 있습니다. 

 

head.js는 해당 파일에 컴포넌트를 생성하고, return값으로 title, meta 등의 태그를 담는 방식으로 <head>를 지정할 수 있습니다. 이때 반드시 컴포넌트의 가장 부모에는 <head>가 아닌 빈 태그가 와야만 합니다.

 

head.js파일은 아래와 같이 작성할 수 있습니다.

// app/head.js

export default function Head() {
  return (
    <>
      <title>My Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1"  />
    </>
  )
}

 

 

 

 

 

 

오늘은 Next.js의 <head>를 설정할 수 있는 방법 3가지를 알아보았습니다.

방법들에 대해 찾아보던 와중 Next.js의 새로운 버전인 v.13도 함께 알아볼 수 있어서 좋았던 경험이었습니다. 제 글이 도움이 되셨길 바라며 이번 글은 여기서 마치도록 하겠습니다. 감사합니다 : )

 

 

 

 

참고 문헌

메타데이터_Wikipedia

head 태그에는 무엇이 있을까? HTML의 메타데이터_ MDN

next/Head_Next.js 

customDocument_Next.js

head.js_Next.js

저작자표시 비영리 변경금지

'FE' 카테고리의 다른 글

자바스크립트 배열 메서드 가이드 포스터 (번역)  (0) 2023.02.13
[Next.js] 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까?  (0) 2022.12.17
[JS] LocalStorage & SessionStorage  (0) 2022.12.11
[Next.js] 이미지 로딩 속도 개선하기  (0) 2022.12.07
[REACT] 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 아시나요?  (0) 2022.11.19

티스토리툴바