next.js SEO 적용 - 사이트맵과 robots

사이트맵(sitemap)

사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일이다. 검색엔진은 사이트맵을 읽고 사이트를 효율적으로 크롤링한다.
구글에 사이트맵을 제출하는 방법은 두 가지가 있다.

  1. 구글의 Search Console API를 사용해서 제출하는 방법
  2. Googlebot이 ping을 사용해 사이트맵 파일에 액세스 하는 방법

난 여기서 구글봇이 ping으로 액세스할 수 있게 만들 예정이다. 구글이 핑을 보내는 방법은 여기서 확인하면 된다.

사이트맵 만들기

  1. /app/sitemap/route.ts 경로에 api를 만든다

/app/sitemap/route.ts
1
2export function GET() {
3  const date = new Date();
4  const year = date.getFullYear();
5  const month = String(date.getMonth() + 1).padStart(2, "0");
6  const day = String(date.getDate()).padStart(2, "0");
7
8  const allPostPaths = getAllPostPathStrings();
9
10  const postsSitemap = allPostPaths
11    .map((pathname) => {
12      return `
13      <url>
14        <loc>${url}/blog/posts/${pathname}</loc>
15        <lastmod>${year}-${month}-${day}</lastmod>
16      </url>
17    `;
18    })
19    .toString()
20    .replaceAll(",", "");
21  const sitemap = `
22      <?xml version="1.0" encoding="UTF-8"?>
23        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
24            ${postsSitemap}
25        </urlset>
26    `.trim();
27
28  return new Response(sitemap, {
29    status: 200,
30    headers: { "Content-Type": "application/xml" },
31  });
32}
33
  • 2~5번 줄은 W3C Datetime 포맷을 위한 날짜 정의
  • 7번 줄은 sitemap에 등록할 게시물을 불러오는 함수 호출
  • 9~16번 줄은 각 게시물마다 사이트맵 url을 생성해준다.
    • <lastmod></lastmod>는 수정일
    • <loc></loc>은 사이트맵의 위치
    • 16번 줄은 문자열로 변환해주고 리스트를 문자열로 그대로 변환할 시 콤마가 생기므로 없애준다.
  • 17~22번 줄은 완성된 사이트맵 폼으로 만들어준다.
  • 24~27번 줄은 xml형태로 response를 주는 응답 구문이다.

  1. /next.config.js에서 rewrites를 추가해준다.

/next.config.js
1
2const nextConfig = {
3  async rewrites() {
4    return [
5      {
6        source: "/sitemap.xml",
7        destination: "/api/sitemap",
8      },
9    ];
10  },
11};
12
  • rewrites는 destination 경로의 URL 프록시 역할을 해준다.
  • 구글에서 https://jiwony.dev/sitemap.xml로 요청하면 위에서 만든 api로 호출하게 되는 것이다.

robots.txt

robots.txt란 웹사이트에 웹 크롤러같은 로봇들의 접근을 제어하기 위한 규약이다.

robots.txt 만들기

  1. /app/robots/route.ts 경로에 api를 만든다

/app/robots/route.ts
1
2export function GET() {
3  return new Response(
4    `User-agent: *
5Allow: /
6Disallow: /api
7Sitemap: ${siteUrl}/sitemap.xml
8Host: ${siteUrl}
9  `,
10    {
11      status: 200,
12    }
13  );
14}
15
  • User-agent: 제어할 로봇의 User-Agent
    • ex) 구글: Googlebot, Naver: Yeti
  • Allow: 접근 허가할 경로이며 맨 끝에 /를 붙이지 않으면 확장자가 없는 파일로 인식해서 제대로 작동하지 않는다.
    • ex) /blog/posts/
  • Disallow: 접근 차단 경로
  • Sitemap: 사이트맵 경로로 위에서 만든 사이트맵 경로를 기입하면 된다.

  1. /next.config.js에서 rewrites를 추가해준다.

/next.config.js
1
2async rewrites() {
3    return [
4      {
5        source: "/sitemap.xml",
6        destination: "/api/sitemap"
7      },
8      {
9        source: "/robots.txt",
10        destination: "/api/robots"
11      }
12    ]
13  },
14
  • sitemap을 만든 것과 같은 방식으로 rewrites안에 추가해준다.

마무리

sitemap과 robots.txt로 SEO를 진행해봤다. 사실 사이트맵이랑 robots.txt를 만들어주는 라이브러리도 있지만 직접 api를 만들고 next.config.js를 수정하면서 만든 이유는 next.js의 기능을 적극적으로 사용하고자 하는 마음이 컸기 때문이다. 직접 구현하면서 프레임워크에 더 익숙해지는 과정이 좋다고나 할까.

  그리고 다음에는 SEO관련해서 <head></head>의 meta 태그와 path 및 내용 관련해서 적용하고 글을 업로드 할 예정이다.

참조