Next.JS Next-Sitemap
🌍

Next.JS Next-Sitemap

Description
Next-Sitemap으로 sitemap.xml 자동 생성
category
Development
Tag
Next.js
Google
Date
Nov 15, 2023 11:48 AM

Google Search Console

해당 사이트에서 구글 검색결과에 나의 사이트를 노출되게 할 수 있다.
그래서 요구되는 것이 sitemap이다. 따라서 검색을 해본결과 직접 sitemap을 만들어 robots.txt에 등록 할 수 있지만 자동으로 해주는 패키지가 있다고 한다.
 

Next-Sitemap

구글링을 통해 알게되었다.
해당 pakage를 이용하면 손쉽게 sitemap이 만들어진다고 한다.
다양한 옵션을 줄 수 있고 동적 사이트맵도 제작 가능하다고 한다.
이번에는 간단하게 정적사이트맵만 제작해 보았다.
 

Install

//패키지 설치 npm i next-sitemap -D
 

Create config file (next-sitemap.config.js)

/** @type {import('next-sitemap').IConfig} */ module.exports = { siteUrl: 'https://example.com', //내 사이트 주소 generateRobotsTxt: true, // (optional) }
파일이름은 지정되어있지만 custom-config-file도 제작 가능하다.
 

Package.json에 추가

"scripts": { "dev": "next dev", "build": "next build", //custom-config-file일 시 "next-sitemap --config awesome.config.js" 이걸로 "sitemap": "next-sitemap", "start": "next start", "lint": "next lint" },
 

create sitemap

npm run sitemap > first@0.1.0 sitemap > next-sitemap ✨ [next-sitemap] Loading next-sitemap config: file:///C:/Users/Bobong/Documents/GitHub/Next.js-Front-end/next-sitemap.config.js ✅ [next-sitemap] Generation completed ┌───────────────┬────────┐ │ (index) │ Values │ ├───────────────┼────────┤ │ indexSitemaps │ 1 │ │ sitemaps │ 1 │ └───────────────┴────────┘ ----------------------------------------------------- SITEMAP INDICES ----------------------------------------------------- ○ https://bobong.blog/sitemap.xml ----------------------------------------------------- SITEMAPS ----------------------------------------------------- ○ https://bobong.blog/sitemap-0.xml
참고로 sitemap 생성 전에 꼭 build를 진행한 뒤 실행시켜주자!
 
notion image
아래와 같이 생성되었다.
 

sitemap-0.xml

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url><loc>https://bobong.blog</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://bobong.blog/about-me</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://bobong.blog/posts</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> <url><loc>https://bobong.blog/projects</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url> </urlset>
잘 생성된 것을 볼 수 있다.
 
notion image
조아써!