# VuePress でサイトマップを設定する📝

# サイトマップとは

サイト上の各ファイルの情報/関係を伝えるファイルです。 Google などの検索エンジンはサイトマップを読み込むことで、より高度なクロールを行えます。

# vuepress-plugin-sitemap のインストール

$ npm install -D vuepress-plugin-sitemap

# config.js の設定

// src/.vuepress/config.js

const url = "https://hene.dev/";

module.exports = {
  // 略
  plugins: [
    [
      "sitemap",
      {
        hostname: url,
        changefreq: "weekly"
      }
    ],
    // 略
  ]
};

# changefreq

ページの更新頻度を指定できます。

# robots.txt の設置

robots.txt を設置することで、クローラーを制御できます。

# src/.vuepress/public/robots.txt

User-agent: *
Disallow: /log/
Sitemap: https://hene.dev/sitemap.xml

# User-agent

クロール対象を指定できます。

以下のようにすると、すべてのクローラーを対象にできます。

User-agent: *

# Disallow

クロールを禁止したいファイル、ディレクトリを指定できます。

https://hene.dev/log/ 以下のファイルをクロール禁止したかったので、以下のように指定しました。

Disallow: /log/

# Sitemap

サイトマップの場所を指定できます。

Sitemap: https://hene.dev/sitemap.xml

# 開発環境

開発環境では、http://localhost:8080/sitemap.xml にアクセスしても、404 になりましたが本番環境では、問題なく表示されました。

# 開発環境でサイトマップを確認

開発環境でビルドすると

$ npm run build

サイトマップが吐き出されるので確認できます。

# サイトマップを送信

Google Search Console で、サイトマップを送信できます。

Sitemap

264 件の URL が検出されました!

# 参考🔗