【JavaScript SEO】Vueではvue-routerをhistoryモードへ変更、vue-metaを有効に

[レベル: 上級]

メジャーな JavaScript フレームワークである、Angular・React・Vue は Google 検索の SEO において基本的にはうまく機能することを、先日お伝えしました。

ただし、検索エンジンフレンドリーにするために一部の変更が必須です。
この記事では、変更のためのサンプルコードを紹介します。

Vue.js の SEO 構成

前回の記事で、「Vue.js では vue-router を無効にする」などとトンチンカンなことを書いてしまいました（勘違いさせてしまい、申し訳ありません。問題箇所は修正済みです）。
正しくは、hash モードから history モードへの変更です（これなら、1行の変更で済みますね）。

デフォルトの hash モードだと URL に # を使うので SEO に不向きです。
historyAPI を適用して一意の URL を割り当てるようにします。

また、 Vue では title タグと meta description タグを扱えるようにするために vue-meta の拡張機能を利用する必要があります。

コード例は次のようになります。

vue-meta を有効にします。
そして history モードに切り替えます。

import Meta from 'vue-meta' //vue-meta のインストール
Vue.use(Meta)

const router = VueRouter({
 mode: 'history', //history モードに変更
 routes
})

title タグと meta description タグを構成します。

export default {
 meta info() {
  return {
   title: /* title タグを記述 */,
   meta: [
    {name: 'description', conent: /* meta description タグを記述 */}
   ]
  }
 },
//...
}

React の SEO 構成

Vue 同様に React でも title タグと meta description タグを構成できるようにする必要があります。
そのために react-helmet を有効にします。

コードのサンプル例です。

import {Helmet} from 'react-helmet' //react-helmet のインストール
export class SomePage extends Component {
 //...
 render() {
  return (<div>
   //...
    <Helmet>
     <title>{/* title タグを記述 */}</title>
     <meta name='description' content={/*  meta description タグを記述 */} />
    </Helmet>
   </div>)
  }
}

Angular の SEO 構成

Angular はデフォルトで、title タグおよび meta description タグを構成できます。
Vue や React とは異なり、拡張機能を別途有効にする必要はありません。

import {Title , Meta} from '@angular/platform-browser';

export class SomePageComponent implements OnInit {
 constructor(private title: Title, private meta: Meta) { }
 ngOnInit() {
 this.title.setTitle(/* title タグを記述 */);
 this.meta.updateTag({
  name: 'description' , content: /*  meta description タグを記述 */
  });
 }
}

この記事で紹介したコードはサンプルです。
実際には、環境に応じて変わってくる部分もあるかと思います。
詳細は、それぞれのフレームワークの技術ドキュメントを参照してください（それでも間違ってないはずです。もし万が一、おかしなところがあれば指摘してください）。

質問は僕ではなくマーティンへどうぞ！