26.May.2020

@nuxtjs/sitemapモジュールを使ってsitemapを作成する

seo nuxtjs

概要

@nuxtjs/sitemapモジュールを使って、本サイトのsitemapの自動生成ができるように対応しました。

こちらの記事では、コマンドラインで、sitemapを生成していたのですが
どうやら@nuxtjs/sitemapモジュールは生成したsitemapのキャッシュやgzip対応なども含まれていて
大変便利なことがわかったので、以前の方式をやめて、こちらのmoduleを使うように移行しました。

実施事項

  1. moduleのインストール
% yarn add @nuxtjs/sitemap
  1. nuxt.config.jsの修正

(少しデフォルメはしてますが)以下のように修正しました。

  // modulesに@nuxtjs/sitemapを追加
  modules: [
    '@nuxtjs/sitemap'
  ],

  // 以下をごっそり追加
  sitemap: {
    hostname: 'https://this-site.com',
    gzip: true,
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 24, // 1 day
    routes: async () => {
      const apiBaseUrl = 'https://api-host/api/v1'
      const results = [
        {
          url: '/',
          changefreq: 'daily'
        },
        {
          url: '/about',
          changefreq: 'monthly'
        }
      ]
      const { data } = await axios.get(`${apiBaseUrl}/entities/`)
      if (data) {
        data.forEach((entity) => {
          results.push({
            url: `/entities/${entity.slug}`,
            lastmod: entity.updated_at,
            changefreq: 'weekly'
          })
        })
      }
      return results
    }
  },

以上の対応で、以下のrouteが追加されて、sitemapの生成を確認できました。

Related Activities

NuxtJSにEditor.jsを導入

リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。

AOSをNuxtJSのサイトに導入する

スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました

[Javascript]Web Share APIを使って共有ボタンを実装

Navigator.shareを使ってサイトの共有ボタンを実装しました。

NuxtJsベースのWebアプリにGoogle Analyticsを導入する

NustJsベースのWebアプリに@nuxtjs/google-gtagというパッケージを使ってGoogle Analyticsを導入してみました。