Page Router - SEO 설정

2026.09.22 · 1분 읽기 · 조회 0

SEO 설정

SEO는 '검색엔진 최적화(Search Engine Optimization)'의 줄임말로, 네이버나 구글 같은 검색창에 내 글이나 홈페이지가 맨 위에 나오도록 맞추는 작업을 의미한다. 이것 설정을 잘 해야 검색엔진에 노출이 잘 된다.

바닐라 html 에서 사용했던 메타태그들을 각 페이지마다 넣어줄 수 있다.

import Head from "next/head";

next/head 로 부터 <Head> 컴포넌트를 불러온다. head/document 에서는 불러오지 않음에 주의한다.

export default funciton Home(){
  (생략)
  return (  
    <>
      <Head><Head>
      <main/>
    </>
  )
}

페이지 컴포넌트의 상위에 <Head>를 넣고, 그 안에 메타태그들을 넣어주면 된다.

<Head>
  <title>페이지 제목<title/>
  <meta property="og:image" content="{썸네일이미지경로}"/>
  <meta property="og:title" content="제목"/>
  <meta property="og:description" content="페이지 설명"/>
<Head>

• <title>: 해당 페이지의 제목

• <meta>: 링크로 카카오톡, 페이스북 등에 공유될 때 필요한 썸네일, 타이틀 같은 오픈그래프를 설정한다.

  • og:image: 페이지 공유 시 썸네일 이미지
  • og:title: 페이지 공유 시 보이는 제목
  • og:description: 페이지 공유 시 보이는 설명

다음 포맷들을 각 페이지에 넣어주면 된다.

동적경로를 적용한 SSG 페이지의 경우 fallback 옵션을 true 로 준다면, 빌드타임에 사전 렌더링 되지 않은 페이지에 요청이 들어왔을 때, 먼저 빈 html페이지를 주고(fallback 상태), 이후에 내용물을 건네준다고 했었다.

export default function Page(생략){
  const router = useRouter();
  if (router.isFallback) return "로딩 중"
 
  if (!book) return "오류 발생"
}

router.isFallback 을 통해 폴백 상태일 때의 화면을 보여줄 수 있는데 이때도 <head>를 통해 기본적인 메타태그를 내려주면 SEO에 더 좋을 수 있으니 신경을 쓰면 좋다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글