main-logo

Next.js SEO 자동으로 적용하기

robot, sitemap 파일을 명령어 한번으로 자동 생성해봅시다.

profile
zurang23
2023년 07월 22일 · 0 분 소요

들어가며

요즘 서비스를 만들 때 SEO도 당연히 생각하고 만들다 보니 robot, sitemap 파일 등록이 필수가 되었습니다.
그룹 내에서도 해당 부분 프로젝트 구축 시 누락되지 않게 체크할 수 있는 체크 리스트와 가이드를 만들어 놓고 작업을 하고 있는데요, 이번에 Next.js에서 자동으로 sitemap을 생성해 주는 패키지가 업데이트되었다고 해서 현재 운영 중인 사이트에 적용해 보는 겸 가이드를 정리해 보았습니다.

sitemap이 필요한가요?

구글에서는 아래와 같이 사이트맵의 필요성을 정의하고 있습니다.

사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링 합니다. 사이트맵은 내가 사이트에서 중요하다고 생각하는 페이지와 파일을 Google에 알리고 중요한 관련 정보를 제공합니다.

사이트 페이지가 제대로 링크되었다면 대개 Google에서 대부분의 사이트를 찾을 수 있습니다. 올바른 연결이란 사이트의 메뉴나 페이지에 배치한 링크와 같이 일부 탐색 형식을 통해 중요하다고 생각하는 모든 페이지에 도달할 수 있다는 것을 의미합니다. 그렇다 하더라도 사이트맵을 사용하면 크고 복잡한 사이트나 전문화된 파일의 크롤링을 개선할 수 있습니다.

사이트맵은 검색엔진에서 사이트의 URL을 발견하도록 도와주지만 사이트맵의 모든 항목이 크롤링 되고 색인 생성된다고 보장하지는 않습니다. 하지만 대부분의 경우 사이트에 사이트맵이 있다면 도움이 됩니다.



다음과 같은 경우 사이트맵이 필요할 수 있습니다.

  • 크기가 큰 사이트 : 일반적으로 사이트 규모가 클수록 모든 페이지가 사이트에 있는 하나 이상의 다른 페이지에 연결되어 있는지 확인하기가 어렵습니다. 따라서 Googlebot이 새로운 페이지 중 일부를 발견하지 못할 가능성이 높습니다.
  • 연결되는 외부 링크가 많지 않은 새로운 사이트 : Googlebot 및 기타 웹 크롤러는 한 페이지에서 다른 페이지로 연결되는 링크를 따라 이동하여 웹을 크롤링 합니다. 따라서 다른 사이트가 페이지에 링크되어 있지 않으면 Googlebot이 페이지를 찾지 못할 수도 있습니다.
  • 리치 미디어 콘텐츠(동영상, 이미지)가 많거나 Google 뉴스에 표시되는 사이트 : Google에서 Google 검색에 표시할지 여부를 결정할 때 사이트맵의 추가 정보를 고려할 수 있습니다.

next.js에서 sitemap을 자동으로 만들기

next-sitemap

먼저 next-sitemap 패키지 추가가 필요합니다.

yarn add -D next-sitemap

 

인스톨한 뒤에 package.json 파일에 사이트맵 생성만을 위한 명령어를 추가하거나, 그냥 빌드 시 알아서 만들어 줬으면 좋겠어!라는 분들은 빌드 명령어에 추가해 주셔도 됩니다.

{
  "scripts": {
    "build": "next-sitemap && next build",
    "sitemapbuild": "next-sitemap"
  }
}

 

그리고 next-sitemap.config.js라는 파일 하나가 필요합니다.
설정값들은 아래에 정리되어 있는 내용을 참고해 작성해 주시면 됩니다.

// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  // 웹사이트의 기본 URL
  siteUrl: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
  // 파일을 생성 robots.txt하고 생성된 사이트맵을 나열 (기본 false)
  generateRobotsTxt: true,
  // 사이트맵 크기를 지정하여 큰 사이트맵을 여러 파일로 분할 (기본 5000)
  sitemapSize: 7000,
  // 페이지 주소 변경 빈도 (검색엔진에 제공) : always, daily, hourly, monthly, never, weekly, yearly
  changefreq: 'daily',
  // 우선사항 (기본 0.7)
  priority: 1,
  // sitemap 등록 제외
  exclude: [
    '/ignore-pages/page', // 페이지 하나만 제외
    '/ignore-pages/**', // 하위 페이지 전체 제외
  ],
  robotsTxtOptions: {
    // 정책 설정
    policies: [
      {
        // 모든 agent 허용
        userAgent: '*',
        // 모든 페이지 주소 크롤링 허용
        allow: '/',
        // 크롤링 제외
        disallow: ['/ignore-pages'],
      },
    ],
  },
};

 

사이트맵 등록 시 크롤링 제외되어야 하는 페이지들이 서비스마다 있는 경우가 있을 텐데요. 그럴 때 꼭 disallow 설정에 추가해 주세요.

모든 설정이 끝났다면 build를 해봅시다.

yarn build

 

build 성공
/public/robot.txt
/public/sitemap.xml

 

build가 성공되고 나면 sitemap 파일과 robot 파일을 생성해 줍니다.
sitemap을 확인해 보니 sitemap과 robot 파일도 잘 생성되었고, 크롤링 제외를 시켰던 페이지도 잘 제외된 것을 확인했습니다! 세상에 너무 편해졌어요..

동적 페이지일 경우는 아래와 같은 작업이 더 필요하니 참고해 주세요.

dynamic sitemap

import { GetServerSideProps } from 'next';
import { getServerSideSitemap, ISitemapField } from 'next-sitemap';
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const posts: number[] = [...Array(5)].map((_, i) => i); // fetch를 통해 데이터를 가져왔다 치고..
  const sitemaps: ISitemapField[] = posts.map((idx) => {
    return {
      // 페이지 경로
      loc: `${process.env.NEXT_PUBLIC_SITE_URL || `http://localhost:3000`}/posts/${idx}`,
      // 변경일
      lastmod: new Date().toISOString(),
      changefreq: 'daily',
      priority: 1,
    };
  });
  return getServerSideSitemap(ctx, sitemaps);
};

 

next-sitemap.config.js에 추가

// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  // 웹사이트의 기본 URL
  siteUrl: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
  // 파일을 생성 robots.txt하고 생성된 사이트맵을 나열 (기본 false)
  generateRobotsTxt: true,
  // 사이트맵 크기를 지정하여 큰 사이트맵을 여러 파일로 분할 (기본 5000)
  sitemapSize: 7000,
  // 페이지 주소 변경 빈도 (검색엔진에 제공) : always, daily, hourly, monthly, never, weekly, yearly
  changefreq: 'daily',
  // 우선사항 (기본 0.7)
  priority: 1,
  // sitemap 등록 제외
  exclude: [
    '/ignore-pages/page', // 페이지 하나만 제외
    '/ignore-pages/**', // 하위 페이지 전체 제외
  ],
  robotsTxtOptions: {
    // 정책 설정
    policies: [
      {
        // 모든 agent 허용
        userAgent: '*',
        // 모든 페이지 주소 크롤링 허용
        allow: '/',
        // 크롤링 제외
        disallow: ['/ignore-pages'],
      },
    ],
    // 추가 sitemap 설정
    additionalSitemaps: [
      `${
        process.env.NEXT_PUBLIC_SITE_URL || `http://localhost:3000`
      }/sitemap/posts-sitemap.xml`,
    ],
  },
};

 

yarn build



마치며

생각보다 SEO 최적화 작업은 번거로운 작업이 많습니다. OG나 title 같은 작업은 그래도 형규 주임님이 자동화로 코드를 정리해 줘서 잘 쓰고 있지만 sitemap과 robot는 작성할 때마다 까먹고 가이드 다시 찾아보고 그랬는데, 이젠 명령어 하나로 편하게 작업할 수 있을 거 같아 너무 좋네요!
항상 주어진 것만 하기 바빠 새로운 트렌드 쫓아가는 것에 좀 더딘 편인데요, 이번 next.js에서 sitemap 자동 생성이 된다는 소식도 류 팀장님께서 알려주시고 가이드 정리까지 다 해주셨는데요. 덕분에 빠르게 학습하고 글을 작성할 수 있었던 거 같습니다. 감사드려요~!

 

참고문서