[Next.js] 플러그인 사용없이 SEO(검색 엔진 최적화)하기

들어가며

SEO(검색 엔진 최적화)를 진행하려는데 플러그인을 사용하지 않고
최대한 기본 제공되는 태그를 사용하고 싶었다
적용하다보니 헷갈리는 부분이 있어 정리해본다!

의문점

SEO를 위해서는 Head 안에 title, meta 등을 설정해야 한다.
기본적으로 Next.js에서 제공되는 head 태그는 next/head, next/document가 있다.
두 태그는 모든 파일에서 사용할 수 있다.
그리고 Next.js는 초기에 웹 사이트가 실행될 때
_app.tsx와 _document.tsx 두 개의 파일을 거쳐서 실행된다.
그럼 두 가지 의문이 생긴다.

next/head, next/document 중, 어떤 것을 사용해야 할까?
_app.tsx와 _document.tsx 중, 어디에 넣어야 할까?

이 두 가지를 차근차근 해결해보자.

비교해보기

💡 `next/head` vs `next/document`

next/head의 Head
페이지 별로 독자적으로 사용하는 태그
=> 각 페이지 별로 내용을 다르게 하고 싶을 때, 각 파일에서 import해서 사용하면 됨
next/document의 Head
앱 전체에 공용으로 사용될 내용을 넣는 태그
=> 공통으로 적용 및 따로 seo 코드를 작성하지 않은 페이지에 적용할 내용

💡 `_app.tsx` vs `_document.tsx`

_app.tsx

서버로 요청이 들어왔을 때 각장 먼저 실행되는 파일로, 이를 통해 페이지 초기화를 진행함

모든 페이지는 이곳을 거쳐서 실행되며 공통 레이아웃을 만들고, 유지함
페이지 탐색 시 상태값 유지
페이지에 추가 데이터 삽입
글로벌 CSS 추가

_document.tsx

페이지를 렌더링하는데 사용되는 <html>, <body> 같은 태그를 사용하여 커스터마이징하는 파일

_app.tsx 다음에 실행됨
서버에서 실행되는 파일이므로 브라우저 API나 이벤트 핸들러같은 코드는 실행되지 않음
_app.tsx가 실행되면서 갖추어진 content들은 Main Component 아래에 생성

✅ 결론

각 페이지 별로 부여하고 싶다면 해당 파일의 next/head의 Head 태그 안에
공통 & 지정되지 않은 페이지는 _document.tsx의 next/document의 Head 태그 안에

예시 & 주의사항

_app.tsx

<title> 태그는 _document.tsx의 Head에 넣기 불가하고 next/head의 Head 태그에만 넣을 수 있다.
그렇기 때문에 공통으로 제목을 넣어주고 싶다면 _app.tsx 파일에 넣자.

import type { AppProps } from "next/app";
import Head from "next/head";
import "../styles/globals.css";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>웹사이트 제목</title>
      </Head>
        <Component {...pageProps} />
    </>
  );
}

_document.tsx

<title>을 빼고 공통적으로 적용한 요소들은 여기에 모두 적어준다..
공용 폰트도 넣을 수 있다.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko">
        <Head>
          <link
            rel="shortcut icon"
            sizes="16x16 32x32 64x64"
            href="/favicon.png"
          />
          <meta
            name="description"
            content="설명"
          />
          <meta property="og:title" content="제목" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="" />
          <meta property="og:image" content="/포트폴리오1.png" />
          <meta
            property="og:description"
            content="공유하기 설명"
          />
          <link
            href="폰트주소"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

참고
_app.tsx 와 _document.tsx
(Next.js) document head vs page head

[Next.js] 웹 사이트 방문자 데이터 수집 (with GA: 구글 애널리틱스 ) (0)	2023.05.08
메타버스는 어떻게 구현할까? (WebSocket, 서버 분할, 멀티 스레드) (0)	2023.05.03
웹 사이트 성능 측정 및 최적화 (with LightHouse) (0)	2023.04.06
[Next.js] Tailwind-styled-components의 SSR 구현하기 (0)	2023.04.06
[Typescript] 'HTMLElement \| null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다. (0)	2023.03.30

성장일기