--- title: "Hands-on SEO Part 2 — Making Dynamic Sites Friendlier to Google's Crawler" description: "Compares three solutions — SSR, prerendering, and dynamic rendering (Rendertron) — for making JavaScript-driven dynamic sites friendlier to Google's crawler and improving SEO ranking." canonical_url: "https://blog.markkulab.net/en/post/seo-dynamic-web-page" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2021-09-11 01:01:01 +0800" category: "SEO" tags: ["seo", "ssr", "prerender", "rendertron", "dynamic rendering", "google"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Hands-on SEO Part 2 — Making Dynamic Sites Friendlier to Google's Crawler ## SEO Part 2 — Making Dynamic Sites Friendlier to Google's Crawler ## How Dynamic Sites Affect SEO Today's dynamic sites lean heavily on JavaScript and Ajax-related techniques, but those techniques aren't very friendly to Google's crawler. According to Google's official documentation, the Googlebot crawler understands HTML structure very well, but still has trouble crawling JavaScript and Ajax. To improve crawler-friendliness, Google still recommends pointing content at HTML. [Link to Google's official guide](https://developers.google.com/search/docs/advanced/guidelines/ajax?hl=zh-tw) ## Key Takeaways from the Official Docs * Avoid putting SEO text inside a canvas or image — Googlebot can't recognize those either. * Avoid iframes, or link individually to their content — content shown via iframe may not be indexable. * Avoid serving different content to users vs. Googlebot. [Sneaky redirects](https://developers.google.com/search/docs/advanced/guidelines/sneaky-redirects?hl=zh-tw) * Text should still be visible when JavaScript is disabled. * Links with parameters aren't crawler-friendly either; pages meant for crawlers should still use static URLs. ## Solutions for SEO on Dynamic Sites As mentioned, dynamic sites aren't very crawler-friendly. As frontend engineers, we can use the following rendering techniques to improve SEO on dynamic sites. ### 1. Server-side rendering (SSR) The page data is fully rendered on the server before being returned to the client. Common frontend SSR frameworks: Next.js in the React ecosystem Nuxt.js in the Vue ecosystem Universal in the Angular ecosystem Pros * When a crawler visits the site, it can immediately get the latest rendered page. * Content is delivered to the client faster, especially over slow networks or on slow devices (countries with weaker network conditions). Users don't have to wait for all the JavaScript to download and execute before they see the server-rendered markup, so they see a fully rendered page faster — better user experience. Cons * Rendering is offloaded to the server, which can lead to high server load. * Deployment has higher requirements; unlike a single-page app (SPA), an SSR app needs to run on a Node.js server. ### 2. Page prerendering #### 2-1. Custom crawler prerendering (Prerender, Playwright) When a crawler visits the site, the web server or app inspects the crawler's User-Agent and returns a pre-rendered page. Pros * Reduces server load — the crawler can get results without waiting for rendering. Cons * Crawlers can't get the most up-to-date dynamic content. * The technical bar is fairly high. You may need to write a job to render or crawl your own site, plus code to detect Googlebot and serve the matching static content. #### 2-2. Webpack prerendering (webpack prerender-spa-plugin) Pros: * Simple configuration — render HTML based on routes. Cons: * Prerendered code is mixed in with the existing site, so existing code needs adjustments. * Doesn't support scroll-based lazy loading or virtual scrolling. * You can't operate on the prerender internals, which lacks flexibility. ### 3. Dynamic Rendering for SEO Rendertron is a project from the Google Chrome team built with Node.js and Puppeteer. It can solve the problem of dynamic site content that search engines can't crawl. ![Dynamic rendering flowchart for browsers and search engine crawlers](https://blog.markkulab.net/content/markku/posts/seo-dynamic-web-page/images/JdTsLbH.png) How it works The web server inspects the search engine's bot user-agent and routes the request to your self-hosted Rendertron server. Rendertron uses its cache if there's a hit; otherwise it spins up Puppeteer to crawl your site and bring the content back. Pros * Performance * Both freshness and immediacy * Less server load Cons * You need to host an additional dynamic rendering service. P.S. Advanced scenarios — virtualized lists, lazy load, and finer-grained browser control — aren't supported, but the source is open and easy to modify, so you can extend it yourself. Test ``` https://render-tron.appspot.com/render/欲動態渲染的網址 ```` [Related documentation](https://developers.google.com/search/blog/2019/01/dynamic-rendering-with-rendertron) ## To be continued… in the next chapter I plan to roll up my sleeves and write a crawler for page prerendering. ## References [Reference link 1](https://medium.com/@gdumais/next-js-the-ultimate-cheat-sheet-to-page-rendering-46e4f82ce1ee) [Reference link 2](https://tech.meituan.com/2018/11/15/first-contentful-paint-practice.html) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/seo-dynamic-web-page) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.