Nuxt.jsでSEO対策した開発まとめ【パンくず・構造化・metaタグなど】

Nuxt.jsでSEO対策した開発まとめ【パンくず・構造化・metaタグなど】

Nuxt.js

Nuxt.jsでパンくず・構造化・metaタグなどのSEO対策した開発方法についてまとめました。

パンくずリスト

パンくずリストを設置することで、ユーザが閲覧しているページが階層構造内のどこに位置しているかを示すことができます。

パンくずリストの設置のメリット

ユーザビリティが高くなる

パンくずリストを設置することで、ユーザビリティを高めることができます。

ページ数の多いサイトになると構造が複雑になり、ユーザ自身が今サイト内のどこにいるか分かりにくくなることがあります。

パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。

検索エンジンが効率的にクローリングできる

パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。

するとクローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。

パンくずリストの実装

パンくずリストを設置するためのstoreを用意します。サイトのTOPページのURLはenvが取得するようにしています。

・store/breadcrumbs.js

 

次にパンくずリストを設置したいページのasyncDataにパンくずリストデータを用意し、setBreadcrumbsで先ほど作成したstoreにセットします。

今回は例として本の詳細ページのパンくずリストを設置しています。この場合は、「サイト名 / 全ての本 / 本」のようなパンくずリストができます。

パンくずリストの表示は次の構造化データとあわせて紹介します。

・pages/books/_id.vue

 

構造化データ

構造化データとは、HTMLで書かれた情報を検索エンジンに理解しやすいようにタグづけしたものです。

構造化データのメリット

検索エンジンがサイトコンテンツを認識しやすくなる

構造化データを用いることで、検索エンジンはサイトのコンテンツを認識しやすくなります。

HTMLで構造化されるので、情報の持つ意味がより明確に検索エンジンに伝わり、適切に認識されるようになります。

検索結果にリッチスニペットが表示されることがある

構造化データを用いると、検索結果にリッチスニペットが表示されることがあります。

リッチスニペットは検索結果画面に大きく表示されるので、競合のサイトと差別化が図れたり、ユーザーにクリックされやすくなったりします。

構造化データの実装

先ほどのパンくずリストの実装でセットしたbreadcrumbsをここで表示させています。

headタグに構造化データを埋め込むため、jsonld()メソッドを呼び出しています。パンくずリストのデータから構造化データをjsonld()メソッド内でJSON形式で生成し、そのレスポンスをセットしています。

構造化データ生成のやり方はこちらを参考にしています。

https://qiita.com/ryota-yamamoto/items/2c43c606d9a96fc4de5f

 

・components/breadcrumbs.vue

実装後、起動させてheadタグを確認すると、以下のようにscriptタグで構造化データが生成されています。

 

titleタグ・meta descriptionタグ・canonicalタグ

それぞれのページに固有のタイトル、メタディスクリプションを設定します。

canonicalタグは、重複するページが存在する場合、どのURLが1番重要であるかを検索エンジンに対して指定するHTMLタグのことです。

headタグにそれぞれ以下のように設定してあげましょう。

・pages/books/_id.vue

 

mataタグ

nuxt.config.jsのheadプロパティでサイト情報のmetaタグを追加します。

「og-」などのOGPは、FacebookやTwitterをはじめとするSNSとWebサービスの連携を行うために必要なhtmlソースコードへの記述をルール化したものを指します。

・nuxt.config.js

 

サイトマップ

サイトマップとは、サイト全体のページ構成を地図のように一覧で記載しているページのことです。

ユーザーや検索エンジンにサイト内容をわかりやすく伝える役割を担っています。

サイトマップを用意しておくことで、ユーザが目的のページを探しやすくなったり、検索エンジンがサイト内のページを知らせることができます。

サイトマップの実装

@nuxtjs/sitemapを使用してサイトマップを生成するので、まずはインストールします。

インストールしたら、nuxt.config.jsのmodulesオプションに@nuxtjs/sitemapを追加します。

・nuxt.config.js

nuxt.config.jsに、sitemapオプションを追加し、サイトマップに追加するページをセットしていきます。

excludeパラメータでサイトマップに除外したいページを指定することができます。

generateコマンドで静的ファイル生成のタイミングでサイトマップも生成されます。生成後、デプロイし/sitemap.xmlにアクセスすると確認できます。

・nuxt.config.js

 

404ページ

静的ページとして生成してほしくない場合、fallbackをtrueにすることで、ファイルが存在しな場合は404.htmlとなります。

layoutsディレクトリ配下にerror.vueを作成することでエラーページ(200.html)が生成されますが、fallbackが未設定の場合はこのエラーページ(200.html)に飛ばされます。

・nuxt.config.js

 

高速化

Nuxt.jsでは静的ページを生成することができるため、生成したファイルをNetlifyやFirebase Hostingなどのホスティングサービスに静的ファイルをデプロイすることで高速化が可能になります。

詳しくはこちらのJamstackによる開発で詳しく説明しています。

「Jamstack」アーキテクチャによるWeb開発【Nuxt.js×MicroCMS×Firebase】
新規開発で「Jamstack」アーキテクチャを取り入れて開発したので、その過程やメリットなどについてまとめておきます。 Jamstack構成にあたり以下のサービ…
mintaku-blog.net

 

Google アナリティクス

Google アナリティクスは、Googleが提供するアクセス解析ツールで、登録したサイトのユーザーの行動に関するデータがわかります。

Google アナリティクスを設置するために、@nuxtjs/google-analyticsをインストールします。

インストールしたら、nuxt.config.jsのmodulesにアナリティクスのトラッキングIDを追加して完了です。

・nuxt.config.js

 

その他にもモバイル対応や内部リンク対策などがあります。追々追記していきます。