MHLab blog

Light

Next.Js에서 title 태그 변경 처리

Posted by @MHLab, May 05, 2023
NextJs
Series ofNextJs

thumbnail

Next.Js에서 Title 태그를 처리하기

이번에 흑우집합소를 네이버 서치 어드바이저에 등록했다.
그리고 데이터를 등록하다가 사이트 간단 체크에 돌렸는데 사이트 제목이 미설정이라 떴다.

그래서 확인해보니 정말 설정이 안되어 있었다.

img01

그래서 이것을 수정하려고 자료를 찾아서 적용했다.
방법은 간단한데 각 페이지마다 Title 태그를 적용하는 법과 전역으로 설정하는 법이 있다.

1. 각 페이지마다 title 처리

각 페이지마다 Title을 변경해야 할 때가 있다.
나의 경우 메인과 각 페이지가 다르게 설정해야 했다.

메인은 아래처럼 진행해야 했고...

img02

번호 생성쪽은 그에 맞춰서 다른 것으로 해줘야 했다.

img03

처리하는 방법은 간단하다.
pages 디렉토리 안에 라우팅 되는 곳에 아래의 코드로 설정이 가능하다.

import Head from "next/head"

export default function Home(props: MainPageProps) {
  return (
    <>
      <Head>
        <title>흑우집합소 - 다음 1등은 당신입니다 ^^</title>
      </Head>
    </>
  )
}

이렇게 하면 된다.

전역 설정하기

여기는 더 쉽다.
_app.js 파일에 위 처럼 작성해서 넣어주면 된다.

import { Html, Head } from "next/document"

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko" data-theme="emerald">
        <Head>
          <title>흑우집합소 - 다음 1등은 당신입니다 ^^</title>
        </Head>
      </Html>
    )
  }
}

정리

생각보다 어렵지 않다.
단지 페이지가 많으면 약간 귀찮을 뿐이다.

자신만의 서비스에 title 적용이 안되어 있다면 얼른 적용해보도록 하자.