English version: Implementing Dynamic Rendering for Search Engines on pixiv.net - pixiv inside
pixivでプロダクトマネージャーをしているmu-koです。
大規模サービスのpixivで検索エンジン向けにDynamic Rendering（ダイナミックレンダリング）を2019年から実装し始めました。Dynamic Rendering実装の経緯や検証方法、注意点などをご紹介します。
pixivとは
pixivはクリエイターがイラスト・マンガ・小説を投稿し、声援をもらうことができるサービスです。
2019年9月時点で登録ユーザーは4,000万ユーザー超、投稿作品数は8,500万作品あります。また、日本からのアクセスは約60％で日本以外の国からのアクセスが約40％です。
日本国外のユーザーが作品を簡単に検索できるように、日本語タグを翻訳する機能を2018年に提供し、日本語が読めないユーザーでもpixivで作品を探せるように改善しました。
提案した翻訳が活用される例を知りたい – pixivヘルプセンター
ページ数やクロール数
現在8,500万作品が投稿されているため、作品画面だけで8,500万ページある状況です。
それに対して、概算で以下の件数のクロールがきています。
Googlebotのクロール数は100~200万クロール / day1
Bingbotのクロール数は800~1,000万クロール / day
Dynamic Renderingを実装するまでの経緯
pixivでは2018年からSPA化を伴うリニューアルを少しずつ進めています。しかし、2018年時点ではログイン状態で表示されるページにスコープを絞ってリニューアルを行いました。ログイン前ページをSPAにした場合、Google検索などからの流入が最終的に減少する恐れがあると判断したためです。
検索流入が減少すると、投稿された作品が見られるチャンスを失ってしまうことになります。pixivとしては創作物の発揮する価値を下げてしまうことになります。これは本意ではありません。
しかし、ログイン前にもリニューアル後のSPA版をリリースしたいと考えていました。そこで、Dynamic Renderingを実装することを決めました。SSR（サーバーサイドレンダリング）することも検討しましたが、一旦SSRはしない方針を取っています。
pixivではカスタマイズしたRendertronを実装しました。 Rendertron は headless Chromiumをベースとしたレンダラです。
GitHub - GoogleChrome/rendertron: A Headless Chrome rendering solution
Dynamic Renderingを実装することにした理由
SPAで検索エンジンにインデックスされるまでの時間を短くするため
Googlebotはクローリング後にJavaScriptベースのページをRender Queueに入れるため、インデックスされるまでの時間が長くなる可能性があります。
Understand the JavaScript SEO basics | Search | Google DevelopersSSRより開発コストが低いと判断
開発コストが低いため、他の開発に時間を割り当てることができます。Bingbotに対してもDynamic Renderingを利用しても問題ないことを確認したため
詳しい情報はBing blogsに掲載されています。
Dynamic Renderingを実装した場合のデメリット
pixivの場合はDynamic Rendering用のサーバーを用意したため、別途監視する仕組みが必要になりました。
また、応答時間がSSRを実装した場合に比べて遅くなりました。
Dynamic Rendering実装後の検証
Dynamic Renderingを実装する際に、インデックス率やインデックスされるまでの時間を計測しました。
また、Dynamic Renderingを利用しない場合では、Render Queueの影響でインデックスまでどれくらい時間が掛かるか計測しました。
検証したことは以下のことになります。
- Rendertronの利用でコンテンツ量に影響がないか
- モバイルフレンドリーテストをクリアしているか
- 構造化データテストツールで正しく認識されているか
- URL検査ツールでページがどのようにクロールされているか
- 自社のアクセスログ上でクロール量に変化がないか
- インデックスに影響がないか
5, 6については1-4をクリアしてから検証した形です。
1. Rendertronの利用でコンテンツ量に影響がないか
Rendertronから出力されたHTMLを見て、pixivでは以下のような要素に影響がないかを確認しました。
- スタイルに影響を与えていないか
- LazyLoadされるコンテンツが正しく表示されているか
2.モバイルフレンドリーテストをクリアしているか
モバイルフレンドリーテストツールでテストをクリアするか確認しました。
3.構造化データテストツールで正しく認識されているか
構造化データテストツールのUAからのアクセスに対してRendertronを通すようにしてテストしました。
4.URL検査ツールでページがどのようにクロールされているか
少数のページでDynamic Renderingを実装し、Google Search Console上でどのように認識されているかを確認しました。
すでにクロールされたページは「VIEW CRAWLED PAGE」から結果を確認できます。 このHTMLを確認してコンテンツ量が減っていないかをさらに確認しました。
5.自社のアクセスログ上でクロール量に変化がないか
GooglebotのUAを用いて、SPA化されたページのクロール量が変化ないかを調査しました。
この調査をしたことで新規公開されたページがどれくらいの時間でクロールされるかを知ることもできました。
6.インデックスに影響がないか
Dynamic Renderingが実装されたページと実装されていないページでインデックス率に差が出るかを調査しました。合計20回以上のテストを行い、様々な調整をした際にどのような影響があるかを確認しました。
結果を簡単にまとめると、新規公開されたSPA版のページでDynamic Renderingを実装しない場合は、最終的なインデックス率が10~15％低くなることがありました。
また、最終的なインデックス率は同等になる場合でも、インデックスされるまでの時間が3日以上遅くなることがありました。
テストによってはSPA版のページでDynamic Renderingを利用しなくても順調にインデックスされることがありました。
しかし、基本的にはDynamic Renderingを利用しない場合はRender Queueの影響でインデックスされるまでの時間が遅くなったと考えています。
Dynamic Rendering実装時の注意点
コンテンツ量に影響がないか
コンテンツ量が減った場合はインデックス率や評価に影響する可能性があります。そのため、コンテンツ量が減っていないかを確認するために上記の検証などをすることをおすすめします。
応答時間が長くないか
Rendertron用のサーバーがGooglebotのリクエストをさばけるか注意する必要があります。 Rendertronのデフォルトのタイムアウトは10秒になっています。pixivは無駄な読み込みの待ち時間をカットするためにタイムアウトを3秒に変更し、同時にさばけるリクエスト数を増やしました。
キャッシュを有効化する手段もありますが、pixivでは有効化しませんでした。ページ内容の更新頻度が高く、キャッシュの管理が複雑になるためです。
最後に
pixivは今後10年の開発効率やユーザーの利便性向上のためにSPAベースにすることを決めました。その上で投稿作品をより多くの方に見ていただくために、SEO面ではDynamic Renderingを実装しました。
この記事がSPAベースのサイトでSEOに悩んでる方の助けになればと思います。
何かご質問がありましたら、以下のサービスからご連絡お願いします。
-
※これはUser agent tokenがGooglebotと定義されているクローラの数値になります。Mediapartners-Googleのクローラの数値は含んでいません。
Google のクローラ（ユーザー エージェント） - Search Console ヘルプ ↩
