robots.txt 및 sitemap.xml 설정
Next.js 애플리케이션에서 robots.txt 및 sitemap.xml 파일을 적절히 설정하는 것은 검색 엔진 최적화(SEO)에 중요한 역할을 합니다.
이 절에서는 이 파일들을 생성하고 관리하는 방법, 그리고 동적 사이트맵 생성 전략에 대해 알아보겠습니다.
robots.txt 파일 구성
Next.js 13부터는 app 폴더에 robots.js 파일을 생성하여 robots.txt를 동적으로 생성할 수 있습니다.
export default function robots() {
return {
rules: [
{
userAgent: '*',
allow: '/',
disallow: '/private/',
},
],
sitemap: 'https://example.com/sitemap.xml',
}
}이 방식은 동적으로 robots.txt를 생성할 수 있게 해주며, 환경 변수나 다른 조건에 따라 내용을 변경할 수 있습니다.
정적 sitemap.xml 생성
간단한 정적 사이트의 경우, public 폴더에 직접 sitemap.xml 파일을 생성할 수 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com</loc>
<lastmod>2023-01-01</lastmod>
</url>
<url>
<loc>https://example.com/about</loc>
<lastmod>2023-01-02</lastmod>
</url>
</urlset>동적 sitemap.xml 생성
동적 콘텐츠가 많은 사이트의 경우, app 폴더에 sitemap.js 파일을 생성하여 동적으로 sitemap.xml을 생성할 수 있습니다.
export default async function sitemap() {
const baseUrl = 'https://example.com'
// 데이터베이스나 API에서 동적 페이지 목록을 가져옵니다
const posts = await fetchBlogPosts()
const postUrls = posts.map((post) => ({
url: `${baseUrl}/blog/${post.slug}`,
lastModified: post.updatedAt,
}))
return [
{
url: baseUrl,
lastModified: new Date(),
},
{
url: `${baseUrl}/about`,
lastModified: new Date(),
},
...postUrls,
]
}이 방식은 동적 콘텐츠를 포함한 모든 URL을 사이트맵에 포함시킬 수 있게 해줍니다.
대형 사이트를 위한 사이트맵 분할 전략
사이트 규모가 커지면 단일 sitemap.xml 파일이 너무 커질 수 있습니다.
이 경우 사이트맵 인덱스 파일을 사용하여 여러 사이트맵 파일로 분할할 수 있습니다.
export default async function sitemap() {
const baseUrl = 'https://example.com'
// 여러 사이트맵 파일 생성
const sitemaps = [
'sitemap-posts.xml',
'sitemap-products.xml',
'sitemap-categories.xml',
]
return [
{
url: baseUrl,
lastModified: new Date(),
},
...sitemaps.map((sitemap) => ({
url: `${baseUrl}/${sitemap}`,
lastModified: new Date(),
})),
]
}
// app/sitemap-posts.js, app/sitemap-products.js, app/sitemap-categories.js도 유사하게 구현자동 생성 및 업데이트
사이트맵을 자동으로 생성하고 업데이트하려면 빌드 프로세스의 일부로 스크립트를 실행하거나, 서버리스 함수를 사용하여 정기적으로 사이트맵을 재생성할 수 있습니다.
15장 배포와의 연관성
robots.txt 및 sitemap.xml 설정은 15장의 배포 과정과 밀접하게 연관됩니다.
배포 시 이러한 파일들이 올바르게 생성되고 서빙되는지 확인해야 합니다.
특히 동적으로 생성되는 사이트맵의 경우, 배포 프로세스에 사이트맵 생성 단계를 포함시키거나, 주기적으로 업데이트되도록 설정해야 합니다.
예를 들어, Vercel에 배포할 경우 빌드 명령에 사이트맵 생성 스크립트를 포함시킬 수 있습니다.
{
"scripts": {
"build": "next build && node scripts/generate-sitemap.js"
}
}실습 : sitemap.xml 자동 생성 및 업데이트
동적 콘텐츠를 가진 웹사이트의 sitemap.xml을 자동으로 생성하고 업데이트하는 스크립트를 구현해보겠습니다.
- 먼저, 필요한 패키지를 설치합니다.
npm install globby- 사이트맵 생성 스크립트를 작성합니다.
const fs = require('fs')
const globby = require('globby')
const path = require('path')
async function generateSitemap() {
const baseUrl = 'https://example.com'
const pages = await globby([
'app/**/*.js',
'!app/**/_*.js',
'!app/**/layout.js',
'!app/api/**/*',
])
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages
.map((page) => {
const route = page
.replace('app', '')
.replace('/page.js', '')
.replace('.js', '')
return `
<url>
<loc>${baseUrl}${route}</loc>
<lastmod>${new Date().toISOString()}</lastmod>
</url>
`
})
.join('')}
</urlset>
`
fs.writeFileSync('public/sitemap.xml', sitemap)
console.log('Sitemap generated successfully')
}
generateSitemap()- package.json에 스크립트를 추가합니다.
{
"scripts": {
"build": "next build",
"postbuild": "node scripts/generate-sitemap.js"
}
} 이 실습에서는 globby를 사용하여 모든 페이지 파일을 찾고, 이를 바탕으로 sitemap.xml을 생성합니다.
postbuild 스크립트를 사용하여 빌드 직후 사이트맵을 자동으로 생성합니다.
동적 콘텐츠에 대한 추가적인 고려사항
- 데이터베이스나 CMS에서 동적 콘텐츠를 가져와 사이트맵에 포함시킬 수 있습니다.
- 정기적으로 사이트맵을 업데이트하기 위해 cron job이나 서버리스 함수를 사용할 수 있습니다.
- 대량의 동적 콘텐츠가 있는 경우, 사이트맵을 여러 파일로 분할하고 사이트맵 인덱스 파일을 생성할 수 있습니다.
robots.txt 및 sitemap.xml 파일을 올바르게 설정하고 관리하는 것은 웹사이트의 SEO를 향상시키는 데 중요한 역할을 합니다.
Next.js의 App Router를 사용하면 이러한 파일들을 동적으로 생성하고 관리할 수 있어, 항상 최신 상태의 정보를 검색 엔진에 제공할 수 있습니다.
특히 동적 콘텐츠가 많은 대규모 웹사이트의 경우, 자동화된 사이트맵 생성 및 업데이트 프로세스를 구현하는 것이 효율적인 SEO 전략의 핵심이 될 수 있습니다.