Next.js의 SEO

🔍 SEO를 위한 도구

robots.txt 는 검색엔진 크롤러가 웹 사이트를 크롤링하면서 정보를 수직할때 엑세스하거나 정보 수집을 해도 되는 페이지가 무엇인지를 알려주는 역할을 한다.
아래와 같이 작성한다.

User-agent: *
Allow: /

Sitemap: https://hjk329.github.io/sitemap.xml

User-agent 필드는 규칙이 적용되는 크롤러를 식별한다.
Allow 필드는 크롤링이 허용되는 URL을 의미한다.
Disallow 필드를 설정해서 접근하거나 정보 수집이 허용되지 않는 페이지를 표시할 수도 있다.

Sitemap 필드는 도메인 내의 페이지 목록을 의미한다.

Next.js에서 robots.txt와 sitemap을 자동으로 생성해주는 패키지가 있다! ✨

next-sitemap

개발 환경별로 config를 설정할 수도 있고, 동적인 페이지에 대해서도 사이트맵을 생성할 수 있다고 한다.

공식 문서를 따라해보면 config는 아래와 같이 설정한다.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

그리고 package.json에 아래와 같이 스크립트를 추가한다.

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

이후에 어플리케이션을 빌드하면 public 폴더 아래에 robots.txt와 sitemap.xml 파일이 생성된다!

동적 페이지에 대한 사이트맵은 아래와 같이 생성할 수 있다.

// pages/server-sitemap.xml/index.tsx 파일을 생성한다.

import { getServerSideSitemap } from 'next-sitemap'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // CMS의 URL을 가져온다 (articleId 를 리턴해주는 api 요청을 할 수 있겠다)
  // const urls = await fetch('https//example.com/api')

  const fields = [
    {
      loc: 'https://example.com', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
    {
      loc: 'https://example.com/dynamic-path-2', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
  ]

  return getServerSideSitemap(ctx, fields)
}

// Default export to prevent next.js errors
export default function Sitemap() {}

그리고 config 설정을 아래와 같이 추가한다.

// next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  exclude: ['/server-sitemap.xml'], // static 사이트맵 리스트에서는 제외한다
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/server-sitemap.xml', // 추가 사이트맵을 설정하는 옵션에 추가해준다
    ],
  },
}