<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
<title>Prerendering for JavaScript SEO with Prerender.io</title>
<atom:link href="https://prerender.io/blog/prerendering/feed/" rel="self" type="application/rss+xml" />
<link>https://prerender.io/prerendering/</link>
<description>Prerender. JavaScript SEO, solved with Dynamic Rendering</description>
<lastBuildDate>Wed, 02 Sep 2026 15:54:33 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=7.1</generator>
<image>
<url>https://prerender.io/wp-content/uploads/favicon-150x150.png</url>
<title>Prerendering for JavaScript SEO with Prerender.io</title>
<link>https://prerender.io/prerendering/</link>
<width>32</width>
<height>32</height>
</image>
<item>
<title>10 Signs That You Have JavaScript Rendering Problems</title>
<link>https://prerender.io/blog/signs-of-javascript-rendering-problems/</link>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Sun, 23 Aug 2026 13:21:00 +0000</pubDate>
<category><![CDATA[Javascript SEO]]></category>
<category><![CDATA[Prerendering]]></category>
<guid isPermaLink="false">https://prerender.io/?p=14188</guid>
<description><![CDATA[Unindexed pages and blank link previews may point to JavaScript rendering problems. Learn how to diagnose and fix the underlying issues]]></description>
<content:encoded><![CDATA[
<p class="wp-block-paragraph">JavaScript rendering problems rarely announce themselves as rendering problems. Instead, they show up as familiar technical SEO issues: pages stuck in “Crawled, currently not indexed,” outdated product snippets, or your brand missing from AI search results. Because those symptoms have obvious, well-worn explanations, teams blame content quality, backlinks, or an algorithm update instead of the rendering layer.</p>
<p class="wp-block-paragraph">For websites built on modern JavaScript frameworks (like React, Vue, Next.js, Astro, etc.), that misdiagnosis costs months of wasted optimization while the real problem becomes lost traffic, leads, and revenue.</p>
<p class="wp-block-paragraph">In this article, our expert team at Prerender.io discusses 10 signs that rendering issues are hurting your visibility, shows you how to confirm each one, and explains how to fix JavaScript rendering issues at the rendering layer.</p>
<h2 class="wp-block-heading">TL;DR: Indications That Your Website Has Rendering Issues</h2>
<ul class="wp-block-list">
<li>JavaScript rendering problems occur when your server sends crawlers an HTML shell and relies on the browser to render the content, so crawlers see an empty page while users see a complete one.</li>
<li>These problems usually surface as ordinary SEO issues rather than obvious rendering failures, which is why they go undiagnosed for months.</li>
<li>Common warning signs include unindexed pages, blank rendered HTML, missing schema, deceptively fast crawl stats, unfollowed internal links, rendering errors and false soft 404s, AI search invisibility, broken social previews, Google Ads disapprovals, and Core Web Vitals spikes.</li>
<li>All ten share one root cause: a broken rendering layer, where bots receive an empty or incomplete version of pages that look perfect to human visitors.</li>
<li><a href="https://prerender.io/" type="link" id="https://prerender.io/">Prerender.io</a> closes the rendering gap by serving crawlers fully rendered HTML, without requiring a site rebuild.</li>
</ul>
<h2 class="wp-block-heading">Why JavaScript Rendering Problems Are Hard to Spot</h2>
<p class="wp-block-paragraph">JavaScript rendering problems are difficult to diagnose because your site appears healthy from a user’s perspective. Pages load in the browser, visitors can navigate the site and complete purchases, and internal dashboards continue to report healthy performance. Meanwhile, search engines and AI crawlers are receiving incomplete HTML, leaving important content unavailable for indexing.</p>
<p class="wp-block-paragraph">When the symptoms finally appear, teams often investigate the wrong causes. Indexation drops get attributed to algorithm updates or thin content, missing rich results are blamed on schema implementation, and inconsistent AI visibility gets written off as LLMs being unreliable. Every one of those explanations is plausible, which is why rendering rarely gets checked. <strong>The evidence exists in exactly one place: the HTML your server sends before any JavaScript runs.</strong></p>
<p class="wp-block-paragraph">So, if your site is built with <a href="https://prerender.io/blog/how-to-optimize-react-javascript-code-for-seo/">React</a>, <a href="https://prerender.io/blog/vue-js-pros-and-cons/">Vue</a>, <a href="https://prerender.io/blog/angularjs-pros-cons-and-optimization/">Angular</a>, client-rendered Next.js, Bolt.new, or another JavaScript framework, and several of the signs below look familiar, JavaScript rendering is the most likely cause.</p>
<h2 class="wp-block-heading">10 Signs Your Website Has JavaScript Rendering Problems</h2>
<p class="wp-block-paragraph">Each sign below indicates that bots are receiving less content than your visitors do. One issue alone could have another explanation, but multiple symptoms on your JS-heavy site strongly suggest a rendering problem.</p>
<h3 class="wp-block-heading">1. Google Search Console Shows Pages Stuck in “Discovered’ or “Crawled – Currently Not Indexed”</h3>
<p class="wp-block-paragraph">These two Google Search Console (GSC) statuses are the most common early warning of JavaScript rendering issues, and the mechanism behind them is Google’s two-wave rendering process (crawling the raw HTML first, then rendering the JavaScript later as computing resources become available).</p>
<ul class="wp-block-list">
<li>“<a href="https://prerender.io/blog/how-to-avoid-discovered-currently-not-indexed/" type="link" id="https://prerender.io/blog/how-to-avoid-discovered-currently-not-indexed/">Discovered – currently not indexed</a>” means Google knows the page exists but has delayed crawling it.</li>
<li>“<a href="https://prerender.io/blog/understanding-googles-crawled-currently-not-indexed-coverage-guide/">Crawled – currently not indexed</a>” means Google fetched the raw HTML, found a near-empty shell, and pushed the page into the slow rendering queue, where JS-dependent pages can sit for weeks or months.</li>
</ul>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="624" height="353" src="https://prerender.io/wp-content/uploads/Google-Search-Console-Page-Indexing-report.jpg" alt="Google Search Console Page Indexing report showing pages in "Discovered – currently not indexed"" class="wp-image-14195" srcset="https://prerender.io/wp-content/uploads/Google-Search-Console-Page-Indexing-report.jpg 624w, https://prerender.io/wp-content/uploads/Google-Search-Console-Page-Indexing-report-300x170.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Open the Page Indexing report in Google Search Console and review how many URLs fall into these two categories. A growing count on a JS-heavy site is a strong signal.</p>
<h3 class="wp-block-heading">2. Your URL Inspection Live Test Shows Blank Rendered HTML</h3>
<p class="wp-block-paragraph">The URL Inspection live test shows the exact HTML Google uses; if that view is a blank screen, a loading skeleton, or raw template brackets like {page.title} instead of real content, crawlers are evaluating an empty page. <a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">Single-page applications</a> (like Lovable) are especially prone to returning an empty shell that depends on JavaScript to populate the page.</p>
<p class="wp-block-paragraph">The damage extends beyond visible content. When titles, canonical tags, or hreflang tags are injected client-side by JavaScript, Google may miss those signals during its initial crawl.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="624" height="283" src="https://prerender.io/wp-content/uploads/URL-Inspection-live-test-returning-a-blank-rendered-HTML-shell.png" alt="URL Inspection live test returning a blank rendered HTML shell" class="wp-image-14196" srcset="https://prerender.io/wp-content/uploads/URL-Inspection-live-test-returning-a-blank-rendered-HTML-shell.png 624w, https://prerender.io/wp-content/uploads/URL-Inspection-live-test-returning-a-blank-rendered-HTML-shell-300x136.png 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Run <em>URL Inspection</em> in GSC, click “<em>Test live URL</em>,” then view the rendered HTML. Search for visible page copy and confirm that important metadata appears in the HTML. If those elements are visible in your browser but missing from the rendered HTML, JavaScript rendering is likely preventing Google from seeing the complete page.</p>
<p class="wp-block-paragraph"><strong>Related:</strong> <a href="https://prerender.io/blog/how-to-make-lovable-websites-seo-friendly/">How To Make Your Lovable Website SEO-Friendly</a>.</p>
<h3 class="wp-block-heading">3. Google is Missing Your Structured Data or Schema Markup Despite Correct Implementation</h3>
<p class="wp-block-paragraph">Many JavaScript sites inject JSON-LD schema through Google Tag Manager or client-side scripts. Although the markup may validate successfully in testing tools, Google may still fail to generate rich results if the structured data isn’t consistently available in the raw HTML when the page is crawled.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Compare your page source (right-click, <em>View Source</em>) against what the <em>Rich Results Test</em> or the GSC <em>Enhancements </em>reports detect on the live URL. If your schema appears correctly in your implementation but Google behaves as though it doesn’t exist, client-side injection may be the problem.</p>
<p class="wp-block-paragraph">Our guide to <a href="https://prerender.io/blog/5-types-of-schema-markup-dynamic-websites-should-implement-including-a-tutorial/">schema markup for dynamic websites</a> covers implementations that remain accessible during crawling.</p>
<h3 class="wp-block-heading">4. GSC Crawl Stats Show a Fast Average Response Time While Indexation Tanks</h3>
<p class="wp-block-paragraph">At first glance, this combination looks like good news. Client-side rendered (CSR) sites often report response times under 200ms, because the server hands over a tiny, near-empty file instantly.</p>
<p class="wp-block-paragraph">But that file contains little meaningful content, so Google still has to spend additional resources rendering the page before it can evaluate it. That extra processing drains <a href="https://prerender.io/blog/crawl-budget-management-for-large-websites/">crawl budget</a>, slows page discovery, and reduces indexing efficiency.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Open <em>GSC </em>→ <em>Settings </em>→ <em>Crawl Stats</em> and compare the average response time with your sitemap count and page discovery rates. Fast response times paired with declining indexation indicate that Google is receiving lightweight HTML.</p>
<h3 class="wp-block-heading">5. Internal Links Are Not Being Followed, and New Content Takes Weeks to Appear in Search</h3>
<p class="wp-block-paragraph">When internal links exist only after JavaScript runs, Googlebot will not discover them until the rendering stage, delaying how quickly it can understand your site’s structure and find new pages. New URLs then wait on sitemaps and the rendering queue for discovery, while your competitors with accessible links get discovered more efficiently.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Compare <em>View Source</em> (the HTML your server sends) with <em>Inspect Element</em> (the page after JavaScript runs) in Chrome DevTools. For a broader audit, crawl your site in <a href="https://prerender.io/blog/screaming-frog-vs-prerender-for-javascript-seo-auditing/">Screaming Frog</a> with JavaScript disabled and enabled, then compare the internal link reports.</p>
<h3 class="wp-block-heading">6. Googlebot Triggers Blocked Resources, JS Console Errors, or False Soft 404s During Rendering</h3>
<p class="wp-block-paragraph">Rendering problems don’t always stem from missing content. A <a href="https://prerender.io/blog/robots-txt-and-seo/">robots.txt</a> rule blocking a critical script, an API request that times out, or a JavaScript error can leave Googlebot with an incomplete page. When that happens, Google may struggle to understand the page correctly and, in some cases, classify it as a <a href="https://prerender.io/blog/soft-404/" type="link" id="https://prerender.io/blog/soft-404/">soft 404</a> because the rendered content appears too thin, despite the page returning a normal HTTP status.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Open <em>GSC URL Inspection</em> → <em>Live Test</em> → <em>View Tested Page</em> → <em>More Info tab</em> to review blocked resources and JavaScript errors. Also, check the Page Indexing report for unexpected soft 404s. If your browser shows a working page but Google doesn’t, rendering is likely the point of failure.</p>
<h3 class="wp-block-heading">7. AI Search Engines Hallucinate or Completely Omit Your Brand Content</h3>
<p class="wp-block-paragraph">Unlike Google, many <a href="https://prerender.io/blog/how-to-optimize-your-website-for-ai-crawlers/">AI search crawlers</a>, such as GPTBot, PerplexityBot, and ClaudeBot, currently don’t execute JavaScript. They read the raw HTML your server returns and nothing more. <strong>If your content isn’t in the raw HTML, it doesn’t exist to an AI crawler.</strong> So they omit your brand from answers, cite competitors instead, or answer with outdated information.</p>
<p class="wp-block-paragraph">Google’s AI shows failures differently, but boils down to the same thing. AI Overviews and Gemini draw on Google’s index, so pages stuck in the rendering queue simply aren’t available to be summarized yet.</p>
<p class="wp-block-paragraph">Missing structured data can make this problem worse. When schema isn’t available in the initial HTML, <a href="https://prerender.io/blog/how-to-get-indexed-on-ai-platforms/">AI systems</a> lose another valuable source of machine-readable context for understanding your products and content, costing you AI citations.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Ask LLMs direct questions about your products, pricing, or features. Wrong answers, outdated information, or competitor citations on queries you should own all suggest that AI crawlers cannot access your pages. You can also review your server logs to confirm how AI bot user agents are accessing your site.</p>
<h3 class="wp-block-heading">8. Social Media Link Previews Appear Blank, Broken, or Stale</h3>
<p class="wp-block-paragraph">Most social platforms don’t execute JavaScript when generating link previews. When someone shares your URL on LinkedIn, X, Slack, or WhatsApp, the platform’s bot fetches the page once and reads the <a href="https://prerender.io/blog/benefits-of-using-open-graph/">Open Graph tags</a> available in the initial HTML. If those tags are injected only after JavaScript runs, shared links display missing images, incorrect titles, or no preview at all, reducing engagement before anyone even clicks.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Paste a page URL into Facebook Sharing Debugger, LinkedIn’s Post Inspector, or X Card Validator. Missing images or incorrect metadata indicate your OG tags aren’t present in the HTML served to crawlers. </p>
<p class="wp-block-paragraph"><strong>Related:</strong> <a href="https://prerender.io/blog/how-to-fix-link-previews/">How to Fix Broken Social Media Link Previews</a>.</p>
<h3 class="wp-block-heading">9. Google Ads Quality Scores Drop or Campaigns Get “Destination Not Working” Disapprovals</h3>
<p class="wp-block-paragraph">Google Ads bot burns its crawl resources on unrenderable JS pages, as Googlebot does in sign 4, then concludes the landing page is broken. This results in a <a href="https://prerender.io/blog/google-ads-error-messages/">“Destination not working” disapproval</a> on a page that loads perfectly, or a lower landing page experience score, which increases cost per click. Unfortunately, teams rarely suspect rendering here because the ad platform frames everything as a page-quality issue.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Review the <em>Google Ads Policy Manager</em> for ‘<em>Destination not working</em>’ disapprovals, and check the Quality Score column for ‘<em>Below average</em>’ landing page experience ratings. If the flagged pages work fine for users but rely heavily on client-side rendering, the rendering layer may be a possible cause. Our guide on <a href="https://prerender.io/blog/how-to-fix-disapproved-google-ads/">fixing disapproved Google Ads</a> explains the recovery process.</p>
<h3 class="wp-block-heading">10. Core Web Vitals Show Sudden Spikes in LCP and INP</h3>
<p class="wp-block-paragraph">The final sign is the one place where the rendering burden also touches real users. JavaScript-heavy websites often require the browser to download and execute significant amounts of JavaScript before displaying meaningful content. That extra work can delay Largest Contentful Paint (LCP) and increase Interaction to Next Paint (INP) through long-running JS tasks.</p>
<p class="wp-block-paragraph"><strong>How to spot it:</strong> Test important pages in <em>PageSpeed Insights</em> and compare the results with the <a href="https://prerender.io/blog/how-to-pass-core-web-vitals/">Core Web Vitals</a> report in Google Search Console. If LCP delays or poor INP scores are largely driven by JavaScript execution, your rendering architecture may be contributing to those performance issues. Prerendering resolves both at the source by delivering complete HTML to crawlers.</p>
<h2 class="wp-block-heading">What All These JavaScript Rendering Issues Have in Common</h2>
<p class="wp-block-paragraph"><strong>Every sign above points to the same underlying problem: crawlers aren’t evaluating the same version of your pages that human visitors see.</strong> Users get a fully rendered experience in the browser. Search engines, AI crawlers, social platforms, and ad bots get the initial HTML response, and if that response is incomplete, the content, metadata, and structured data they need simply aren’t there.</p>
<p class="wp-block-paragraph">So the fix isn’t more content, more links, or waiting out an algorithm update. It’s the rendering layer—one fix for all ten issues.</p>
<h2 class="wp-block-heading">How to Fix JavaScript Rendering Problems</h2>
<p class="wp-block-paragraph">There are two primary ways to solve the rendering problems.</p>
<p class="wp-block-paragraph">The first is changing how your site renders pages through JavaScript SEO best practices, such as <a href="https://prerender.io/blog/what-is-srr-and-why-do-you-need-to-know/">server-side rendering (SSR)</a> or static site generation (SSG). These are effective long-term solutions, especially for teams already planning a framework migration or major site rebuild, but they demand significant engineering time and resources.</p>
<p class="wp-block-paragraph">However, if you need bots and search engines to see your complete pages without rebuilding anything, an SEO prerendering infrastructure like <a href="http://Prerender.io">Prerender.io</a> is the practical route.</p>
<p class="wp-block-paragraph">Prerender.io renders each page in the background, waits for the JavaScript to finish loading, and serves the resulting HTML to crawlers while human visitors continue receiving the normal JavaScript experience.</p>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="How Does Prerender.io Work? A Quick Explainer" width="640" height="360" src="https://www.youtube.com/embed/OxNt36HhCP4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>
<p class="wp-block-paragraph">With the rendering gap removed, search engines can index complete content on the first crawl, structured data becomes available for rich results, social platforms generate accurate link previews, advertising systems can better evaluate landing pages, AI crawlers can access the content they rely on, and your crawl budget goes toward discovering pages instead of rendering them.</p>
<p class="wp-block-paragraph">If you’ve confirmed your site’s diagnosis and are looking for a reliable JS rendering solution, <a href="https://prerender.io/pricing/">start your free trial at Prerender.io today</a>.</p>
<h2 class="wp-block-heading">FAQs About JavaScript Rendering Problems</h2>
<h3 class="wp-block-heading">1. What causes JavaScript rendering problems?</h3>
<p class="wp-block-paragraph">They occur when a site’s content is generated in the browser by JavaScript rather than included in the HTML the server sends. Search engine crawlers, AI bots, and social media bots either cannot execute that JavaScript or delay it in a rendering queue, so they see an incomplete version of the page.</p>
<h3 class="wp-block-heading">2. How do I know if my website has JavaScript rendering problems?</h3>
<p class="wp-block-paragraph">Start by comparing what your server sends with what users see in the browser. Run a URL Inspection Live Test in Google Search Console, compare View Source with Inspect Element, and check whether important content, metadata, or schema is missing from the initial HTML. Pages stuck in “Crawled – currently not indexed,” <a href="https://prerender.io/blog/how-to-fix-link-previews/">blank social previews</a>, and missing rich results are additional warning signs.</p>
<h3 class="wp-block-heading">3. Can JavaScript rendering problems affect AI search results like ChatGPT and Perplexity?</h3>
<p class="wp-block-paragraph">Yes. Many <a href="https://prerender.io/blog/understanding-web-crawlers-traditional-ai/" type="link" id="https://prerender.io/blog/understanding-web-crawlers-traditional-ai/">AI crawlers</a> rely primarily on the HTML your server returns. If important content is generated only after JavaScript runs, AI systems may omit your brand, surface outdated information, or cite competitors instead.</p>
<h3 class="wp-block-heading">4. Do JavaScript rendering issues affect Core Web Vitals scores?</h3>
<p class="wp-block-paragraph">Yes. JavaScript-heavy rendering can delay metrics such as Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) because browsers must execute additional JavaScript before displaying or updating content.</p>
<h3 class="wp-block-heading">5. How do I fix JavaScript rendering issues without rebuilding my site?</h3>
<p class="wp-block-paragraph">Use a prerendering solution like <a href="https://prerender.io">Prerender.io</a> to generate and serve fully rendered HTML snapshots of your pages to bots, while preserving the existing JS experience for users. Prerender.io works through a middleware or CDN integration, so no framework migration or rebuild is required.</p>
]]></content:encoded>
</item>
<item>
<title>What Are The Different Types of Google Ads Error Messages? + What Causes Them</title>
<link>https://prerender.io/blog/google-ads-error-messages/</link>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Wed, 05 Aug 2026 08:55:09 +0000</pubDate>
<category><![CDATA[Enterprise SEO]]></category>
<category><![CDATA[Prerendering]]></category>
<guid isPermaLink="false">https://prerender.io/?p=13419</guid>
<description><![CDATA[Explore our reference guide to Google Ads error messages to find out what causes them, and how to spot rendering-related crawl errors.]]></description>
<content:encoded><![CDATA[
<p class="wp-block-paragraph">Your ad landing page may look and work perfectly for shoppers while still triggering Google Ads error messages. You could be seeing a “destination not accessible” warning, a Shopping ad disapproved for an incorrect price, or a drop in landing page experience, even though everything appears fine in your browser.</p>
<p class="wp-block-paragraph">From the disapproval patterns the Prerender.io team sees on JavaScript-heavy sites, these Google Ads crawl errors are often caused by a crawl or rendering gap rather than the ad copy, product feed, or Google Ads policy.</p>
<p class="wp-block-paragraph">In this guide, we break down the types of Google Ads errors we encounter most often, what usually causes them, and which ones should prompt you to investigate whether AdsBot-Google can access and render the page correctly.</p>
<h2 class="wp-block-heading">First Up: Understanding How AdsBot-Google Crawls Your Landing Pages</h2>
<p class="wp-block-paragraph">Google doesn’t assess an ad destination exactly as a shopper does. It uses AdsBot-Google to crawl the landing page and evaluate the content it can access.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="624" height="304" src="https://prerender.io/wp-content/uploads/AdsBot-Google-user-agent-details.jpg" alt="AdsBot-Google user agent details from Google Search Central - different types of Google Ad errors and what causes them " class="wp-image-13422" srcset="https://prerender.io/wp-content/uploads/AdsBot-Google-user-agent-details.jpg 624w, https://prerender.io/wp-content/uploads/AdsBot-Google-user-agent-details-300x146.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p class="wp-block-paragraph">If your landing page is a <a href="https://prerender.io/blog/other-rendering-options-vs-prerendering/" type="link" id="https://prerender.io/blog/other-rendering-options-vs-prerendering/" target="_blank" rel="noreferrer noopener">client-side-rendered or single-page application</a>, the initial HTML may contain little more than an empty framework. Important content (including the product name, price, availability, page copy, and navigation) is invisible to AdsBot-Google. It only appears after JavaScript runs.</p>
<p class="wp-block-paragraph">That basically means the page your team tests in a browser isn’t always the page AdsBot receives. When AdsBot can’t access the JS content reliably, it may interpret the destination as:</p>
<ul class="wp-block-list">
<li>Unavailable or broken.</li>
<li>Inconsistent with the ad or product feed.</li>
<li>Missing important product information.</li>
<li>Too thin to provide a strong landing page experience.</li>
</ul>
<p class="wp-block-paragraph">That is why Google Ads may give an error warning even though it loads normally for users.</p>
<p class="wp-block-paragraph">For enterprise advertisers, the problem is rarely limited to one URL. The same rendering setup may be used across hundreds of campaign landing pages, product listings, markets, and languages. One technical JS rendering gap can consequently produce Google Ads crawl errors and disapproved Google Shopping ads at scale.</p>
<h2 class="wp-block-heading">The Two Main Types of Google Ads Errors</h2>
<p class="wp-block-paragraph">Google Ads errors generally fall into two groups, depending on which Google system is evaluating the page and what it is trying to verify:</p>
<ol class="wp-block-list">
<li>AdsBot landing page errors and quality signals.</li>
<li>Google Shopping and Merchant Center errors.</li>
</ol>
<p class="wp-block-paragraph">We make the distinction between the two types because the same warning can have several possible causes.</p>
<h3 class="wp-block-heading">Google Ads Error Group 1: AdsBot Landing Page Errors and Quality Signals</h3>
<p class="wp-block-paragraph">These issues appear in the Google Ads interface and generally trace back to whether AdsBot-Google can fetch, read, and evaluate the landing page. Google groups many of the direct errors under its <a href="https://support.google.com/adspolicy/answer/6368661?hl=en" type="link" id="https://support.google.com/adspolicy/answer/6368661?hl=en" target="_blank" rel="noreferrer noopener nofollow">Destination Requirements</a> policy.</p>
<figure class="wp-block-table alignleft no_header_breaks"><table><thead><tr><th class="has-text-align-left" data-align="left">Google Ads Error Message</th><th class="has-text-align-left" data-align="left">What It Means</th><th class="has-text-align-left" data-align="left">Rendering-Related?</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left"><strong>Destination not working</strong></td><td class="has-text-align-left" data-align="left">AdsBot cannot reliably fetch or interpret the page. Google’s policy covers destinations that do not function or are configured incorrectly, but on JavaScript sites, the error is often triggered by empty initial HTML or content that only appears after scripts run.</td><td class="has-text-align-left" data-align="left">Often</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Destination not crawlable</strong></td><td class="has-text-align-left" data-align="left">Google cannot crawl the page to assess it. AdsBot may be blocked, or the page may return no usable HTML when fetched.</td><td class="has-text-align-left" data-align="left">Often</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Destination not accessible</strong></td><td class="has-text-align-left" data-align="left">AdsBot cannot reach the page from its crawling environment. Common causes include 403 or 404 responses, robots.txt rules, firewall settings, CDN configurations, or bot-protection tools.</td><td class="has-text-align-left" data-align="left">Sometimes</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Poor landing page experience</strong></td><td class="has-text-align-left" data-align="left">Google’s systems cannot clearly determine what the page contains or offers. Important headings, page content, navigation, or metadata may not be available when the page is fetched.</td><td class="has-text-align-left" data-align="left">Often</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Low Quality Score</strong></td><td class="has-text-align-left" data-align="left">Landing page experience is one of the factors that contributes to Quality Score. If AdsBot reads the page inconsistently, that component may suffer even when the ad copy and targeting are strong.</td><td class="has-text-align-left" data-align="left">Sometimes</td></tr></tbody></table></figure>
<h4 class="wp-block-heading">The Error Misdiagnosed Most Often: “Destination Not Accessible”</h4>
<p class="wp-block-paragraph">“<a href="https://support.google.com/adspolicy/answer/16428223" type="link" id="https://support.google.com/adspolicy/answer/16428223" target="_blank" rel="noreferrer noopener nofollow">Destination not accessible</a>” is the error teams most often misread as a JavaScript rendering failure.</p>
<p class="wp-block-paragraph">In many cases, it is an access problem instead. AdsBot is being blocked before it reaches the page, so changing the JavaScript will not solve it.</p>
<p class="wp-block-paragraph">Google suggests the following places as the first you should check:</p>
<ul class="wp-block-list">
<li><strong>403 and 404 responses.</strong></li>
<li><strong>Robots.txt rules.</strong></li>
<li><strong>Firewall or CDN configurations.</strong></li>
<li><strong>Bot-protection challenges blocking AdsBot-Google.</strong></li>
</ul>
<p class="wp-block-paragraph">Confirm that AdsBot can access the page before investigating how the content renders. It prevents teams from spending an entire debugging cycle fixing the wrong layer.</p>
<p class="wp-block-paragraph">The broader theme across this group is that Google is describing the symptom it observed, not the underlying cause. “<a href="https://support.google.com/adspolicy/answer/16428019" type="link" id="https://support.google.com/adspolicy/answer/16428019" target="_blank" rel="noreferrer noopener nofollow">Destination not working</a>” does not necessarily mean your website was down. It means AdsBot did not receive what it needed at the moment it evaluated the page.</p>
<p class="wp-block-paragraph"><strong>Learn how these crawl issues can affect landing page experience: <a href="https://prerender.io/blog/how-to-fix-disapproved-google-ads/" type="link" id="https://prerender.io/blog/how-to-fix-disapproved-google-ads/" target="_blank" rel="noreferrer noopener">How to Fix Disapproved Google Ads</a>.</strong></p>
<h3 class="wp-block-heading">Google Ads Error Group 2: Google Shopping and Merchant Center Errors</h3>
<p class="wp-block-paragraph">Google Shopping errors work differently from AdsBot landing page errors.</p>
<p class="wp-block-paragraph">Instead of assessing whether a landing page provides an acceptable ad experience, the Merchant Center crawler verifies the product information on the page. It reads details such as price, availability, and structured data, then compares them with the information submitted in your product feed.</p>
<p class="wp-block-paragraph">When those values do not match, the product may be disapproved.</p>
<figure class="wp-block-table alignleft no_header_breaks"><table><thead><tr><th class="has-text-align-left" data-align="left">Google Shopping Error</th><th class="has-text-align-left" data-align="left">What It Means</th><th class="has-text-align-left" data-align="left">Rendering-Related?</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left"><strong>Mismatched value (page crawl) [price]</strong></td><td class="has-text-align-left" data-align="left">The price Google reads on the landing page does not match the price submitted in the product feed.</td><td class="has-text-align-left" data-align="left">Frequently</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Availability mismatch</strong></td><td class="has-text-align-left" data-align="left">The availability shown in the page content or structured data does not match the value in the feed.</td><td class="has-text-align-left" data-align="left">Frequently</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Missing or incomplete product data</strong></td><td class="has-text-align-left" data-align="left">Google cannot find the product information or structured data it expects on the page.</td><td class="has-text-align-left" data-align="left">Frequently</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Intermittent product disapprovals</strong></td><td class="has-text-align-left" data-align="left">The crawler may be receiving different values across separate crawls because the page renders inconsistently or a cached version is outdated.</td><td class="has-text-align-left" data-align="left">Often</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">Many of these disapprovals look like feed problems but begin at the rendering layer.</p>
<p class="wp-block-paragraph">If price, availability, or structured data is injected by JavaScript after the initial page response, the crawler may receive the pre-render state. It sees no price, an outdated price, or incomplete product data—even when the live page and feed appear to agree when checked by a person.</p>
<h4 class="wp-block-heading">Mismatched Value (Page Crawl) [Price]</h4>
<p class="wp-block-paragraph">Google disapproves the product because the price it reads on the landing page does not match the price attribute in the feed. The values in the HTML available to the crawler need to match the feed exactly.</p>
<p class="wp-block-paragraph">These 2 features make this error difficult to diagnose:</p>
<ol class="wp-block-list">
<li><strong>It can appear intermittent:</strong> Google automatically recrawls disapproved products, so a listing may move between approved and disapproved as the crawler encounters different render states.</li>
<li><strong>The price displayed to shoppers is usually correct:</strong> that sends teams into the product feed looking for an error that may not exist there.</li>
</ol>
<p class="wp-block-paragraph">When the visible price and feed match, the next question should be: <strong>What price is present in the HTML Google receives?</strong></p>
<h3 class="wp-block-heading">Other Google Ads Issues: Availability and Structured Data Mismatches</h3>
<p class="wp-block-paragraph">Google uses structured data, including schema.org and JSON-LD markup, to verify product attributes such as price and availability. If that markup is added client-side and is not available when the crawler fetches the page, Google may receive missing or inconsistent product information.</p>
<p class="wp-block-paragraph">The result can include:</p>
<ul class="wp-block-list">
<li>Availability mismatches.</li>
<li>Incomplete product listings.</li>
<li>Missing product attributes.</li>
<li>Disapprovals that point to the feed, even though it’s accurate.</li>
</ul>
<h3 class="wp-block-heading">The Stale-Cache Problem for Sites Already Using JavaScript Prerendering</h3>
<p class="wp-block-paragraph">JS prerendering with a tool like Prerender.io caches rendered pages for a period determined by your settings. If a product’s price or availability changes on the live site while the cached snapshot still contains the previous value, Google may read the stale version and report a mismatch.</p>
<p class="wp-block-paragraph">The fix is to recache the product page so that the rendered HTML contains the current price and availability.</p>
<p class="wp-block-paragraph">The most reliable approach is to connect Prerender.io’s /recache API endpoint to the same event that updates the product data. When a price or inventory value changes, trigger a fresh recache immediately rather than waiting for the next scheduled cache refresh.</p>
<p class="wp-block-paragraph"><strong>Related: <a href="https://prerender.io/blog/caching-in-javascript-and-how-it-affects-seo-performance/" type="link" id="https://prerender.io/blog/caching-in-javascript-and-how-it-affects-seo-performance/" target="_blank" rel="noreferrer noopener">Caching in JavaScript and How it Affects SEO Performance</a></strong></p>
<h2 class="wp-block-heading">How Will I Know if a Google Ads Error is Rendering-Related?</h2>
<p class="wp-block-paragraph">Every Google Ads error message we’ve discussed can have more than one cause. “Destination not working” might be a rendering issue, or it could be an actual server outage. A price mismatch might come from a stale render, but it could also be a real product feed error.</p>
<p class="wp-block-paragraph">Before rewriting copy or auditing every item in the feed, identify which layer is failing. Google’s error message tells you what its system observed. The <a href="https://docs.prerender.io/docs/status-codes" type="link" id="https://docs.prerender.io/docs/status-codes" target="_blank" rel="noreferrer noopener">response code in your Prerender.io dashboard</a> helps you identify where the underlying failure occurred.</p>
<figure class="wp-block-table alignleft"><table class="has-fixed-layout"><thead><tr><th class="has-text-align-left" data-align="left">What You See</th><th class="has-text-align-left" data-align="left">Likely Cause</th><th class="has-text-align-left" data-align="left">Will a JS Rendering Fix Help?</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left"><strong>4xx response, including 401, 403, 404, 409, 410, 422, or 429</strong></td><td class="has-text-align-left" data-align="left">Access or configuration issue. The crawler cannot reach the page successfully.</td><td class="has-text-align-left" data-align="left">No. Fix the authentication wall, firewall or CDN rule, bot-protection challenge, missing page, or request limit.</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>5xx response, including 500, 502, 503, or 504</strong></td><td class="has-text-align-left" data-align="left">Rendering or upstream failure. The page could not be produced successfully.</td><td class="has-text-align-left" data-align="left">Often. Investigate the render and any API or service it depends on.</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>200 response, but the page is still disapproved</strong></td><td class="has-text-align-left" data-align="left">The page is reachable, but important content, structured data, or current product values may be missing.</td><td class="has-text-align-left" data-align="left">Sometimes. Inspect the returned HTML and check for stale cache data.</td></tr><tr><td class="has-text-align-left" data-align="left"><strong>Clean render and matching content, but the error remains</strong></td><td class="has-text-align-left" data-align="left">The problem is more likely related to policy, billing, ad configuration, or the product feed itself.</td><td class="has-text-align-left" data-align="left">No. Rendering is probably not the cause.</td></tr></tbody></table></figure>
<p class="wp-block-paragraph">A 200 response only confirms that Google received a page. It does not confirm that the page contained the price, availability, copy, or structured data the crawler needed.</p>
<h3 class="wp-block-heading">The Google Ads Rendering Error to Look Out For: A 504 Response</h3>
<p class="wp-block-paragraph">A 504 is the status code that most often points toward a rendering timeout rather than an access block.</p>
<p class="wp-block-paragraph">Common causes include:</p>
<ul class="wp-block-list">
<li>The page returning an empty HTML framework.</li>
<li>JavaScript errors preventing content from appearing.</li>
<li>Failed API calls during the render</li>
<li>Slow third-party dependencies</li>
<li>A render taking longer than the configured timeout.</li>
</ul>
<p class="wp-block-paragraph">Prerender.io’s default rendering timeout is 20 seconds and can be increased to 60 seconds under Advanced Settings. If a product page depends on slow API calls to populate its price or availability, the timeout is one of the first settings to inspect.</p>
<h3 class="wp-block-heading">The Google Ads Error Triage Rule</h3>
<p class="wp-block-paragraph">Read the status code before forming a theory about the Google Ads error. We have seen teams spend days rewriting ad copy in response to a “poor landing page experience” alert, only to find that AdsBot was receiving a 403 because of a firewall rule.</p>
<p class="wp-block-paragraph">The response code usually tells you where to begin:</p>
<ul class="wp-block-list">
<li>A <strong>4xx </strong>sends you to the access and configuration layer.</li>
<li>A <strong>5xx </strong>sends you to the rendering process and its dependencies.</li>
<li>A <strong>200 with missing or incorrect content</strong> sends you to the HTML, structured data, or cache.</li>
<li>A <strong>clean render with matching data</strong> sends you back to policy, ad configuration, or the feed.</li>
</ul>
<p class="wp-block-paragraph">These are different problems that may need to be handled by different teams. The status code helps you involve the right one first. For a closer look at how a crawler request moves from the initial fetch to fully rendered HTML, see our <a href="https://docs.prerender.io/docs/4-troubleshooting" type="link" id="https://docs.prerender.io/docs/4-troubleshooting" target="_blank" rel="noreferrer noopener">troubleshooting guide</a>.</p>
<h2 class="wp-block-heading">How Client-Side Rendering Impacts Google Tag Manager (GTM) Tracking</h2>
<p class="wp-block-paragraph">Landing page disapprovals are only the most visible symptom of rendering gaps. Client-side execution delays also silently degrade campaign tracking and attribution accuracy for enterprise PPC teams.</p>
<p class="wp-block-paragraph">When Single-Page Applications (SPAs) defer page loads to client-side scripts, Google Tag Manager (GTM) and dynamic remarketing scripts often suffer from:</p>
<ol class="wp-block-list">
<li><strong>Incomplete retargeting audiences:</strong> if product details (like product ID or price) take too long to load, your tracking tags fire empty. Google won’t know which product the user viewed, making dynamic retargeting ads far less effective.</li>
<li><strong>False “broken tracking” warnings:</strong> Google regularly sends automated bots to test if your conversion tags work. If the bot inspects a page before your JavaScript finishes loading, it assumes your tags are missing and flags your account with tracking errors.</li>
<li><strong>Lost conversion data:</strong> if a user clicks your ad and bounces quickly before your page scripts finish running, the tracking pixel never fires. You pay for the ad click, but lose out on the conversion data.</li>
</ol>
<p class="wp-block-paragraph">Pre-rendering ensures your tracking tags and product data are ready immediately when the page opens, keeping your tracking accurate and account health green.</p>
<h2 class="wp-block-heading">Why Google Ads Errors Get Worse at Enterprise Scale</h2>
<p class="wp-block-paragraph">On a small website, a rendering issue may affect one landing page and be noticed quickly. On a large JavaScript site, the same problem repeats across every URL built from the same templates and rendering logic. It can affect hundreds of campaign pages, thousands of product listings, and every locale or language variation.</p>
<p class="wp-block-paragraph">Teams managing several accounts through a Google Ads Manager account (MCC) or reviewing changes in Google Ads Editor may see errors spread across campaigns even though nothing obvious has changed in the copy or feed.</p>
<p class="wp-block-paragraph">What changed is often the page state the crawler encountered when it fetched each URL. The problem is not necessarily hundreds of separate errors; it may be one rendering behavior repeating hundreds of times.</p>
<p class="wp-block-paragraph"><strong>Related: <a href="https://prerender.io/blog/ssr-enterprise-seo/" type="link" id="https://prerender.io/blog/ssr-enterprise-seo/" target="_blank" rel="noreferrer noopener">Why SSR Alone Doesn’t Solve Enterprise SEO Problems</a></strong></p>
<h2 class="wp-block-heading">How On Fixed Google Ads Errors Caused by JavaScript Rendering</h2>
<p class="wp-block-paragraph">Ahead of a major frontend update in 2023, global sportswear brand On began experiencing problems across its digital marketing ecosystem. Its JavaScript-heavy pages were not rendering reliably for crawlers, contributing to:</p>
<ul class="wp-block-list">
<li>Continuous disapprovals across Google Shopping, display, and video advertising</li>
<li>Google indexing issues.</li>
<li>Broken social media previews.</li>
</ul>
<p class="wp-block-paragraph">What initially looked like several unrelated channel problems had the same underlying cause: <strong>crawlers couldn’t consistently read the content on On’s JavaScript pages.</strong></p>
<p class="wp-block-paragraph">On considered building server-side rendering in-house, but the project would have required months of development, additional infrastructure, and ongoing engineering support. Instead, the company integrated <a href="https://prerender.io" type="link" id="https://prerender.io">Prerender.io</a> without rebuilding its frontend architecture.</p>
<p class="wp-block-paragraph">Within days, visibility stabilized across key search and marketing channels. According to On, its Google Ads began running smoothly again, campaign delivery normalized, impression share returned, and spend could scale predictably. The company estimates that <strong>resolving the ad issues protected up to $1 million in annual revenue.</strong></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://prerender.io/resources/case-studies/on-prerender/"><img loading="lazy" decoding="async" width="624" height="237" src="https://prerender.io/wp-content/uploads/On-image-traffic-results-1.jpg" alt="On’s image traffic results after implementing Prerender.io" class="wp-image-13437" srcset="https://prerender.io/wp-content/uploads/On-image-traffic-results-1.jpg 624w, https://prerender.io/wp-content/uploads/On-image-traffic-results-1-300x114.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a></figure>
</div>
<p class="wp-block-paragraph">On’s experience illustrates why Google Ads errors at scale should not always be treated as isolated campaign or feed problems. When disapprovals appear across paid advertising, Shopping, organic search, and social platforms, the rendering layer is one of the first shared systems to investigate.</p>
<div data-elementor-type="container" data-elementor-id="13438" class="elementor elementor-13438" data-elementor-post-type="elementor_library">
<div class="elementor-element elementor-element-277802ff e-con-full case_study_testimonial e-flex e-con e-child" data-id="277802ff" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[],"background_background":"classic"}">
<div class="elementor-element elementor-element-ba04e44 elementor-view-default elementor-widget elementor-widget-icon" data-id="ba04e44" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="69" height="55" viewBox="0 0 69 55" fill="none"><path d="M22.5175 25.7206C25.1981 26.9069 27.289 28.6863 28.7902 31.0588C30.2914 33.4314 31.042 36.2353 31.042 39.4706C31.042 44.1078 29.5944 47.8824 26.6993 50.7941C23.8042 53.598 20.1049 55 15.6014 55C11.0979 55 7.34499 53.5441 4.34266 50.6324C1.44755 47.7206 0 44 0 39.4706C0 37.3137 0.268065 35.1569 0.804196 33C1.34033 30.8431 2.51981 27.6078 4.34266 23.2941L13.6713 0H29.5944L22.5175 25.7206ZM60.4755 25.7206C63.1562 26.9069 65.2471 28.6863 66.7482 31.0588C68.2494 33.4314 69 36.2353 69 39.4706C69 44.1078 67.5524 47.8824 64.6573 50.7941C61.7622 53.598 58.0629 55 53.5594 55C49.0559 55 45.303 53.5441 42.3007 50.6324C39.4056 47.7206 37.958 44 37.958 39.4706C37.958 37.3137 38.2261 35.1569 38.7622 33C39.2984 30.8431 40.4779 27.6078 42.3007 23.2941L51.6294 0H67.5524L60.4755 25.7206Z" fill="#66D756"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-508dc7bb elementor-widget elementor-widget-text-editor" data-id="508dc7bb" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p><strong>Prerender.io offers the strongest combination of stability, speed, and value.</strong></p> </div>
</div>
<div class="elementor-element elementor-element-76fbca11 e-con-full e-flex e-con e-child" data-id="76fbca11" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="elementor-element elementor-element-376f7870 e-con-full e-flex e-con e-child" data-id="376f7870" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="elementor-element elementor-element-10a53c32 elementor-widget elementor-widget-image" data-id="10a53c32" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="150" height="150" src="https://prerender.io/wp-content/uploads/Marilena-Pixner-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-image-10076" alt="Marilena Pixner - On case study" srcset="https://prerender.io/wp-content/uploads/Marilena-Pixner-150x150.jpg 150w, https://prerender.io/wp-content/uploads/Marilena-Pixner-300x300.jpg 300w, https://prerender.io/wp-content/uploads/Marilena-Pixner.jpg 440w" sizes="(max-width: 150px) 100vw, 150px" /> </div>
</div>
</div>
<div class="elementor-element elementor-element-5454fe8e e-flex e-con-boxed e-con e-child" data-id="5454fe8e" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-753e5296 elementor-widget elementor-widget-text-editor" data-id="753e5296" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Marilena Pixner </div>
</div>
<div class="elementor-element elementor-element-6198e58e elementor-widget elementor-widget-text-editor" data-id="6198e58e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Senior Organic Growth and SEO Specialist at On</p> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="wp-block-paragraph"></p>
<p class="wp-block-paragraph"><strong>Read the full customer story: <a href="https://prerender.io/resources/case-studies/on-prerender/" type="link" id="https://prerender.io/resources/case-studies/on-prerender/" target="_blank" rel="noreferrer noopener">How On Saves Millions Per Year with Prerender.io</a></strong></p>
<h2 class="wp-block-heading">How Prerender.io Fixes Google Ads Crawl Errors at Enterprise Level</h2>
<p class="wp-block-paragraph">Prerender.io gives AdsBot-Google and other crawlers a fully rendered HTML version of each JavaScript page. Shoppers still receive the dynamic site experience, while crawlers immediately receive the landing page copy, prices, availability, structured data, and other content they need to evaluate the URL. </p>
<p class="wp-block-paragraph">This helps ensure that your Google Ads are approved, your link previews display properly, and your content shows up accurately in AI search results.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="624" height="395" src="https://prerender.io/wp-content/uploads/How-Prerender-fixes-visibility.jpg" alt="An image showing a before and after of using Prerender.io for LLM visibility: the brand's content shows up correctly, and the link preview is clear and visible." class="wp-image-13443" style="width:624px;height:auto" srcset="https://prerender.io/wp-content/uploads/How-Prerender-fixes-visibility.jpg 624w, https://prerender.io/wp-content/uploads/How-Prerender-fixes-visibility-300x190.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p class="wp-block-paragraph">This fixes the rendering problem behind the Google Ads errors we’ve discussed. Because Prerender.io works at the rendering layer, the fix applies across pages built with the same JavaScript architecture. Enterprise teams can address the underlying issue across campaign URLs, product catalogs, markets, and languages instead of troubleshooting each disapproved ad individually — and without the budget waste that comes from campaigns running against landing pages crawlers can’t evaluate correctly.</p>
<h2 class="wp-block-heading">Fix the Google Ads Crawl Error, Not Just the Disapproval</h2>
<p class="wp-block-paragraph">A Google Ads error message tells you what Google encountered, not necessarily what caused it. Check whether AdsBot can access the page, inspect the HTML it receives, and confirm that important content is present before rewriting ads or rebuilding product feeds.</p>
<p class="wp-block-paragraph">When JavaScript rendering is the problem, Prerender.io helps resolve it across every affected page, not one disapproval at a time.</p>
<p class="wp-block-paragraph"><a href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*aax2d8*_gcl_au*OTc4MDM2ODM5LjE3ODE3Nzg2Mjk.*_ga*MTM3NDU1ODIzNC4xNzMxOTk4MzUx*_ga_5C99FX76HR*czE3ODQ4MDc3MTckbzMwOSRnMSR0MTc4NDgxMTIzMiRqNTkkbDAkaDE4MDUwNjQyMTU." type="link" id="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*aax2d8*_gcl_au*OTc4MDM2ODM5LjE3ODE3Nzg2Mjk.*_ga*MTM3NDU1ODIzNC4xNzMxOTk4MzUx*_ga_5C99FX76HR*czE3ODQ4MDc3MTckbzMwOSRnMSR0MTc4NDgxMTIzMiRqNTkkbDAkaDE4MDUwNjQyMTU.">Start your 30-day free Prerender.io trial</a> to see what Google’s crawlers receive from your landing pages and find out whether rendering is contributing to your Google Ads errors.</p>
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*1elae8n*_gcl_au*MTI3NzU5MTg2OC4xNzgwMzA3NjA1*_ga*MzYwMTA2NTM1LjE3NTIyMzQyMTk.*_ga_5C99FX76HR*czE3ODYwOTM4NTkkbzM0NiRnMSR0MTc4NjA5NDE1MiRqNjAkbDAkaDQ4MDI5NjI0MA.." style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;background-color:#1f8211">Start for Free</a></div>
</div>
<h2 class="wp-block-heading">FAQs About The Types and Causes of Google Ads Errors</h2>
<h3 class="wp-block-heading">1. Why does Google Ads say “destination not working” when the page loads fine in my browser?</h3>
<p class="wp-block-paragraph">Google Ads often shows a “destination not working error” error for JavaScript sites because AdsBot-Google doesn’t render your page the way your browser does. It evaluates the HTML available the moment it fetches the page and doesn’t wait for long-running JavaScript, so if your content loads a beat later, the crawler <a href="https://prerender.io/blog/how-to-fix-disapproved-google-ads/" type="link" id="https://prerender.io/blog/how-to-fix-disapproved-google-ads/" target="_blank" rel="noreferrer noopener">has already judged the page</a> as thin or broken.</p>
<h3 class="wp-block-heading">2. What does the “Mismatched value (page crawl) [price]” Google Shopping ad error mean?</h3>
<p class="wp-block-paragraph">Google read a price on your landing page that doesn’t match the <mark style="background-color:rgba(0, 0, 0, 0);color:#188038" class="has-inline-color"><code>price</code></mark> attribute in your feed. According to Google’s Merchant Center documentation, the crawler reads the price from the returned HTML, and if that price is injected by JavaScript after the page loads, it triggers a mismatch even when your feed and live site actually agree. Serving crawlers fully rendered HTML is what resolves this class of <a href="https://prerender.io/resources/industry-use-cases/ecommerce/" type="link" id="https://prerender.io/resources/industry-use-cases/ecommerce/" target="_blank" rel="noreferrer noopener">Google Shopping ad errors</a>.</p>
<h3 class="wp-block-heading">3. How do I know if a Google Ads error is a rendering-related problem?</h3>
<p class="wp-block-paragraph">Check the <a href="https://docs.prerender.io/docs/status-codes" type="link" id="https://docs.prerender.io/docs/status-codes" target="_blank" rel="noreferrer noopener">status code the crawler receives</a> in your Prerender.io dashboard. A 4xx means an access or configuration issue (often a sign that Google Ads AdsBot cannot access the page at all), a 5xx (especially 504) means the render failed, and a clean 200 that’s still disapproved points to content, structured data, or a stale cache rather than rendering.</p>
<h3 class="wp-block-heading">4. Why did my product get disapproved right after I fixed the price?</h3>
<p class="wp-block-paragraph">If you use prerendering, your cached snapshot may still hold the old price, so the crawler reads the stale cache rather than your live site. <a href="https://docs.prerender.io/docs/mismatched-prices" type="link" id="https://docs.prerender.io/docs/mismatched-prices" target="_blank" rel="noreferrer noopener">Recache the product page</a>, ideally by tying a <mark style="background-color:rgba(0, 0, 0, 0);color:#188038" class="has-inline-color"><code>/recache</code></mark> API call to the same event that updates the price, so the cached version and your live data stay in sync.</p>
<h3 class="wp-block-heading">5. Does AdsBot render JavaScript?</h3>
<p class="wp-block-paragraph">AdsBot cannot render JavaScript the way a real user’s browser can, and it prioritizes what’s immediately available at fetch time. This is why a <a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/" type="link" id="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">Google Ads error for a single-page application is so common</a>: if your landing pages depend on client-side rendering to show their main content, that content is often invisible to the crawler.</p>
]]></content:encoded>
</item>
<item>
<title>How Social Media and Open Graph Tags Impact LLM Training Data</title>
<link>https://prerender.io/blog/how-open-graph-tags-impact-llm-training-data/</link>
<dc:creator><![CDATA[Prerender Team]]></dc:creator>
<pubDate>Sun, 30 Nov 2025 23:02:28 +0000</pubDate>
<category><![CDATA[AI SEO]]></category>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[open graph]]></category>
<category><![CDATA[social sharing]]></category>
<guid isPermaLink="false">https://prerender.io/?p=6588</guid>
<description><![CDATA[Explore how Open Graph tags and rich social snippets provide metadata signals for AI. See how optimizing social previews and open graph rendering helps your site stand out in AI search and training datasets.]]></description>
<content:encoded><![CDATA[<p data-block-id="6jo23">Social media isn’t just shaping how people discover your content; it’s shaping how AI understands it. As posts, previews, and metadata flow into large language model (LLM) training datasets, the way your content appears on social platforms becomes part of the foundation that informs how AI systems interpret the web.</p>
<p data-block-id="574eq">In this post, we’ll explore how social media data and <a href="https://prerender.io/blog/benefits-of-using-open-graph/" target="_blank" rel="noopener noreferrer">Open Graph (OG) tags</a> contribute to LLM training, why it matters for AI visibility, and how to optimize your metadata so crawlers and models see your content clearly.</p>
<h2 id="3c5aa" data-block-id="3c5aa">The Role of Social Media in LLM Training</h2>
<p data-block-id="3ukg2">AI models like OpenAI’s GPT, Anthropic’s Claude, and Google’s Gemini learn from vast datasets of public web content, including news, blogs, forums, and social media posts. Social platforms are especially valuable because they reflect how humans communicate in real contexts.</p>
<p data-block-id="3jafk">For instance:</p>
<ul>
<li><strong>Replies and comments</strong> reveal how people respond to ideas.</li>
<li><strong> Likes, shares, and retweets </strong>signal engagement and perceived relevance.</li>
<li><strong> Hashtags and trending topics </strong>show how information spreads and evolves across communities.</li>
</ul>
<p data-block-id="e3590">Meta’s LLaMA 3 offers a clear example of this in action. The <a href="https://medium.com/@mendicott/meta-trains-llama-models-using-public-facebook-and-instagram-data-e173372e03de" target="_blank" rel="noopener noreferrer">company confirmed</a> that the model was trained on publicly shared Facebook and Instagram posts. And according to Mark Zuckerberg, Meta’s corpus of public social data exceeds Common Crawl in size, meaning billions of posts and their interactions helped teach the model.</p>
<p data-block-id="f9lka">With social media, of course, ethical AI training respects privacy and terms of service, so only publicly accessible content can be included. Even with that limitation, it remains one of the richest sources of human expression available to LLMs.</p>
<p data-block-id="7mpic">How your content is represented online, especially through Open Graph tags and other metadata signals for AI, also helps LLMs interpret context more accurately.</p>
<p data-block-id="dc09c"><strong>Related:</strong> <u><a href="https://prerender.io/blog/seo-and-social-media/#elementor-toc__heading-anchor-1" target="_blank" rel="noopener noreferrer">Discover the role of social media in SEO</a>.</u></p>
<h2 id="aojb8" data-block-id="aojb8">Open Graph Tags and Their Relevance to AI Systems</h2>
<p data-block-id="1j648">Facebook originally created Open Graph meta tags to standardize how shared links display across social platforms. Today, they‘re a metadata layer used by LinkedIn, X (formerly Twitter), and other social platforms to generate rich previews that represent your page’s details.</p>
<figure class="image strchf-type-image undefined strchf-size-undefined strchf-align-center"><picture><source srcset="https://images.storychief.com/account_57345/qdifzaaaabkleqvqdanfsovjrfesbaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(max-width: 768px)" /><source srcset="https://images.storychief.com/account_57345/qdifzaaaabkleqvqdanfsovjrfesbaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(min-width: 769px)" /><img decoding="async" src="https://images.storychief.com/account_57345/qdifzaaaabkleqvqdanfsovjrfesbaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg" alt="Social metadata used to generate rich previews" /></picture></figure>
<p data-block-id="4jnn7">When someone shares your page link, these meta tags tell the social platform what to display. But beyond improving social experience, OG tags also serve as structured data for AI systems, offering machine-readable information that helps them interpret the <u><a href="https://www.ibm.com/topics/natural-language-processing" target="_blank" rel="noopener noreferrer">semantic meaning</a></u> of your content.</p>
<p data-block-id="8ivl7">This matters because, when large-scale crawlers like <u><a href="https://commoncrawl.org/" target="_blank" rel="noopener noreferrer">Common Crawl</a></u> index the internet, they extract visible text and also capture the full HTML of each page, including metadata in the <head> section. Each tag then becomes a labeled clue that helps identify the page’s topic, context, and intended summary.</p>
<h3 id="u074" data-block-id="u074"><strong>Example: Basic OG Tags</strong></h3>
<p data-block-id="74pih">Here’s what OG tags look like inside your page’s <head> section:</p>
<p data-block-id="53p36"><em><meta property=”og:title” content=”Your Page Title”></em></p>
<p data-block-id="36c7s"><em><meta property=”og:description” content=”A short summary of your page content.”></em></p>
<p data-block-id="5h8eg"><em><meta property=”og:image” content=”https://example.com/image.jpg”></em></p>
<p data-block-id="5gfeg"><em><meta property=”og:url” content=” https://example.com/your-page”></em></p>
<p data-block-id="c3ue0">For example, “og:title” serves as a clean label for what the page is about, while “og:description” offers a concise explanation of its focus. Repeated across millions of pages, these tags contribute to a consistent layer of meaning that LLMs can learn from.</p>
<p data-block-id="158f8">While there’s no public evidence that OG tags are <em>weighted</em> in LLM training, their consistent presence across billions of pages makes them statistically influential. Even if they’re treated as standard HTML elements, their structure reinforces meaning, much like headings, anchor text, or schema markup do.</p>
<p data-block-id="4to5b">In other words, consistent and well-configured metadata improves your link preview and also helps to ensure that your pages are interpreted accurately by the AI systems now shaping online search.</p>
<p data-block-id="9gqm"><strong>Resource:</strong> <u><a href="https://prerender.io/blog/how-to-fix-link-previews/" target="_blank" rel="noopener noreferrer">See how to fix your social sharing link previews</a>.</u></p>
<h2 id="8h7q5" data-block-id="8h7q5">How OG Tags Shape AI Understanding: Interpretation, Categorization, and Recall</h2>
<p data-block-id="4ug6l">Every OG tag adds a layer of meaning that helps AI systems interpret and recall your content accurately. When crawlers capture metadata alongside visible text, these tags provide clean, labeled signals that clarify what your page is about and how it should be represented in training data.</p>
<p data-block-id="114dh">Here’s how each core tag contributes:</p>
<figure class="image strchf-type-image undefined strchf-size-undefined strchf-align-center"><picture><source srcset="https://images.storychief.com/account_57345/okxanwaaaazjrefuawc58rynd81xlqaaaabjru5erkjggg_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(max-width: 768px)" /><source srcset="https://images.storychief.com/account_57345/okxanwaaaazjrefuawc58rynd81xlqaaaabjru5erkjggg_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(min-width: 769px)" /><img decoding="async" src="https://images.storychief.com/account_57345/okxanwaaaazjrefuawc58rynd81xlqaaaabjru5erkjggg_346cd7f3dceebd2470c35027f8298dd5_800.jpg" alt="How Open Graph Tags Shape AI Understanding" /></picture></figure>
<h3 id="6n2eg" data-block-id="6n2eg">Topic Signal and Consistency: “og:title”</h3>
<p data-block-id="tb5s">Your OG title defines the subject of your content. When it’s clear and consistent across your pages, it strengthens your brand’s topical identity and helps AI models align your content with the right themes over time.</p>
<p data-block-id="b8htn">Vague or inconsistent titles, on the other hand, make it harder for models to categorize your pages reliably and may even blur associations with unrelated topics.</p>
<h3 id="e8o6s" data-block-id="e8o6s">Contextual Framing: “og:description”</h3>
<p data-block-id="2uv7u">This tag provides interpretive context. It conveys tone, intent, and framing that the body text alone may not communicate.</p>
<p data-block-id="3a836">Concise, descriptive summaries help both users and AI systems understand your content’s purpose at a glance, improving how it’s classified and recalled later.</p>
<h3 id="fmfsk" data-block-id="fmfsk">Visual-Semantic Association: “og:image”</h3>
<p data-block-id="8f52c">Multimodal AI models, such as GPT-4, Claude 3, and Gemini, train on image–text pairs. When your visuals appear consistently alongside your written content, they reinforce those associations, helping models recognize your brand or subject matter more accurately in multimodal datasets.</p>
<h3 id="dqto0" data-block-id="dqto0">Canonical Authority: “og:url”</h3>
<p data-block-id="ag13l">This tag ensures all shared versions of a page point back to one canonical URL. It prevents duplication, preserves link equity, and strengthens data consistency across crawlers.</p>
<p data-block-id="3k7sg">While <code>og:url</code> differs from <code><link rel="canonical"></code> (used for SEO), both should match to maintain coherence for both search engines and AI training systems.</p>
<h2 id="brm1h" data-block-id="brm1h">Ensuring Your Metadata is Accessible to LLM Crawlers</h2>
<p data-block-id="dk4rh">Many modern websites, especially <u><a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/" target="_blank" rel="noopener noreferrer">Single Page Applications (SPAs)</a></u> built with <u><a href="https://prerender.io/framework/react/" target="_blank" rel="noopener noreferrer">React</a></u>, <u><a href="https://prerender.io/framework/vue-js/" target="_blank" rel="noopener noreferrer">Vue</a></u>, or <u><a href="https://prerender.io/blog/angularjs-pros-cons-and-optimization/" target="_blank" rel="noopener noreferrer">Angular</a></u>, render content dynamically.</p>
<p data-block-id="22b2u">Unfortunately, most <u><a href="https://prerender.io/blog/understanding-web-crawlers-traditional-ai/" target="_blank" rel="noopener noreferrer">social bots and AI crawlers</a></u> can’t execute JavaScript, which makes it impossible for them to access your Open Graph tags. That means your intended web content assets might not load before a crawler takes its snapshot, leading to broken previews and missing metadata signals.</p>
<p data-block-id="d0n3q">The typical fix is <a href="https://prerender.io/blog/what-is-srr-and-why-do-you-need-to-know/" target="_blank" rel="noopener noreferrer">server-side rendering (SSR),</a> but it’s complex and costly at scale. That’s why many teams rely on <strong>Prerender.io</strong>. This open graph rendering solution delivers fully rendered HTML versions of your pages, ensuring all bots and crawlers can access your OG metadata.</p>
<p data-block-id="e2aoa"><u><a href="http://prerender.io/" target="_blank" rel="noopener noreferrer">Prerender.io</a></u> is a tool built to render your web JavaScript files into their HTML versions in advance, giving social media bots and crawlers unrestricted access to your OG tags and social metadata.</p>
<p data-block-id="cvcfb">Here’s how it works:</p>
<ol type="1">
<li><strong>Prerender.io detects crawlers </strong>by their user-agent string.</li>
<li><strong>It renders your page in a headless browser</strong>, captures the full HTML output (including OG tags), and caches the result.</li>
<li>Crawlers then receive a <strong>clean, prerendered HTML snapshot</strong>.</li>
</ol>
<p data-block-id="f5dhk">In addition, Prerender.io’s dynamic caching system automatically updates snapshots whenever your content changes, keeping your rich social snippets accurate while saving <u><a href="https://prerender.io/blog/crawl-budget-management-for-large-websites/" target="_blank" rel="noopener noreferrer">crawl budget</a></u>.</p>
<p data-block-id="eg0cs">Curious to learn more about Prerender.io and the complete <u><a href="https://prerender.io/blog/a-guide-to-prerender-process-and-benefits/" target="_blank" rel="noopener noreferrer">AI SEO benefits</a></u> it offers? Watch this video to learn more.</p>
<figure class="video strchf-type-video regular strchf-size-regular strchf-align-center">
<div class="embed-container">
<div style="max-width: 100%; position: relative; padding-top: 56.5%;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;" title="How Does Prerender.io Work? A Quick Explainer" src="https://www.youtube-nocookie.com/embed/OxNt36HhCP4?feature=oembed" width="200" height="113" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</figure>
<h2 id="41g98" data-block-id="41g98">Best Practices for Optimizing Your Social Markup for AI Discoverability</h2>
<p data-block-id="1qd1p">To make your content more accessible to both social platforms and AI crawlers, follow a few practical steps when setting up and maintaining your Open Graph metadata. </p>
<figure class="image strchf-type-image undefined strchf-size-undefined strchf-align-center"><picture><source srcset="https://images.storychief.com/account_57345/ngaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(max-width: 768px)" /><source srcset="https://images.storychief.com/account_57345/ngaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg 1x" media="(min-width: 769px)" /><img decoding="async" src="https://images.storychief.com/account_57345/ngaaaaaelftksuqmcc_346cd7f3dceebd2470c35027f8298dd5_800.jpg" alt="Optimizing social previews for LLM visibility" /></picture></figure>
<p data-block-id="7j9v9">Here’s how to optimize social previews for LLM visibility:</p>
<h3 id="9tubo" data-block-id="9tubo">1. Include Core OG Tags</h3>
<p data-block-id="apdmi">Use the essential OG tags: <code>og:title</code>, <code>og:description</code>, <code>og:image</code>, and <code>og:url</code>, on every key page. Keep titles concise (40–60 characters) and descriptions specific (100–160 characters) to define your page’s core identity clearly.</p>
<h3 id="9miuv" data-block-id="9miuv">2. Use High-Resolution Images</h3>
<p data-block-id="9rc0j">Select a clear, relevant image at least 1200×630 px for <code>og:image</code>. Strong visuals not only capture attention on social feeds but also help multimodal AI systems link your content with consistent visual context.</p>
<h3 id="7kdfc" data-block-id="7kdfc">3. Add Descriptive Alt Text</h3>
<p data-block-id="3ugab">Even though OG tags don’t contain alt attributes, surrounding image text and filenames inform AI models about context. So, whenever possible, make sure your image(s) have meaningful <u><a href="https://prerender.io/blog/alt-text-for-images-best-practices/" target="_blank" rel="noopener noreferrer">alt text</a></u>.</p>
<h3 id="ao9hn" data-block-id="ao9hn">4. Keep Metadata Consistent and Up to Date</h3>
<p data-block-id="974lo">Align your OG metadata with your page’s <code><title></code> and visible content. If you update a headline or featured image, refresh your OG tags as well. Consistency helps crawlers and AI systems interpret your content correctly.</p>
<h3 id="9et75" data-block-id="9et75">5. Ensure Crawler Access and Rendering</h3>
<p data-block-id="f5jf9">Verify that your robots.txt file or server headers don’t block essential user agents such as Twitterbot, LinkedInBot, FacebookExternalHit, or GPTBot. If your site relies on JavaScript, use server-side rendering or a prerendering solution (like Prerender.io) to ensure crawlers can read your full HTML snapshots and metadata.</p>
<h3 id="fve7j" data-block-id="fve7j">6. Add Platform-Specific Tags</h3>
<p data-block-id="cs2t7">While OG tags are widely supported, platforms like X use their own metadata markup (twitter:card, twitter:title, etc.). If these tags are missing or incorrect, it can result in issues such as your Twitter link preview not showing. Including the correct <a href="https://prerender.io/blog/how-to-use-twitter-cards-for-content-amplification/" target="_blank" rel="noopener noreferrer">platform-specific tags</a> ensures consistent link rendering across social platforms and helps AI crawlers accurately interpret structured context from each platform.</p>
<h3 id="ekk8q" data-block-id="ekk8q">7. Implement Structured Data</h3>
<p data-block-id="blj2g">Complement OG tags with JSON-LD schemas (e.g., <code>Article</code>, <code>Product</code>, <code>Organization</code>). Structured data helps define your page’s entities and attributes, making it easier for both search engines and AI systems to understand your content.</p>
<p data-block-id="elkhf"><strong>Resource:</strong> <u><a href="https://prerender.io/blog/5-types-of-schema-markup-dynamic-websites-should-implement-including-a-tutorial/" target="_blank" rel="noopener noreferrer">Learn more about different types of schema markups and how to apply them</a></u>.</p>
<h3 id="cigtb" data-block-id="cigtb">8. Test Your Social Previews</h3>
<p data-block-id="pd6v">Use tools like <u><a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener noreferrer">Facebook Sharing Debugger</a></u>, <u><a href="https://www.linkedin.com/post-inspector/" target="_blank" rel="noopener noreferrer">LinkedIn Post Inspector</a></u>, or <u><a href="https://threadcreator.com/tools/twitter-card-validator" target="_blank" rel="noopener noreferrer">Twitter Card Validator</a></u> to verify live previews and detect any rendering issues early.</p>
<h2 id="abhrk" data-block-id="abhrk">Optimizing Open Graph Tags for AI Search and Rich Social Snippets with Prerender.io</h2>
<p data-block-id="7407j">Your Open Graph meta tags do more than create attractive link previews; they also act as structured data for AI. Every tag, image, and description adds metadata signals that help LLMs interpret your content’s meaning, category, and visual context.</p>
<p data-block-id="epkg1">When properly configured, these tags serve both audiences at once:</p>
<ul>
<li><strong>For humans</strong>, they create rich social snippets that improve engagement and click-through rates.</li>
<li><strong>For AI systems</strong>, they clarify how your content should be indexed, recalled, and represented within training datasets.</li>
</ul>
<p data-block-id="6n4ga">The takeaway: optimizing your social metadata is no longer just about presentation—it’s about discoverability. By keeping your tags consistent, crawlable, and accurately rendered, you ensure that your website speaks the same language as both social platforms and AI systems.</p>
<p data-block-id="ed5r9">Prerender.io simplifies this process with automated open graph rendering, ensuring your OG tags and structured data are visible to every crawler, including AI bots.</p>
<p data-block-id="2j1rj">Ready to make sure your metadata is visible everywhere it matters? <a href="https://prerender.io/pricing/" target="_blank" rel="noopener noreferrer"><strong>Get</strong> <strong>started with Prerender.io</strong></a><strong>.</strong></p>
<h2 id="am51b" data-block-id="am51b">FAQs About Open Graph Tags and AI Visibility</h2>
<h3 id="3mhef" data-block-id="3mhef"><strong>1. What Are Open Graph Tags and Why Do They Matter for AI Discoverability?</strong></h3>
<p data-block-id="75g1f">Open Graph tags define how your content appears when shared on social media. They also serve as machine-readable labels that help <a href="https://prerender.io/blog/understanding-web-crawlers-traditional-ai/" target="_blank" rel="noopener noreferrer">AI crawlers</a> interpret your page’s topic, intent, and relationships when collecting LLM training data.</p>
<h3 id="207j" data-block-id="207j"><strong>2. How Do Open Graph Meta Tags Improve Rich Social Snippets?</strong></h3>
<p data-block-id="n9b6">OG tags tell platforms exactly which title, description, and image to display, creating rich social snippets that attract clicks. This consistency also reinforces accurate metadata signals for AI models learning from public web content.</p>
<h3 id="8h9l1" data-block-id="8h9l1"><strong>3. Why Isn’t My Twitter Link Preview Showing Correctly?</strong></h3>
<p data-block-id="38kfs">If your Twitter link preview isn’t showing, check that you’ve added the right <code>twitter:card</code> and <code>twitter:title</code> tags alongside your OG tags. Use the <a href="https://devcommunity.x.com/t/twitter-card-validation-tool/149666" target="_blank" rel="noopener noreferrer">Twitter Card Validator </a>to test and debug your social metadata.</p>
<h3 id="5ma6p" data-block-id="5ma6p"><strong>4. How Can Open Graph Rendering Affect AI Training Signals?</strong></h3>
<p data-block-id="f1sou">Incomplete or missing OG tags can cause AI crawlers to capture fragmented data, weakening training signals. Using a <a href="https://prerender.io/ai-search/" target="_blank" rel="noopener noreferrer">prerendering solution</a> ensures your metadata loads as clean HTML before crawlers or social bots take their snapshots.</p>
<h3 id="4p9q1" data-block-id="4p9q1"><strong>5. How Do I Optimize My Website for AI Search?</strong></h3>
<p data-block-id="cepof">Combine strong Open Graph tags with structured data for AI (e.g., JSON-LD schemas). Ensure that all metadata is consistent, accessible to crawlers, and kept up to date. This approach improves both search engine indexing and <a href="https://prerender.io/blog/ai-optimization-technical-seo-guide/" target="_blank" rel="noopener noreferrer">AI discoverability</a>.</p>
<p><!-- strchf script --><script>if(window.strchfSettings === undefined) window.strchfSettings = {};window.strchfSettings.stats = {url: "https://prerender.storychief.io/en/how-open-graph-tags-impact-llm-training-data?id=129959776&type=2",title: "How Social Media and Open Graph Tags Impact LLM Training Data",siteId: "20338",id: ""};(function(d, s, id) {var js, sjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {window.strchf.update(); return;}js = d.createElement(s); js.id = id;js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js";js.async = true;sjs.parentNode.insertBefore(js, sjs);}(document, 'script', 'storychief-jssdk'))</script><!-- End strchf script --></p>
]]></content:encoded>
</item>
<item>
<title>How to Fix Your Social Media Link Previews</title>
<link>https://prerender.io/blog/how-to-fix-link-previews/</link>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Fri, 14 Mar 2025 16:47:10 +0000</pubDate>
<category><![CDATA[Ecommerce SEO]]></category>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[link previews]]></category>
<category><![CDATA[open graph]]></category>
<category><![CDATA[social sharing]]></category>
<guid isPermaLink="false">https://prerender.io/?p=5306</guid>
<description><![CDATA[Are your link previews displaying incorrectly? Here's a step-by-step guide to fix that.]]></description>
<content:encoded><![CDATA[
<p class="wp-block-paragraph">If someone shares a link to one of your company’s social media posts with a friend on WhatsApp and there is no link preview, they won’t even click on it. And if you share a LinkedIn post in your Slack channel but the link preview shows only a blank card, it undermines all your hard work. If the same thing happens on Instagram, it creates an impression of an unfinished brand.</p>
<p class="wp-block-paragraph">Across the sites Prerender.io processes, broken social media link previews are one of the most consistent problems we see, and one of the most misdiagnosed. Developers validate their Open Graph tags, the Facebook Debugger returns a clean result, and the social sharing link previews are still broken where your audience hangs out: Discord, Slack, Facebook, Instagram, all of it.</p>
<p class="wp-block-paragraph">This guide explains why social media link previews fail, what’s happening at the crawler level, and how to fix it, whether your site runs on a custom stack, a JavaScript framework, or an AI-built tool like Lovable.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="737" src="https://prerender.io/wp-content/uploads/Whatsapp-share-preview-2-1024x737.png" alt="how to fix your whatsapp link previews with prerender.io" class="wp-image-5307" srcset="https://prerender.io/wp-content/uploads/Whatsapp-share-preview-2-1024x737.png 1024w, https://prerender.io/wp-content/uploads/Whatsapp-share-preview-2-300x216.png 300w, https://prerender.io/wp-content/uploads/Whatsapp-share-preview-2-768x553.png 768w, https://prerender.io/wp-content/uploads/Whatsapp-share-preview-2.png 1324w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p class="wp-block-paragraph"></p>
<h2 class="wp-block-heading">Benefits of Optimizing Your Social Media Link Previews</h2>
<p class="wp-block-paragraph">The more engaging and visually appealing your links appear on LinkedIn, Twitter/X, or WhatsApp, the higher the likelihood of better business results. <strong>In fact, customers are </strong><a href="https://www.nosto.com/blog/how-does-social-media-influence-customer-behavior/" target="_blank" rel="noreferrer noopener nofollow"><strong>71% more likely</strong></a><strong> to make a purchase based on social media referrals</strong>. </p>
<p class="wp-block-paragraph">Proper social sharing is an important part of your brand’s personality. Here’s why.</p>
<ul class="wp-block-list">
<li>Your link preview, which consists of a title, image, and description, gives the <strong>first impression of your website</strong>. </li>
</ul>
<ul class="wp-block-list">
<li>Well-optimized and professional link previews with eye-catching visuals and accurate descriptions <strong>increase CTR and traffic</strong> to your site while also <strong>improving brand trust, credibility, and consistency. </strong></li>
</ul>
<ul class="wp-block-list">
<li>Higher user engagement and interaction boost your social media algorithm and can improve your SEO, further <strong>improving brand visibility. </strong></li>
</ul>
<h2 class="wp-block-heading">How to Tell If Your Social Media Link Previews Are Broken</h2>
<p class="wp-block-paragraph">Here are a few of the most common signs that’ll help you spot incomplete social share link previews:</p>
<ul class="wp-block-list">
<li><strong>Inaccurate or empty title</strong>: the headline doesn’t match your page title or is missing entirely.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Missing or inaccurate description: </strong>the preview text is blank, outdated, or irrelevant.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Incorrect, missing, or broken image: </strong>the featured image fails to load, appears distorted, or pulls the wrong file.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Incorrect domain name or URL: </strong>the preview shows an outdated or incorrect web address.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Plain link with no preview at all</strong>: when nothing but the raw link appears, it’s often due to <a href="https://prerender.io/blog/how-to-manage-dynamic-content-prerender/">JavaScript rendering issues</a>, missing Open Graph meta tags, or blocked social crawlers.</li>
</ul>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="538" src="https://prerender.io/wp-content/uploads/how-to-fix-your-social-sharing-link-previews-2-1024x538.png" alt="how to fix your link previews - before and after with prerender.io" class="wp-image-5309" srcset="https://prerender.io/wp-content/uploads/how-to-fix-your-social-sharing-link-previews-2-1024x538.png 1024w, https://prerender.io/wp-content/uploads/how-to-fix-your-social-sharing-link-previews-2-300x158.png 300w, https://prerender.io/wp-content/uploads/how-to-fix-your-social-sharing-link-previews-2-768x403.png 768w, https://prerender.io/wp-content/uploads/how-to-fix-your-social-sharing-link-previews-2.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p class="has-text-align-center wp-block-paragraph"><em>Link previews before and after Prerender.io</em></p>
<h2 class="wp-block-heading">Why Is My Link Preview Not Working on Instagram, WhatsApp, Facebook, or Twitter/X?</h2>
<p class="wp-block-paragraph">There could be a few reasons why your link previews don’t display correctly. But at the end of the day, many of them boil down to your technical SEO and JavaScript rendering problems.</p>
<h3 class="wp-block-heading">Social Media Crawlers Have Limitations</h3>
<p class="wp-block-paragraph">Most social media crawlers, including those from major social platforms like Twitter and Facebook, <strong>don’t actively execute JavaScript code</strong> when crawling web pages. Instead, they only read and execute static HTML source code of the pages. </p>
<p class="wp-block-paragraph">Most websites use JavaScript in some way, so unless you use a server-side rendering solution or a platform like <a href="https://prerender.io/" target="_blank" rel="noreferrer noopener">Prerender.io</a>, you’ll need some help converting your site from JavaScript to easy-to-read HTML.</p>
<p class="wp-block-paragraph">Watch this short video to see what happens when crawlers hit JavaScript-heavy sites.</p>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="How Poor JavaScript Rendering Impacts Your Organic Traffic" width="640" height="360" src="https://www.youtube.com/embed/ToGusQ8qqcE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>
<p class="wp-block-paragraph">Social media crawlers need to work harder to process your website’s content. This can cause delays or inconsistencies in responses when loading previews.</p>
<p class="wp-block-paragraph">Even if the crawlers attempt to crawl and render the JS content of your website partially, they have limitations. This can impact how your content is displayed when shared across social platforms, making the end result look incomplete. <strong>If your social link preview image or description is missing, JavaScript rendering is almost always the cause.</strong></p>
<p class="wp-block-paragraph">Poor JavaScript rendering can also cause other problems like low indexing, declining organic traffic, and invisibility in AI search. See how <a href="https://prerender.io/resources/case-studies/popken-fashion-group/">Europe’s largest plus-sized fashion retailer</a> found out they had JavaScript issues. </p>
<h3 class="wp-block-heading">Open Graph Implementation Issues</h3>
<p class="wp-block-paragraph">Another reason why your social media link preview might not display correctly is because of Open Graph tags.</p>
<p class="wp-block-paragraph"><a href="https://prerender.io/blog/benefits-of-using-open-graph/" target="_blank" rel="noreferrer noopener">Open Graph (OG) meta tags</a> are code snippets that determine how your website or links display when shared on social media platforms. These tags convert your website’s URL into rich objects that display page elements such as the featured image, title, description, and domain. </p>
<p class="wp-block-paragraph">Multiple social media platforms, like Facebook/Meta, Instagram, and LinkedIn, use the Open Graph (OG) meta tags for link previews. (Twitter/X, on the other hand, uses the Twitter Card meta tag.) <strong>If these tags are incorrect, missing, or improperly structured, the link previews may not display correctly on these channels or as expected.</strong></p>
<p class="wp-block-paragraph">Look out for common mistakes, such as incorrect URL formats, incorrect structure of the OG tags, and the presence of multiple sets of OG tags. </p>
<h3 class="wp-block-heading">Dynamic Content Challenges</h3>
<p class="wp-block-paragraph">Dynamic content also poses a greater challenge when it comes to ensuring correct link previews on social platforms, as the website’s content changes dynamically. </p>
<p class="wp-block-paragraph">Social media crawlers only read the page’s initial raw HTML code and don’t wait for it to load fully. This is particularly problematic if your website uses JavaScript to load the content and meta tags, and this information is not added to the initial HTML. </p>
<p class="wp-block-paragraph"><strong>Without open graph tags in the HTML, crawlers won’t know what to preview when sharing a link</strong>. At the same time, since bots don’t wait for JavaScript to load, this may lead to outdated or missing link preview information. </p>
<h3 class="wp-block-heading">Caching Issues </h3>
<p class="wp-block-paragraph">Social media platforms often cache the link preview information to optimize performance and save resources. <strong>Even after updating your website’s metadata, social platforms may still display the previous, incorrect preview of the page stored in the cache.</strong></p>
<p class="wp-block-paragraph">Read: <a href="https://prerender.io/blog/caching-what-it-is-how-it-works-and-how-prerender-caches/">Page Caching in JavaScript and How It Affects Web Performance</a></p>
<h3 class="wp-block-heading"><strong>What Goes Wrong During Implementation</strong></h3>
<p class="wp-block-paragraph">We’ve seen this happen across hundreds of site setups: OG tags that are correctly implemented, validated in every audit tool, and still produce broken previews on social platforms. Everything checks out on paper, from the markup to the site audit, but the previews remain broken because the tags are injected by JavaScript, and the social crawler never renders that JavaScript. </p>
<p class="wp-block-paragraph">Most developers use validation tools like Facebook’s Sharing Debugger as proof that things work. But these tools typically render the page more thoroughly than the crawlers that generate real-time previews. A validator might execute JavaScript, wait for the DOM to settle, and report that your tags are present. The actual crawler operates under completely different constraints. </p>
<p class="wp-block-paragraph">We’ve also seen the failure mode vary by framework. </p>
<ul class="wp-block-list">
<li><a href="https://prerender.io/blog/dynamic-rendering-for-react-websites/">React apps</a> that commonly inject metadata after hydration mean crawlers only receive a minimal shell document. </li>
<li><a href="https://prerender.io/blog/vue-js-pros-and-cons/">Vue applications</a> can produce timing-related inconsistencies depending on how meta management libraries are configured. </li>
<li><a href="https://prerender.io/blog/angularjs-pros-cons-and-optimization/">Angular setups</a> often introduce rendering delays tied to client-side bootstrapping. The core problem is the same across all three, but the shape of the failure differs in each.</li>
</ul>
<p class="wp-block-paragraph">We’re also seeing this increasingly with AI-built sites. Tools like <a href="https://prerender.io/blog/how-to-make-lovable-websites-seo-friendly/">Lovable</a> and Bolt generate React or Next.js applications by default, which means a site that was shipped in an afternoon through vibe coding has the same JavaScript-dependent structure as an enterprise SPA. The OG tags exist in the component. The crawler never sees them.</p>
<p class="wp-block-paragraph">The final layer we see is that not all crawlers are equally patient. Facebook’s Debugger is a heavyweight that allocates rendering resources and may wait longer for a response. That’s why previews can look perfect in the Debugger and break everywhere else. </p>
<p class="wp-block-paragraph">Scrapers for platforms like Slack, Discord, and Telegram run on aggressive timeouts, sometimes sub-second, because their priority is keeping the chat UI responsive. If your server doesn’t return fully formed HTML with OG tags within that window, the preview renders empty. Your previews end up broken, specifically on the platforms where your users are sharing links and having conversations.</p>
<h2 class="wp-block-heading">How Can I Fix My Social Media Link Previews? </h2>
<p class="wp-block-paragraph">If your WhatsApp or Instagram social sharing link preview isn’t showing, here’s how to diagnose and fix the problem fast.</p>
<h3 class="wp-block-heading">Use Proper Twitter Card and Open Graph Meta Tags</h3>
<p class="wp-block-paragraph">The primary solution to ensuring correct and optimized social media link previews is to properly use the Open Graph and <a href="https://prerender.io/blog/how-to-use-twitter-cards-for-content-amplification/" target="_blank" rel="noreferrer noopener">Twitter Card</a> meta tags. </p>
<p class="wp-block-paragraph">Incorrect or missing meta tags lead to inaccurate, broken, or missing link previews. Here are a few points to consider when using these meta tags:</p>
<ul class="wp-block-list">
<li><strong>Make sure these tags are in the <head> section of your webpage’s HTML code.</strong> This helps guarantee that social media crawlers can find these tags easily. </li>
</ul>
<ul class="wp-block-list">
<li><strong>Use absolute URLs instead of relative URLs for images and links.</strong> For insurance, use the URL format <em>https://websitename.com/image.jpg</em> instead of <em>/image.jpg</em>—the latter doesn’t work well for social media crawlers. </li>
</ul>
<ul class="wp-block-list">
<li><strong>Set and choose the right image size and format. </strong>This ensures it will appear properly in the link previews. At the same time, make sure to use high-quality images and accessible image URLs. </li>
</ul>
<h3 class="wp-block-heading">Prevent Caching Issues</h3>
<p class="wp-block-paragraph">Social media platforms store the link preview you share the first time in the cache. When you change the title, description, or image of the page, the old preview may still appear even after the update. </p>
<p class="wp-block-paragraph">In such cases, you can configure your website’s HTTP cache-control headers to enable the server to allow crawlers to fetch metadata after the changes are made. </p>
<p class="wp-block-paragraph">You can also use debugging tools to refresh the cache manually. Tools like <a href="https://threadcreator.com/tools/twitter-card-validator" target="_blank" rel="noreferrer noopener">Twitter Card Validator</a>, <a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noreferrer noopener">Facebook Sharing Debugger</a>, and <a href="https://www.linkedin.com/post-inspector/" target="_blank" rel="noreferrer noopener">LinkedIn Post Inspector</a> refresh the cache, enabling the crawler to use the updated metadata. </p>
<h3 class="wp-block-heading">Use Prerender.io’s to Easily Fix Your Social Media Link Previews</h3>
<p class="wp-block-paragraph">If both of the above solutions don’t work, another solution to fixing your social sharing link preview issues is to use <a href="http://prerender.io" target="_blank" rel="noreferrer noopener">Prerender.io</a>. </p>
<p class="wp-block-paragraph"><strong>Prerender.io is a near-instant fix for your JavaScript rendering issues.</strong> It improves your missing or broken link preview issues almost instantly by providing a fully rendered HTML version of the page to social media crawlers. This ensures that your webpage’s link previews appear instantly as expected.</p>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="How Does Prerender.io Work? A Quick Explainer" width="640" height="360" src="https://www.youtube.com/embed/OxNt36HhCP4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>
<h3 class="wp-block-heading">See How Social Crawlers Interact with Your Site with Prerender.io</h3>
<p class="wp-block-paragraph"><strong>Prerender.io’s Crawler Type view</strong> lets you filter and track visits from social platforms like LinkedIn, Facebook, Twitter/X, Discord, and Slack, giving you clear visibility into how crawlers interact with your pages. </p>
<p class="wp-block-paragraph">This helps you ensure previews are fetched correctly, spot issues before they affect link displays, and optimize your content so your brand always looks its best when shared.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="545" src="https://prerender.io/wp-content/uploads/Screen-Shot-2025-08-18-at-10.05.54-AM-1024x545.png" alt="See crawlers that visit your site with Prerender.io's Crawler Type view" class="wp-image-6107" srcset="https://prerender.io/wp-content/uploads/Screen-Shot-2025-08-18-at-10.05.54-AM-1024x545.png 1024w, https://prerender.io/wp-content/uploads/Screen-Shot-2025-08-18-at-10.05.54-AM-300x160.png 300w, https://prerender.io/wp-content/uploads/Screen-Shot-2025-08-18-at-10.05.54-AM-768x409.png 768w, https://prerender.io/wp-content/uploads/Screen-Shot-2025-08-18-at-10.05.54-AM.png 1252w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<h2 class="wp-block-heading">What Broken Social Previews Act Like in the Real World</h2>
<p class="wp-block-paragraph">The gap between a clean validation and a broken preview is predictable. Here’s a scenario we see all the time.</p>
<p class="wp-block-paragraph">A mid-sized ecommerce brand runs its product catalog on a React SPA deployed on Vercel, with a CDN layer in front. Stock updates are frequent, and product pages get shared constantly by affiliates and influencers. The development team has done the work: every product page has proper OG tags, the Facebook Sharing Debugger returns a clean fetch, and they’ve cleared the platform caches after their last round of updates.</p>
<p class="wp-block-paragraph">But two days later, the marketing team notices that links shared on LinkedIn and WhatsApp are still displaying blank previews, outdated product images, or missing descriptions entirely.</p>
<p class="wp-block-paragraph">At that point, the investigation usually goes in the wrong direction first. The developer re-checks the metadata. The OG tags are present, they validate correctly, and the CDN cache gets purged again. Someone suspects a platform-side caching issue; another developer tests the page locally and confirms the tags exist in the browser.</p>
<p class="wp-block-paragraph">From the frontend perspective, nothing appears broken, but the problem sits much earlier in the request lifecycle.</p>
<p class="wp-block-paragraph">The React SPA serves a bare HTML shell before JavaScript hydrates the page, and LinkedIn’s and WhatsApp’s crawlers read that shell and move on. The CDN makes the problem worse by caching that bare response, so even updated OG tags in the application code never reach the crawler.</p>
<p class="wp-block-paragraph">This is where a prerendering solution like <a href="http://prerender.io">Prerender.io</a> becomes necessary. By serving fully rendered HTML to social crawlers at request time, the metadata becomes immediately available in the first response instead of appearing later through client-side execution.</p>
<h2 class="wp-block-heading">How Long Does It Take to Fix Broken Link Previews on Social Media?</h2>
<p class="wp-block-paragraph">The time it takes to fix a broken or missing link preview depends on what’s causing it, which is usually incorrect metadata or cached preview data.</p>
<h3 class="wp-block-heading">If the Metadata Is Incorrect or Missing</h3>
<p class="wp-block-paragraph">Fixing Open Graph (OG) or Twitter Card tags can usually resolve preview issues within <strong>a few minutes</strong>, as long as you can edit and republish your metadata. Make sure your OG tags include a proper title, description, and image in the <code><head></code> section of your HTML.</p>
<h3 class="wp-block-heading">If the Preview Is Cached</h3>
<p class="wp-block-paragraph">When social platforms store outdated preview data, it typically takes <strong>5–30 minutes</strong> to refresh using the platform’s debugging tools. In some cases, it may take a few hours before the new preview appears everywhere.</p>
<h3 class="wp-block-heading">Platform-Specific Timing and Challenges</h3>
<ul class="wp-block-list">
<li><strong>LinkedIn</strong>: even after using Post Inspector to refresh and update cached previews, LinkedIn may take several hours to display the new information. Patience (and correct OG tags) is key here.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Facebook</strong>: Facebook often caches link previews indefinitely. If you change your metadata after a page has already been shared, the new preview won’t update automatically, so you’ll need to use the Sharing Debugger to force a refresh.</li>
</ul>
<ul class="wp-block-list">
<li><strong>WhatsApp</strong>: WhatsApp relies on Open Graph tags but only supports a limited set. It ignores some advanced properties like <code>og:video</code> and <code>og:audio</code>, so even perfectly implemented metadata might display inconsistently.</li>
</ul>
<ul class="wp-block-list">
<li><strong>Twitter/X</strong>: X uses <strong>Card Validator</strong> to fetch updated metadata, but cache refreshes can be slow. Expect a delay before your new title or image shows up in shared links.</li>
</ul>
<h3 class="wp-block-heading">When the Problem Runs Deeper</h3>
<p class="wp-block-paragraph">If your social sharing link preview still doesn’t update after clearing caches or fixing metadata, the problem likely isn’t caching; it’s JavaScript rendering. Social crawlers from platforms like LinkedIn, Facebook, Twitter/X, Discord, and Slack don’t execute JavaScript, meaning they can’t “see” your Open Graph tags or preview images if they’re loaded dynamically.</p>
<p class="wp-block-paragraph">That’s exactly what <a href="https://prerender.io/pricing/">Prerender.io</a> was built to solve.</p>
<h2 class="wp-block-heading">Prerender.io: An Easy Solution for Unoptimized Link Previews</h2>
<p class="wp-block-paragraph">Prerender.io detects requests from social media crawlers and serves them a <strong>fully rendered HTML version</strong> of your page, complete with accurate Open Graph and Twitter Card metadata. This ensures your links display the right <strong>title, image, and description</strong> instantly and consistently across every platform.</p>
<p class="wp-block-paragraph">Why marketers and developers use Prerender.io:</p>
<ul class="wp-block-list">
<li><strong>Accurate, platform-ready previews</strong> that display correctly on every social channel.</li>
<li><strong>Faster social crawler response</strong>, ensuring links render in seconds, not minutes.</li>
<li><strong>Cached updates that reflect instantly</strong>, so changes to your title, image, or description appear without manual debugging.</li>
<li><strong>Reliable JavaScript rendering</strong> for <a href="https://prerender.io/blog/understanding-web-crawlers-traditional-ai/">AI crawlers and social bots</a> alike.</li>
</ul>
<p class="wp-block-paragraph">For a single page, a broken preview is an easy fix. However, for a retailer with 500K+ product pages that affiliates, partners, and influencers constantly reshare, every broken preview compounds across every shared link, on every channel, indefinitely. At that scale, manual debugging and one-off cache clears stop working, and the problem becomes an infrastructure gap that a dedicated rendering layer like <strong>Prerender.io</strong> is built to handle.</p>
<p class="wp-block-paragraph">Start improving your social share previews today: explore our <a href="https://prerender.io/pricing/">pricing plans</a> to find the right fit for your team.</p>
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*1nx4ali*_gcl_au*ODIxODI0MzUyLjE3MzkzNzAxOTQ.*_ga*MjAxMjc3MTgxOC4xNzIzODAxMTYz*_ga_5C99FX76HR*MTc0MTk2ODg5OC40NTEuMC4xNzQxOTY4ODk4LjYwLjAuMA.." style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;background-color:#1f8511" target="_blank" rel="noreferrer noopener">Create Your Free Account</a></div>
</div>
<h2 class="wp-block-heading">FAQs About Broken Social Sharing Link Previews</h2>
<h3 class="wp-block-heading">Why Do Link Previews Look Fine on Some Social Platforms and Not Others? </h3>
<p class="wp-block-paragraph">Different social media platforms have different requirements and caching mechanisms. For example, while LinkedIn and Facebook use Open Graph meta tags, Twitter relies on Twitter Cards to display link previews. </p>
<p class="wp-block-paragraph">Because of missing or incorrect tags for specific platforms, link previews might look different. At the same time, due to aggressive caching, previews on LinkedIn might not look correct but appear fine on other social platforms. </p>
<h3 class="wp-block-heading">Why Are My Social Media Preview Links Not Showing Content Correctly?</h3>
<p class="wp-block-paragraph">Your link previews aren’t showing the correct content because many social platforms rely on bots to scrape your website for link previews. If your site uses JavaScript or dynamic content, these bots may miss it, resulting in blank or incorrect previews. Prerender.io solves this, ensuring all your content (images, titles, and descriptions) is visible to social media crawlers. This guarantees accurate and engaging link previews whenever you share your pages on social media.</p>
<h3 class="wp-block-heading">How Do I Fix My Page’s Preview on LinkedIn and Facebook?</h3>
<p class="wp-block-paragraph">You can clear the cache and add updated metadata. If the issue still persists, it could be related to JavaScript rendering problems. Try a solution like Prerender.io to help clear up the issue and ensure that your previews show up correctly. You can watch <a href="https://www.youtube.com/watch?v=Kc20MvUvMM4" target="_blank" rel="noreferrer noopener">this video to see how Prerender.io works</a>.</p>
<h3 class="wp-block-heading">Can My Website’s Security Settings Impact Social Link Previews? </h3>
<p class="wp-block-paragraph">Yes, security-focused browser extensions and some ad blockers may prevent social media crawlers and bots from accessing the correct metadata—leading to incomplete or missing link previews. </p>
<h3 class="wp-block-heading">Does Website Speed Impact Social Link Previews? </h3>
<p class="wp-block-paragraph">Yes. <a href="https://prerender.io/blog/google-pagespeed-insights/">Slow-loading pages</a> can cause crawlers to time out before fetching your metadata, leading to blank or partial previews. By caching pre-rendered HTML versions of your site, <a href="https://prerender.io/">Prerender.io</a> ensures that crawlers receive the correct data instantly, improving both load speed and preview accuracy.</p>
<h3 class="wp-block-heading">Can I Change My Link Preview Image?</h3>
<p class="wp-block-paragraph">Yes, but your updates won’t appear unless social platforms refresh their cache. After replacing the <code>og:image</code> tag in your HTML, clear each platform’s cached data using its debugger or inspector tool. If the new image still doesn’t show, your site may need a rendering solution like <strong>Prerender.io</strong> to ensure updated metadata is visible to <a href="https://prerender.io/blog/how-to-optimize-your-website-for-ai-crawlers/">crawlers</a>.</p>
<h3 class="wp-block-heading">How Can I Tell If My Site Has a JavaScript Rendering Issue? </h3>
<p class="wp-block-paragraph">Broken social link previews are a reliable early sign, especially when previews look correct in platform debuggers but fail in real shares. To confirm, do a view-source check on your URL: if the <code><head></code> contains empty or placeholder OG tags, or if <code>og:image</code> and <code>og:title</code> are absent entirely, your metadata is being injected by JavaScript after load. <a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLJg6CUjTdrFBm3mbYntc1WxVgwibxhn68GVUhmfFownlvGvqXCbvQXIQw4XXuIcUPWnqYDrRFeiJZy7AKiGcvU86gdiFHXvhh2B0CcaBW6NuaRBnhuRAPCpuQ8VorQk5ex3UDtZkGx8Y4e7oPjLdgvh0igrosSzYEbQ1BQ0x5BjqPPzoaMXHDEwhaB5rqhXRWCcnCmyR5NovE4FJEOFF0fQ&webInteractiveContentId=230694382796&portalId=25756777" target="_blank" rel="noreferrer noopener"></a></p>
<h3 class="wp-block-heading">Further Reading: </h3>
<ul class="wp-block-list">
<li><a href="https://prerender.io/blog/10-ways-to-get-your-website-indexed-faster/" target="_blank" rel="noreferrer noopener">10 Ways to Get Your Website Indexed Faster</a></li>
<li><a href="https://prerender.io/blog/how-to-get-indexed-on-ai-platforms/" target="_blank" rel="noreferrer noopener">How to Get Your Website Featured by ChatGPT and Other AI Tools</a></li>
<li><a href="https://prerender.io/blog/how-to-optimize-your-website-for-ai-crawlers/" target="_blank" rel="noreferrer noopener">How to Easily Optimize Your Website for AI</a></li>
<li><a href="https://prerender.io/blog/how-to-fix-broken-backlinks/">How to Find and Fix Broken Backlinks</a></li>
</ul>
<p class="wp-block-paragraph"><a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLKfan9hjbtaOE23T4SaJOhj5UDaAYKTxSB4BnnB83dSkv2uPG%2FBo7YhGIJj1JJsXMjopfCIJoVBhlcqsNJXpfhNfTGsg6Z0lK7nr08ob%2FMC%2BcfroU1kyMtFhplRGiGgw3BJiVV%2Bpoqu3ratL%2BwASrq96pyICzIjYXrOedrNXpKyUSsO0w7OGDxsk3FPi07yDNaG4PGRfQOtan299IxedP8g&webInteractiveContentId=238518924482&portalId=25756777" target="_blank" rel="noreferrer noopener"></a></p>
<p class="wp-block-paragraph"></p>
]]></content:encoded>
</item>
<item>
<title>How to Debug a Rendering Failure: Tips and Tools</title>
<link>https://prerender.io/blog/how-to-debug-rendering-failures/</link>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Wed, 09 Oct 2024 17:13:44 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[dynamic rendering]]></category>
<category><![CDATA[indexing]]></category>
<category><![CDATA[javascript]]></category>
<category><![CDATA[prerendering]]></category>
<category><![CDATA[technical seo]]></category>
<guid isPermaLink="false">https://prerender.io/?p=4333</guid>
<description><![CDATA[Struggling with rendering failures? This guide provides expert tips and tools to help you.]]></description>
<content:encoded><![CDATA[
<p class="wp-block-paragraph">Rendering failures can seriously impact your website’s SEO performance. These failures can hinder Google’s ability to crawl and index your pages, negatively affect mobile usability, and damage your Core Web Vitals’s health.</p>
<p class="wp-block-paragraph">When rendering fails, your website might display missing images, distorted layouts, or even blank pages. In this article, we’ll explore the causes of rendering failures and provide practical solutions (including a pre-rendering tool for JavaScript) to help you identify and fix these rendering issues.</p>
<h2 class="wp-block-heading">What are Rendering Failures?</h2>
<p class="wp-block-paragraph">A rendering failure occurs when a digital asset, like a webpage, video, or 3D model, doesn’t display or function correctly. This means that elements on your web page, such as text, images, videos, or entire sections, may not be visible or may appear distorted. In essence, a rendering failure is any issue that prevents your webpage from displaying as intended.</p>
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="450" src="https://prerender.io/wp-content/uploads/prerender_what_causes_rendering_failure.jpg" alt="" class="wp-image-10893" srcset="https://prerender.io/wp-content/uploads/prerender_what_causes_rendering_failure.jpg 800w, https://prerender.io/wp-content/uploads/prerender_what_causes_rendering_failure-300x169.jpg 300w, https://prerender.io/wp-content/uploads/prerender_what_causes_rendering_failure-768x432.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>
<p class="wp-block-paragraph">Rendering failure can occur due to various reasons:</p>
<ul class="wp-block-list">
<li><strong>JavaScript errors</strong></li>
</ul>
<p class="wp-block-paragraph">JavaScript plays a crucial role in rendering web pages. It’s often used to manipulate the Document Object Model (DOM), which controls the structure and content of a webpage. JavaScript is also responsible for loading external resources like images, fonts, and other scripts. Errors in JavaScript code can lead to elements appearing in the wrong place, missing entirely, or causing layout distortions.</p>
<ul class="wp-block-list">
<li><strong>Resource loading problems</strong></li>
</ul>
<p class="wp-block-paragraph">Occasionally, network hiccups or slow connections might prevent external resources from being downloaded promptly. While this might be outside your direct control, there are ways to optimize your website for slower connections.</p>
<ul class="wp-block-list">
<li><strong>Server-side rendering problems</strong></li>
</ul>
<p class="wp-block-paragraph">Server-side issues can also contribute to rendering failures. High traffic spikes or resource-intensive processes can overload your server, causing slow page generation or even complete failures. Additionally, if your server-side code relies on external data sources like databases or APIs, errors in fetching this data can prevent the necessary information from being included in the rendered HTML.</p>
<ul class="wp-block-list">
<li><strong>Browser compatibility problems</strong></li>
</ul>
<p class="wp-block-paragraph">Browser compatibility issues can sometimes prevent your website from rendering correctly. Different browsers may interpret code differently, leading to inconsistencies in how your website appears.</p>
<p class="wp-block-paragraph"><strong>Related</strong>: Find out <a href="https://prerender.io/blog/javascript-seo-for-bing-and-other-search-engines/">how Bing and other search engines handle JavaScript-based content</a>.</p>
<h2 class="wp-block-heading">3 Easy Steps to Debug a Rendering Failure</h2>
<p class="wp-block-paragraph">Now that we’ve identified the signs of rendering failure, the next step is to diagnose the root cause that makes a page fail to render. To do so, first, you must isolate the rendering issues, and then gather the relevant information to pinpoint the best way to resolve them.</p>
<h3 class="wp-block-heading">A.) Identify the Rendering Failure Symptoms</h3>
<p class="wp-block-paragraph">To effectively debug a rendering failure, start by precisely identifying the symptom. For instance:</p>
<ul class="wp-block-list">
<li>Instead of a vague description like “elements are missing,” specify exactly what’s missing: text, images, buttons, or entire sections.</li>
<li>Is the content absent, or is there a placeholder or error message?</li>
<li>Does the layout break, causing overlapping elements or distorted formatting?</li>
</ul>
<h3 class="wp-block-heading">B.) Reproduce the Rendering Errors</h3>
<p class="wp-block-paragraph">Once you’ve pinpointed the symptoms, try to reproduce the rendering errors consistently. List the specific actions, user interactions, browser settings, or system configurations that trigger the issue. If the problem is intermittent, try to identify the factors that influence its occurrence. For example, does it happen on all browsers, operating systems, or devices, or only in specific cases?</p>
<h3 class="wp-block-heading">C.) Analyze the Error Messages</h3>
<p class="wp-block-paragraph">Next, gather information on the problem by looking at error messages. These messages can provide valuable clues about JavaScript execution issues, resource loading problems, or syntax errors in your website. Look for specific errors related to JavaScript syntax, undefined variables, or failed attempts to load external JavaScript files.</p>
<p class="wp-block-paragraph">To do so, use your browser’s developer tools to investigate further. Inspect the styles panel to identify any conflicting styles applied to the problematic element. Check the network tab to see if any resources, like images or fonts, are failing to load.</p>
<p class="wp-block-paragraph">Additionally, the request/response headers in the network tab can also provide valuable information. Examine them for clues about <a href="https://prerender.io/blog/caching-what-it-is-how-it-works-and-how-prerender-caches/">caching issues</a> or server-side problems that might be impacting rendering.</p>
<p class="wp-block-paragraph">By thoroughly examining error messages and using developer tools to inspect elements and network activity, you’ll gain valuable insights into the cause of the rendering problem.</p>
<p class="wp-block-paragraph"><strong><em><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Pro Tip:</em></strong><em> The ‘Elements’ tab allows you to modify styles and attributes directly within the browser. This can be extremely helpful for testing purposes. You can try changing styles and see how the rendering changes in real time, helping you isolate the problematic CSS rule.</em></p>
<h2 class="wp-block-heading">5 Tools to Debug Rendering Failure</h2>
<h3 class="wp-block-heading">1. Prerender.io</h3>
<p class="wp-block-paragraph">To debug rendering issues in JavaScript-based websites, we recommend using a dedicated pre-rendering tool for JavaScript like <a href="https://prerender.io/">Prerender.io</a>. This tool simulates a real user’s experience by rendering your website with JavaScript enabled. This is why Prerender.io can be a valuable asset in identifying rendering issues that may arise from JS content execution, asynchronous content loading, or client-side rendering.</p>
<p class="wp-block-paragraph">Furthermore, Prerender.io’s debugging capabilities also allow you to investigate rendering issues in detail. You can view the pre-rendered snapshots, compare them with the live version of your website, and identify discrepancies or missing content. It also offers analytics and monitoring features that can help you track rendering issues in real-time.</p>
<p class="wp-block-paragraph">Learn more about <a href="https://prerender.io/benefits/">Prerender’s dynamic page rendering solution and its benefits</a>.</p>
<h3 class="wp-block-heading">2. Screaming Frog</h3>
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="424" src="https://prerender.io/wp-content/uploads/screamingfrog_dashboard.jpg" alt="" class="wp-image-10896" srcset="https://prerender.io/wp-content/uploads/screamingfrog_dashboard.jpg 800w, https://prerender.io/wp-content/uploads/screamingfrog_dashboard-300x159.jpg 300w, https://prerender.io/wp-content/uploads/screamingfrog_dashboard-768x407.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>
<p class="wp-block-paragraph"><a href="https://www.screamingfrog.co.uk/seo-spider/">Source </a></p>
<p class="wp-block-paragraph"><a href="https://www.screamingfrog.co.uk/seo-spider/">Screaming Frog</a>, while not a direct rendering debugger, can be a valuable tool in identifying underlying issues that might be causing rendering problems on your website.</p>
<p class="wp-block-paragraph">To troubleshoot JavaScript rendering issues using Screaming Frog, enable the ‘JavaScript’ rendering mode in the configuration settings (Config > Spider > Rendering). This allows Screaming Frog to crawl and analyze websites that heavily rely on JavaScript. After crawling, switch to the ‘JavaScript’ tab and apply the ‘Pages With JavaScript Errors’ filter to identify URLs with potential rendering problems.</p>
<p class="wp-block-paragraph">Screaming Frog also integrates with your browser’s developer tools. You can view console error messages directly in the ‘Chrome Console Log’ tab and see how the page is rendered with JavaScript in the ‘Rendered Page’ tab. These optional features can provide valuable insights for fixing specific rendering issues.</p>
<p class="wp-block-paragraph"><strong>Related: </strong>Not a fan of Screaming Frog? Discover <a href="https://prerender.io/blog/screaming-frog-alternative/">the 10 best alternatives for Screaming Frog</a>, including both paid and free options.</p>
<h3 class="wp-block-heading">3. Google Search Console</h3>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="424" src="https://prerender.io/wp-content/uploads/google_search_console_overview_performance-1024x424.jpg" alt="" class="wp-image-10894" srcset="https://prerender.io/wp-content/uploads/google_search_console_overview_performance-1024x424.jpg 1024w, https://prerender.io/wp-content/uploads/google_search_console_overview_performance-300x124.jpg 300w, https://prerender.io/wp-content/uploads/google_search_console_overview_performance-768x318.jpg 768w, https://prerender.io/wp-content/uploads/google_search_console_overview_performance-1536x636.jpg 1536w, https://prerender.io/wp-content/uploads/google_search_console_overview_performance.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p class="wp-block-paragraph">Like Screaming Frog, <a href="https://search.google.com/search-console/about">Google Search Console (GSC)</a> isn’t a direct debugging tool, but it’s a valuable resource for monitoring mobile usability and rendering issues. GSC scans your website for potential problems, including those related to how your site renders on mobile devices.</p>
<p class="wp-block-paragraph">The ‘<a href="https://developers.google.com/search/blog/2014/05/rendering-pages-with-fetch-as-google">Fetch as Google</a>’ tool in GSC allows you to see how Google’s smartphone user agent renders your website’s pages. By simulating a mobile device, you can identify rendering issues that may be specific to the mobile environment, such as:</p>
<ul class="wp-block-list">
<li>Missing or incorrectly displayed content</li>
<li>Layout or styling issues</li>
<li>JavaScript rendering problems</li>
</ul>
<p class="wp-block-paragraph">This feature helps you detect mobile rendering failures that might not be apparent on desktop devices.</p>
<p class="wp-block-paragraph"><strong>Related</strong>: Learn <a href="https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/">how to fix partially rendered or empty pages</a> here.</p>
<h3 class="wp-block-heading">4. PageSpeed Insights</h3>
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="864" height="486" src="https://prerender.io/wp-content/uploads/pagespeed_dashboard_diagnose.jpg" alt="" class="wp-image-10895" srcset="https://prerender.io/wp-content/uploads/pagespeed_dashboard_diagnose.jpg 864w, https://prerender.io/wp-content/uploads/pagespeed_dashboard_diagnose-300x169.jpg 300w, https://prerender.io/wp-content/uploads/pagespeed_dashboard_diagnose-768x432.jpg 768w" sizes="(max-width: 864px) 100vw, 864px" /></figure>
<p class="wp-block-paragraph"><a href="https://www.seo.com/de/tools/google-pagespeed-insights/">Source</a></p>
<p class="wp-block-paragraph"><a href="https://pagespeed.web.dev/">PageSpeed Insights</a> is a valuable tool for identifying and addressing rendering issues related to website performance and loading speed. It evaluates Core Web Vitals metrics that can directly impact rendering performance and provides specific recommendations for optimization, such as minimizing render-blocking resources, optimizing JavaScript execution, and leveraging browser caching.</p>
<p class="wp-block-paragraph">PageSpeed Insights provides separate analyses for desktop and mobile devices, allowing you to identify rendering issues specific to each environment. This is particularly important as mobile rendering can be more challenging due to varying network conditions and device capabilities.</p>
<h3 class="wp-block-heading">5. Browser Extensions </h3>
<p class="wp-block-paragraph">Browser extensions can help debug rendering issues. For example, the <a href="https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React Developer Tools</a> extension for Chrome and Firefox is invaluable for debugging React.js code. Other useful extensions include Firebug (for Firefox), DebugBrowser (for Chrome and Firefox), and Vue.js dev tools (for Chrome and Firefox).</p>
<h2 class="wp-block-heading">Debug and Prevent Rendering Failures with Prerender.io</h2>
<p class="wp-block-paragraph">Debugging rendering failures can be a challenge, but by following a systematic approach and utilizing the right tools, you can significantly improve your website’s performance and user experience. Here’s a roadmap to help you navigate the process:</p>
<ul class="wp-block-list">
<li>Start by pinpointing the exact symptoms and check whether you can recreate the error. </li>
<li>Leverage your browser’s developer tools to examine error messages.</li>
<li>A dynamic rendering solution like <a href="https://prerender.io/">Prerender.io</a> can be used to investigate the rendering issues in detail. For instance, is it caused by JS execution or client-side rendering?</li>
<li>Utilize tools like Screaming Frog, Google Search Console (GSC), and PageSpeed Insights to proactively monitor your website for potential rendering issues.</li>
</ul>
<p class="wp-block-paragraph">By following these steps, you’ll be well-equipped to diagnose and resolve rendering failures. Remember, a website free of rendering issues not only delivers a visually pleasing experience for users but can also improve your website’s overall ranking in search engine results.</p>
<p class="wp-block-paragraph">Check out Prerender’s pricing page to see all the JavaScript rendering features. And when you’re ready to improve your website rendering performance, <a href="https://prerender.io/pricing/">sign up for your free trial here.</a></p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*15h0upa*_gcl_au*ODIxODI0MzUyLjE3MzkzNzAxOTQ.*_ga*MjAxMjc3MTgxOC4xNzIzODAxMTYz*_ga_5C99FX76HR*MTczOTYwNDI4MC4zODguMS4xNzM5NjA3NTk0LjYwLjAuMA.." style="background-color:#1f8511">Create Free Account</a></div>
</div>
<h3 class="wp-block-heading">What Are The Most Common Causes Of Rendering Failures?</h3>
<p class="wp-block-paragraph">The most common causes include JavaScript errors, timeout issues, missing resources, incorrect configuration settings, and network connectivity problems. Many of these can be identified through proper debugging tools and monitoring.</p>
<h3 class="wp-block-heading">Will Rendering Failures Affect My Site’s SEO Performance?</h3>
<p class="wp-block-paragraph">Yes, definitely. Rendering failures can significantly impact your SEO as search engines may not be able to see your content properly. This can lead to poor indexing, lower rankings, and reduced organic traffic to your site. Use a solution like Prerender.io to fix this—no ongoing maintenance required. Learn about the <a href="https://prerender.io/benefits/">benefits of Prerender here</a>.</p>
<h3 class="wp-block-heading">Does Prerender.io Help Me Identify Error Codes? </h3>
<p class="wp-block-paragraph">Yes, Prerender.io helps you identify which pages fail to cache due to certain status codes. This can help you with your strategic planning, technical SEO maintenance, and website optimization. <a href="https://docs.prerender.io/docs/how-to-see-what-urls-fail-to-cache">Learn how to identify these pages in Prerender here</a>.</p>
]]></content:encoded>
</item>
<item>
<title>In-House SSR vs. Prerender.io: A Cost and Benefit Comparison</title>
<link>https://prerender.io/blog/in-house-ssr-vs-prerender-io-a-benefit-and-cost-comparison/</link>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Fri, 06 Sep 2024 08:05:02 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[dynamic rendering]]></category>
<category><![CDATA[javascript seo]]></category>
<category><![CDATA[prerendering]]></category>
<category><![CDATA[SSR]]></category>
<guid isPermaLink="false">https://prerender.io/?p=4183</guid>
<description><![CDATA[How Prerender stacks up against self-built SSR regarding costs, SEO benefits, and more.]]></description>
<content:encoded><![CDATA[
<p class="wp-block-paragraph">Server-Side Rendering (SSR) is often suggested as a solution for optimizing the SEO performance of JavaScript-heavy websites. To implement SSR, you have two primary options: <strong>build your own SSR</strong> or <strong>use a pre-built solution</strong> <strong>like Prerender.io</strong>. While developing an in-house SSR solution offers more control, it can be complex and time-consuming. Conversely, adopting Prerender.io can be a more practical and cost-effective approach.</p>
<p class="wp-block-paragraph">In this blog, we’ll explore the benefits, challenges, and costs of each option, helping you understand why Prerender.io is a better alternative to an in-house SSR solution.</p>
<h2 class="wp-block-heading">What is Server-Side Rendering (SSR)?</h2>
<p class="wp-block-paragraph"><a href="https://prerender.io/blog/what-is-srr-and-why-do-you-need-to-know/">Server-Side Rendering (SSR)</a> is a technique for optimizing JavaScript-based websites for search engines. Search engines struggle to index dynamic content generated by JavaScript, as it requires a complex <a href="https://prerender.io/blog/how-prerender-renders-javascript-websites/">two-step process</a>.</p>
<p class="wp-block-paragraph">SSR accelerates the indexing process by performing the initial rendering on the server; hence, the name <em>server-side</em> rendering. This allows search engines to access and understand your content more easily, leading to SEO benefits. These benefits include faster indexing speeds, accurate representation in search results, and quicker page response times.</p>
<h3 class="wp-block-heading">Common Use Cases For Server-Side Rendering (SSR)</h3>
<p class="wp-block-paragraph">While SSR offers significant SEO benefits, it’s not a universal solution. However, if your website falls into the following categories, implementing SSR can significantly improve your search result performance.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://prerender.io/wp-content/uploads/2-1-1024x576.png" alt="4 websites types that benefit from SSR" class="wp-image-4195" srcset="https://prerender.io/wp-content/uploads/2-1-1024x576.png 1024w, https://prerender.io/wp-content/uploads/2-1-300x169.png 300w, https://prerender.io/wp-content/uploads/2-1-768x432.png 768w, https://prerender.io/wp-content/uploads/2-1-1536x864.png 1536w, https://prerender.io/wp-content/uploads/2-1.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p class="wp-block-paragraph"><strong>1. Websites with frequent content changes</strong></p>
<p class="wp-block-paragraph">Ecommerce, travel, real estate, and job board websites frequently update their content. SSR ensures that search engines like Google can quickly reflect these changes in SERPs, providing users with the most current information.</p>
<p class="wp-block-paragraph"><strong>2. Single-Page Applications (SPAs)</strong></p>
<p class="wp-block-paragraph">SPAs often have slower initial load times due to the need to download and execute JavaScript before content is displayed. Implementing SSR can speed up the initial load time, increase your <a href="https://prerender.io/blog/how-to-pass-core-web-vitals/">Core Web Vitals score</a> (a Google ranking factor), and reduce bounce rates.</p>
<p class="wp-block-paragraph"><strong>3. Content-heavy websites</strong></p>
<p class="wp-block-paragraph">Websites that host a lot of written and visual content, such as news and media platforms, can benefit from SSR. It will let your images and videos load faster, improving Google’s <a href="https://prerender.io/blog/10-ways-to-get-your-website-indexed-faster/">content indexing speed</a>. </p>
<p class="wp-block-paragraph"><strong>4. Websites with heavy client-side interactions</strong></p>
<p class="wp-block-paragraph">Social media, community platforms, and financial trading websites require dynamic content updates. SSR can enhance user experience by ensuring content responds promptly to user interactions.</p>
<h2 class="wp-block-heading">Requirements and Challenges of Building an In-House SSR Solution</h2>
<p class="wp-block-paragraph">Building a custom SSR solution requires substantial technical expertise, time commitment, and resources. The specific needs will vary based on the website’s scale and complexity. However, the following outline provides a general overview of the resources needed.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://prerender.io/wp-content/uploads/Prerender_Blogs-15-1024x576.png" alt="requirements and challenges of building an in-house SSR solution" class="wp-image-4199" srcset="https://prerender.io/wp-content/uploads/Prerender_Blogs-15-1024x576.png 1024w, https://prerender.io/wp-content/uploads/Prerender_Blogs-15-300x169.png 300w, https://prerender.io/wp-content/uploads/Prerender_Blogs-15-768x432.png 768w, https://prerender.io/wp-content/uploads/Prerender_Blogs-15-1536x864.png 1536w, https://prerender.io/wp-content/uploads/Prerender_Blogs-15.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<h3 class="wp-block-heading">Engineering Challenges</h3>
<ul class="wp-block-list">
<li><strong>Code overhead</strong></li>
</ul>
<p class="wp-block-paragraph">Building in-house SSR often requires 20-30% more code than using a cloud service SSR like Prerender.io. This increased development effort can delay delivering new features or updates, especially for large codebases.</p>
<ul class="wp-block-list">
<li><strong>Full stack engineers</strong></li>
</ul>
<p class="wp-block-paragraph">Integrating SSR into the UI’s codebase demands full-stack engineers to manage additional responsibilities. These might include setting up the development environment, handling backend-related code splitting, and potentially even contributing to backend logic.</p>
<ul class="wp-block-list">
<li><strong>Increased security requirements</strong></li>
</ul>
<p class="wp-block-paragraph">Integrating backend-related code into frontend components can increase the risk of accidentally exposing sensitive information, such as database credentials or API keys, to the client side. To mitigate this risk, engineering teams must carefully review all dependencies and variables to ensure that sensitive data is not inadvertently included in the frontend build.</p>
<ul class="wp-block-list">
<li><strong>Specialized hardware for cache management</strong></li>
</ul>
<p class="wp-block-paragraph">Implementing in-house SSR in a Node.js environment would require enterprise-scale websites to develop a robust caching system to manage hundreds of millions of unique pages. This additional engineering effort could be a significant challenge that not all businesses can confidently overcome.</p>
<h3 class="wp-block-heading">Infrastructure Requirements</h3>
<p class="wp-block-paragraph">Here are some of the key components of the infrastructure needed for building an SSR:</p>
<ul class="wp-block-list">
<li>Operating systems, such as Linux.</li>
<li>JavaScript frameworks, such as Node.js.</li>
<li>Web servers, such as Nginx.</li>
<li>Databases, such as DynamoDB and MySQL.</li>
<li>Cloud deployment platforms, such as AWS and Google Cloud Platform.</li>
<li>Performance monitoring and logging, such as New Relic and ELK Stack.</li>
<li>Security measures (SSL/TLS and firewall and DDoS protection).</li>
</ul>
<h3 class="wp-block-heading">Costs</h3>
<p class="wp-block-paragraph">Building an in-house server-side rendering (SSR) solution requires a substantial initial and long-term investment. Upfront costs typically start at <a href="https://prerender.io/comparison/"><strong>$120,000</strong></a>. This includes hardware and software acquisition, as well as development effort and time. </p>
<p class="wp-block-paragraph">As for the completion time, complex SSR applications can take <strong>three to four months or more</strong> to build. The return on investment (ROI) for an in-house SSR is generally realized within <strong>six months to a year</strong>.</p>
<p class="wp-block-paragraph">Keep in mind that beyond the initial outlay, ongoing maintenance is essential to preserve optimal SSR performance. As your content pre-rendering needs grow, scaling the system will incur more expenses. </p>
<h2 class="wp-block-heading">Why Prerender.io is a Better Solution Than Self-Built SSR</h2>
<p class="wp-block-paragraph">In-house SSR solutions are too complex and expensive for many businesses. That’s why smart teams opt for pre-built SSR solutions like Prerender.io. </p>
<p class="wp-block-paragraph">Prerender.io offers a viable alternative to SSR. It delivers more <a href="https://prerender.io/benefits/">JavaScript SEO advantages</a> than self-built SSR without the associated challenges. Here’s how Prerender.io’s rendering solution trumps self-built SSR.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="724" height="1024" src="https://prerender.io/wp-content/uploads/image-99-2-724x1024.png" alt="" class="wp-image-5181" srcset="https://prerender.io/wp-content/uploads/image-99-2-724x1024.png 724w, https://prerender.io/wp-content/uploads/image-99-2-212x300.png 212w, https://prerender.io/wp-content/uploads/image-99-2-768x1086.png 768w, https://prerender.io/wp-content/uploads/image-99-2-1086x1536.png 1086w, https://prerender.io/wp-content/uploads/image-99-2.png 1131w" sizes="(max-width: 724px) 100vw, 724px" /></figure>
<h3 class="wp-block-heading">1. Real-Time Rendering vs. On-The-Fly and Pre-Rendering</h3>
<p class="wp-block-paragraph">SSR typically presents content to crawlers in real-time, meaning the website is rendered fresh each time a crawler visits. This can lead to periodic delays, resulting in incomplete pages being cached. Additionally, if JavaScript takes too long to load, the content will only show up partially. For example, users will only see the website’s header and footer but no content.</p>
<p class="wp-block-paragraph">On the other hand, Prerender.io offers two rendering options: <strong>real-time rendering and pre-rendering</strong>. The latter refers to creating a pre-built version of your website and storing it as caches. This way, Google crawlers don’t have to go through the complete crawling and indexing process for your pages. Instead, they can process the caches, significantly reducing the indexing and server response time.</p>
<p class="wp-block-paragraph">You can also use Prerender.io’s API to selectively <strong>cache specific pages </strong>(e.g., high-performing pages or product pages) more frequently than others. This flexibility allows you to optimize your caching strategy, ensuring that Google will reflect the most updated version of your bottom-line content.</p>
<p class="wp-block-paragraph">Learn more about <a href="https://prerender.io/blog/a-guide-to-prerender-process-and-benefits/">how Prerender.io works and its benefits</a>.</p>
<h3 class="wp-block-heading">2. Build Yourself vs. Plug-And-Play JavaScript Rendering Solution</h3>
<p class="wp-block-paragraph">In-house SSR is built to match your current tech stack and business structure. If your tech stack changes, you’ll likely need to reconfigure the tool to match what’s new.</p>
<p class="wp-block-paragraph">In contrast, Prerender.io is a <strong>plug-and-play technical SEO solution</strong> that seamlessly integrates with popular tech stacks, such as ReactJS, VueJS, and AngularJS. With a simple <a href="https://prerender.io/blog/how-to-install-prerender/">three-step installation</a>, you can start seeing improvements in your SEO performance within weeks.</p>
<p class="wp-block-paragraph">See the extensive <a href="https://docs.prerender.io/docs/what-integrations-are-already-out-there">JavaScript frameworks and libraries that Prerender.io supports</a>.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1080" height="1080" src="https://prerender.io/wp-content/uploads/image-98.png" alt="3 easy steps to install Prerender" class="wp-image-4186" srcset="https://prerender.io/wp-content/uploads/image-98.png 1080w, https://prerender.io/wp-content/uploads/image-98-300x300.png 300w, https://prerender.io/wp-content/uploads/image-98-1024x1024.png 1024w, https://prerender.io/wp-content/uploads/image-98-150x150.png 150w, https://prerender.io/wp-content/uploads/image-98-768x768.png 768w" sizes="(max-width: 1080px) 100vw, 1080px" /></figure>
<h3 class="wp-block-heading">3. $120,000 Upfront Cost vs. $49 Monthly Subscription Fee</h3>
<p class="wp-block-paragraph">Prerender.io has <strong>no upfront costs</strong>. You’ll be charged based on <strong>the rendered page (caching activities), rather than costs like the number of bots, domains, or per bot request like in-house SSR</strong>.</p>
<p class="wp-block-paragraph">Our pricing structure includes three affordable monthly plans, starting at $49/month with a 30-day free trial, designed to accommodate various visibility needs. Visit <a href="https://prerender.io/pricing/">Prerender.io’s pricing page</a> for detailed plan information.</p>
<h3 class="wp-block-heading">4. Self-Maintenance vs. Almost-Zero Maintenance</h3>
<p class="wp-block-paragraph">Self-built SSR often has inconsistent reliability and uptime, demanding you troubleshoot the system and fix the issues yourself.</p>
<p class="wp-block-paragraph">On the contrary, with Prerender.io, you don’t need to worry about monitoring and upholding your rendering performance. Our dedicated team ensures that our <a href="https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/"><strong>rendering </strong></a><span style="box-sizing: border-box; margin: 0px; padding: 0px;"><a href="https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/" target="_blank"><strong>solution </strong></a><strong>runs</strong></span><strong> 24/7</strong>, helping you improve the visibility of your JavaScript pages without hiccups. </p>
<h3 class="wp-block-heading">5. Pure Rendering Capabilities vs. Comprehensive Technical SEO Solution</h3>
<p class="wp-block-paragraph">In-house SSR is typically built to solve one purpose only: render JS content. It lacks technical SEO auditing functions that can identify pages with incomplete or missing content in the cached versions. On the other hand, Prerender.io has <strong>built-in error</strong> <strong>tracking and auditing capabilities</strong>, such as identifying which pages are failing to render properly and are slow-loading.</p>
<p class="wp-block-paragraph">Learn more about <a href="https://docs.prerender.io/docs/seo-scoring">Prerender.io’s SEO scoring</a> and <a href="https://docs.prerender.io/docs/404-checker">404 checker</a> here.</p>
<h3 class="wp-block-heading">6. Forecasted vs. Proven Results</h3>
<p class="wp-block-paragraph">Developing homegrown SSR involves inherent risks. There’s no guarantee that your in-house solution will deliver the expected SEO and indexing improvements.</p>
<p class="wp-block-paragraph">Conversely, Prerender.io has a proven track record of delivering exceptional performance improvements. Our customers have reported satisfied results, including <strong>90% reduced page</strong> <strong>load times</strong> (under 2 seconds), <strong>300x better crawling efficiency</strong>, and <strong>260% faster indexing</strong> <strong>speed</strong>—all of which led to an <a href="https://prerender.io/resources/case-studies/how-eldorados-traffic-grew-by-80-after-fixing-spa-rendering-issues/"><strong>80% boost in organic traffic</strong></a>.</p>
<p class="wp-block-paragraph">Industry leaders like Salesforce, Wix, and Walmart trust Prerender.io to help them optimize their JavaScript-based websites for search engines and AI crawlers. Read our <a href="https://prerender.io/resources/case-studies/">customer success stories</a> to discover how companies have leveraged Prerender.io to achieve their goals.</p>
<h2 class="wp-block-heading">In-House SSR vs. Prerender.io: Prerender.io Wins</h2>
<p class="wp-block-paragraph">Building your own SSR solution is costly and risky. Prerender.io is an excellent alternative to in-house SSR, providing a more efficient and affordable solution that enhances SEO and overall web performance.</p>
<p class="wp-block-paragraph">With flexible pricing plans and easy scalability, Prerender.io adapts to your website’s needs without hassle. Get your JavaScript content discovered on every search, social, and AI platform with Prerender.io.</p>
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="https://prerender.io/pricing/" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;background-color:#1f8511" target="_blank" rel="noreferrer noopener">Start for Free</a></div>
</div>
<h2 class="wp-block-heading">FAQs</h2>
<h3 class="wp-block-heading">What Is Server-Side Rendering (SSR)? How Does It Benefit SEO? </h3>
<p class="wp-block-paragraph">Server-Side Rendering (SSR) is a technique where a webpage’s content is rendered on the server before being sent to the user’s browser. This approach helps improve user experience and allows search engines to index content swiftly, leading to improved SEO performance.</p>
<h3 class="wp-block-heading">What Are the Costs Associated with Implementing In-House SSR?</h3>
<p class="wp-block-paragraph">Developing an in-house SSR solution can involve high upfront costs, including expenses for high-performance servers and engineering time. These costs can range from $10,000 to $120,000 or more, depending on various factors. See how On, one of the world’s largest athletic brands, <a href="https://prerender.io/resources/case-studies/on-prerender/">saves millions by using Prerender.io.</a></p>
<h3 class="wp-block-heading">How Does Prerender.io Compare to In-House SSR in Terms of Cost?</h3>
<p class="wp-block-paragraph">Prerender.io is a more cost-effective solution than in-house SSR. You can <a href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*muu1xa*_gcl_au*ODIxODI0MzUyLjE3MzkzNzAxOTQ.*_ga*MjAxMjc3MTgxOC4xNzIzODAxMTYz*_ga_5C99FX76HR*MTc0MzQyNDA1NS40ODYuMS4xNzQzNDI4NTMxLjYwLjAuMA..">try for free</a> or jump to a paid plan starting at $49/month. </p>
<h3 class="wp-block-heading">What Are the Maintenance Requirements for In-House SSR Compared to Prerender.io?</h3>
<p class="wp-block-paragraph">In-house SSR solutions require considerable ongoing maintenance. This includes server upkeep, team maintenance, and updates to rendering processes. On the other hand, Prerender.io handles these aspects, reducing the technical burden on your team significantly.</p>
<h3 class="wp-block-heading">How Quickly Can Prerender.io Be Implemented Compared to Building an In-House SSR Solution?</h3>
<p class="wp-block-paragraph">Prerender.io is a plug-and-play solution that can be implemented quickly without extensive code changes or additional server resources. Developing an in-house SSR solution requires significant development time and ongoing maintenance.</p>
]]></content:encoded>
</item>
<item>
<title>How To Manage Dynamic Content with Prerender.io</title>
<link>https://prerender.io/blog/how-to-manage-dynamic-content-prerender/</link>
<comments>https://prerender.io/blog/how-to-manage-dynamic-content-prerender/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Thu, 18 Apr 2024 12:24:50 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[dynamic rendering]]></category>
<category><![CDATA[html]]></category>
<category><![CDATA[prerendering]]></category>
<category><![CDATA[technical seo]]></category>
<guid isPermaLink="false">https://prerender.io/?p=3868</guid>
<description><![CDATA[In this article, we will give more context on dynamic content and how to manage it with Prerender.]]></description>
<content:encoded><![CDATA[ <div data-elementor-type="wp-post" data-elementor-id="3868" class="elementor elementor-3868" data-elementor-post-type="post">
<div class="elementor-element elementor-element-7949ccdc e-flex e-con-boxed e-con e-parent" data-id="7949ccdc" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-2abdfd51 elementor-widget elementor-widget-text-editor" data-id="2abdfd51" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Today, delivering personalized, relevant, and fast-loading experiences is key to engaging customers and driving better results, and dynamic content, which adapts based on user data and context, has become indispensable for businesses aiming to create tailored user journeys at scale.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>However, dynamic content often relies on JavaScript and client-side rendering, which can pose challenges for SEO. While JavaScript itself is not necessarily problematic for search engines, the client-side rendering it often enables can make it difficult for crawlers to access and index the dynamic content properly. As a result, your website may experience a lower search ranking and poor discoverability.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Don’t worry, there’s a simple solution. Prerender.io is a middleware that pre-renders JavaScript-powered websites into static HTML files, ensuring that search engine crawlers can access and index the content effectively. By doing so, businesses can overcome the challenges associated with dynamic content and drive more organic traffic to their websites.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>In this article, we will give more context on dynamic content and how to manage it with Prerender.io.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">What is Dynamic Content?</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Dynamic content refers to website or application content that changes in response to user interactions, preferences, location, or other contextual information. Unlike static content, which is the same for all users and accessible every time, dynamic content is generated or updated on the go, often in real time.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Dynamic content can take many forms, including:</p>
<p><!-- /wp:paragraph -->
<!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
<li><strong>Personalized recommendations:</strong> Websites like Amazon or Netflix use dynamic content to recommend products or movies based on a user’s past interactions and preferences.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>User-generated content:</strong> Social media platforms display dynamic content generated by users, such as posts, comments, and updates.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Real-time updates:</strong> News websites and financial platforms often display dynamic content that updates in real time, providing users with the latest information.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Interactive elements:</strong> Dynamic content can include interactive elements like forms, quizzes, or surveys that adapt based on user input.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Location-based content:</strong> Apps and websites use dynamic content to provide location-specific information, such as local weather forecasts, nearby restaurants, or events.</li>
</ul>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:paragraph --></p>
<p>Several technologies, including JavaScript, are responsible for dynamic content—they make great things happen right before your eyes! When you load a webpage, JavaScript alters content based on user interactions or other triggers, allowing the website to update text, replace images, or even load new content—all without needing to reload the entire page.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>So, next time you see a webpage that feels alive and interactive, JavaScript (alongside other modern frameworks) is likely behind the scenes, pulling the strings to make everything happen dynamically.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">The Indexing Challenges Caused by JavaScript and Its Dynamic Content</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>While dynamic content is amazing, it presents a unique challenge to search engines and SEO. Search engines rely on crawlers to navigate and index websites, but these bots struggle to handle JavaScript-heavy pages that have dynamic content. </p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Compared to static HTML sites, <a href="https://prerender.io/blog/mobile-first-indexing-for-javascript/">search engines take 9x longer to crawl and index sites with dynamic content</a>. This causes JavaScript-based web pages to demand more resources from <a href="https://prerender.io/benefits/faster-indexation/">Google for crawling, indexing, and rendering</a>, consuming a significant portion of their crawl budget.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Since search engines must dedicate more resources to rendering your JavaScript pages, many elements of your page won’t get indexed. This leads to issues such as missing content, limited crawl budgets, and half-rendered pages that compromise your search performance.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>To address this SEO challenge, developers have three main options:</p>
<p><!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} --></p>
<ol>
<li style="list-style-type: none;">
<ol><!-- wp:list-item --></ol>
</li>
</ol>
<p><strong>1. Server-side rendering (SSR):</strong> Here, the rendering happens on the server rather than relying on search engines. This approach saves significant time and resources for both users and search engines, but is expensive and complex to set up. Learn more about <a href="https://prerender.io/blog/in-house-ssr-vs-prerender-io-a-benefit-and-cost-comparison/">the cost and technical burden of building your own SSR.</a></p>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<p><strong>2. Client-side rendering (CSR):</strong> JavaScript frameworks like Vue and React use CSR. This approach is more cost-effective, but sadly, many search engines can’t execute JavaScript.</p>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<p><strong>3. Prerendering</strong>, which even Google recommends as the best solution.</p>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:heading {"level":3} --></p>
<h2 class="wp-block-heading">What is Prerendering, and How Does It Fix Dynamic Content SEO Issues?</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Pre-rendering is a technique that ensures web crawlers can efficiently access and index the content of modern JavaScript-heavy websites.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>When a bot tries to access a page, a special pre-rendering service kicks in and sends a pre-rendered, static version instead of the regular, JavaScript-powered one. This static version contains the fully rendered DOM, including all JavaScript components, images, and other assets—more like a snapshot of the page post-JavaScript processing.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>While regular users enjoy seamless interaction with the website’s dynamic features powered by JavaScript, bots receive an optimized, pre-rendered version that, thanks to JavaScript SEO rendering, is easy to crawl and index properly.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>But to enable this process, your servers need to be able to distinguish between human users and bots, cache fully rendered versions of your pages, and execute the rendering process efficiently.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>However, implementing and maintaining this process independently can be expensive and labor-intensive. This is where solutions like Prerender.io come in.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">How Prerender.io Gets Your Dynamic Content Seen by Search Engines</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><a href="https://prerender.io/">Prerender.io</a> is a service that helps search engines to crawl and index dynamic content effectively. It works by pre-rendering your JS-powered website into static HTML files, which search engines can easily crawl and understand.<img decoding="async" style="font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-size: 1rem;" src="https://prerender.io/wp-content/uploads/get_google_crawl_20x.jpg" alt="" /></p>
<p><!-- /wp:image -->
<!-- wp:paragraph --></p>
<p>Prerender.io offers several key features and benefits:</p>
<p><!-- /wp:paragraph -->
<!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
<li><strong>Improved SEO:</strong> By ensuring that search engines can crawl and index your dynamic content, Prerender can lead to better search rankings and increased organic traffic.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Compatibility with popular frameworks:</strong> Prerender seamlessly integrates with popular JavaScript frameworks, such as React, Angular, Vue.js, and others.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Easy integration:</strong> Prerender can be integrated into your existing website or application with minimal effort, either through a hosted service or by self-hosting the Prerender software.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Customizable caching:</strong> Prerender allows you to configure caching rules to optimize performance and reduce server load.</li>
<li><!-- /wp:list-item -->
<!-- wp:list-item --><strong>Analytics and monitoring:</strong> Prerender provides analytics and monitoring tools to help you track and optimize the performance of your pre-rendered content.</li>
</ul>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:paragraph --></p>
<p>Leveraging Prerender.io will solve all of your <a href="https://prerender.io/blog/common-javascript-seo-problems/">JavaScript SEO</a> problems, ensure that search engines index your pages, and display your pages properly in the SERPs — giving your site a competitive edge.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Are you interested in outsourcing your pre-rendering work to us and optimizing your site for SEO? Our <a href="https://prerender.io/pricing/">pricing</a> is designed to suit your needs, so you can get started and efficiently manage the process without breaking the bank. </p>
<p>See how Popken Fashion Group, <a href="https://prerender.io/resources/case-studies/popken-fashion-group/" target="_blank" rel="noopener">Europe’s largest plus-sized fashion retailer</a>, cut costs by 50% with Prerender.io. </p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<p><!-- /wp:paragraph -->
<!-- wp:image --></p>
<p><!-- /wp:image -->
<!-- wp:heading --></p>
<p><!-- /wp:paragraph --></p> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-5e5a9f5 e-flex e-con-boxed e-con e-parent" data-id="5e5a9f5" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-cc6e471 elementor-widget elementor-widget-video" data-id="cc6e471" data-element_type="widget" data-e-type="widget" data-settings="{"youtube_url":"https:\/\/youtu.be\/gIjlEa6JKro","autoplay":"yes","mute":"yes","video_type":"youtube","controls":"yes"}" data-widget_type="video.default">
<div class="elementor-widget-container">
<div class="elementor-wrapper elementor-open-inline">
<div class="elementor-video"></div> </div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-886907f e-flex e-con-boxed e-con e-parent" data-id="886907f" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-4e3578f elementor-widget elementor-widget-text-editor" data-id="4e3578f" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h2 class="wp-block-heading">How To Set Up Prerender.io to Address JS SEO Dynamic Content Challenges</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>You can solve JavaScript SEO and visibility challenges with Prerender.io in four steps:</p>
<p><!-- /wp:paragraph --><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Step 1: Set Up for Prerender.io</h3>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>To integrate Prerender.io with your website, start by creating an account on the <a href="https://www.prerender.io">Prerender.io website</a>. You can choose between the hosted service or self-hosting the Prerender software.</p>
<p><!-- /wp:paragraph --><!-- wp:image --></p>
<p><!-- /wp:image --><!-- wp:paragraph --></p>
<p>Setting up Prerender is straightforward. Simply install the appropriate middleware tailored to your tech stack onto your backend/CDN/web server. Prerender is <a href="https://docs.prerender.io/docs/what-integrations-are-already-out-there?_gl=1*t61b2o*_ga*MzI2NTMzNzExLjE3MDcyMzIwMTQ.*_ga_5C99FX76HR*MTcxMDQ5OTM4Ni4zNC4xLjE3MTA1MDEzOTcuNjAuMC4w">compatible with almost any tech stack</a>, including ExpressJS, Rails, Cloudflare, Java, C#, PHP, Python, and more.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Once installed, test the setup to ensure it’s functioning correctly. During setup, you’ll receive an API token for authentication with the Prerender service.</p>
<p><!-- /wp:paragraph --><!-- wp:image --></p>
<p><!-- /wp:image --><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Step 2: Rendering</h3>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Prerendering is Prerender.io’s core functionality.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>When a crawler requests a page from your website, Prerender.io intercepts the request and checks if the page needs dynamic rendering. If it contains JavaScript-generated content, Prerender.io spins up a headless browser instance (typically Chromium or Firefox) and loads the requested URL.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>This browser instance executes all JavaScript on the page, fully rendering the dynamic content, thus enabling search engines to index the page effectively.</p>
<p><img decoding="async" src="https://prerender.io/wp-content/uploads/First-Time-Crawler-Request.png" /></p>
<p><!-- /wp:paragraph --><!-- wp:image --></p>
<p><!-- /wp:image --><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>If the requested page is not present in the cache (cache miss), Prerender.io retrieves the necessary files from your server, renders the page, and sends it as a rendered static page after a few seconds.</p>
<p><!-- /wp:paragraph --><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Step 3: Caching</h3>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Once a page is rendered, Prerender.io caches the resulting HTML snapshot. This caching mechanism improves performance by serving pre-rendered HTML directly for subsequent crawler requests, reducing server load and improving scalability, response speed, and crawl budget. It also provides an accurate snapshot of your page for indexation.</p>
<p><!-- /wp:paragraph --><!-- wp:image --></p>
<p><!-- /wp:image --><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Step 4: SEO Performance</h3>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Prerender.io includes a technical SEO scoring feature integrated into the rendering process. The score is displayed in the cached page results, allowing clients to assess their pages’ technical health.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>While the SEO score doesn’t directly correlate with SERP rankings, it helps identify technical issues that may impact search engine visibility.</p>
<p>Watch this video to learn more about Prerender.io’s benefits to improve the visibility of your dynamic content.</p> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-465891c e-flex e-con-boxed e-con e-parent" data-id="465891c" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-e7df5b9 elementor-widget elementor-widget-video" data-id="e7df5b9" data-element_type="widget" data-e-type="widget" data-settings="{"youtube_url":"https:\/\/www.youtube.com\/watch?v=OxNt36HhCP4","autoplay":"yes","mute":"yes","video_type":"youtube","controls":"yes"}" data-widget_type="video.default">
<div class="elementor-widget-container">
<div class="elementor-wrapper elementor-open-inline">
<div class="elementor-video"></div> </div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-0426cd0 e-flex e-con-boxed e-con e-parent" data-id="0426cd0" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-46e1e50 elementor-widget elementor-widget-text-editor" data-id="46e1e50" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h2 class="wp-block-heading">Let Search Engines Easily Discover Your Dynamic Content</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>With the four simple steps mentioned above, Prerender.io (and Prerendering) can help solve those annoying JavaScript SEO problems by creating a fully rendered version of your SPAs or dynamic pages, all without sacrificing user experience or performance. </p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>In fact, numerous companies and websites in various industries have jumped on the Prerender.io train, and it’s been a game-changer for managing dynamic content and boosting their search visibility.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>For example, Eldorado.gg, a platform enabling gamers to trade digital gaming currencies and items, successfully <a href="https://prerender.io/resources/case-studies/how-eldorados-traffic-grew-by-80-after-fixing-spa-rendering-issues/">tackled rendering issues on its single-page application (SPA) website by integrating Prerender.io</a>.</p>
<p>This approach led to a remarkable <strong>53% surge in traffic</strong> within two months, followed by an impressive <strong>80% increase</strong> after ten months. Plus, <strong>indexed pages rose 32%, and the platform achieved a “Top 3” spot for high-performing keywords.</strong> Talk about a win!</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Are you interested in exploring how Prerender.io can benefit your business? You can try it out for free for 30 days. <a href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*leinof*_gcl_au*NjY1OTE5MzU2LjE3NzI0NTM5MTg.*_ga*MzYwMTA2NTM1LjE3NTIyMzQyMTk.*_ga_5C99FX76HR*czE3NzgyNDE2MjUkbzE4OSRnMSR0MTc3ODI0Mzk3MCRqNjAkbDAkaDEzOTc0NDEyNjU.">Create your account.</a></p> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f24dcce e-flex e-con-boxed e-con e-parent" data-id="f24dcce" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-509f016 elementor-align-center elementor-widget elementor-widget-button" data-id="509f016" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*io92ey*_gcl_au*NjY1OTE5MzU2LjE3NzI0NTM5MTg.*_ga*MzYwMTA2NTM1LjE3NTIyMzQyMTk.*_ga_5C99FX76HR*czE3Nzg1OTM0MDAkbzE5NiRnMSR0MTc3ODU5NjU2MCRqNjAkbDAkaDEzODg4MDg3ODM.">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Start for Free</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-2f742d5 e-flex e-con-boxed e-con e-parent" data-id="2f742d5" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-bc449d9 e-con-full e-flex e-con e-child" data-id="bc449d9" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="elementor-element elementor-element-3fa2677 elementor-widget elementor-widget-text-editor" data-id="3fa2677" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<h2>FAQs </h2>
<h3>1. How Does Prerender.io Help With Managing Dynamic JavaScript Content for SEO?</h3>
<p><span style="font-weight: 400;">Many websites use JavaScript to display dynamic content, such as product stocks and customer reviews. Search engines like Google sometimes have trouble understanding this content.</span></p>
<p><span style="font-weight: 400;">Prerender.io creates a simple version of your page for Google. It ensures all your JavaScript content is loaded and then takes a snapshot. This snapshot is easy for Google to read, helping your dynamic content appear in search results.</span></p>
<h3>2. Will Using Prerender.io Affect How Users Interact With My Website?</h3>
<p><span style="font-weight: 400;">Not at all. Prerender.io only works behind the scenes for search engine robots like Googlebot or AI crawlers like ChatGPT agents. Human users still experience your site exactly as you designed it, with all the interactive features and dynamic content working perfectly.</span></p>
<h3>3. How Can I Check if My Dynamic Content Is SEO-Friendly?</h3>
<p><b></b><span style="font-weight: 400;"> You can use </span><a href="https://prerender.io/resources/free-downloads/site-audit-tool/"><span style="font-weight: 400;">Prerender.io’s free site audit tool</span></a><span style="font-weight: 400;"> to scan your site and identify whether your content is visible to search engines. It’s a quick way to assess if your JavaScript-rendered pages need help.</span></p> </div>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/how-to-manage-dynamic-content-prerender/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>How to Make Your React Website Faster with Dynamic Rendering</title>
<link>https://prerender.io/blog/dynamic-rendering-for-react-websites/</link>
<comments>https://prerender.io/blog/dynamic-rendering-for-react-websites/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Tue, 27 Feb 2024 10:50:02 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[dynamic rendering]]></category>
<category><![CDATA[seo]]></category>
<category><![CDATA[technical seo]]></category>
<category><![CDATA[user experience]]></category>
<guid isPermaLink="false">https://prerender.io/?p=3701</guid>
<description><![CDATA[In this article, we'll delve into React optimization techniques, pinpoint the bottlenecks responsible for user experience issues, and introduce dynamic rendering to make React websites go faster.]]></description>
<content:encoded><![CDATA[ <div data-elementor-type="wp-post" data-elementor-id="3701" class="elementor elementor-3701" data-elementor-post-type="post">
<div class="elementor-element elementor-element-21ce1ff e-flex e-con-boxed e-con e-parent" data-id="21ce1ff" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-20012b5e elementor-widget elementor-widget-text-editor" data-id="20012b5e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Many websites are built with React JS. React allows web developers to build fast and responsive websites, even for large web applications.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>However, the React application isn’t perfect either, especially when it comes to the initial load times and the SEO side effects for the client-side rendering (CSR) websites. </p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>In this article, we’ll delve into React optimization techniques, pinpoint the bottlenecks responsible for user experience issues, and introduce dynamic rendering to make React websites go faster.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading --></p>
<h2 class="wp-block-heading">3 Techniques for Optimizing React Application Performance</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>Building a React website is like sculpting a masterpiece. You need to carefully craft each element to ensure that they work together seamlessly. However, even the most well-crafted code can face challenges when it comes to react page performance. These issues become even more pronounced in SPAs <a href="https://prerender.io/blog/common-javascript-seo-problems/">built with JavaScript</a>.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Related: <a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">Learn how to improve the indexing performance of your SPAs</a>.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Let’s take a look at some of the common React performance optimization techniques to understand the need for dynamic rendering better.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
</ul>
<ol>
<li><strong>Code splitting</strong>: This involves breaking down your application into smaller, manageable parts, enabling users to load only the necessary components, and reducing initial load times.</li>
<li><strong>Lazy loading</strong>: Loading the web components only when they are needed enhances the efficiency of your application.</li>
<li><strong>Minification and compression</strong>: With minification, you’re shrinking your codebase by removing unnecessary characters and spaces. Compressing assets also reduces the overall file size, facilitating faster downloads and rendering.</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list --></p>
<p><!-- wp:paragraph --></p>
<p>While these techniques can help you improve the performance of your React website, they don’t address the specific challenges associated with SPAs and SEO. SPAs download and execute massive JavaScript bundles, which can significantly delay the initial page load, leading to poor user experience.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>This delay can also manifest as <a href="https://prerender.io/blog/soft-404/">soft 404 errors</a>—a condition where the server sends a 200 OK status code, but the page is empty as the content remains invisible due to JavaScript execution problems. Search engines also can’t crawl your website if it’s plagued by slow rendering, leading to indexation problems. </p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Other problems affect React JavaSript SPAs, but luckily, they can be solved with dynamic rendering solutions. </p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading --></p>
<h2 class="wp-block-heading">Dynamic Rendering for Healthier React SEO</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p><a href="https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/">Dynamic rendering</a> is a game-changer for websites facing challenges related to JavaScript React SEO, user experience, and technical SEO performance.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>At its core, dynamic rendering involves serving pre-rendered content to search engine bots while delivering the full, dynamic JavaScript experience to users. This approach ensures that search engines can easily index and understand the content, indirectly improving SEO rankings and better visibility in search results.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Key benefits of dynamic rendering include:</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
<li><strong>Ensured indexability</strong>: Dynamic rendering guarantees that your pages are <a href="https://prerender.io/benefits/faster-indexation/">100% indexed-ready</a>, overcoming challenges posed by heavy JavaScript React usage.</li>
<li><strong>Reduced processing time</strong>: By presenting fully rendered pages to search engine bots, dynamic rendering eliminates the slow rendering problem (a typical issue of React JS websites.) This is particularly beneficial for large websites, as not only does this improve the indexing time and success rate, but also prevents <a href="https://prerender.io/resources/free-downloads/white-papers/crawl-budget-guide/">crawl budget exhaustion</a>.</li>
<li><strong>Enhanced user experience</strong>: Dynamic rendering serves a pre-rendered version of the content, leading to faster page load times and a smoother user experience, reducing the chances of encountering a “404 page not found” error.</li>
</ul>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list --></p>
<p><!-- wp:paragraph --></p>
<p><strong>Related</strong>: Follow this guide to <a href="https://prerender.io/blog/fix-404-errors-on-spas/">resolve 404 errors on SPAs</a>.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Dynamic rendering offers a powerful solution for addressing performance concerns in React applications while simultaneously bolstering SEO performance. One of the most efficient methods to seamlessly integrate dynamic rendering into React SEO strategy is by adopting Prerender. </p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading --></p>
<h2 class="wp-block-heading">How Prerender Makes React SEO Friendly</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>For apps built with React JS, <a href="https://prerender.io/">Prerender</a> is a powerful enterprise SEO tool. It is equipped with a dynamic rendering solution that can intelligently differentiate between bots and human users’ requests.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>When bots visit your site, Prerender delivers the static HTML version of the page, providing a seamless crawling and indexing process. And when the requests come from human users, they will go to the normal route. This greatly improves the loading time and SEO, leading to higher Web Core Vitals scores and SERP rankings without compromising the user experience. Learn more about <a href="https://prerender.io/blog/how-prerender-renders-javascript-websites/">how Prerender works for JavaScript websites</a> here.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>And the benefits don’t stop there. Besides solving Javascript React problems, Prerender is also suitable for <a href="https://prerender.io/framework/vue-js/">VueJS</a>, <a href="https://prerender.io/framework/angular/">AngularJS</a>, and <a href="https://prerender.io/framework/others-js/">other popular JS frameworks</a>. Prerender’s pricing system is also affordable, especially when compared to the cost of building SSR from scratch.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>So if you have a React website and you want to solve your indexing and performance issues, <a href="https://prerender.io/pricing/">try out Prerender!</a></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading --></p>
<h2 class="wp-block-heading">How to Integrate Prerender in React Websites</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>Now that you understand how Prerender boosts React application performance, let’s dive into how to integrate this powerful solution with your React website.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>There are two primary installation methods, each catering to different server architectures and needs. The backend integration offers more flexibility and control, while CDN integration simplifies the routing process.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Method 1: Integrated into the Backend Service using Prerender Integration</h3>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>Before going to the integration steps, first, you need to select the Prerender integration that aligns with your backend language. Prerender supports various languages, including Node.js, C#, Python, PHP, Ruby, and more. See the <a href="https://docs.prerender.io/docs/what-integrations-are-already-out-there">Prerender’s full integration list</a> here.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Second, you’d need to obtain your Prerender token. To do this, you can <a href="https://auth.prerender.io/auth/realms/prerender/protocol/openid-connect/registrations?client_id=prerender-frontend&response_type=code&scope=openid%20email&redirect_uri=https://dashboard.prerender.io/integration-wizard&_gl=1*lt36sk*_gcl_au*MzcxOTM5ODUuMTczODc0MTc3OA..*_ga*NjYwNjcwMjA1LjE3MzA4MjE2ODc.*_ga_5C99FX76HR*MTczOTE4MzExMy44MS4xLjE3MzkxODU4NTMuOS4wLjA." target="_blank" rel="noopener">sign up</a> for a Prerender account. Once done, you’ll be redirected to the Prerender dashboard, where you will find your API key at the top of the page.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Next, install the Prerender integration for your backend language. For example, for Node.js, you can install it using the following command:</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><i>npm install prerender-node –save</i></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Finally, add the following line when setting up your express app:</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><i>app.use(require(‘prerender-node’).set(‘prerenderToken’, ‘YOUR_TOKEN’));</i></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Method 2: Integrated into the CDN in Front of Your Servers</h3>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>In this case, rather than using a Prerender integration, you will create rewrite rules that enable the routing of requests between your backend and Prerender’s cloud service. These rules should identify crawler requests and reroute them to Prerender for dynamic rendering.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Here’s an example of how to <a href="https://docs.prerender.io/docs/18-integrate-with-iis">integrate Prerender with IIS</a>.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>For both methods, you can test your setup by running the following curl command:</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><i>curl -H “X-Prerender-Token: <YOUR_PRERENDER_TOKEN>” <a href="https://service.prerender.io/">https://service.prerender.io/</a><YOUR_WEBSITE_URL></i></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>For a detailed guide on <a href="https://prerender.io/blog/how-to-install-prerender/">how to install Prerender</a>, visit this blog or this <a href="https://docs.prerender.io/docs/getting-started">getting started documentation</a>.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading --></p>
<h2 class="wp-block-heading">Accelerate React Page with Dynamic Rendering</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:paragraph --></p>
<p>Adopting Prerender’s dynamic rendering for your React-based website allows you to have the best of all worlds: an immersive user experience, speedy server response time (SRT), and optimized SEO performance. This way, you’re not only meeting current standards but also future-proofing your online presence. </p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>Ready to supercharge your React website? <a href="https://prerender.io/pricing/">Try Prerender</a> today and see the difference for yourself.</p>
<p><!-- /wp:paragraph --></p> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-8ae67e8 e-flex e-con-boxed e-con e-parent" data-id="8ae67e8" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-8621a82 elementor-tablet-align-center elementor-align-center elementor-widget elementor-widget-button" data-id="8621a82" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://prerender.io/pricing/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Try Prerender for Free</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/dynamic-rendering-for-react-websites/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>How to Fix 404 Errors on SPAs</title>
<link>https://prerender.io/blog/fix-404-errors-on-spas/</link>
<comments>https://prerender.io/blog/fix-404-errors-on-spas/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Fri, 26 Jan 2024 13:27:57 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[error 404]]></category>
<category><![CDATA[prerendering]]></category>
<category><![CDATA[rendering]]></category>
<category><![CDATA[spa]]></category>
<guid isPermaLink="false">https://prerender.io/?p=3561</guid>
<description><![CDATA[How to fix 404 errors while boosting SEO with Prerender.]]></description>
<content:encoded><![CDATA[ <div data-elementor-type="wp-post" data-elementor-id="3561" class="elementor elementor-3561" data-elementor-post-type="post">
<div class="elementor-element elementor-element-59fc80db e-flex e-con-boxed e-con e-parent" data-id="59fc80db" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-5da40d6d elementor-widget elementor-widget-text-editor" data-id="5da40d6d" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Have you ever encountered a 404 error while browsing the web?</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>These “page not found,” or 404 errors are common, especially in single-page applications (SPAs). While there are a couple of traditional solutions to fix error 404, they often fall short due to the intricate nature of SPAs. Left untreated, 404 errors can frustrate users when accessing your page and damage your brand’s reputation.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>This SPAs article will provide a comprehensive understanding of 404 errors on SPAs. We’ll start with understanding what a 404 error is and what causes it, then introduce you to a powerful solution that fixes error 404 effectively.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2 class="wp-block-heading">What is a 404 Error?</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Before we dive into the specifics of 404 errors on SPAs, let’s understand the concept of 404 errors.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Essentially, a <em>404 error</em> is an HTTP status code that indicates the server could not find the requested webpage. That’s why some called the 404 error ‘404 page not found.’ </p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>A <em>404 page not found</em> error occurs for various reasons, such as mistyped URLs, broken links, or deleted content. Developers often create custom 404 pages by adding links to other pages, writing apology messages, or even turning them into humorous messages to reduce the impact on user experience.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2 class="wp-block-heading">Understanding 404 Errors on SPAs</h2>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>SPAs built with JavaScript and its frameworks have gained popularity over the years. They deliver fluid, app-like experiences within browsers, enabling websites to load content dynamically. However, it also comes with drawbacks, namely challenges in handling URLs and responding to requests.</p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>In a single page load, a SPA retrieves all necessary HTML, CSS, and JavaScript code, updating the content without requiring a full page refresh. This approach enhances user interaction and engagement but introduces complexities in managing URLs, especially when users navigate between different application sections.</p>
<p><span style="font-weight: 400;">What’s important to understand about 404 pages in SPAs is that SPAs only have one indexed page. So when users go with a route different from the indexed page, they will get a 404 error page.</span></p>
<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>
<p>Furthermore, unlike traditional multi-page applications, SPAs <a href="https://prerender.io/blog/how-prerender-renders-javascript-websites/">render JavaScript</a> on the client side. This means that JavaScript manages navigation, interprets the URL changes, and fetches the necessary content without making a server request. While this enhances speed and responsiveness, it also means that the server may not be aware of all possible routes, eventually leading to 404 errors.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2 class="wp-block-heading">Some Common Causes of 404 Errors on SPAs</h2>
<h3 class="wp-block-heading">A. JavaScript-based navigation challenges</h3>
<p class="wp-block-heading"><span style="font-size: 16px;">SPAs heavily depend on JavaScript for navigation. If JavaScript fails to load or execute routes properly, users may encounter 404 errors. This is because the client-side routing is unable to interpret and handle the URL changes.</span></p>
<h3 class="wp-block-heading">B. SEO HTML status codes and their implications</h3>
<p class="wp-block-heading"><span style="font-size: 16px;">Search engine crawlers may struggle to index SPAs due to the dynamic nature of the content loading. This can lead to search engines encountering 404 errors when attempting to crawl pages that haven’t been rendered or properly configured.</span></p>
<h3 class="wp-block-heading">C. Crawling and indexing issues</h3>
<p class="wp-block-heading"><span style="font-size: 16px;">Search engine crawlers, which traditionally rely on static HTML content, may not effectively navigate SPAs before ranking their pages. This results in 404 errors for users accessing those pages via search results.</span></p>
<p><!-- /wp:list --><!-- wp:paragraph --></p>
<p><strong>Related</strong>: Learn how to <a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">optimize SPAs for crawling and indexing</a> here.</p>
<p><!-- /wp:paragraph --><!-- wp:heading --></p>
<h2 class="wp-block-heading">Is a 404 Error the Same as a Soft 404 Error?</h2>
<h2><!-- /wp:heading --><!-- wp:paragraph --></h2>
<p>While a<em> 404 page not found</em> error is pretty straightforward, developers often encounter a more complicated variant known as a <a href="https://prerender.io/blog/soft-404/">soft 404</a>. A soft 404 error occurs when a server returns a 200 OK status code instead of a 404 error code, even though it’s an empty page or a page that doesn’t exist.</p>
<h2><!-- /wp:paragraph --><!-- wp:paragraph --></h2>
<p>Although soft 404 SEO errors are not among the “official” SEO HTML status codes, they are common and can harm the SEO performance of single-page applications. When search engine bots try to crawl a page with soft 404 and get a 200 OK status code, it indicates that the page exists and will continue to crawl the page—<a href="https://prerender.io/resources/free-downloads/white-papers/crawl-budget-guide/">wasting your limited crawl budget</a>.</p>
<h2><!-- /wp:paragraph --><!-- wp:paragraph --></h2>
<p>And since the page or some of its content is missing, the search engine may <a href="https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/">index an empty page</a> with nothing to display on search results. This will waste your hard work and valuable SEO elements and ruin your user experience. </p>
<p><span style="font-family: Montserrat, sans-serif; font-size: 36px; font-weight: 600; text-align: var(--text-align);">6 Methods to Resolve 404 Errors on SPAs</span></p>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Here are some common solutions to fix error 404 on SPAs:</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5297 size-full" src="https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_.png" alt="How to solve 404 errors on SPAs - Prerender.io" width="800" height="2000" srcset="https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_.png 800w, https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_-120x300.png 120w, https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_-410x1024.png 410w, https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_-768x1920.png 768w, https://prerender.io/wp-content/uploads/How-to-solve-404-errors-on-SPAs-Prerender.io_-614x1536.png 614w" sizes="(max-width: 800px) 100vw, 800px" /></p>
<p> </p>
<p><!-- /wp:paragraph --><!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">1. Redirect to a Custom 404 Page</h3>
<p><!-- /wp:heading --><!-- wp:paragraph --></p>
<p>Redirecting broken URLs to a dedicated 404 error page provides users with a consistent and user-friendly experience. This centralized approach to handling “page not found” errors also allows you to guide users back to relevant content or your homepage.</p>
<p>Here’s an example of Github’s custom 404 error page:</p>
<p><!-- /wp:paragraph --><!-- wp:image --><!-- /wp:list --></p> </div>
</div>
<div class="elementor-element elementor-element-531da8f elementor-widget elementor-widget-image" data-id="531da8f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="640" height="332" src="https://prerender.io/wp-content/uploads/github-404-error-page-1024x531.png" class="attachment-large size-large wp-image-5055" alt="an example of 404 error page from Github - Prerender.io" srcset="https://prerender.io/wp-content/uploads/github-404-error-page-1024x531.png 1024w, https://prerender.io/wp-content/uploads/github-404-error-page-300x156.png 300w, https://prerender.io/wp-content/uploads/github-404-error-page-768x398.png 768w, https://prerender.io/wp-content/uploads/github-404-error-page.png 1280w" sizes="(max-width: 640px) 100vw, 640px" /> </div>
</div>
<div class="elementor-element elementor-element-353f892 elementor-widget elementor-widget-text-editor" data-id="353f892" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<!-- wp:paragraph --><!-- /wp:paragraph --><!-- wp:image --><!-- /wp:image --><!-- wp:paragraph --><!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">2. Proper Configuration of Routes</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>As we saw earlier, one common cause of 404 errors in SPAs is misconfigured routes. Developers must ensure that the application’s routing system accurately reflects the application’s structure. This includes defining routes for each section or page and handling variations such as nested routes.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>SPAs often utilize dynamic route parameters to load specific content based on user input or selections. You must ensure the corresponding content is available to prevent 404 errors when users access pages with dynamic URLs.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Additionally, to fix error 404, you can redirect the page to another by implementing a <a href="https://www.semrush.com/blog/301-redirects/">301 redirect</a>. This informs search engines that the page has been relocated, preventing the display of a 404 error for an existing page. </p>
<!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">3. Implementing Error Boundary Components</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Incorporating error boundary components in the SPA can help catch JavaScript errors, preventing the application from crashing and displaying a generic 404 error. Certain client-side navigation libraries, such as React Router or Vue Router, offer mechanisms to handle 404-page not-found errors gracefully. </p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>In React, you can define a route for 404 errors as follows:</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><Route path=”*” component={NotFound} /></p>
<p><span style="box-sizing: border-box; margin: 0px; padding: 0px;">Get the full code examples of creating a catch-all route using React Router and redirecting undefined routes to a 404 page <a href="https://medium.com/@mkare/effectively-managing-404-errors-on-the-server-side-in-spas-884ae11f528c" target="_blank" rel="noopener">here</a>.</span></p>
<!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3>4. Nginx Configuration for 404 Error</h3>
<p><span style="font-weight: 400;">If you use Nginx to run your SPA, you can configure it to smoothly handle the 404 error redirection. Get the full code snippet on configuring Nginx <a href="https://medium.com/@mkare/effectively-managing-404-errors-on-the-server-side-in-spas-884ae11f528c" target="_blank" rel="noopener">here</a> so that the request will always fall back to the </span><i><span style="font-weight: 400;">index.html </span></i><span style="font-weight: 400;">file if the requested URL can’t be found</span><span style="font-weight: 400;">.</span>5. Server-Side Rendering (SSR)</p>
<h3>5. Server-Side Rendering (SSR)</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p><a href="https://prerender.io/blog/what-is-srr-and-why-do-you-need-to-know/">Server-side rendering</a> involves rendering pages directly on the server before sending them to the client, as opposed to relying solely on client-side rendering (CSR). SSR can enhance SEO by providing search engines with prerendered content, which also helps fix error 404 issues.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>For single-page applications facing persistent 404 errors, integrating SSR can be a smart solution. By prerendering pages on the server, SSR ensures that search engine crawlers and users receive HTML content, reducing the likelihood of countering 404 errors due to client-side rendering issues.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>However, SSR can be challenging to implement, especially for developers accustomed to client-side rendering. It also requires additional server resources, <a href="https://prerender.io/benefits/simpler-implementation/#:~:text=You%20can%20start%20using%20Prerender,will%20work%20for%20your%20website.">which can be very costly</a>. Furthermore, SSR may not be a viable solution for SPAs that rely heavily on client-side rendering for dynamic content.</p>
<!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">6. Dynamic Rendering Solution for SPAs</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>The best solution to fix 404 errors while also boosting SEO is using <a href="https://prerender.io/blog/when-you-should-consider-dynamic-rendering/">a dynamic rendering tool</a>. </p>
<p><iframe title="How Does Prerender.io Work? A Quick Explainer" width="640" height="360" src="https://www.youtube.com/embed/OxNt36HhCP4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://prerender.io/">Prerender</a>, for example, works by intercepting requests from search engine crawlers and serving them static HTML snapshots from a cache. This ensures that search engines receive the same content as users, eliminating the risk of 404 errors due to client-side rendering issues.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Not only that, Prerender also helps improve SEO performance. Since it provides search engines with crawlable content, it accelerates the indexing time and indirectly improves PageSpeed. Consequently, this will boost your SEO health and rankings, giving more visibility to your website.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Furthermore, as your website changes, your content will differ from what’s in the cache. Prerender addresses this through a feature called <a href="https://docs.prerender.io/docs/10-recaching">recaching</a>. This allows developers to schedule Prerender to fetch pages, create new snapshots from updated content, and store them in the cache. This way, search engines will always receive the most up-to-date version of the pages, preventing issues with outdated information or missed optimizations.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>As an enterprise SEO tool, Prerender is scalable, cost-effective, and requires no changes to your existing infrastructure. It gives SPAs a lot of benefits, which you can get by <a href="https://prerender.io/pricing/">getting started with Prerender now</a>.</p>
<!-- /wp:paragraph --><!-- wp:heading -->
<h2 class="wp-block-heading">Prevent 404 Errors for Better SEO Health</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Resolving 404 errors is crucial for a smooth user experience and strong SEO performance. With the unique challenges SPAs face in handling URLs, you need to find the right solution.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>While various methods exist, dynamic rendering with Prerender is one of the best solutions. It effectively fixes error 404 and also enhances SEO health by ensuring an accurate indexing process. With Prerender, you’re not just resolving issues—you’re optimizing your website for peak performance!</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Make your SPAs deliver a flawless experience for users and search engines alike by adopting Prerender. Trusted by 100,000+ businesses worldwide like Salesforce, HubSpot, and Figma, it’s been an industry standard since 2014. Start your <a href="https://prerender.io/pricing/">free 30-day trial</a> to see the benefits firsthand. </p>
<h3 class="wp-block-heading">Explore more about 404 Management:</h3>
<p><!-- /wp:heading --><!-- wp:list --></p>
<ul><!-- wp:list-item -->
<li><a href="https://prerender.io/blog/soft-404/">What Are Soft 404 Errors and How To Fix Them (5 Easy Ways)</a></li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li><a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">How to Optimize Single-Page Applications (SPAs) for Crawling and Indexing</a></li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li><a href="https://prerender.io/blog/robots-txt-and-seo/">Robot.txt SEO: Best Practices, Common Problems & Solutions</a></li>
</ul>
<h2 class="wp-block-heading">FAQs on How to Solve 404 Error Pages on SPAs</h2>
<p><span style="font-weight: 400;">Answering some common questions about 404 errors and how to fix them.</span></p>
<h3 class="wp-block-heading">1. Are 404 Errors on SPAs Bad for SEO? </h3>
<p><span style="font-weight: 400;">404 errors are not bad for SEO. In fact, it is common for large websites to have several 404 error pages as the content is always changing. Here’s exactly what Google says, “If some URLs on your site 404, this fact alone does not hurt you or count against you in Google’s search results” (</span><a href="https://developers.google.com/search/blog/2011/05/do-404s-hurt-my-site"><span style="font-weight: 400;">source</span></a><span style="font-weight: 400;">).</span></p>
<h3>2. How Do I Know if a 404 Error Is a Client-Side or Server-Side Issue?</h3>
<p><span style="font-weight: 400;">First, inspect the HTTP status codes. A 4xx signals it is a client-side issue, while a 5xx status tells you that it is a server-side problem.</span></p>
<h3>3. What Tools Can I Use to Monitor 404 Errors on My Website?</h3>
<p><span style="font-weight: 400;">You can use SEO auditing tools like Screaming Frog to check whether you have 404 errors on your site and they are properly redirected. If you don’t like the tool, here are </span><a href="https://prerender.io/blog/screaming-frog-alternative/"><span style="font-weight: 400;">10 alternatives to Screaming Frog</span></a><span style="font-weight: 400;">.</span></p>
<h3>4. What Should I Include in a 404 Error Page?</h3>
<p><span style="font-weight: 400;">There’s no rule on what to add to your custom 404 error page. However, most websites include the following content and SEO elements on their 404 page:</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">A ‘404 page not found’ text.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">A short blurb to explain the ‘404 error’ situation. Make it fun with funny pictures or puns.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Links to your pages, such as the homepage, top-performing blogs, or key landing pages.</span></li>
</ul>
<h3>5. 404 Error Page vs. 301 Redirects: What’s the Difference?</h3>
<p><span style="font-weight: 400;">A 404 error page is a sign that a website cannot return a page because the page doesn’t exist anymore. It can be caused by a deleted page, mistyping the URL, or a broken link. This means that having 404 error pages generally won’t hurt your SEO performance.</span></p>
<p><span style="font-weight: 400;">301 redirects, on the other hand, is a permanent redirect from one page to another. This means that search engine crawlers will visit the original page and follow the 301 redirection path to the new URL. 301 redirects are used when you move or merge a page, allowing the link juice to continue boosting your SEO performance.</span><span style="font-weight: 400;">Learn more about </span><a href="https://prerender.io/blog/do-redirect-chains-hurt-seo/"><span style="font-weight: 400;">301 redirects and how to properly apply the redirection here</span></a><span style="font-weight: 400;">.</span></p>
<!-- /wp:list --> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-e31ea52 e-flex e-con-boxed e-con e-parent" data-id="e31ea52" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-e612fc0 elementor-tablet-align-center elementor-align-center elementor-widget elementor-widget-button" data-id="e612fc0" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://prerender.io/pricing/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Try Prerender for Free</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/fix-404-errors-on-spas/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>How to Install Prerender in 3 Easy Steps</title>
<link>https://prerender.io/blog/how-to-install-prerender/</link>
<comments>https://prerender.io/blog/how-to-install-prerender/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Mon, 22 Jan 2024 10:33:00 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[crawling]]></category>
<category><![CDATA[indexing]]></category>
<category><![CDATA[javascript]]></category>
<category><![CDATA[seo]]></category>
<category><![CDATA[technical seo]]></category>
<guid isPermaLink="false">https://prerender.io/?p=1359</guid>
<description><![CDATA[Prerender® is a hugely cost-saving JavaScript SEO option that can save you thousands of dollars and hundreds of hours of manpower compared to other more labor-intensive options. It’s also more reliable and much more likely to earn you top-ranking positions on Google search results. With that being the case, as…]]></description>
<content:encoded><![CDATA[ <div data-elementor-type="wp-post" data-elementor-id="1359" class="elementor elementor-1359" data-elementor-post-type="post">
<div class="elementor-element elementor-element-9fd5e47 e-flex e-con-boxed e-con e-parent" data-id="9fd5e47" data-element_type="container" data-e-type="container" data-settings="{"jet_parallax_layout_list":[]}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-2b03b01d elementor-widget elementor-widget-text-editor" data-id="2b03b01d" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p><span style="font-weight: 400;">Indexing JavaScript content can be complicated. That’s why when we designed </span><a href="https://prerender.io/"><span style="font-weight: 400;">Prerender</span></a><span style="font-weight: 400;">, we ensured that the installation process was simple and fast.</span></p>
<p><span style="font-weight: 400;">Furthermore, you don’t even have to change your tech stack to enjoy Prerender. Prerender is a plug-and-play solution that works with almost all </span><a href="https://prerender.io/framework/"><span style="font-weight: 400;">major frameworks</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">Follow the step-by-step installation instructions below, and soon, you can start using Prerender to </span><a href="https://prerender.io/benefits/faster-indexation/"><span style="font-weight: 400;">improve your indexing performance</span></a><span style="font-weight: 400;"> and help boost your technical SEO health.</span></p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">Prerender Installation Overview</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Installing Prerender consists of three steps:</p>
<ol>
<li><span style="font-weight: 400;">Integrate with Prerender with your tech stack</span></li>
<li><span style="font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-size: 1rem;">Run a test to make sure everything is working</span></li>
<li><span style="font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align); font-size: 1rem;">Configure and customize it to suit your needs</span></li>
</ol>
<div><span style="font-weight: 400;"><img loading="lazy" decoding="async" class="alignnone wp-image-3716 size-large" src="https://prerender.io/wp-content/uploads/Prerender_Installation-Guide-1024x1024.png" alt="Guide to installing Prerender" width="640" height="640" srcset="https://prerender.io/wp-content/uploads/Prerender_Installation-Guide-1024x1024.png 1024w, https://prerender.io/wp-content/uploads/Prerender_Installation-Guide-300x300.png 300w, https://prerender.io/wp-content/uploads/Prerender_Installation-Guide-150x150.png 150w, https://prerender.io/wp-content/uploads/Prerender_Installation-Guide-768x768.png 768w, https://prerender.io/wp-content/uploads/Prerender_Installation-Guide.png 1080w" sizes="(max-width: 640px) 100vw, 640px" /></span></div>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:paragraph --></p>
<p><span style="font-weight: 400;">To integrate with Prerender, first, you need to identify your tech stack and preferred integration method. </span></p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">Step 1: Integration</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><span style="font-weight: 400;">Here are 3 installation techniques to install Prerender:</span></p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p><strong>A. Direct Integration</strong><br /><strong>B. Ingress Integration</strong><br /><strong>C. CDN Integration</strong></p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>We’ll break down the installation methods one by one, the most popular languages used for each, and tell you where to install your API code.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>That said, no matter which method you choose, the general idea is the same: you will add code to each page that needs to be pre-rendered. That code contains the API key issued to you <a href="https://prerender.io/pricing/">when you signed up for Prerender</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Additionally, Prerender is compatible with the majority of popular programming languages. To find the complete list, visit this knowledge base document: ‘<a href="https://docs.prerender.io/docs/what-integrations-are-already-out-there">Prerender Integrations.’</a></p>
<p><!-- /wp:paragraph -->
<!-- wp:image {"align":"center","id":1365,"width":522,"height":807,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="662" height="1024" class="wp-image-1365 aligncenter" style="width: 522px; height: 807px;" src="https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method-662x1024.jpg" alt="" srcset="https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method-662x1024.jpg 662w, https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method-194x300.jpg 194w, https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method-768x1188.jpg 768w, https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method-993x1536.jpg 993w, https://prerender.io/wp-content/uploads/2021/07/choosing-installation-method.jpg 1283w" sizes="(max-width: 662px) 100vw, 662px" /></figure>
<p><!-- /wp:image -->
<!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading"><strong>A. Direct Integration</strong></h3>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Direct integration involves getting Prerender to work alongside your front-end technology. Commonly, this is done using Node.JS or Django/Python.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Generally, this method is more customizable than the others. This is because the main mechanism is in the code itself, so you can change it to suit your needs rather than in a static configuration.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading {"level":4} --></p>
<h4 class="wp-block-heading"><strong>Node.JS</strong></h4>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><a href="https://nodejs.org/en">Node.JS</a> is an open-source JavaScript framework that executes your content outside the web browser. It’s primarily used for non-blocking, event-driven servers, traditional websites, and back-end API services.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Our Node.JS middleware intercepts HTTP file requests from browsers and then calls Prerender to deliver the static HTML version of your page.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p><strong>Related</strong>: See <a href="https://prerender.io/blog/a-guide-to-prerender-process-and-benefits/">how Prerender works in solving JavaScript SEO problems</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Here’s how to install Prerender for a Node.JS-based website.</p>
<p><!-- /wp:paragraph -->
<!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
</ul>
<ul>
<li style="list-style-type: none;">
<ul>
<li>First, install the Prerender node via npm:</li>
</ul>
</li>
</ul>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code">$ npm install prerender-node –save</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:list --></p>
<ul>
<li style="list-style-type: none;">
<ul><!-- wp:list-item --></ul>
</li>
</ul>
<ul>
<li style="list-style-type: none;">
<ul>
<li>Set up the express app:</li>
</ul>
</li>
</ul>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:syntaxhighlighter/code {"language":"php"} --></p>
<pre class="wp-block-syntaxhighlighter-code">app.use(require(‘prerender-node’));</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>OR, if you already have the Prerender.io API token:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"php"} --></p>
<pre class="wp-block-syntaxhighlighter-code">app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p><a href="https://docs.prerender.io/docs/nodejs"><span style="font-weight: 400;">You can read or watch the installation instructions for Node.JS here.</span></a></p>
<p><!-- /wp:paragraph -->
<!-- wp:heading {"level":4} --></p>
<h4 class="wp-block-heading"><strong>Python/Django</strong></h4>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><a href="https://www.python.org/">Python</a> is a programming language that is often considered as one of the most useful and easiest programming languages to learn. It’s an all-purpose programming language that emphasizes the importance of code readability and features frequent use of indentation.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Here’s how to install Prerender for a Python-based website.</p>
<p><!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} --></p>
<ol>
<li style="list-style-type: none;">
<ol><!-- wp:list-item --></ol>
</li>
</ol>
<ol>
<li style="list-style-type: none;">
<ol>
<li>First, do a PIP install:</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:syntaxhighlighter/code {"language":"php"} --></p>
<pre class="wp-block-syntaxhighlighter-code">pip install django-seo-js</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>2. Add the pip install to your <em>settings.py</em> file:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code"># If in doubt, just include both. Details below.
MIDDLEWARE_CLASSES = (
'django_seo_js.middleware.EscapedFragmentMiddleware', # If you're using #!
'django_seo_js.middleware.UserAgentMiddleware', # If you want to detect by user agent
) + MIDDLEWARE_CLASSES
INSTALLED_APPS += ('django_seo_js',)
# If you're using prerender.io (the default backend):
SEO_JS_PRERENDER_TOKEN = "123456789abcdefghijkl" # Really, put this in your env, not your codebase.
</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>3. Finally, add it to your <em>base.html</em> file:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"xml"} --></p>
<pre class="wp-block-syntaxhighlighter-code">{% load django_seo_js %}
<head>
{% seo_js_head %}
...
</head></pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>You can read the <a href="https://github.com/skoczen/django-seo-js">installation instructions for Python here</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading"><strong>B. Ingress Installation</strong></h3>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Choosing an ingress method of installing Prerender means configuring Prerender to work with your server-side, back-end language, typically by rewriting your <em>.htaccess file</em>. Two of the most common languages used here are Apache and NGINX.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading {"level":4} --></p>
<h4 class="wp-block-heading"><strong>Apache</strong></h4>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><a href="https://httpd.apache.org/">Apache</a> is a server-side scripting language commonly used in enterprise web applications. It’s used by roughly 67% of all the web servers in the world. It is easy to customize, fast, reliable, and used by websites that get upwards of hundreds of thousands of sessions per month.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Installing Prerender with Apache involves using the <em>httpd.conf </em>and .<em>htaccess </em>files. <a href="https://docs.prerender.io/docs/apache-2"><span style="font-weight: 400;">You can read or watch Apache installation instructions here</span></a><span style="font-weight: 400;">.</span></p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Here’s how to install Prerender for an Apache-based website.</p>
<p><!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} --></p>
<ol>
<li style="list-style-type: none;">
<ol><!-- wp:list-item --></ol>
</li>
</ol>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Put this codeblock into your <em>.htaccess</em> file and remove the / comments to allow the use of a proxy over https</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:syntaxhighlighter/code {"language":"php"} --></p>
<pre class="wp-block-syntaxhighlighter-code">LoadModule headers_module libexec/apache2/mod_headers.so
LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
LoadModule ssl_module libexec/apache2/mod_ssl.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:list {"ordered":true,"start":2} --></p>
<ol start="2">
<li style="list-style-type: none;">
<ol start="2"><!-- wp:list-item --></ol>
</li>
</ol>
<ol start="2">
<li style="list-style-type: none;">
<ol start="2">
<li>Add this to the bottom of the <em>.conf</em> file:</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code"># Prerender.io configuration
# Allow proxying over https
SSLProxyEngine on
# These two commands ignore the validity of the SSL Certificate of the Prerender server
# Only uncomment the two SSLProxy lines if you are testing with a local prerender server over https with a self-signed cert
# A hosted Prerender server should have a valid SSL Certificate so the next two lines can stay commented in production
#SSLProxyCheckPeerName off
#SSLProxyVerify none
.htaccess</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>This is the actual configuration that sends the request to Prerender:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code"># Change YOUR_TOKEN to your prerender token
# Change https://service.prerender.io/ (at the end of the last RewriteRule)
# to http://localhost:3000/ when testing with a local prerender server
<IfModule mod_headers.c>
RequestHeader set X-Prerender-Token "YOUR_TOKEN"
RequestHeader set X-Prerender-Version "prerender-apache@2.0.0"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
<IfModule mod_proxy_http.c>
RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
RewriteCond %{REQUEST_URI} ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.svg))
RewriteRule ^(index\.html|index\.php)?(.*) https://service.prerender.io/%{REQUEST_SCHEME}://%{HTTP_HOST}/$2 [P,END]
</IfModule>
</IfModule></pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:heading {"level":4} --></p>
<h4 class="wp-block-heading"><strong>NGINX</strong></h4>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p><a href="https://www.nginx.com/">NGINX</a> is a popular alternative to Apache. It has grown in popularity since its release due to its light-weight resource utilization and ability to scale easily. It’s also useful for serving static content easily and passing requests for dynamic content off to other software – which is exactly what makes it so compatible with Prerender.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p><a href="https://docs.prerender.io/docs/nginx-1"><span style="font-weight: 400;">You can read or watch the installation instructions for Nginx here.</span></a></p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>The official <em>nginx.conf</em> for Prerender is below.</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code"># Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value
server {
listen 80;
server_name example.com;
root /path/to/your/root;
index index.html;
location / {
try_files $uri @prerender;
}
location @prerender {
proxy_set_header X-Prerender-Token YOUR_TOKEN;
set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
set $prerender 1;
}
if ($args ~ "_escaped_fragment_") {
set $prerender 1;
}
if ($http_user_agent ~ "Prerender") {
set $prerender 0;
}
if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
set $prerender 0;
}
#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8;
if ($prerender = 1) {
#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesn't play well with load balancing
set $prerender "service.prerender.io";
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://$prerender;
}
if ($prerender = 0) {
rewrite .* /index.html break;
}
}
}</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading"><strong>C. CDN (Cloudflare)</strong></h3>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>A <a href="https://www.cloudflare.com/learning/cdn/what-is-a-cdn/">content delivery network (CDN)</a> is software used to deliver your content globally using a global network of proxy servers. Websites with a global audience often use them to deliver web content at the same speed and performance level. Cloudflare is one of the most popular CDN services in the market.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>The installation process using the CDN (Cloudflare) method is fairly straightforward, as <a href="https://github.com/prerender/prerender-cloudflare-worker">you can find it here</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>If your website has a CDN, it is highly recommended that you use this method. Otherwise, you need to add a caching layer.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Here’s how to integrate Prerender with CDN.</p>
<p><!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} --></p>
<ol>
<li style="list-style-type: none;">
<ol><!-- wp:list-item --></ol>
</li>
</ol>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Select your website in Cloudflare:</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:image {"align":"center","id":1360,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="686" height="300" class="wp-image-1360" src="https://prerender.io/wp-content/uploads/2021/07/select-cloudflare.png" alt="" srcset="https://prerender.io/wp-content/uploads/2021/07/select-cloudflare.png 686w, https://prerender.io/wp-content/uploads/2021/07/select-cloudflare-300x131.png 300w" sizes="(max-width: 686px) 100vw, 686px" /></figure>
<p><!-- /wp:image -->
<!-- wp:list {"ordered":true,"start":2} --></p>
<ol start="2">
<li style="list-style-type: none;">
<ol start="2"><!-- wp:list-item --></ol>
</li>
</ol>
<ol start="2">
<li style="list-style-type: none;">
<ol start="2">
<li>Navigate to Workers -> Manage workers -> Create a worker</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<ol start="2">
<li style="list-style-type: none;">
<ol start="2">
<li>Copy and paste the content of <em>index.js</em> over the code editor on the left-hand side, overwriting its current content. Please note the name of the worker for later reference (top-left corner).</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:image {"align":"center","id":1361,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="670" class="wp-image-1361" src="https://prerender.io/wp-content/uploads/2021/07/misty-glitter-install-1024x670.png" alt="" srcset="https://prerender.io/wp-content/uploads/2021/07/misty-glitter-install-1024x670.png 1024w, https://prerender.io/wp-content/uploads/2021/07/misty-glitter-install-300x196.png 300w, https://prerender.io/wp-content/uploads/2021/07/misty-glitter-install-768x503.png 768w, https://prerender.io/wp-content/uploads/2021/07/misty-glitter-install.png 1351w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<p><!-- /wp:image -->
<!-- wp:list {"ordered":true,"start":4} --></p>
<ol start="4">
<li style="list-style-type: none;">
<ol start="4"><!-- wp:list-item --></ol>
</li>
</ol>
<ol start="4">
<li style="list-style-type: none;">
<ol start="4">
<li>Replace your API_KEY value with your actual API key from the Prerender dashboard, and edit the PRERENDERED_DOMAINS array to match your site configuration.</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:image {"align":"center","id":1362,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="476" height="257" class="wp-image-1362" src="https://prerender.io/wp-content/uploads/2021/07/api-key.png" alt="" srcset="https://prerender.io/wp-content/uploads/2021/07/api-key.png 476w, https://prerender.io/wp-content/uploads/2021/07/api-key-300x162.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></figure>
<p><!-- /wp:image -->
<!-- wp:list {"ordered":true,"start":5} --></p>
<ol start="5">
<li style="list-style-type: none;">
<ol start="5"><!-- wp:list-item --></ol>
</li>
</ol>
<ol start="5">
<li style="list-style-type: none;">
<ol start="5">
<li>Click on <em>Save</em>, <em> Deploy</em>, and navigate to the workers from Step 2. Click on <em>Add Route</em></li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<ol start="5">
<li style="list-style-type: none;">
<ol start="5">
<li>Edit your route to match your website configuration:</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:image {"align":"center","id":1363,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="492" height="424" class="wp-image-1363" src="https://prerender.io/wp-content/uploads/2021/07/add-route.png" alt="" srcset="https://prerender.io/wp-content/uploads/2021/07/add-route.png 492w, https://prerender.io/wp-content/uploads/2021/07/add-route-300x259.png 300w" sizes="(max-width: 492px) 100vw, 492px" /></figure>
<p><!-- /wp:image -->
<!-- wp:list {"ordered":true,"start":7} --></p>
<ol start="7">
<li style="list-style-type: none;">
<ol start="7"><!-- wp:list-item --></ol>
</li>
</ol>
<ol start="7">
<li>Click <em>Save</em>, and you’re all set</li>
</ol>
<p><!-- /wp:heading -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">Step 2: Run a Test</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>At this point, you should have Prerender installed on your website—but let’s test it to ensure everything is working properly.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>We recommend using Chrome to do the following test.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>1. Open your desired URL.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>2. Open Dev tools (CTRL + Shift + J on Windows, or Option + ⌘ + J on Mac).</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>3. Run command (Control + Shift + P on Windows, or Command + Shift + P on Mac) > Show Network Conditions.</p>
<p><!-- /wp:paragraph -->
<!-- wp:image --></p>
<figure class="wp-block-image"><img decoding="async" src="https://prerender.io/wp-content/uploads/run_show_network_conditions.jpg" alt="" /></figure>
<p><!-- /wp:image -->
<!-- wp:paragraph --></p>
<p>4. “Enabled” the Network Conditions, navigate to it, look for <em>User Agent</em>, and de-select <em>Use browser default</em>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>5. Select Googlebot from the dropdown list (Note: if you have modified the pre-defined allow list in your Prerender configuration, then use the bot you allowed).</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>6. Reload your site.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>7. Switch to the <em>Network</em> tab and look for the first connections header.</p>
<p><!-- /wp:paragraph -->
<!-- wp:image --></p>
<figure class="wp-block-image"><img decoding="async" src="https://prerender.io/wp-content/uploads/x_prerender_requestid.jpg" alt="" /></figure>
<p><!-- /wp:image -->
<!-- wp:paragraph --></p>
<p>If the response contains <em>x-prerender-requestid</em> then you can conclude that Prerender.io is working on your site and serving the request. Hooray!</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>If you’re running into problems, you can identify and <a href="https://docs.prerender.io/docs/troubleshooting">troubleshoot them using the following guide</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">Step 3: Configure Prerender</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Installing Prerender and getting it to work properly is one thing; making it work to suit your specific needs is another.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>For example, you want to ensure that Prerender only renders pages with indexing issues or set up the (re)caching mechanism.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>Here are some basic configurations you can do to Prerender. For more best practices in setting and using Prerender, visit <a href="https://docs.prerender.io/docs/11-best-practices">this document</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Indicate When You Want Your Pages to Be Cached</h3>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Prerender can automatically identify when a page has finished sending HTTP requests. Still, it’s a good idea to give it some direction so the process can go more efficiently.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>To do this, put the following HTML code into your <head> section:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"xml"} --></p>
<pre class="wp-block-syntaxhighlighter-code"><script> window.prerenderReady = false; </script></pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:paragraph --></p>
<p>Then, execute this function after your AJAX calls:</p>
<p><!-- /wp:paragraph -->
<!-- wp:syntaxhighlighter/code {"language":"python"} --></p>
<pre class="wp-block-syntaxhighlighter-code">window.prerenderReady = true;</pre>
<p><!-- /wp:syntaxhighlighter/code -->
<!-- wp:heading {"level":3} --></p>
<h3 class="wp-block-heading">Configure Your Cache </h3>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>You may have the wrong pages cached or have pages cached unintentionally. When this happens, use your middleware to whitelist or blacklist pages. Here’s how:</p>
<p><!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} --></p>
<ol>
<li style="list-style-type: none;">
<ol><!-- wp:list-item --></ol>
</li>
</ol>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Use the URL parameters section of Prerender.io to ignore specific query parameters (which will tell Prerender to ignore certain URLs). Prerender can then identify the canonical URL to be cached and then ignore the identical ones.</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Modify your middleware only to send the URLs you indicate to Prerender. </li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item -->
<!-- wp:list-item --></p>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Set Prerender to return non-200 status codes for pages that you don’t want cached.</li>
</ol>
</li>
</ol>
<p><!-- /wp:list-item --></p>
<p><!-- /wp:list -->
<!-- wp:paragraph --></p>
<p>More information on how to limit your <a href="https://docs.prerender.io/docs/10-recaching">cache can be found here</a>. You can also use <a href="https://docs.prerender.io/docs/6-api">Prerender recache API</a> to cache a URL that has been cached previously. This can be used to recache some of your pages that are often changed.</p>
<p><!-- /wp:paragraph -->
<!-- wp:heading --></p>
<h2 class="wp-block-heading">Prerender Works With Whatever Techstack You Have</h2>
<p><!-- /wp:heading -->
<!-- wp:paragraph --></p>
<p>Installing Prerender is easy and fast—and you can continue using the tech stack you have to enjoy Prerender. Simply find a middleware that matches your framework, begin the installation process, and voila! Prerender is ready to use.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p><a href="https://docs.prerender.io/docs/getting-started">This getting-started guide</a> will help you set up and get to know Prerender more, including how to control crawling and indexing, <a href="https://docs.prerender.io/docs/404-checker">how to use Prerender’s 404 checker tool</a>, and <a href="https://docs.prerender.io/docs/sitemap">Prerender’s sitemap crawler</a>.</p>
<p><!-- /wp:paragraph -->
<!-- wp:paragraph --></p>
<p>If you need help during installation, our customer support team will always have your back. <a href="https://prerender.io/contact/">You can contact us here.</a></p>
<p><!-- /wp:paragraph --></p> </div>
</div>
</div>
</div>
</div>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/how-to-install-prerender/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
</channel>
</rss>