Nuxt.jsでパンくず・構造化・metaタグなどのSEO対策した開発方法についてまとめました。
目次
パンくずリスト
パンくずリストを設置することで、ユーザが閲覧しているページが階層構造内のどこに位置しているかを示すことができます。
パンくずリストの設置のメリット
ユーザビリティが高くなる
パンくずリストを設置することで、ユーザビリティを高めることができます。
ページ数の多いサイトになると構造が複雑になり、ユーザ自身が今サイト内のどこにいるか分かりにくくなることがあります。
パンくずリストを設置することで「自分が今サイト内のどこにいるのか」や「サイトの構造」を認識しやすくなり、結果として使いやすさを高めることができます。
検索エンジンが効率的にクローリングできる
パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。
するとクローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。
パンくずリストの実装
パンくずリストを設置するためのstoreを用意します。サイトのTOPページのURLはenvが取得するようにしています。
・store/breadcrumbs.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | export const state = () => ({ breadcrumbs: [{ url: process.env.BASE_URL, text: 'サイト名' }] }) export const getters = { breadcrumbs: state => state.breadcrumbs } export const mutations = { setBreadcrumbs (state, { breadcrumbs }) { state.breadcrumbs = breadcrumbs } } |
次にパンくずリストを設置したいページのasyncDataにパンくずリストデータを用意し、setBreadcrumbsで先ほど作成したstoreにセットします。
今回は例として本の詳細ページのパンくずリストを設置しています。この場合は、「サイト名 / 全ての本 / 本」のようなパンくずリストができます。
パンくずリストの表示は次の構造化データとあわせて紹介します。
・pages/books/_id.vue
1 2 3 4 5 6 7 8 9 | async asyncData ({ store, params }) { await store.commit('breadcrumbs/setBreadcrumbs', { breadcrumbs: [ { url: env.BASE_URL, text: 'サイト名' }, { url: `${env.BASE_URL}/books`, text: '全ての本' }, { url: `${env.BASE_URL}/books/${params.id}`, text: store.getters['books/book'].name } ] }) } |
構造化データ
構造化データとは、HTMLで書かれた情報を検索エンジンに理解しやすいようにタグづけしたものです。
構造化データのメリット
検索エンジンがサイトコンテンツを認識しやすくなる
構造化データを用いることで、検索エンジンはサイトのコンテンツを認識しやすくなります。
HTMLで構造化されるので、情報の持つ意味がより明確に検索エンジンに伝わり、適切に認識されるようになります。
検索結果にリッチスニペットが表示されることがある
構造化データを用いると、検索結果にリッチスニペットが表示されることがあります。
リッチスニペットは検索結果画面に大きく表示されるので、競合のサイトと差別化が図れたり、ユーザーにクリックされやすくなったりします。
構造化データの実装
先ほどのパンくずリストの実装でセットしたbreadcrumbsをここで表示させています。
headタグに構造化データを埋め込むため、jsonld()メソッドを呼び出しています。パンくずリストのデータから構造化データをjsonld()メソッド内でJSON形式で生成し、そのレスポンスをセットしています。
構造化データ生成のやり方はこちらを参考にしています。
https://qiita.com/ryota-yamamoto/items/2c43c606d9a96fc4de5f
・components/breadcrumbs.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <template> <div> <ol> <li v-for="(breadcrumb, index) in breadcrumbs" :key="index" > <a :href="breadcrumb.url"> {{ breadcrumb.text }} </a> </li> </ol> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters('breadcrumbs', ['breadcrumbs']), jsonld () { const items = this.breadcrumbs.map((item, index) => ({ '@type': 'ListItem', position: index + 1, item: { '@id': item.url, name: item.text } })) return { '@context': 'http://schema.org', '@type': 'BreadcrumbList', itemListElement: items } } }, head () { const hid = `jsonld-${this._uid}` return { script: [ { hid, type: 'application/ld+json', innerHTML: JSON.stringify(this.jsonld, null, 2) } ], __dangerouslyDisableSanitizers: ['script'], __dangerouslyDisableSanitizersByTagID: { [hid]: 'innerHTML' } } } } </script> |
実装後、起動させてheadタグを確認すると、以下のようにscriptタグで構造化データが生成されています。
titleタグ・meta descriptionタグ・canonicalタグ
それぞれのページに固有のタイトル、メタディスクリプションを設定します。
canonicalタグは、重複するページが存在する場合、どのURLが1番重要であるかを検索エンジンに対して指定するHTMLタグのことです。
headタグにそれぞれ以下のように設定してあげましょう。
・pages/books/_id.vue
1 2 3 4 5 6 7 8 9 10 11 | head () { return { title: this.book.name + 'の詳細ページ', meta: [ { hid: 'description', name: 'description', content: this.book.name + 'の詳細ページです。著者、あらすじ、レビューなどをまとめています。' } ], link: [ { hid: 'canonical', rel: 'canonical', href: `${process.env.PROD_URL}/books/${this.$route.params.id}` } ] } } |
mataタグ
nuxt.config.jsのheadプロパティでサイト情報のmetaタグを追加します。
「og-」などのOGPは、FacebookやTwitterをはじめとするSNSとWebサービスの連携を行うために必要なhtmlソースコードへの記述をルール化したものを指します。
・nuxt.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | export default { … head: { title: 'サイト名', meta: [ { charset: 'utf-8' }, { name: 'copyright', content: '2020 SAMPLE Co., Ltd.' }, { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'robots', name: 'robots', content: isProduction ? 'index, follow' : 'noindex, nofollow' }, { hid: 'description', name: 'description', content: 'サイト名は本を探すことができます。' }, { hid: 'tw-card', name: 'twitter:card', content: 'summary_large_image' }, { hid: 'tw-site', name: 'twitter:site', content: '@sample' }, { hid: 'og-url', property: 'og:url', content: env.PROD_URL }, { hid: 'og-site-name', property: 'og:site_name', content: 'サイト名' }, { hid: 'og-title', property: 'og:title', content: 'サイト名 - まだ読んだことのない本を見つけよう！' }, { hid: 'og-type', property: 'og:type', content: 'website' }, { hid: 'og-description', property: 'og:description', content: 'サイト名は本を探すことができます。' }, { hid: 'og-image', property: 'og:image', content: 'https://example/media/og-image.png' } ] } } |
サイトマップ
サイトマップとは、サイト全体のページ構成を地図のように一覧で記載しているページのことです。
ユーザーや検索エンジンにサイト内容をわかりやすく伝える役割を担っています。
サイトマップを用意しておくことで、ユーザが目的のページを探しやすくなったり、検索エンジンがサイト内のページを知らせることができます。
サイトマップの実装
@nuxtjs/sitemapを使用してサイトマップを生成するので、まずはインストールします。
1 | $ npm install --save @nuxtjs/sitemap |
インストールしたら、nuxt.config.jsのmodulesオプションに@nuxtjs/sitemapを追加します。
・nuxt.config.js
1 2 3 4 5 6 7 8 9 10 | module.exports = { modules: [ ... '@nuxtjs/sitemap' ], ... } |
nuxt.config.jsに、sitemapオプションを追加し、サイトマップに追加するページをセットしていきます。
excludeパラメータでサイトマップに除外したいページを指定することができます。
generateコマンドで静的ファイル生成のタイミングでサイトマップも生成されます。生成後、デプロイし/sitemap.xmlにアクセスすると確認できます。
・nuxt.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | sitemap: { hostname: env.PROD_URL, path: '/sitemap.xml', exclude: [ '/admin' ], routes (callback) { axios.get('${env.API_URL}/books) .then((res) => { const routes = res.data.map((book) => { return '/books/' + book.id }) callback(null, routes) }) .catch(callback) } } } |
404ページ
静的ページとして生成してほしくない場合、fallbackをtrueにすることで、ファイルが存在しな場合は404.htmlとなります。
layoutsディレクトリ配下にerror.vueを作成することでエラーページ(200.html)が生成されますが、fallbackが未設定の場合はこのエラーページ(200.html)に飛ばされます。
・nuxt.config.js
1 2 3 4 5 | export default { generate: { fallback: true } } |
高速化
Nuxt.jsでは静的ページを生成することができるため、生成したファイルをNetlifyやFirebase Hostingなどのホスティングサービスに静的ファイルをデプロイすることで高速化が可能になります。
詳しくはこちらのJamstackによる開発で詳しく説明しています。
「Jamstack」アーキテクチャによるWeb開発【Nuxt.js×MicroCMS×Firebase】
Google アナリティクス
Google アナリティクスは、Googleが提供するアクセス解析ツールで、登録したサイトのユーザーの行動に関するデータがわかります。
Google アナリティクスを設置するために、@nuxtjs/google-analyticsをインストールします。
1 | $ npm install @nuxtjs/google-analytics |
インストールしたら、nuxt.config.jsのmodulesにアナリティクスのトラッキングIDを追加して完了です。
・nuxt.config.js
1 2 3 4 5 | modules: [ ['@nuxtjs/google-analytics', { id: 'UA-XXXXXXXXX-X' }] ] |
その他にもモバイル対応や内部リンク対策などがあります。追々追記していきます。