Vue.jsのSPAのためのSEO対策について(一般的なSEOも)

SEO Vuejs

かつて誰かが言ったように、「死体を隠すのに一番最適な場所はGoogleの検索結果の2ページ目だ」

引用元 snipcart.com

　一般的なSEO

まずは一般的なSEOについて簡単にまとめ。

Metaタグ

このタグはページのコンテツが何かについて記載するもの。すべてのタグが平等に評価されるわけじゃないので、いくつかのタグに注力しよう。

  • Meta content type 各ページに記載する。文字セットの種類を記載する。
  • Title ユニークなタイトルをつけて検索したひとの注意を惹き付けよう。コンテンツについて簡潔に書こう。
  • Meta description 検索結果に表示される文章なので読んだ人に探している情報があるってことを伝える内容にする。
  • Viewport レスポンシブにするためには必須。

Metaタグについて更に詳しいことを知りたい人はこちらをどうぞ。

moz.com

Socialタグ

SNSでリッチな画像や説明付きのリンクを生成するためのSocial tagsはSNSでの拡散に一役買ってくれるのでぜひ導入しよう。 詳しくはこちら。

moz.com

モバイルへの最適化

Googleがモバイルファーストを宣言しているのを知ってますか。現在、Googleはデスクトップよりモバイルのほうを優先しているのでモバイルSEOについても知るべきでしょう。

backlinko.com

HTTPS

HTTPSの承認をしてなかったり、設定がおかしい場合はペナルティが課されます。きちんと承認を得て、設定しましょう。

ahrefs.com

読み込み速度

利用者はすぐに関心が薄れます。読み込みが遅ければページを見る前にタブを閉じられてしまいます。Googleもそれを知っているので、読み込み速度が遅いサイトもまたペナルティを課せられます。

Googlebot自体も実に短気で5秒までしか待ってくれません。もしこの条件でタイムアウトしてしまう場合、期待する検索結果にはならないでしょう。スピードアップしましょう！

moz.com

サイトマップ

サイトマップはサイトの構造を示すものです。小さいい規模のウェブサイトにとっては不要かもしれませんが、SEOツールとしては価値があります。

moz.com

Vue.jsのSPA特有のSEO

SPAはコンテンツを動的に追加します。そうすることによってもちろん利点があるんですが、二つの大きな問題が発生します。

  1. どのページがGoogleによって収集されているのか、ちゃんとJSがレンダリングされているのか最近ではGooglebotはちゃんとレンダリングするようになったとここ数年主張していますが、彼らの主張に「だけど」とか、「あとそれと」といった言葉はつきものです。
  2. Google以外にも検索エンジンは存在する。Google以外の検索エンジンはJSをまだレンダリングして収集できていません。そのため予めページのコンテンツを準備することを推奨しています。

SSR(サーバサイドレンダリング)

Node.jsの環境で、SSRの準備すればバックエンドでJSをレンダリングすることができます。HTMLファイルがクライアントに送信され、検索エンジンのbotにも対応できます。

けれど、もしたかだかブログの規模でSSRを一から実装したりするのは大変なので、Nuxt.jsを使うのがVue.jsの場合は良いでしょう。

プリレンダリング

しかし、たまにSSRはやりすぎな感もするケースがあります。小規模なSPAの場合、SEOの条件を満たすだけならプリレンダリングが良いでしょう。

Prerender.io ほとんどの人気なJSフレームワークでプリレンダリングを利用できます。もちろんVue.jsも。 prerender.io

prerender-spa-plugin これはWebpackのプラグインです。SPAから静的なページを生成します。 github.com

Vue.jsでSEO対策！ プリレンダリングのサンプル

実際にprerender-spa-pluginを使ってみましょう。

事前に必要なもの

  • Vue.jsの基礎知識
  • Node.js & npmのインストール

1. prerender-spa-pluginのインストール

プラグインの設定は簡単です。ここではビルドするときにだけプリレンダリングを行います。

npm install prerender-spa-plugin

インストール後、build/build.jsを開いて、ビルドのためにカスタマイズします。

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

ファイルのトップでプラグインをimportするのも忘れないでください。

今回はブログの例でこのサンプルについて話をしていますが、プリレンダリングするためにはブログの記事を取得する必要があります。このブログ記事のデータを取得するために、feed.jsonというJSONファイルを用意します。そのJSONファイルを読み込むため、buiild.jsに以下の記述を追加してください。

const fileContent = fs.readFileSync(path.resolve(__dirname, '..', 'static', 'api', 'feed.json'));
const feed = JSON.parse(fileContent);
const prenderedRoutes = feed.results.map(x => `/read/${x.id}`);

prenderedRoutes.unshift('/');

続いて、Webpackのプラグイン設定をしていきます。

webpackConfig.plugins.push(
  new PrerenderSPAPlugin({
    staticDir: path.resolve(__dirname, '..', 'dist'),
    routes: prenderedRoutes,
    renderer: new Renderer({
      injectProperty: '__PRERENDER_INJECTED',
      inject: {
        prerendered: true
      },
      renderAfterDocumentEvent: 'app.rendered'
    })
  }));

また、app.renderedイベントは静的ページを生成するまえに、レンダリングの準備ができたことを確認する必要があります。そのためにこのデモではPaceを利用します。

2. Vue.js側のプリレンダリングのための設定

Paceを利用するために少しコンポーネントに変更を加える必要がります。main.jsを開いて、以下のように変更します。

new Vue({
  router,
  render: h => h(App),
  mounted() {
    Pace.start()
    Pace.on('hide', () => {
      document.dispatchEvent(new Event('app.rendered'));
    })
  }
}).$mount('#app')

これで一度、メインのコンポーネントがマウントされればPaceがapp.renderedイベントにローディングが完了したことを知らせてくれます。

SEOフレンドリーなVue.jsサイトの完成

さて、最後にビルドをターミナルで実行しましょう。

npm run build

その後、distフォルダを確認して、HTMLファイルが入ったフォルダがあれば成功です。以上です！簡単だったでしょう？

ビデオで学びたい方はこの動画でどうぞ。 www.youtube.com

終わりに

prerender-spa-pluginは素晴らしいプラグインです。楽に設定でき、同期処理を行いたいときでも柔軟に扱うことができます。

繰り返しになりますが、今回はブログという小規模なウェブサイトを例にとったのでプリレンダリングを行いましたが、もっと複雑だったり大規模なサイトの場合はSSRがおすすめですよ！

翻訳ここまで