動的レンダリングとは？｜SEO関連用語集

2025年10月28日

読み方: どうてきれんだりんぐ（Dynamic Rendering）

概要

ユーザーエージェント（ブラウザまたはクローラー）に応じて、CSR版またはプリレンダリング版のコンテンツを出し分ける技術。

詳細説明

動的レンダリング（Dynamic Rendering）とは、ユーザーのUser-Agentヘッダーを検出し、通常のブラウザには JavaScriptで動的生成されるCSR（Client-Side Rendering）版を、検索エンジンクローラー（Googlebot、Bingbot等）には完全にレンダリングされたHTML版（プリレンダリング版）を提供する技術です。Rendertron（Google製）、Prerender.io、Puppeteer等のヘッドレスブラウザでJavaScriptを実行し、生成されたHTMLをクローラーに配信します。既存のCSRアプリケーション（React、Vue、Angular SPA）をコード変更なしでSEO対応できるため、SSR移行が困難な場合の「移行ソリューション」として位置づけられています。ただし、Googleは動的レンダリングを「回避策」と明言しており、長期的にはSSRまたはISRへの移行を推奨しています。

重要性

動的レンダリングが重要な理由は以下の通りです。

既存CSRアプリのSEO対策。大規模なReact/Vue/AngularアプリをSSRに移行するには数ヶ月の開発期間が必要だが、動的レンダリングは数日で導入可能
コード変更不要。フロントエンドコードを一切変更せず、ミドルウェア/CDNレベルでSEO対応できるため、開発リソースが限られている企業に最適
SNSシェア最適化。Facebook、Twitter等のOGPクローラーはJavaScriptを実行しないため、プリレンダリング版でシェア時のプレビュー表示を実現
レガシーシステムの延命。古いSPAアプリケーションを完全リニューアルせず、SEOのみ対応できる
一時的な移行ソリューション。SSR移行プロジェクト完了までの数ヶ月間、SEOトラフィックを維持する手段として有効

具体例・実践方法

動的レンダリングの実践手順

Rendertron（Google製）での実装

   # Rendertronのインストールと起動
   npm install -g rendertron
   rendertron --port 3000

   # Nginxでの動的レンダリング設定例
   location / {
       set $prerender 0;
       
       # Googlebot, Bingbot等のクローラーを検出
       if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
           set $prerender 1;
       }
       
       # クローラーの場合、Rendertronにプロキシ
       if ($prerender = 1) {
           rewrite .* /render/$scheme://$host$request_uri? break;
           proxy_pass http://localhost:3000;
       }
       
       # 通常のユーザーは元のアプリに転送
       proxy_pass http://localhost:8080;
   }

Prerender.io（SaaS）での実装

   // Express.jsミドルウェア例
   const prerender = require('prerender-node')
   
   app.use(prerender.set('prerenderToken', 'YOUR_TOKEN')
     .set('protocol', 'https')
     .whitelisted(['^/products', '^/blog']) // プリレンダリング対象ページ
     .blacklisted(['^/admin', '^/dashboard']) // 除外ページ
   )

Puppeteerでカスタム実装

   // カスタム動的レンダリングサーバー（Node.js + Puppeteer）
   const express = require('express')
   const puppeteer = require('puppeteer')
   
   const app = express()
   const browser = await puppeteer.launch()
   
   app.get('/render', async (req, res) => {
       const url = req.query.url
       
       const page = await browser.newPage()
       await page.goto(url, { waitUntil: 'networkidle0' })
       
       const html = await page.content()
       await page.close()
       
       res.send(html)
   })
   
   app.listen(3000)

User-Agent検出パターン

   // クローラー判定の正規表現
   const BOT_AGENTS = [
       'googlebot',
       'bingbot',
       'slurp',           // Yahoo
       'duckduckbot',
       'baiduspider',
       'yandexbot',
       'facebookexternalhit', // Facebook OGP
       'twitterbot',          // Twitter Card
       'linkedinbot',
       'whatsapp',
       'slackbot'
   ]
   
   function isBot(userAgent) {
       return BOT_AGENTS.some(bot => 
           userAgent.toLowerCase().includes(bot)
       )
   }

Cloudflare Workers（エッジ）での実装

   addEventListener('fetch', event => {
       event.respondWith(handleRequest(event.request))
   })
   
   async function handleRequest(request) {
       const userAgent = request.headers.get('user-agent') || ''
       
       if (isBot(userAgent)) {
           // クローラーにはPrerender.ioにプロキシ
           const url = new URL(request.url)
           const prerenderUrl = `https://service.prerender.io/${url.href}`
           
           return fetch(prerenderUrl, {
               headers: { 'X-Prerender-Token': 'YOUR_TOKEN' }
           })
       }
       
       // 通常ユーザーはそのまま
       return fetch(request)
   }

キャッシュ戦略

プリレンダリング結果をRedis/Memcachedでキャッシュ（1時間〜1日）
同じURLへのクローラーアクセスはキャッシュから即座に返却
サーバー負荷とコスト削減

Google Search Consoleで検証

Search Console → URL検査ツール
「公開URLをテスト」でGooglebotのレンダリング結果を確認
スクリーンショットでコンテンツが正しく表示されているか確認

注意点・補足

動的レンダリングの注意点は以下の通りです。

Googleの「回避策」位置づけ。Googleは公式に「動的レンダリングは長期的な解決策ではなく、SSRまたはISRへの移行を推奨する」と明言
クローキングのリスク。クローラーとユーザーに異なるコンテンツを提供する点で、意図的なクローキング（SEOスパム）と誤認されるリスク。内容は同一にし、レンダリング方法のみ変える
メンテナンスコスト。プリレンダリングサーバーの運用、キャッシュ管理、User-Agent更新等の継続的なメンテナンスが必要
Prerender.ioのコスト。月間250ページまで無料、以降は従量課金（1,000ページで$20〜）。大規模サイトでは月数万円のコストが発生
SNSクローラーの対応漏れ。Facebook、Twitter、LinkedIn、WhatsApp等、全SNSのUser-Agentを網羅する必要

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

動的レンダリングとは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元