Next.js 블로그 sitemap 생성, 검색엔진 등록

sitemap 생성
- 실행 결과 확인
검색엔진 등록
- Google Search Console
- Naver Search Advisor

검색엔진에 노출되기 위해선 봇들에게 우리 블로그에 어떤 페이지가 있는지 알려줘야 합니다.
✨ next-sitemap 라이브러리를 통해서 모든 정적 페이지 정보가 담긴 sitemap.xml를 만들어 봅시다.

sitemap 생성

yarn add -D next-sitemap

next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://bepyan.github.io',
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 7000,
  generateRobotsTxt: true,
  exclude: [],
};

package.json

{
  "scripts": {
    "build": "next build && next-sitemap && next export",
    "postbuild": "next-export-optimize-images",
    "serve": "npx http-server out"
  }
}

여기서 주의할 점은 next build 실행 후 next export 전에 next-sitemap 실행 해줘야 한다는 것입니다.
그래야 public에 생성된 파일들이 최종적으로 out에 export됩니다.

기본적으로 아래와 같은 파일들이 생성되는데요.
public/robots.text public/sitemap.xml public/sitemap-0.xml
이들이 push되지 않도록 해줍니다.

.gitignore

/build
/public/robots.txt
/public/sitemap*.xml

직접 sitemap을 생성하는 방법도 있는데요 여기를 참고해주시면 됩니다.
저는 검색엔진에서 자꾸 sitemap을 자동인식하지 못해서 직접 만드는 방법을 사용하게 되었습니다.

실행 결과 확인

yarn build를 실행하면 out 디랙토리에도 sitemap 관련 파일들이 추가된 것을 확인할 수 있습니다.

221116-000505

github action에서도 잘 실행된 것을 확인할 수 있습니다.

221115-231937

sitemap.xml

<url>
  <loc>https://bepyan.github.io</loc>
  <lastmod>2022-11-15T15:18:54.289Z</lastmod>
  <changefreq>daily</changefreq>
  <priority>0.7</priority>
</url>

검색엔진 등록

sitemap을 만든다고해서 끝이 나는 것이 아닙니다.
크롤러, 봇이 블로그 글들을 수집하기 위해선 검색엔진에 사이트를 등록해줘야 합니다.

Google Search Console

Google은 Google Search Console에 등록하면 됩니다.

URL 접두어에 블로그 도메인 주소를 입력해줍니다.
https://bepyan.github.io/

221116-011827

편의상 HTML 태그 방법을 활용하도록 합니다.
_document.tsx 파일에 meta 태그를 추가해주면 됩니다.

import { Head, Html } from 'next/document';

export default function MyDocument() {
  return (
    <Html lang="ko">
      <Head>
        <meta name="google-site-verification" content="" />
        {/* ... */}
      </Head>
      {/* ... */}
    </Html>
  );
}