posted 3 months ago
Next-sitemap은 Next.js 프로젝트의 사이트맵 생성을 간편하게 도와주는 패키지입니다. 사이트맵 생성을 자동화하여 SEO(검색 엔진 최적화)에 도움을 줍니다. 문서를 참고해 직접 정리한 내용입니다.
프로젝트 폴더에서 npm 또는 yarn을 사용해 패키지를 설치합니다.
npm install next-sitemap
직접 사용에 앞서, root 폴더에 next-sitemap.config.js
이름의 설정 파일을 생성합니다.
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: 'https://example.com',
generateRobotsTxt: true, // (optional)
// ...other options
}
"scripts": {
"build": "next build",
"postbuild": "next-sitemap --config next-sitemap.config.js"
}
Next-sitemap에서 사용 가능한 주요 옵션들은 아래와 같습니다. 필수적인 요소 이외, 추가할 수 있는 다양한 기능이 있습니다.
sitemapSize
exclude
['/secret-page', '/hidden']
.extraPaths
['/extra-page', '/special']
.excludeIndex
false
true
로 설정하면 모든 index
페이지가 sitemap에서 제외됩니다. 이는 특정 index
페이지를 검색 엔진 결과에서 제외시키고자 할 때 사용할 수 있습니다.sourceDir
next
outDir
public
robotsTxtOptions
generateRobotsTxt
옵션이 true
일 경우, 이 설정을 사용하여 robots.txt
파일에 대한 세부 설정을 할 수 있습니다. 이 객체 내에서는 policy
, sitemap
, host
등의 설정을 할 수 있으며, 사이트의 검색 엔진 크롤링 방식을 세밀하게 제어할 수 있습니다.이러한 수정 및 보완을 통해 사용자는 자신의 Next.js 프로젝트의 sitemap을 보다 세밀하게 조정하고, 웹사이트의 검색 엔진 최적화(SEO)를 개선할 수 있습니다.
module.exports = {
siteUrl: 'https://example.com',
generateRobotsTxt: true,
sitemapSize: 7000,
exclude: ['/secret', '/private'],
extraPaths: ['/extra', '/special'],
excludeIndex: true,
sourceDir: '.next',
outDir: 'public',
robotsTxtOptions: {
additionalSitemaps: [
'https://example.com/extra-sitemap.xml', // 추가 사이트맵
],
policy: [
{ userAgent: '*', disallow: '/private' }, // 정책 생성
],
}
}
next-sitemap.config.js
설정 가이드이 설정은 SEO 운영을 원활하게 하고, 다국어 사이트 최적화를 위해 설계되었습니다. MDX 파일 확장자를 포함하여 사이트맵이 업데이트될 수 있도록 특별한 함수를 적용하는 방법을 포함합니다. siteUrl
은 반드시 사용자의 도메인으로 변경해야 하며, 다국어 서비스를 제공하지 않는 경우 alternateRefs
설정은 필요 없습니다. 마찬가지로, 페이지에 MDX 파일이 아닌 다른 형식의 파일만 있다면 additionalPaths
설정 역시 불필요할 수 있습니다. 개인 프로젝트의 요구사항에 맞게 설정을 조정하여 우수한 SEO 성과를 달성할 수 있습니다. robotsTxtOptions
는 사이트의 크롤링을 제어하기 위해 추가되었으며, 전체적인 허용 정책을 세분화하지 않고 일관되게 사용할 수 있습니다.
changefreq
priority
sitemapSize
exclude
alternateRefs
additionalPaths
/pages
내의 모든 MDX 파일을 찾아 사이트맵에 자동으로 추가할 수 있습니다.module.exports = {
siteUrl: 'http://example.com',
changefreq: 'daily',
priority: 0.7,
sitemapSize: 5000,
generateRobotsTxt: true,
exclude: [],
alternateRefs: [
{
href: 'https://example.com/kr',
hreflang: 'ko',
},
{
href: 'https://example.com/en',
hreflang: 'en',
},
{
href: 'https://example.com/jp',
hreflang: 'ja',
},
],
transform: async (config, path) => {
return {
loc: path,
changefreq: config.changefreq,
priority: config.priority,
lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
alternateRefs: config.alternateRefs ?? [],
}
},
additionalPaths: async (config) => {
const allMdxFiles = findAllMdxFiles('./pages')
return allMdxFiles.map((file) => ({
loc: `${config.siteUrl}/${file}`,
changefreq: config.changefreq,
priority: config.priority,
lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
alternateRefs: config.alternateRefs ?? [],
}))
},
robotsTxtOptions: {
policies: [
{
userAgent: '\*',
allow: '/',
},
{
userAgent: 'Googlebot',
allow: '/',
disallow: [],
},
{
userAgent: 'Bingbot',
allow: '/',
disallow: [],
},
{
userAgent: 'Yeti',
allow: '/',
disallow: [],
},
{
userAgent: 'Yahoo! Slurp',
allow: '/',
disallow: [],
},
{
userAgent: 'Yahoobot', // Japan Yahoo
allow: '/',
disallow: [],
},
],
additionalSitemaps: ['https://example/sitemap-0.xml'],
},
}