【Vue.js】Googleにインデックスしてもらうためにやったこと(SSRなし)

投稿者: | 2019年2月9日

Vue.jsで先日Webサービスを公開しました。平成年表というサービスです。私が個人で開発したものなのですが、なぜか自分のブログに紹介記事を書くのを忘れていました。今度振り返り的な内容で記事に出来ればと思います。

問題:GoogleにIndexされていない…

リリースして2週間くらい経ったのですが検索流入がずっと0という事態に…なんでだろうなって調べてみたところ、Googleに検索インデックスされておらず、そもそも検索されてなさそうな感じになっていました。GoogleにインデックスされているサイトURLは以下でGoogle検索すると確認できます。

site:https://heisei.me
※「site:サイトURL」

原因:Vue.jsのjavascriptの記法がGoogleのクローラーに対応していない…(Googleが古い)

Twitterでだらさんが教えてくれました笑。感謝。

対処:babel-polyfillを導入し、古いブラウザでも対応可能なJSにコンパイルする

対策としては、サーバーサイドレンダリング(SSR)をやるのが一般的なようですが、私には経験がなく時間がかかりそうなので他の方法を調べました。その結果、以下のブログを見つけました。

こちらの記事の内容をそのまま実施すればOKでした。感謝!備忘として一応記載しておきます。

① パッケージインストール

npm install babel-polyfill --save

② build/webpack.base.conf.jsの修正

※変更箇所
entry: {
app: './src/main.js'
}
※こんな感じに更新
entry: {
app: ['babel-polyfill', './src/main.js']
}

③ ビルド

npm run build

これでOK。SSRなしでもGoogleにインデックスしてもらえるようになります。

おまけ:GoogleにIndexされるかの確認

GoogleSearchConsoleで確認できます。

①レフトメニューからURL検査を選択

②検査したいURLを聞かれるので、テストしたいページURLを入力

③右の方にある「公開URL」をクリック

そうすると1~2分くらい待てと言われます。待ってると以下のような画面になります。

④ライブテストを選択

⑤「テスト済みのページを表示」をクリック

ページ右側にテスト済のページが表示されます。

・HTML → Googleにインデックスされたソースコードが確認できます。

・スクリーンショット → 上記HTMLで表示した画面イメージです。

スクリーンショットに思った通りのページイメージが表示されていれば大丈夫です。Vue.jsで失敗していると白紙になってるかと。その場合は上記しました対処を試してみてください。


カツオが開発したWebサービスです。

平成の想い出を気軽に年表にしてシェアすることができるサービスです。ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です