[レベル: 上級]
メジャーな 2 大 JavaScript フレームワークである Angular と React、そしてこの 2 つには及ばないもののシェアを伸ばしてきている Vue.js を採用したウェブサイトは基本的に Google 検索においてうまく機能します。
SEO と相性が悪いフレームワークではありません。
ただしいくつか気をつける点もあります。
Angular/React/Vue は Google SEO に問題なし
JavaScript SEO をテーマにした DeepCrawl との Q&A 動画チャットで、Google の Matin Splitt 氏が、メジャーな JavaScript フレームワークの Google 検索での利用について説明しました。
次の 3 つの JS フレームワークは Google の SEO に害を与えるようには作られていないと自身で詳しく検証して確かめたとのことです。
- Angular
- React
- Vue.js
つまり、これらのフレームワークは、SEO に取り組む僕たちのウェブサイトで利用可能です。
スプリット氏は、それでも気を付けることがあるとして、それぞれのフレームワークごとに注意点を挙げました。
各 JS フレームワークの SEO 上の注意点
Angular
Angular で構築したサイトのコンテンツが検索やモバイルフレンドリーテストツール（※1）で想定どおりにレンダリングされないとしたら、検索に重要な polyfill が有効になっているためかもしれません。この機能はデフォルトでは無効になっています（※2）。
※1: モバイルフレンドリー テスト ツールでは、(スマートフォン用）Googlebot が JS を実行した後のコードやエラーを検証できます。
※2: 検索で重要だけれどデフォルトで無効になっている polyfill は「”array.fill” とかそういうのだったと思う」とスプリット氏は言っていますが、定かではありません。Array.prototype.fill のこと？ 僕も詳しくないので開発者の方と話してください。
React
Angular とは異なり、有効にしなければならない追加の polyfill は React にはありません。
ただし、title タグと meta description タグを提供するためには、react-helmet の拡張機能を使う必要があります。
Vue
Vue では、デフォルトで有効になっている vue-router を無効にする必要があります。
Vue では、デフォルトで有効になっている vue-router のコードを 1 行だけ変更する必要があります（詳しく説明していないのですが、hash モードではなく、history モードに変更するようです）。
コードを変更してもそのほかの構成には影響しないとのことです。
【UPDATE】
コードの変更部分を調べました。次のようになります。
const router = new VueRouter({
mode: 'history' , //ここを変更
routes
})デフォルトの hash モードだと URL に # を使うので SEO に不向きです。historyAPI を適用して一意の URL を割り当てるようにします。
また React と同じで、title タグと meta description タグを扱えるようにするために vue-meta の拡張機能を利用します。
僕は開発者ではないので、たいした補足を付け足すことができません。
開発者の方に、参考情報としてこの記事で書いたことを教えてあげてください。
なお、現在公開を続けている JavaScript SEO 動画シリーズでAngular と React、Vue.js のそれぞれについてスプリット氏は個別に解説する予定だそうです。
公開を待ちましょう。