2019/04/21 2020/04/03

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

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

headとmetaタグの設定
SNS用 OGPタグとTwitterカードの設定
サイトマップの生成
Googleアナリティクスの設置
Google Search Consoleの設定
コードのシンタックスハイライト
ブログの画像サーバとしてGoogleフォトを使う
コメント欄を設置【Disqus】
まとめ

headとmetaタグの設定

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

設定例
nuxt.config.js（全体で共通の設定）

  head: {
    // デフォルトとなるタイトル
    title: 'イズミログ',
    // タイトルの書式 (%sの中にtitleの文字列が入る)
    titleTemplate: '%s - Izm Log',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'ブログの説明文' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/static/izm-icon.jpg' },
      { rel: 'shortcut icon', size: '196x196', href: '/static/izm-icon.jpg' },
      { rel: 'apple-touch-icon', href: '/static/izm-icon.png' }
    ]
  }

pages/posts/_slug.vue（各記事の設定）

  //this.postにContentfulから取得した記事内容が入っている
  head() {
    return {
      title: this.post.fields.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.fields.description }
    }
  }

記事ごとにheadの内容を上書きして設定することができます。
僕はContentfulのFieldsにDescriptionという説明文の入力欄を追加して、記事毎にこれを設定するようにしています。

nuxt-blog-seo-description-1

SNS用 OGPタグとTwitterカードの設定

FacebookやTwitterでシェアされた時に表示される文章や画像を設定します。
上の項目で記述したheadの設定に次のように追記していきます。

pages/posts/_slug.vue（各記事の設定）

  //this.postにContentfulから取得した記事内容が入っている
  head() {
    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: "https:"+this.post.fields.image.fields.file.url },
        { hid: 'twitter:card', name: 'twitter:card', content: "summary" },
        { hid: 'twitter:site', name: 'twitter:site', content: "@immzm51"}
      ]
    }
  },

OGPやTwitter Cardの詳細についてはこちらのサイトが参考になります。
リンク：【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

サイトマップの生成

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

$ npm install @nuxtjs/sitemap

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

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

このブログの場合は個別記事ページが動的ページです。
generateのroutesの内容を少しアレンジして記述しました。
その他の設定項目は"@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

ブログの画像サーバとしてGoogleフォトを使う

(2020/4/3 追記)
下記の手順を楽にするツールを作成しました！
Googleフォトのアルバムから埋め込みコードを生成するツールを作った【ブログに便利】 - Izm Log

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】

まとめ

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

ではまた。

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