안녕하세요. J4J입니다.
이번 포스팅은 next-sitemap 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
sitemap이란?
sitemap은 구글, 네이버와 같은 검색 사이트들의 크롤링 봇들에게 우리 서비스에서 사용할 수 있는 사이트 주소를 알려주기 위해 활용합니다.
그러면 검색 사이트들의 크롤링 봇들에게 사이트 주소를 알려주는 이유에 대해 궁금증이 생길 수 있습니다.
이 질문에 대한 이유는 우리가 운영하는 서비스가 사용자들의 검색어에 많이 노출되어 더 많은 사용자가 유입될 수 있도록 도와주기 때문입니다.
하지만 상황에 따라서 우리 서비스의 특정 사이트 주소는 외부에 노출되면 안 되는 것이 존재할 수 있습니다.
즉, 검색 사이트의 크롤링 봇들이 특정 사이트에 대한 정보를 크롤링하는것을 막아야 합니다.
이런 역할을 하기 위해 사용되는 것으로 robots.txt가 있습니다.
robots.txt를 이용하면 크롤링을 해도 되는 주소와 하지 말아야 될 주소를 구분하여 명시해 줄 수 있습니다.
결국 sitemap과 robots.txt는 결국 검색엔진최적화 (SEO)에 기본 구조를 잡는 밑바탕이 됩니다.
그리고 이러한 sitemap과 robots.txt를 next에서는 next-sitemap을 이용하여 간편하게 만들어낼 수 있습니다.
next-sitemap 사용 방법
[ 1. 패키지 설치 ]
$ npm install -D next-sitemap
[ 2. postbuild 추가 ]
package.json 파일에 postbuild를 다음과 같이 추가해 주시면 됩니다.
{
"scripts": {
"postbuild": "next-sitemap",
},
}
[ 3. next-sitemap.config.js 추가 ]
root경로에 next-sitemap.config.js 파일을 하나 생성해 줍니다.
해당 파일은 sitemap을 어떤 식으로 생성할지에 대한 설정 정보가 담겨있습니다.
주로 사용하게 될 설정들을 이용하여 다음과 같이 작성해 볼 수 있으며, 추가적인 기능이 궁금하신 분들은 여기에서 더 다양한 기능을 확인하실 수 있습니다.
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: 'http://localhost:8088', // .게시하는 site의 url
generateRobotsTxt: true, // robots.txt generate 여부 (자동생성 여부)
sitemapSize: 7000, // sitemap별 최대 크기 (최대 크기가 넘어갈 경우 복수개의 sitemap으로 분리됨)
changefreq: 'daily', // 페이지 주소 변경 빈도 (검색엔진에 제공됨) - always, daily, hourly, monthly, never, weekly, yearly 중 택 1
priority: 1, // 페이지 주소 우선순위 (검색엔진에 제공됨, 우선순위가 높은 순서대로 크롤링함)
exclude: [
'/exclude/review', // 페이지 주소 하나만 제외시키는 경우
'/exclude/**', // 하위 주소 전체를 제외시키는 경우
], // sitemap 등록 제외 페이지 주소
robotsTxtOptions: {
// 정책 설정
policies: [
{
userAgent: '*', // 모든 agent 허용
allow: '/', // 모든 페이지 주소 크롤링 허용
disallow: [
'/exclude', // exclude로 시작하는 페이지 주소 크롤링 금지
]
},
// 추가 정책이 필요할 경우 배열 요소로 추가 작성
]
} // robots.txt 옵션 설정
}
[ 4. build ]
모든 설정이 완료되었다면 build를 해주시면 됩니다.
package.json 설정에 따라 다르겠지만 일반적으로 다음 명령어를 이용하시면 됩니다.
$ npm run build
build가 성공적으로 동작되면 /public 폴더에 다음과 같은 신규 파일들이 생성된 것을 확인해 볼 수 있습니다.
파일 생성이 되었다면 서버를 실행하여 다음의 경로들을 들어가 sitemap과 robots.txt를 확인할 수 있습니다.
- sitemap → {도메인}/sitemap.xml
- robots.txt → {도메인}/robots.txt
동적 sitemap 사용 방법
위의 결과를 통해 만들어진 것 중 sitemap.xml에서 확인 가능한 loc를 들어가 보면 다음과 같이 프로젝트 내부에 존재하는 페이지들이 나열되는 것을 확인할 수 있습니다.
여기서 문제점은 위의 sitemap은 모두 정적 페이지라는 것입니다.
즉, 다음과 같이 페이지의 경로에 동적으로 값이 변경되어 들어오는 페이지들에 대해서는 sitemap이 만들어지지 않는다는 것입니다.
이런 경우에는 동적 페이지를 위한 sitemap을 자체적으로 생성하여 robots.txt에 추가적으로 노출시켜 줄 수 있습니다.
다음의 절차를 통해 동적 페이지에 대한 경로가 명시된 sitemap을 만들어보겠습니다.
[ 1. xml.tsx 파일 추가 ]
상품 번호 페이지들이 등록될 sitemap.xml 파일을 다음과 같이 만들어줍니다.
그리고 만들어진 파일 내부에는 GetServerSideProps를 이용하여 다음과 같이 코드를 작성해 주시면 됩니다.
import { GetServerSideProps } from 'next';
import { getServerSideSitemap, ISitemapField } from 'next-sitemap';
export const getServerSideProps: GetServerSideProps = async (context) => {
const productNos: number[] = [1, 2, 3, 4, 5, 6, 7, 8]; // fetch를 통해 데이터 가져오는 구간
const sitemapFields: ISitemapField[] = productNos.map((productNo) => {
return {
loc: `http://localhost:8088/product/${productNo}`, // 페이지 경로
lastmod: new Date().toISOString(), // 최근변경일자
changefreq: 'daily', // 페이지 주소 변경 빈도 (검색엔진에 제공됨) - always, daily, hourly, monthly, never, weekly, yearly 중 택 1
priority: 1, // 페이지 주소 우선순위 (검색엔진에 제공됨, 우선순위가 높은 순서대로 크롤링함)
}
});
return getServerSideSitemap(context, sitemapFields);
}
export default () => {
//
};
[ 2. next-sitemap.config.js에 sitemap 등록 ]
위에서 만들어둔 파일이 만들어지는 페이지 경로를 다음과 같이 robots.txt 옵션 설정하는 쪽에 등록해 주시면 됩니다.
/** @type {import('next-sitemap').IConfig} */
module.exports = {
robotsTxtOptions: {
// 추가 sitemap 설정
additionalSitemaps: [
'http://localhost:8088/sitemap/product-sitemap.xml',
]
} // robots.txt 옵션 설정
}
[ 3. build ]
등록이 완료되었다면 이전과 동일하게 build를 해줍니다.
$ npm run build
build가 완료되었다면 서버를 실행하여 정상 적용되었는지 확인해 주시면 됩니다.
여기서 robots.txt 같은 경우는 build를 해야만 정상적으로 확인이 가능합니다.
하지만 동적 sitemap 같은 경우는 프로젝트 내부에서 페이지를 자체적으로 생성한 것입니다.
그래서 꼭 build를 해야 확인이 가능한 것이 아니라는 점 알고 가시면 좋을 것 같습니다.
이상으로 next-sitemap 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > Next' 카테고리의 다른 글
| [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing (0) | 2023.02.17 |
|---|---|
| [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR (0) | 2023.02.12 |
| [Next] 하위 경로 사용하기 (0) | 2022.06.27 |
| [Next] 환경 변수(.env) 타입을 설정하여 자동 완성 사용하기 (0) | 2022.04.16 |
| [Next] Production에서 Console 출력 제거하기 (0) | 2022.04.10 |
댓글