【Vue.js】VueアプリケーションがSEO的によくなさそう？？【SPA・シングルページアプリケーション】
ここでは「単一ファイルコンポーネントを使わない」Vueアプリケーションについて言及しています。
目次
■単一ファイルコンポーネントを使わないVueアプリケーション
■Fetch as Googleを使う
■レンダリング結果
■原因と対策
■単一ファイルコンポーネントを使ったら部分的には表示された
単一ファイルコンポーネントを使わないVueアプリケーション
今までいくつかの単一ファイルコンポーネントを使わないVueアプリケーションを作成していました。
なぜ単一ファイルコンポーネントを使わないという選択をしたのかというと、知識不足のため、単一ファイルコンポーネントを使った実装や本番環境の整備が難しいと感じたからです。
今回、この単一ファイルコンポーネントを使わないVueアプリケーションというものを初めてSEO的にはどうなのか確認して見たところ、あまり良い結果ではなかったので、紹介したいと思います。
Fetch as Googleを使う
Googlebotがどのように見ているか
SEO対策として、Googleがクロールした際にどのように見ているかが非常に重要です。
そこで、Googlebotが作成したサイトをどのように見ているか確認できる「Fetch as Google」を使って確認して見ました。
「Fetch as Google」の使い方についてはここでは説明しませんので、公式サイトをご覧ください。
Fetch as Googleの役割
「Fetch as Google」の役割といえばの大きく二つです。
・インデックス登録のリクエストを行う
・ページが正しくレンダリングされているか確認する
後者は4年ほど前の2014年5月に追加された機能ですが、私は初めて使いました。
Googlebotが作成したページに訪問してときに、そのページがどのように表示されているかを確認することができる機能です。
実際に作成したページを確認して見ました。
原因と対策
なぜこうなるのかは正直わかりません。
実際にページにアクセスしてみても、表示されています。
私が考えた原因はいくつかあります
SSRしていない
今回作成したアプリではSSRをしていません。
Vue.jsでSSRをする場合はいくつかの方法がありますが、代表的なものとしては「プリレンダリング」の使用と「Nuxt.js」を使ったSSRだと思います。
どちらかを採用すべきでしょうか？？
ページの描画が遅い
Googlebotがページを認識するまでに画面描画ができていないのではという推測です。
遅さはあまり気にならないので、違うかもしれません。
実装が悪い(Googlebotが認識できない)
Googlebotが認識できないような実装があるかもしれないという推測です。
Rendering on Google Search | Search | Google Developers
上記のページにこのような記載があります。
GooglebotはChrome 41（M41）に基づいたウェブレンダリングサービス（WRS）を使用します。
実際に私が利用しているGooglebotはChromeはバージョン: 65ですので、可能性はあります。
このようにいくつかの推測はできましたが、はっきりとした理由はわかりません。
原因がわからないので、対策もわからないという感じです。
単一ファイルコンポーネントを使ったら部分的には表示された
しかしながら、このままではいけないと思いまして、とりあえず「単一ファイルコンポーネント」を使った実装に置き換えてみました。
そして「Fetch as Google」で確認したところ、正しく表示されていることを確認できました。
結論を言うと、「単一ファイルコンポーネントを使わない」Vueアプリケーションが悪かったのかはわかりません。単一ファイルコンポーネントを使った実装に変えたことによって、問題点だった箇所が結果的に修正されただけかもしれません。
まだ部分的には疑問が残っているものの、とりあえずは「単一ファイルコンポーネント」を使ったVueアプリケーションにすれば以前よりはよくなったと言えると思います。
