VueはSEO的に問題ないか？そしてNuxtを使うメリット

タイトル通りなのですが
VueはSEO的に問題ないか？
またNuxtを使うメリットについてお詳しい方ご教示いただけないでしょうか？

以前VueのようにJSで出力されたページではクロールされず
SEO的に上位にくるのが難しいと何かの記事でみたのですが
最近ではJS出力のページであっても問題なくクロールされて
上位検索にくる可能性があるという記事もちらほら見かけます。

ただその情報って本当に信じていいものかわからないため
こちらに質問させていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

個人の感想だけだと「よく分からんからサーバサイドレンダリングにしとけ」以外の回答は出ないと思うので
ちょっと事実ベースで根拠になりそうな記事を探してきました。

SEO対策をサーバーサイドレンダリングせずにやっていく - Qiita
この記事がよくまとまっています。

【大ニュース】

なんとGoogleBotのJSレンダリングエンジンがChrome74相当になって、ES6に対応するようです...！
ここで書かれた内容の多くはすでに古くなっているかもしれません...！
https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html

なるほど
動かない可能性があるという根拠は、
そもそもES6のコードを認識出来なかったからなんですね。

しかし、この記事のように判明したということは、
Googlebotの仕様はともかく、
レンダリングエンジンがどのブラウザ準拠かというのは公開された情報のようです。

【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨 - 海外SEO情報ブログ

投稿日：2017年6月12日 by Kenichi Suzuki
React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。

投稿日を考えれば、なぜプリレンダリング(サーバサイドレンダリング)をしようとアナウンスしているかが透けて見えますね。
2017年は既に多くのブラウザがES2015に対応しています。

しかし、Googlebotの整備が追いついてないという視点で見れば
Babelやポリフィルを入れたとしてもちょっと怖いと尻込みしたくなる気持ちはわかります。

【JavaScript SEO】AngularとReact、VueはGoogle検索のSEOで利用可能。ただし注意点あり - 海外SEO情報ブログ

投稿日：2019年3月20日
メジャーな 2 大 JavaScript フレームワークである Angular と React、そしてこの 2 つには及ばないもののシェアを伸ばしてきている Vue.js を採用したウェブサイトは基本的に Google 検索においてうまく機能します。

SEO と相性が悪いフレームワークではありません。

打って変わって2019年ではこのように強気な発信を行っています。

これはGooglebotの世代交代が良い感じに進み、
テストや検証も十分なされたために
JSフレームワークへ適切に対応出来るようになった事を示しているのでしょう。

まぁ、発信している方が違うのと、私は余り英語は詳しくないので
元記事や動画等をよく読み込んでから結論を出すべきかもしれません。

以上を踏まえて私なりの結論です。

2020年現在、
Googleの検索エンジン作ってる会社の中の人曰く、
JSフレームワークを使う事自体は問題ないそうです。

Qiitaの記事にあるように
何がキャッシュされているのかは
「Google Search Console」で閲覧出来るようです。

既存のサービスで広告流入しているみたいなサービスでは
数日のGoogle八分で収益に影響を及ぼす大問題に発展するかも知れません。

しかし新規のWebサイトを起こすならば別に恐れる必要はないと思います。
サーバサイドレンダリングを実装・構築する時間もタダじゃないので、
新規サイトを立ち上げたタイミングで一度試してみたらどうですか？

「おまけ」Nuxt.jsに関して

Nuxt.js使ってみた - Qiita

Nuxt.jsには主に以下のパッケージが含まれています。

Vue2・・・Vue本体です。

Vue-Router・・・Vueアプリケーションでのルーティングを管理するパッケージです。

Vuex・・・Vue版のFluxです。

Vue Server Renderer・・・Vueアプリケーションをサーバーサイドレンダリングするためのパッケージです。

Vue-Meta・・・Vueアプリケーションのメタ情報を管理するパッケージです。

Vueを採用する動機として
これらの要望はありますよね。

賢い状態管理
Routerを使ったシングルページアプリケーション

基本的にこれらは別にVue自体とは何も関係がないので、
通常、開発者が自分で導入して繋ぎこむ必要があります。

それらを勝手にベストプラクティスのディレクトリを切ってはいどうぞってしてくれるのは相当なメリットですね。

投稿2020/04/03 10:05

編集2020/04/03 10:18

miyabi-sun

総合スコア21158

AkitoshiManabe

2020/04/03 22:11 編集

「【JavaScript SEO】2019年3月20日」の引用に対する分析は十分に納得できます。 indexedDB や applicationCache が実装されたころ、一部で offline-first に期待する声もあったのですが、その頃からGoogleによるクライアント側レンダリングに対する解析の試行が始まったと記憶しています。確か、URLのハッシュ部分 #! で始めるか、 # で始めるかでインデックスする・しないを決定するような時期もありました（ソースを探し当てられませんでしたので、コメント欄で便乗させていただきます）。