[Vue.js] Vue3 SEO 최적화하기 (sitemap.map, robots.txt)

개발 포트폴리오 사이트를 만들었는데, 배포는 성공했다만 생각해보니 검색 유입을 위한 SEO(Search Engine Optimization) 최적화를 하지 않았음을 깨달았다..
따라서 Vue3로 하는 방법을 간략히 정리해보고자 한다.

참고로 여기서는 각 포털별 세팅은 다루지 않고 sitemap.xml, robots.txt 생성법만 작성했다.
포털별 세팅은 인터넷에 검색하면 많이 나오기 때문에 우리 개발 알잘딱 분들은 잘 하실거라 믿는다 ㅎㅎ

sitemap.xml만들기

일단 자신의 프로젝트에서 어떤 vue 프레임워크를 사용하는지 잘 알아야 한다.
VuePress같은 경우에는 vuepress-plugin-sitemap 패키지를 설치해서 module.exports를 하면 바로되지만,
필자는 vue3를 쌩으로 갖다 박았기 때문에 직접 생성을 해야한다. ㅎㅋ… 뒤늦게 몰려드는 후회
왜냐면 플러그인 패키지를 돌리면 아래와 같은 에러가 발생하기 때문이다.

node:internal/modules/esm/get_format:183
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
  ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for /Users/rubykim/portfolio/frontend/src/views/Home.vue
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:183:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:209:36)
    at defaultLoadSync (node:internal/modules/esm/load:173:14)
    at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:723:12)
    at #loadSync (node:internal/modules/esm/loader:745:49)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:384:38)
    at new ModuleJobSync (node:internal/modules/esm/module_job:342:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:332:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1570:24)
    at Module._compile (node:internal/modules/cjs/loader:1722:5) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

한줄 요약하자면 vue파일 인식이 안되네요라는 말이므로, 결국 노가다를 해야한다는 뜻이다.
다행히도 노가다 코드는 매우 간단한 편이다.

먼저 패키지를 설치해준 후,

npm install sitemap

코드를 다음과 같이 세팅해주면 된다.

// generate-sitemap.js
const { SitemapStream, streamToPromise } = require("sitemap");
const { createWriteStream } = require("fs");
const { resolve } = require("path");

const routes = [
  // 여기에서 모든 page의 url입력
  { path: "/", priority: 1.0 },
  { path: "/about", priority: 0.9 },
  { path: "/contact", priority: 0.9 },
];

const sitemap = new SitemapStream({
  hostname: <실제_배포_사이트_url>,
});

streamToPromise(
  routes
    .reduce((stream, route) => {
      stream.write({
        url: route.path,
        changefreq: "monthly",
        priority: route.priority,
      });
      return stream;
    }, sitemap)
    .end()
).then((data) => {
  const outputPath = resolve(__dirname, "dist/sitemap.xml");
  const writeStream = createWriteStream(outputPath);
  writeStream.write(data.toString());
  writeStream.end();
});

이 파일을 설정해줬다면 package.json의 build script에 sitemap 생성 명령어를 같이 입력해주자.

...
"scripts": {
    "build": "vue-cli-service build && node generate-sitemap.js",
  },
...

robots.txt 만들기

robots.txt는 만들기 매우 쉽다. 그냥 txt 파일을 갖다 넣으면 되기 때문이다.
다만 여기서 중요한 것이 있는데, 웹사이트 루트 디렉토리에 위치해야 한다는 것이다.

특별한 프로젝트 구조가 아닌 이상, 대부분 public폴더에 robots.txt를 만들어놓으면 build시 자동으로 루트 디렉토리에 해당 파일이 위치하게 될 것이다.
아래는 robots.txt 예시이다.

User-agent: *
Disallow:
Sitemap: <실제_배포_사이트_url>/sitemap.xml

필자는 포트폴리오 사이트에 대해서 SEO를 설정하고 있기 때문에, Disallow를 따로 세팅하지는 않았다.
만약 개발 중인 페이지나 검색 결과에 나타나기 원하지 않는 콘텐츠가 있다면, Disallow에 넣어주도록 하자.

결과물