[Vue.js] sitemap-webpack-plugin 통해 sitemap.xml 만들기

🔹 왜 하게 되었을까

Vue.js는 기본적으로 SPA(Single Page Application)입니다. 그래서 아무 생각 없이 검색 엔진에 색인 없이 등록하면 되겠다는 생각으로 구글 콘솔에 올렸는데, 아래와 같은 메일을 받았습니다.

soft 404

SPA에 어떻게 404가 나오지? 라는 생각을 하며 Soft 404를 찾아보니, 200 status를 주지만 내용이 없어 마치 404 같은 사이트를 감지하는 것 같습니다. 너무 똑똑한 엔진...

우선 지정되지 않는 path에 대해서 router에서 404 디폴트 페이지로 리다이랙션되도록 만들어 주었습니다.(참고)

이참에 색인을 위한 sitemap.xml을 만들어보자는 생각에 시작했고, 생각보다 한글 자료가 없어 글로 남겨봅니다.

 

🔹 라이브러리 검색

관련 라이브러리들이 npm에 몇개 있었습니다. 잘 모를 때는 많이 쓰는 것을 선택하자는 마음으로 트렌드를 검색해 보았습니다.

2022 연말에는 다들 개발을 쉬었나? 꾸준히 stiemap-webpack-plugin이 인기가 좋아 보이고, 검색했을 때 특별한 이슈가 없어 보여 이걸로 선택합니다.

 

🔹 sitemap-webpack-plugin 적용하기

npm 사이트는 다음과 같습니다. Optional 한 방법들은 공식 문서를 보는 것을 추천드립니다. 여기서는 가장 기본적은 디폴트값으로 설정하는 것을 설명하겠습니다. sitemap.xml을 기본값으로 설정됩니다.

 

1. Install

npm i sitemap-webpack-plugin

 

2. webpack.config.js or vue.config.js 설정

Vue 버전 3 CLI로 생성된 프로젝트에서 webpack.config.js이 숨겨진다고 합니다. (참고) 

대신 vue.config.js를 이용하는데 이 역시 같게 설정할 수 있습니다.

// webpack.config.js 또는 vue.config.js
const SitemapPlugin = require('sitemap-webpack-plugin').default;

const paths = [
  {
    path: '/index/',
    lastmod: '2015-01-04',
    priority: 0.8,
    changefreq: 'monthly'
  },
  {
    path: '/admin/',
    lastmod: '2018-02-05',
    priority: 0.5,
    changefreq: 'yearly'
  }
];

export default {
  // Basic usage (output defaults to sitemap.xml)
  plugins: [
    new SitemapPlugin({ base: 'https://mysite.com', paths })
  ]
}

 

 

🔹 sitemap.xml 적용 확인

정상적으로 적용된 것을 볼 수 있습니다. router에 따로 등록 안 해도 404 디폴트 페이지로 리다이렉트 되지 않는 것으로 보아 라이브러리에서 설정되는 것 같습니다.