
Next.JS에서 동적으로 Sitemap, RSS 생성하는 방법
2024-03-17
SEO 관리를 위해 동적으로 Sitemap과 RSS를 생성하는 방법을 알아봅니다.
Contents
Sitemap 생성하기
사이트맵 (Sitemap) 에는 블로그에서 주소, 날짜와 같은 정보들이 적혀있습니다.
앞서 말했듯 블로그 글에 대해 동적으로 sitemap.xml을 생성하도록 했습니다.
import posts from "@/utils/getPosts";
import { MetadataRoute } from "next";
const URL = "https://post.sid12g.dev";
export default function sitemap(): MetadataRoute.Sitemap {
const postList = posts.map((postName) => ({
name: postName.meta.title,
slug: postName.slug,
// content: postName.content,
date: postName.meta.date,
}));
const postsRoute = postList.map(({ slug, date }) => {
return {
url: `${URL}/posts/${slug}`,
lastModified: date,
};
});
const routes = [""].map((route) => ({
url: `${URL}${route}`,
lastModified: new Date().toISOString(),
}));
return [...routes, ...postsRoute];
}
저의 경우에서 코드를 설명한다면, posts의 경우 모든 포스트 (블로그 글) 의 정보가 들어있는 변수입니다. posts에서 각 글의 주소와, 날짜를 필터링 한 뒤, 글 수 만큼 이를 Sitemap으로 생성해줍니다.
이는 도메인 뒤에 /sitemap.xml 을 붙여 확인하실 수 있습니다.
RSS 생성하기
RSS란? 블로그처럼 컨텐츠 업데이트가 자주 일어나는 웹사이트에서, 업데이트된 정보를 쉽게 구독자들에게 제공하기 위해 XML을 기초로 만들어진 데이터 형식 입니다.
또한 Google Search Console 에서는 RSS 파일 또한 등록해서 검색엔진에 도움을 줄 수 있습니다.
import posts from "@/utils/getPosts";
import RSS from "rss";
async function getFeedData() {
return posts;
}
export async function GET() {
const feed = new RSS({
title: "sid12g's blog",
description: "조성민의 블로그에 오신 것을 환영합니다.",
generator: "RSS for Node and Next.js",
feed_url: "https://post.sid12g.dev/feed.xml",
site_url: "https://post.sid12g.dev",
image_url: "https://post.sid12g.dev/images/blog_image.webp",
copyright: `Copyright ${new Date().getFullYear().toString()}`,
language: "ko-KR",
pubDate: new Date().toUTCString(),
ttl: 60,
});
const allPosts = await getFeedData();
if (allPosts) {
allPosts.map((post: any) => {
feed.item({
title: post.meta.title,
description: post.meta.description,
url: `https://post.sid12g.dev/posts/${post.slug}`,
categories: [post.meta.tag],
date: post.meta.date,
custom_elements: [{ "content:encoded": post.content }],
});
});
}
return new Response(feed.xml({ indent: true }), {
headers: {
"Content-Type": "application/xml; charset=utf-8",
},
});
}
위 코드도 간단하게 설명한다면, 우선 feed에 사이트 기본 정보를 담은 후 모든 글의 정보가 있는 allPosts를 가져와서 각 포스트의 제목, 설명, 주소 등을 가져와 이를 rss로 만듭니다.
이는 도메인 뒤에 /feed.xml 을 붙여 확인하실 수 있습니다.
Robots.txt 작성하기
User-agent: Googlebot
Allow : /
User-agent: Yeti
Allow: /
User-agent: *
Disallow: /
Sitemap: https://post.sid12g.dev/sitemap.xml
robots.txt는 각 포털의 크롤러들이 수집할 수 있도록 권한을 명시한 파일입니다. 위 코드는 Google과 Naver의 크롤러만 수집할 수 있도록 설정한 상태입니다.
이 또한 도메인 뒤에 /robots.txt 을 붙여 확인하실 수 있습니다.
위와 같이 Sitemap, RSS, robots.txt를 사용한다면 사이트의 노출과 SEO에 더 좋은 영향을 줄 수 있을 것입니다. 여러분의 사이트를 Google Search Console에 등록하면 검색 뿐 아니라 사이트의 유입, 검색어, 순위 등의 통계를 알 수 있으니 꼭 등록해보시길 바랍니다.
긴 글 읽어주셔서 감사합니다.