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

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

2023. 8. 24. 07:50ㆍUX Engineer 이야기
Seulbi Lee

들어가며

요즘 서비스를 만들 때 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 자동 생성이 된다는 소식도 류 팀장님께서 알려주시고 가이드 정리까지 다 해주셨는데요. 덕분에 빠르게 학습하고 글을 작성할 수 있었던 거 같습니다. 감사드려요~!

이 글은 pxd XE Group Blog에서도 보실 수 있습니다.

참고문서

저작자표시

태그

최근글

댓글

공지사항

아카이브