NEW ARTICLE
Rubyのエラー『SocketError: getaddrinfo: Name or service not known』の解決方法
  1. HOME
  2. nuxt.js
  3. nuxt.js @nuxtjs/sitemapを使ってsitemap.xmlを生成する手順

nuxt.js @nuxtjs/sitemapを使ってsitemap.xmlを生成する手順

nuxt.js @nuxtjs/sitemapを使ってsitemap.xmlを生成する手順

nuxt.jsでsitemap.xmlを生成するには「@nuxtjs/sitemap」を利用するのが非常に便利です。

目次

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsはnpx create-nuxt-appでインストールしてます。

@nuxtjs/sitemapインストール

下記のコマンドでインストールします。

npm i -S @nuxtjs/sitemap

または

yarn add @nuxtjs/sitemap

@nuxtjs/sitemap使い方

プロジェクト配下にあるnuxt.config.jsのmodulesに ‘@nuxtjs/sitemap’ を追加します。 

modules: [
    '@nuxtjs/sitemap'
  ],

次に nuxt.config.jsの下記をコードを追加します。

sitemap: {
    path: '/sitemap.xml',
    // host名を設定
    hostname: 'https://example.com',
    // 静的に設定した場合も、サイトマップを生成する設定
    generate: true,
    // 除外したいページがあれば追加 
    // 例 /contact 等
    exclude: [],
    //　動的なルーティングがあれば下記のように追加
    //　ここでは利用しないためコメントアウト
    // routes() {      
    //   const paths = []
    //   for (let i = 1; i <= 5; i++) {
    //     paths.push('page/' + i)
    //   }
    //   return paths
    // }
  },

buildして、generateしてみます。

## build
npm run build
or
yarn build

## generate
npm run generate
or
yarn generate

distディレクトリ配下にsitemap.xmlが作成されていることが確認できます。