ウェブ系Nuxtブログ

Nuxtで作ったブログにオススメの便利な設定たち(備忘録)

前回までの記事で、Nuxt + Contentful + Netlifyでブログ作成ができました。
そこで、Nuxtでのブログ作成において設定しておいた方がよさそうな項目をリストアップしてみました。
手順についても簡単に紹介しています。
初心者なりの備忘録なので、必要な項目を見つけ次第、随時追加していきます。

headとmetaタグの設定

head、metaタグによってブログのタイトルや説明文を設定します。
Nuxtではnuxt.config.jsで全ページ共通の設定に加え、各ページごとにタグの設定ができます。
注意点として、modeがuniversalでない(spaになっている)と、ページごとの設定が反映されません。
設定方法:API: head プロパティ - Nuxt.js
設定の例:SEO HTML Head - Nuxt.js

nuxt.config.jsでtitleTemplateを設定すると、全ページで共通となるタイトルの書式を決められます。
僕は各記事ページのタイトルを「Contentfulの記事タイトル」+「ブログ名」にするため、下記のように設定してます。
nuxt.config.js

  head: {
    title: 'イズミログ',  //タイトルが設定されなかった時用のデフォルト
    titleTemplate: '%s - Izm Log'
  }

pages/posts/_slug.vue

  head() {  //this.postにContentfulから取得した記事内容が入っている
    return {
      title: this.post.fields.title  //=>「記事のタイトル - Izm Log」
    }
  }

説明文(description)なども、記事毎に設定することが出来ます。
僕は記事の説明文の入力欄をContentfulのfieldsに追加して、記事毎に記述しています。

nuxt-blog-seo-description-1

pages/posts/_slug.vue

  head() {  //this.postにContentfulから取得した記事内容が入っている
    return {
      title: this.post.fields.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.fields.description },
        { hid: 'og:site_name', property: 'og:site_name', content: this.post.fields.title + ' - Izm Log' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:url', property: 'og:url', content: 'https://izm51.com/posts/' + this.post.fields.slug },
        { hid: 'og:title', property: 'og:title', content: this.post.fields.title },
        { hid: 'og:description', property: 'og:description', content: this.post.fields.description },
        { hid: 'og:image', property: 'og:image', content: this.post.fields.image.fields.file.url }
      ]
    }
  },

サイトマップの生成

サイトマップを設置すると検索エンジンにサイトの構成を伝えることができ、検索にのりやすくなります。
@nuxtjs/sitemapを使用すれば、ビルド時に自動でサイトマップを生成できます。

$ npm install @nuxtjs/sitemap

nuxt.config.jsのモジュールに@nuxtjs/sitemapを追加します。
また、sitemapのセクションも追加し、sitemap生成の設定を記述します。

静的ページは自動でサイトマップに追加されます。
しかし、動的生成されるページのパスはroutesに自分で設定する必要があります。

このブログの場合は個別記事ページが動的ページです。
generateroutesの内容を少しアレンジして記述しました。
その他の設定項目は"@nuxtjs/sitemap"のReadmeを参照してください。

  modules: [
    '@nuxtjs/sitemap',
  ],
  sitemap: {
    hostname: 'https://example.com',
    routes() {
      return client
      .getEntries({ content_type: 'post' })
      .then(entries => {
        return entries.items.map(entry => {
          return "/posts/" + entry.fields.slug
        })
      })
    }
  },

Googleアナリティクスの設置

Googleアナリティクスを設置すれば、ページごとの閲覧数などを解析できるようになります。
@nuxtjs/google-analyticsを使用すれば設定は簡単です。

$ npm install @nuxtjs/google-analytics

'nuxt.config.js'のモジュールに'@nuxtjs/google-analytics'とアナリティクスのトラッキングIDを追加

  modules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-XXXXXXXXX-X'
    }]
  ]

詳細:Google アナリティクスの統合 - Nuxt.js

Google Search Consoleの設定

Googleの検索結果を分析するため、Google Search Consoleの設定をしておきます。
TXTレコードの設定方法など、少しややこしい箇所もあります。

まず、Google Search Consoleの入力欄にドメインを入力します。

google-search-console-0

「続行」ボタンを押すと、ドメインの所有者確認画面が表示されます。
ここで「コピー」ボタンを押し、TXTレコードをコピーします。

当ブログのようにNetlifyのネームサーバーを使用している場合は、NetlifyのDNSパネルを開きます。
Netlifyの管理ページで「Domain settings」をクリック

Netlify-domain-setting

⇓「・・・」を押し、「Go to DNS panel」をクリック

go-to-DNS-panel

⇓「Add new record」をクリック

dns-settings

⇓「Record type」を「TXT」、「Name」を「@」にし、「Value」にGoogle Search Consoleでコピーした「TXTレコード」を張り付ける。
そして「Save」をクリック

DNSの設定が反映されるまで数分待ち、Google Search Consoleの確認ボタンを押すと、設定完了の画面が表示されます。

google-search-console-2

コードのシンタックスハイライト

prism-0

プログラミング系のブログの場合、記事内にコードが多く含まれると思います。
そのプログラミングコードを見やすくするために、シンタックスハイライトを設定します。

下記記事に手順をまとめました。
markdown-it + Prism.jsでシンタックスハイライト - Izm Log

ブログの画像サーバとしてGooglePhotoを使う

ContentfulではFreeタイプの場合、保存できる記事や画像などの合計個数が5000個までです。
(記事投稿時点)
5000記事にはしばらく到達しないと思いますが、
画像も合わせて5000個までとなるとすぐにオーバーしてしまいそうです。

そこで、記事はContentful、画像はGooglePhotoに保管することにしてみました。
(注:GooglePhotoの仕様変更などにより画像が表示できなくなる可能性アリ)

まず、記事に使用したい画像をGooglePhotoで開き、右上にある「共有ボタン」をクリック

GooglePhoto-Share

「リンクを作成」をクリックし、作成されたURLをコピー

GooglePhoto-Link

コピーしたURLを下記リンクの「Paste Google Photos link here..」と書いてある入力欄に張り付け、「GENERATE CODE」をクリック
https://ctrlq.org/google/photos/

generate-code-from-GooglePhoto

少し待つと画像のURLリンクが生成されます。
「Direct Link (URL)」をコピー

Copy-url

Contentfulの記事作成画面を開き、画像のURLをMarkdown記法で貼り付けます。
画像URL末尾の=w2400は、画像表示時の最大幅になるので、必要に応じて調整や消去します。

![Copy-url](https://lh3.googleusercontent.com/ayA-OhW6nWL10VxmmFb9QFsOuVUOMzHNez6s-ZNPuuJx-Q020m7v2id1rj4xUATpx7zgjsa5IDX-eEuvkikGQPnWRVbA6gB-1vPa8cAnk7hZ7L4IiRPphvzz9c3xcYCyWI8ntL0seA=w2400)
<!-- ![画像のalt属性](画像のURL) -->

以上、少し手間がかかってしまいますがGooglePhotoの画像を記事に使用する手順です。
リンクの生成に外部サービスを使用してしまっているので、より簡単な方法が見つかればアップデートします。
当ブログの画像が表示されなくなっていたら、この方法は使えなくなっている可能性が高いです。

コメント欄を設置【Disqus】

Disqus-image

"Disqus"というコメント欄を簡単に設置できるサービスを見つけたので、設置しました。

設置手順は下記記事にまとめました。
Nuxtで作ったブログにコメント欄を設置する方法【Disqus】

まとめ

このブログの作成時に設定したり、カスタマイズした項目集の備忘録でした。
必要そうな項目を見つけ次第、随時記事にしていきます!

ではまた。


コメント欄 ご意見、ご感想お気軽に!間違いなどあれば、ご指摘お願いいたします!