GoogleはJavaScriptを実行後にインデックスしてくれるそうですね。クローラーのレンダリングエンジンはChromeの最新バージョンと大体同じで、SPA化したサイトでもちゃんと読み取ってくれるらしい。

それならば、と思い切って全面的にVue.jsを導入。WordPressでREST APIを吐き出し、フロントでAPIを叩いてVue.jsで表示、みたいなことをしてみました。IE11にも対応したのでChromeだったら最悪41ぐらいなら余裕だろ、と思ってサイトを公開しました。

ところがSearch Consoleでインデックス登録をリクエストしたところ

エラーが発生しました
問題が解消しない場合は、数時間後にもう一度お試しください

というなんのヒントも得られないエラーが発生。何回やってもダメ。公開URLのテストをやってもそのテスト自体が同じエラーで全く進みません。そして当然インデックスもされていない。

「JavaScriptで生成されたものがインデックスされるのは時間がかかる」という情報は事前に得ていたので、きっとそれ関連のエラーなんだろう、sitemap.xmlも登録済みだし時間が解決するだろう、としばらく放置したものの、1日経っても5日経っても10日経っても状況は変わりません。

というわけでお客さんから苦情が来る前に何とかしてみました。

解決までの道のり

Search Consoleの「公開URLをテスト」を押しまくってみる

今回発生しているエラーとはエラーメッセージが違うけど、こちらの記事によると、「公開URLをテストでエラーが出てもひたすらボタンをクリックし続けるとあるタイミングでインデックス登録をリクエストする画面が出て来る」ということだったので、ひたすらポチポチ。

すると何のタイミングか全くわからないんだけど、唐突にテストに成功。そしてそのままインデックス登録もリクエスト。これで解決！と思いきや...

ソフト404になってしまいインデックスされない

翌日Search Consoleを確認してみると、

送信されたURLはソフト404エラーのようです

という理由でインデックスされていませんでした。ソフト404...つまりGoogleのクローラー的に「あるって言ってるけど実質このページは無いに等しいよね〜〜〜」と認識されている。

いやいやちゃんと画像と文章がふんだんにあるサイトですよ。
貴方が理解できるというJavaScriptで吐き出してますよ...あれ？つまりJavaScriptが実行されてない？クローラー側が何を見ているのかちゃんと理解する必要がありそう。

ということで前日ポチポチしまくっていた「公開URLをテスト」を再びポチポチ。これでクローラー側で取得しているHTMLがどんなものか見ることができる。

そこでわかったのが、APIが「その他のエラー」という謎のエラーで読み込まれていないということ。おかげでサイトのコンテンツ部分が全く表示されていなかった。そりゃインデックスされないよ...。

「その他のエラー」について調べてみると、読み込みに時間がかかりすぎのために発生しているようだ。タイミングの問題だろうか？と思って何回かテストしてみても全くダメ。普通にサイトにアクセスする分にはスマホで見てもほぼ一瞬で表示されてるしこれ以上どうしたら...。

ダイナミックレンダリングをしてみる

頭を悩ませつつ色々調べているうちに行き着いたのが、ダイナミックレンダリング。
「普通のユーザーが見るときはJavaScriptで表示するけど、クローラーが見るときはプリレンダリングしたコンテンツを見せるよ！」というやつ。Google側もクローラーのレンダリングが完璧ではないとわかっているが故にこういうのを勧めているみたい。

そして今回のサイトの裏側ではWordPressが動いている。これは案外楽にできるのでは？というわけでこんな感じにしてみた。bot判定の関数はこちらの記事のものを流用。

function is_bot() {
    $bots = array(
        "googlebot",
        "bingbot",
        "Y!J", 
    );

    $ua = $_SERVER['HTTP_USER_AGENT'];
    foreach( $bots as $bot ) {
        if (stripos( $ua, $bot ) !== false) {
            return true;
        }
    }
    return false;
}

<?php if( is_bot() ) {
    get_template_part( 'bot' );
} else {
    echo '<div id="app"></div>';
} ?>

そしてis_botでtrueになったときしか読まれないbot.phpを用意し、そこにコンテンツを表示するための記載をすれば完成。

試しにSearch Consoleで公開URLをテストしてみると、無事意図したHTMLが表示された！しかも一発で！そのままインデックス登録をリクエストし、翌日には無事インデックスされているのを確認できました。

というわけでクローラーの性能が上がるまではしばらくこのままでいくことになりそうです。サイトの構造によってはJavaScriptだけでゴリゴリやっていくにはSEO的な観点でいくとまだまだ厳しいのかもしれませんね。