<?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 – Dynamic Rendering 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>Sun, 30 Nov 2025 23:03:18 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=6.9.4</generator>
<image>
<url>https://prerender.io/wp-content/uploads/favicon-150x150.png</url>
<title>Prerendering for JavaScript SEO – Dynamic Rendering with Prerender.io</title>
<link>https://prerender.io/prerendering/</link>
<width>32</width>
<height>32</height>
</image>
<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 Sharing 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>If your Instagram, WhatsApp, or Twitter/X link previews show up without an image, title, or description, your audience is getting a broken first impression. On social media, which is often the first place people encounter your brand, those small link preview cards carry a lot of weight. A complete and polished social sharing link preview can be <strong>the difference between a scroll-past and a site visit.</strong></p>
<p>When your preview looks like the “Before” example below, you risk losing clicks, trust, and visibility. <strong>The good news:</strong> these issues are fixable once you understand how social crawlers interpret your website’s content.</p>
<p>This guide explains why social sharing link previews fail, how to fix them manually and with Prerender.io, and how to ensure that every shared link displays exactly as intended across platforms.</p>
<figure class="wp-block-image size-large"><img fetchpriority="high" 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></p>
<h2 class="wp-block-heading">Benefits of Optimizing Your Link Previews for Social Media Sharing</h2>
<p>Before we dive into fixing the problem, let’s highlight the importance of optimized link previews. Optimizing them isn’t just a design fix; it’s a conversion opportunity that impacts SEO, CTR, and visibility across social media. </p>
<p>The more engaging and visually appealing your links appear on LinkedIn, Twitter/X, or WhatsApp, the higher the likelihood of better business results. A consistent social share preview also reinforces your website link preview across all platforms.</p>
<p><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> This is especially true for mobile users, as <a href="https://wisernotify.com/blog/mobile-commerce-stats/" target="_blank" rel="noreferrer noopener nofollow">65% of mobile users</a> claimed to purchase something because of an influencer’s suggestion, making it important to <a href="https://prerender.io/blog/mobile-first-indexing-for-javascript/" target="_blank" rel="noreferrer noopener">optimize your website for mobile-first indexing</a>. </p>
<p>Here are a few key reasons why an optimized link preview can benefit you: </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>. This counts. And a compelling one influences user engagement and purchasing decisions. </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>
<p>So, if you want to maximize your business results, let’s first explore some signs of incomplete link previews and why they’re not displaying correctly.</p>
<h2 class="wp-block-heading">How to Tell If Your Link Previews Are Broken</h2>
<p>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 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"><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>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>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>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>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>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>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>While you can also use a term called prefetching to optimize your website’s social links, it comes with certain limitations. These include increased bandwidth and resource usage without immediate benefits, failing to execute JavaScript for dynamic OG tags, and not guaranteeing faster metadata fetching.</p>
<p>Further reading: <a href="https://prerender.io/blog/prerendering-vs-prefetching/" target="_blank" rel="noreferrer noopener">Prerendering vs Prefetching: What’s the Difference?</a> </p>
<h3 class="wp-block-heading">Open Graph Implementation Issues</h3>
<p>Another reason why your social media link preview might not display correctly is because of Open Graph tags.</p>
<p><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>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>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>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>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><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>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>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>
<h2 class="wp-block-heading">How Can I Fix My Link Previews on Social Media? </h2>
<p>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>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>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>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>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>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 Link Preview Solution as an Easy Fix</h3>
<p>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><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>
<p></p>
<h3 class="wp-block-heading">See How Social Crawlers Interact with Your Site with Prerender.io</h3>
<p><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>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 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">How Long Does It Take to Fix Broken Link Previews on Social Media?</h2>
<p>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>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>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>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>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>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>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>Start improving your social share previews today: explore our <a href="https://prerender.io/pricing/https://prerender.io/pricing/">pricing plans</a> to find the right fit for your team. You can also <a href="https://prerender.io/resources/free-downloads/site-audit-tool/">run a free Site Audit</a> to check how your content renders for social crawlers.</p>
<div class="wp-block-buttons is-layout-flex 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="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>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>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>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>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>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>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>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>Broken link previews are often a telltale sign. To know for sure, you can use a free site audit tool that measures your site’s performance for search engines. If you get a low score, that’s a clear indicator that you have JavaScript rendering issues. <a href="https://prerender.io/resources/free-downloads/site-audit-tool/">Get your free site audit here</a>—no need to book a demo, enter your credit card information, or fill out a survey. Simply enter your domain and email and you’ll get your results in minutes.</p>
<div class="wp-block-image">
<figure class="aligncenter is-resized"><a href="https://prerender.io/resources/free-downloads/site-audit-tool/" target="_blank" rel=" noreferrer noopener"><img decoding="async" src="https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/25756777/interactive-230694382796.png" alt="site-audit-cta-banner (1)" style="width:600px;height:auto"/></a></figure>
</div>
<p><a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLJuqUYkZxny4vU1O5n5SNerwkxnptj7IarpkL31GLcSZSDxitlWzun0BA3dr%2FGgf4aOE5cDeUQYbcQ6RHu9tX%2FbziRuDgMkOp5JR9SE7a9y3Ev%2BhqnkT6mFQ9Rh2qq4L1Gns7Li0d33QFCjf%2BeZ3mbtbPDrCYKZ5ZGw%2FUNKZFg%2Ba6mlHcEEqBVpxsfKMY0EiHUrBbPOBK6auOFBdeSuUjnD&webInteractiveContentId=238518924482&portalId=25756777" target="_blank" rel="noreferrer noopener"></a><a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLIC8VZjNBd7lY3Wg71JvhKy1HfwXmGAU5oiCb4nOFaRmj07yIgQaSqmUykyYr0BOeXe4TQu%2FZxy3RqZm1EbM4D5AmLv4%2Bw2M83ufc1A4Vw9AL%2FVXNMvJlRaqzJYMMduY7VpG90KQ0Q3GoMiMYNkro0DmiVn%2B7rCKW5U095mMVq6%2FJaoE0yKYLmVUPay%2BiyrZAm7SdrGcdY1tT5KtE%2BDWhoc&webInteractiveContentId=238518924482&portalId=25756777" target="_blank" rel="noreferrer noopener"></a><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><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></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>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>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>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"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcOP1a9AgvzoTCh4SNMuKRfhUllCxlEqZQQdwfHTY9qDZcVFEG0CcrP-c-BhS7q7YAPaKXy6KpLSeKA5526RbKzzzIqsptIMdAxSwTdFxQRbv-ooMfjf86b9fAOaskJJNbwWBaFYUSmSb01_nxHPk9qwrO8BZQxujy-YyGK?key=lhcNzL0hi5v57zaxIaLIYA" alt="What Causes Rendering Failure?"/></figure>
<p>Rendering failure can occur due to various reasons:</p>
<ul class="wp-block-list">
<li><strong>JavaScript errors</strong></li>
</ul>
<p>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>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>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>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><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>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>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>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>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>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>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>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><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>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>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>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"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebQ_GHoAazfiVMn4YN78qa3rHRIykMCkFl8zMLYVV_7yw4W4qkVoT1O5COwFHHwKrOpq6G4HdapY57JUTABwinPK_hrYSVc0Xl3YZRZ7zNsPV9MkSa9t6LdwZ8k79ToskXEwggPNa7WoICZOvVm_XkFmOkL_st_zSnqGWxZg?key=lhcNzL0hi5v57zaxIaLIYA" alt="Screaming Frog Dashboard"/></figure>
<p><a href="https://www.screamingfrog.co.uk/seo-spider/">Source </a></p>
<p><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>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>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><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"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdRYMc10WW56Z-k28iSOUOnpaOEpC6IaN2_rq7h00FIL3e-zUl3gDRm2Vgwp_zf0-A_Wu0MxgJ1nhAVNfn51S8n_vHVYNlrvzJdXCcm6aipjevDuZH4b5mrKRVwOxj6y4pg6V4qa69P8NjoDarnERTZWQHuoD99TY57QgwyWQ?key=lhcNzL0hi5v57zaxIaLIYA" alt="Google Search Console Dashboard"/></figure>
<p>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>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>This feature helps you detect mobile rendering failures that might not be apparent on desktop devices.</p>
<p><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"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdu79fhSdVeXLur0yqz6vN8eFrMcPogVnl3JEiIjn_RbPzansghcOhKSnzrImX1_WZ829LX2MhWfSgaehFKSBWf9W1h4MGKXX8pGkxVPDTGZc00fxci2fF5A5fgFkYLT2iVonswEzygJ0-9qJNMB4uxw_xHBDnQPAhpI52xUw?key=lhcNzL0hi5v57zaxIaLIYA" alt="PageSpeed Dashboard"/></figure>
<p><a href="https://www.seo.com/de/tools/google-pagespeed-insights/">Source</a></p>
<p><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>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>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>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>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>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>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>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>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>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>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><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>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>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><strong>1. Websites with frequent content changes</strong></p>
<p>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><strong>2. Single-Page Applications (SPAs)</strong></p>
<p>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><strong>3. Content-heavy websites</strong></p>
<p>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><strong>4. Websites with heavy client-side interactions</strong></p>
<p>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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. $90 Monthly Subscription Fee</h3>
<p>Prerender.io has <strong>no upfront costs</strong>—and you’ll be charged based on<strong> the rendered page (caching activities), not variable costs per bot request like in-house SSR</strong>.</p>
<p>Our pricing structure includes three affordable monthly plans, ranging from $90 to $990+, designed to accommodate various indexing 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>Self-built SSR often has inconsistent reliability and uptime, demanding you troubleshoot the system and fix the issues yourself.</p>
<p>On the contrary, with Prerender.io, you don’t need to worry about monitoring and upholding your rendering performance. Our dedicated team ensures that <strong>our </strong><a href="https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/"><strong>dynamic rendering solution</strong></a><strong> runs 24/7</strong>, helping you improve the crawling and indexing results of your JavaScript pages without hiccups. </p>
<h3 class="wp-block-heading">5. Pure Rendering Capabilities vs. Comprehensive Technical SEO Solution</h3>
<p>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>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>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>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>Industry leaders like Salesforce, Wix, and Walmart trust Prerender.io to help them optimize their JavaScript-based websites for search engines. 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>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>With flexible pricing plans and easy scalability, Prerender.io adapts to your website’s needs without hassle. Get your JavaScript content easily crawled, indexed, and found with Prerender.io.</p>
<p><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*d8qc75*_gcl_aw*R0NMLjE3MTU2NzQxNjkuQ2p3S0NBandsNHl5QmhBZ0Vpd0FEU0VqZUt3QjFqbG5sSnJVRU5GQ1BvM3ZNTDVVNnRZX190WWMyaGZSNy1iaVpNZHZHR2w2MlItLVZob0NLSDBRQXZEX0J3RQ..*_gcl_au*NjE1MTI0MDQ2LjE3MTY3ODk2MTUuNTgyMDUzMjE0LjE3MjE3MjI5NzAuMTcyMTcyMjk3MA..*_ga*MTM0Nzg5MDUyNi4xNjY2MDA4MDE0*_ga_5C99FX76HR*MTcyMjk0MDIxNS4yODEuMS4xNzIyOTQzMTQxLjYwLjAuMA..">Sign up today to get started!</a></p>
<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>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>Developing an in-house SSR solution can involve significant 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.</p>
<h3 class="wp-block-heading">How Does Prerender.io Compare to In-House SSR in Terms of Cost?</h3>
<p>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..">create an account for free</a>, or start with a paid plan at $90/month. Learn more about how to see the ROI from Prerender.io in the video below.</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 to See ROI From Prerender.io" width="640" height="360" src="https://www.youtube.com/embed/pctFl7-QyQs?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">What Are the Maintenance Requirements for In-House SSR Compared to Prerender.io?</h3>
<p>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>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. 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>
<h3 class="wp-block-heading">What is Prerendering, and How Does It Fix Dynamic Content SEO Issues?</h3>
<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 <a href="https://prerender.io/">Prerender for Javascript SEO</a> 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 uses dynamic rendering (which can be considered an advanced version of prerendering) and 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://lh7-us.googleusercontent.com/DdFK-uh8XU-yTANLrILNROd1Vd_8o1ne_-i0hgVe36l7pCPDfG5n8PTyVTyHth-UMum-2cU837fGk5yCR9RtUJItz-xmpD4eopnwwmZc0KCkcgJgVFTnI1Qz3N5ZhV3IEifmWJ0lkYvLdBVRyG26-A" 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><!-- /wp:paragraph --><!-- wp:heading --></p>
<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>
<p><iframe title="Prerender Seamlessly Renders JavaScript for Faster Indexing" width="640" height="360" src="https://www.youtube.com/embed/Kc20MvUvMM4?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>
<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-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 can benefit your brand? Start with a <a href="https://prerender.io/pricing/">free trial and receive 1,000 URL renders per month for free</a>.</p> </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-22a918d elementor-widget elementor-widget-text-editor" data-id="22a918d" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Have more questions about Prerender.io? Visit our FAQ page, check out more of our blogs, or watch our video below on our most commonly-asked questions.</p> </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-c19218c elementor-widget elementor-widget-video" data-id="c19218c" data-element_type="widget" data-e-type="widget" data-settings="{"youtube_url":"https:\/\/www.youtube.com\/watch?v=cXxj9Wumais&pp=0gcJCYQJAYcqIYzv","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 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 – Improve Dynamic Content Discovery with Prerender.io</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—and a great first step before implementing Prerender.io.</span></p>
<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-230694382796" style="max-width: 100%; max-height: 100%; width: 600px; height: 200px;" data-hubspot-wrapper-cta-id="230694382796"><a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLJl4H74VYUV2nTr1nwqGhQ7sFnajeA42EvtZE7BtXb6sBMm4q4BPs19sKq3Jwf3ehe%2Fv3jC3LcbgICf%2Fjb3sSzDKqYQa2zchMbgMJS7ZmTRkO%2BXk8HQ7otuGnm%2BqfeSvuWtGHonMAIXKyNad35que9maRNbtrRX5e19h8y7Pr9dXqg0dh9k5wG6oManWX8Btbj4H49pdNmRohUkLLkJZEv0&webInteractiveContentId=230694382796&portalId=25756777" target="_blank" rel="noopener"> <img decoding="async" style="height: 100%; width: 100%; object-fit: fill;" src="https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/25756777/interactive-230694382796.png" alt="Site Audit HS banner for blogs" /> </a></div> </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-crawls-and-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 <a href="https://prerender.io/pricing/">adopting Prerender today</a>. Start with a FREE 1000 renders per month!</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 doesnt 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://lh7-us.googleusercontent.com/B23CE0WDsnEqz7R3A_n5vVusAnn0mIyGFMP1PpMJIi3IZC3iBoSGGkrrDRtI7z4F5s4alRd0AtjrbSmfr7d8GPxOZ01NrLc42RsrigYBp91pI5U4nfyo2BAeQvEisPb2gmAhFlhbwQ6DTwqZ9ow6Ggw" 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://lh7-us.googleusercontent.com/3BQKS4hRHTPTlxrQElJOCNulIZw8R-op9O0QxKfvdhfhqL4kBIyn_3_oEpgYp_pEV9UeC0x4ujgQo4NAbRuq-1K8Do2gks_4q_98vKvOdXCV5YdayEJuDhUnF3kWDEmsewqBZkd7GYX_FvhzY8mhRic" 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>
<item>
<title>Explaining the Difference Between Prerendering and Other Rendering Options</title>
<link>https://prerender.io/blog/other-rendering-options-vs-prerendering/</link>
<comments>https://prerender.io/blog/other-rendering-options-vs-prerendering/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Thu, 18 Jan 2024 13:51:27 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[javascript seo]]></category>
<category><![CDATA[prerendering]]></category>
<category><![CDATA[rendering]]></category>
<category><![CDATA[seo]]></category>
<guid isPermaLink="false">https://prerender.io/?p=3557</guid>
<description><![CDATA[Explaining the differences prerendering and other options. ]]></description>
<content:encoded><![CDATA[
<p>The many terminologies in web development can be overwhelming. Yet, to choose the best solution for your website’s success, you need to know what rendering processes are available, how they differ when processing JavaScript content, and their impact on SEO performance.</p>
<p>This blog will compare various rendering types, helping you choose the ideal JavaScript tool for your website.<br></p>
<h2 class="wp-block-heading">What is Rendering?</h2>
<p>Rendering is the process of interpreting and displaying website code (HTML, CSS, and JavaScript) into visual output, such as the website’s layout, colors, fonts, and animations.</p>
<p>This process usually happens in real time whenever users access a web page. For each user interaction, the page will be re-rendered to update the displayed content.</p>
<p>There are different types of rendering, and the most common ones include:</p>
<p><strong>Static rendering</strong><br>Static rendering is the process of creating pre-generated content. This typically takes place during the build or deployment period of a website. It also means that the pre-generated files won’t change until the next build or update.</p>
<p><strong>Server-side rendering (SSR)</strong><br>As the name suggests, the rendering process (generating a full HTML page) of <a href="https://prerender.io/blog/what-is-srr-and-why-do-you-need-to-know/">server-side rendering (SSR)</a> occurs on the server when a user agent requests a particular web page. The browser only receives ready-to-display content, allowing users to see the page without additional processing on their device.</p>
<p><strong>Client-side rendering (CSR)</strong></p>
<p>Unlike SSR, the rendering for CSR happens on the browser, typically in response to user interaction. Hence, the name is <em>client-side</em> rendering. The browser only receives a minimal HTML page from the server. To display the full web page, JavaScript will be used to fetch and process any additional elements. </p>
<p><strong>Rehydration</strong></p>
<p>Rehydration happens after the initial HTML and JavaScript have been loaded on the client side. The JavaScript loops back into the HTML, ensuring the page stays interactive and dynamic.</p>
<p>Another rendering type you may also have heard of is prerendering. This will be discussed in the next section.<br></p>
<h2 class="wp-block-heading">What is Prerendering?</h2>
<p>Prerendering is a technique where the static HTML version of a web page is generated and cached in advance at build time or during runtime. These pre-built HTML pages are stored and served whenever a user agent requests them, aiming to improve website performance.</p>
<p>Prerendering is often associated with dynamic rendering. <a href="https://prerender.io/blog/how-to-be-successful-with-dynamic-rendering-and-seo/">Dynamic rendering</a> is a process of serving content based on the user agent requesting it. The rendering process usually happens on-demand, providing static HTML for bots and dynamic JavaScript pages for users. </p>
<p>To implement this, your servers must be capable of distinguishing between human users and bots, caching the fully rendered page versions, and executing the rendering process. </p>
<p>Prerendering is best combined with single-page applications (SPAs) and <a href="https://prerender.io/framework/">client-side JavaScript frameworks</a>. The goal of prerendering is to achieve fast PageSpeed (leveraging the static site delivery) while still providing a dynamic user experience.</p>
<p><strong>Related</strong>: <a href="https://prerender.io/blog/how-to-optimize-single-page-applications-spas-for-crawling-and-indexing/">Optimize SPA for crawling and indexing</a> by following this guide.</p>
<p>Here’s the <a href="https://prerender.io/comparison/">comparison of prerendering, SSR, static rendering, and hydration</a> in detail.<br></p>
<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-207737681098"
style="max-width:100%; max-height:100%; width:630px;height:189px" data-hubspot-wrapper-cta-id="207737681098">
<a href="https://cta-eu1.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLIzO85SANZbJmwKA8G49DVN8bATDFkNOzAqUlBNnd29Mc4Ka5aktd0LtNz4ny5kXeEDpmSWtSUGLhFmw6ZCmOvC5IYT5VsZxVwAk3At3hquQRFXYlgYhCu4h2RHfLq39ogZUb2Mp5WdShAZLgDeoG%2BD1nZgYtUC7XbCMZXC%2B2eT1yDbl1m9KBs7CogUZNBxN4vnyJFFOQAxx4zlq2WCEkIr1MVUnIPjtgJ3ZNg6YmA8ejD16Wbg8dP6%2BDzNncNdOPWgurKbyeANo6A%3D&webInteractiveContentId=207737681098&portalId=25756777" target="_blank" rel="noopener" crossorigin="anonymous">
<img decoding="async" alt="CTA empowering cloud case study" loading="lazy" src="https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/25756777/interactive-207737681098.png" style="height: 100%; width: 100%; object-fit: fill"
onerror="this.style.display='none'" />
</a>
</div>
<h2 class="wp-block-heading"><br>How Does Prerendering Affect JavaScript SEO?</h2>
<p>Compared to static HTML files, crawling and indexing JavaScript-based content is more complex and resource-heavy. <strong>Search engine bots can’t directly index JS dynamic content. </strong></p>
<p>The content first needs to go through the rendering process before indexing. This is why many heavy JS-based websites adopt a workaround, such as prerendering.</p>
<p><strong>Related</strong>: Learn <a href="https://prerender.io/blog/why-javascript-complicates-indexation-and-how-to-fix-it/">how Google crawls and indexes JavaScript content</a>.</p>
<p><strong>Through prerendering, JS content is rendered into its static HTML version in advance. </strong>So, when Googlebot requests it, it can seamlessly index the content. Not only does this ensure that every page element (including the vital SEO elements) is indexed perfectly, but it also <a href="https://prerender.io/benefits/faster-indexation/">cuts the crawling and indexing time</a> in half.</p>
<p>Furthermore, JavaScript is known for slowing down the page response time, compromising functionality, user experience, and technical SEO performance. Because the pre-rendered pages are cached, whenever a request is made, the page doesn’t have to load from scratch. Consequently, <a href="https://prerender.io/benefits/better-response-times/">it improves a website server response time (SRT)</a>, an SEO metric and component of PageSpeed (a Google ranking factor).</p>
<p>In addition, prerendering also improves the following Core Web Vital scores, a set of crucial technical SEO metrics:</p>
<ul class="wp-block-list">
<li><strong>Faster LCP (</strong><a href="https://web.dev/articles/lcp"><strong>Largest Contentful Paint</strong></a><strong>)</strong><br>When users access a page, they receive ready-to-serve static files, leading to quicker rendering and improved LCP metrics.</li>
<li><strong>Shorter FID (</strong><a href="https://web.dev/articles/fid"><strong>First Input Delay</strong></a><strong>)</strong><br>Since the browser has less work to do on the client side, it can quickly display the page and respond to user interactions without needing additional processing. Consequently, the FID is improved.</li>
<li><strong>Better CLS (</strong><a href="https://web.dev/articles/cls"><strong>Cumulative Layout Shift</strong></a><strong>)</strong><strong><br></strong>Because the content isn’t generated per request, it minimizes layout shifts, leading to better CLS.</li>
<li><strong>Lower TTFB (</strong><a href="https://web.dev/articles/ttfb"><strong>Time to First Byte</strong></a><strong>)</strong><br>There is less data fetching required in static rendering pages, resulting in reduced server load and improved TTFB, which contributes to faster page loading times.</li>
</ul>
<p>Now, what are the available prerendering solutions?</p>
<p>As an enterprise SEO rendering solution trusted by 65k developers and marketers across the globe, <a href="https://prerender.io/">Prerender</a> is an excellent choice.</p>
<p>This JavaScript SEO tool renders heavy JavaScript pages into static HTML files within seconds. </p>
<p>Then, the tool will feed this ready-to-crawl content to the search engine bot, facilitating a seamless crawling and indexing process. As for requests from human users, they are redirected through the standard server routes, allowing them to enjoy the interactive JS web elements.</p>
<p>With a prerendering tool like Prerender, you’ll have the best of both worlds: an optimized JavaScript SEO website for crawlers and an excellent web experience for users! </p>
<h2 class="wp-block-heading"><br>Solve JavaScript SEO Issues with Prerendering</h2>
<p>Understanding the differences between various rendering processes, what prerendering is, and how prerendering can address the JavaScript SEO challenges can help you make informed decisions in improving your website performance.</p>
<p>Compared to standard SSR, hydration, and static rendering, prerendering comes with more benefits. For starters, you don’t need to change your tech stack to <a href="https://prerender.io/blog/how-to-install-prerender/">install Prerender</a>. As a plug-and-play solution, it requires near-zero development time and costs. And when your website demands more prerendering service, we grow with you. Simply contact us to adjust your plan.</p>
<p>Prerender helps you balance healthy SEO scores and an immersive user experience—a smart solution to fix enterprise SEO rendering issues. <br><a href="https://prerender.io/pricing/">Start with Prerender today!</a></p>
<h3 class="wp-block-heading"><br><strong>Explore more resources about Prerendering</strong></h3>
<ul class="wp-block-list">
<li><a href="https://prerender.io/blog/dynamic-rendering-for-react-websites/">How to Make Your React Website Faster with Dynamic Rendering</a></li>
<li><a href="https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/">How to Deal with Partially Rendered or Empty Pages</a></li>
<li><a href="https://prerender.io/blog/how-to-make-your-angular-js-apps-discoverable-in-search/">How to Make Your Angular.js Apps Discoverable in Search</a></li>
<li><a href="https://prerender.io/blog/when-you-should-consider-dynamic-rendering/">When You Should Consider Dynamic Rendering</a></li>
<li><a href="https://prerender.io/blog/a-guide-to-prerender-process-and-benefits/">A Guide to Prerender’s Process and Benefits</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/other-rendering-options-vs-prerendering/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>How to Find and Fix Partially Rendered JavaScript Pages</title>
<link>https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/</link>
<comments>https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/#respond</comments>
<dc:creator><![CDATA[Prerender]]></dc:creator>
<pubDate>Thu, 07 Dec 2023 11:57:49 +0000</pubDate>
<category><![CDATA[Prerendering]]></category>
<category><![CDATA[dynamic rendering]]></category>
<category><![CDATA[javscript]]></category>
<category><![CDATA[prerendering]]></category>
<guid isPermaLink="false">https://prerender.io/?p=3463</guid>
<description><![CDATA[Find out what partially rendered pages mean and how to fix them. ]]></description>
<content:encoded><![CDATA[
<p>Content that Google can’t render is effectively invisible to search engines. No matter how compelling your pages are, if their content isn’t indexed, it won’t contribute to your search engine rankings.</p>
<p>Worse, partially rendered pages—which often happen to JavaScript-generated content—can be misinterpreted as thin content or even spam, potentially harming your SEO. </p>
<p>In today’s JavaScript SEO article, we’re going to explore the causes of partially rendered or empty pages and provide practical solutions so Google can read and index all of your pages properly.</p>
<h2 class="wp-block-heading">What are Partially Rendered (JavaScript) Pages?</h2>
<p>Partially rendered pages are web pages that Google can’t render completely due to <strong>crawling budget constraints</strong>, <strong>poor critical rendering path optimization</strong>, or many more technical SEO variables.</p>
<div class="wp-block-image">
<figure class="aligncenter"><a href="https://prerender.io/resources/free-downloads/white-papers/crawl-budget-guide/?utm_source=blog&utm_medium=banner&utm_campaign=crawl-budget-guide"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXca9az-AHr7VuyZ9r3jeZ8oQdzYWaOvDvah3f1mY07uw_EJUdi451NifppBIRBC0azbAQYyamKf8Q-On1Ds15MVmE2J9LiOOOznATFy3ChIcg7DxLunEplZZsLUdXCZq9T65_s7IA?key=2YYtTe3v-g4JZuHCeyDgKd8t" alt="Prerender's ebook on how to optimize your crawl budget effectively."/></a></figure>
</div>
<p></p>
<p>Partially rendered pages occur when Google can index some, but not all, of a page’s content. This often happens with JavaScript-heavy websites.</p>
<p>While Google can typically render and index simpler HTML content, complex JavaScript, which requires more processing power (crawl budget), can be problematic. <strong>This often leads to incomplete indexing, with essential content, internal links, and other critical SEO elements missing from Google’s index.</strong></p>
<p>Partially rendered pages put your site at a disadvantage, as these missing content and SEO elements can significantly impact your search rankings. In most cases, when websites have rendering issues across the board, it’s common for their URLs not to be indexed.</p>
<p><strong><em>Note</em></strong><em>: There are also scenarios where your pages appear empty because Google fails to render your pages completely. That said, it’s not common for Google to index blank pages.</em></p>
<p><strong>Related</strong>: discover your site’s rendering performance by <a href="https://prerender.io/blog/why-rendering-ratios-matter-for-seo-performance/">calculating your render ratio</a>.</p>
<h2 class="wp-block-heading">Why Does Partial Rendering Happen?</h2>
<p>We’ve touched on the most common reason for partial rendering above. Let’s dive deeper into other causes that can cause incomplete rendered content. This includes, how your websites are built (a heavy JavaScript-based website is prone to partial rendering), technical SEO factors, and Google’s limited resources.</p>
<h3 class="wp-block-heading">1. You’re Blocking Critical Resources Through Your Robots.txt File</h3>
<p>It’s a common mistake to stop Google from accessing JS, CSS, and other files to “save crawl budget.” The idea behind this is to force search engines to crawl only HTML files, which is where most sites’ content is.</p>
<p>However, for sites using JavaScript frameworks or injecting dynamic content into the page, this means Google won’t get the necessary files to build your page correctly and will miss all that extra content.</p>
<p>For single-page apps (SPAs), it is even worse. If Google can’t crawl JS files, it’ll see all your pages as blank files because there’s no content on the HTML template before JavaScript is executed.</p>
<p><strong>Resource:</strong> <a href="https://prerender.io/blog/robots-txt-and-seo/">Robot.txt SEO: Best Practices, Common Problems & Solutions</a></p>
<h3 class="wp-block-heading">2. Poor JavaScript Optimization</h3>
<p>Google needs more resources to render a JavaScript page than HTML static ones. This is a fact, and there’s no way around it.</p>
<p>It also means that your crawl budget suffers the consequences.</p>
<p>If you are not <a href="https://prerender.io/blog/crawl-budget-seo/">using your crawl budget efficiently</a> and helping Google as much as possible, Google will probably deplete your crawl budget before rendering the entirety of your page.</p>
<p>That’s because JavaScript is resource-intensive and render-blocking, so before the crawler deals with it, it can’t move to the next step and render the rest of the page.</p>
<p>So, optimizing rendering and JavaScript, as a whole, is fundamental.</p>
<p><strong>Resource:</strong> <a href="https://prerender.io/blog/why-javascript-complicates-indexation-and-how-to-fix-it/">Why JavaScript Complicated Indexation</a></p>
<h3 class="wp-block-heading">3. Low-Quality Prevents Google From Rendering</h3>
<p>While still a theory, there’s evidence suggesting Google might prioritize certain sections of a web page layout over others, regardless of whether the content is rendered via HTML, CSS, or JavaScript. Onely conducted an experiment and found that Google may give less weight to content in certain locations on a page.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/XMUXZWMX1_t5J2JVLL954AZw1dFdU9Ks8HWQpFpVcKjYT2AwrVEEAlJ0tBR8WuYtTWyEauR5bq3g3uThWUKT-R2MTQ9kDVbxuu05RRvqJrMkYkb4_RKEbNpug4tPwn4THc5wC-vyAEHjqX2uSP9MLYg" alt="Onely experiment on crawling"/></figure>
<p>To summarize the study, they found that Google is trying to determine which sections contain the page’s main content to index and ignore some others, potentially to save resources and be able to index as much critical content as possible.</p>
<p>How can you plan your site’s architecture if Google randomly ignores sections?</p>
<p>This is a tough one, but it’s also a reality.</p>
<p>If we have to summarize why Google struggles with JavaScript, it’s because JS just is much more demanding than static HTML.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/ufH5FDUNKXubJvDzrenHKFNROuShXFzaif1-kRxe7EwNplIij0ma9dD7zwG2f-X0YpKEzR5sUhdyf9VqSX27ZQ7YQdbi9Wp2IFToGzWHfGAQDPs_Hgaptq_n5IrazcSOUg3H25wSnIoU7xOt7tTtB-g" alt="Onely statistic on rendering resources"/></figure>
<p>Source: Onely</p>
<p>Dynamic content takes up to 20X more resources to render than plain HTML – no wonder Google is looking to cut some corners.</p>
<h2 class="wp-block-heading">How to See If You Have Partially Rendered Pages</h2>
<p>Let’s focus on the two most straightforward ways to test your website’s rendering to see your content as Google does.</p>
<h3 class="wp-block-heading">1. Test Your URLs Using Search Console</h3>
<p>The first strategy is using the URL inspector within Google Search Console (GSC).</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/l6MG5HvccqATDS3U9xkEeGN8Sqf-6-8d0KqiMltHSL006clLfhvgzHOaVikIEAhlG4kDntFebhSBEy8sb27olHpfqHXkY8LsQ1zbgr_1uY6AHJf_kk-F6HnqnorCtOdO9bmWbodutI_9URsSTx1Ls3Y" alt="Google Search Console URL inspector"/></figure>
<p>Submit the URL you want to test and click on “TEST LIVE URL” on the right side of your screen. </p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/9hc3esBuV2sLQUsHAjRhtBp5_4p4x-pb1CNVL8XC_GQSTBx5R1TY_o-JVt8hSSJYnEhaq1hZd6xjYvIkhKVLUmX1_gg7soC74QB0nqPxlxGChDu0WxriWJdX1v0NBRT4Qk1i01TSWhjHTtSqFmbyUls" alt="Testing Live URLs in Google Search Console"/></figure>
<p>It’ll request your page, as the standard crawler does, and provide details about your page.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/ICu9o1rVr9elSiAzaXDEHEfCMHkwSiOnj-jKYuq8r0Xb6rlqUlpg0r6ibQ9g64OLnopNgeH2bXrZaOAOW6yjPd5cKagi2HWMV5gVDTyIz3GWtHMgT8NWshCZ3LMFBEAiiid76QfI07hfR0cZwwPVwd4" alt="Page indexing results in Google Search Console"/></figure>
<p>After the test, click “VIEW TESTED PAGE” to see the details of your rendered page.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/gD4UG8OnSoc-_f0QQrAOj7__1bhTkRkOlI21AaojpFY5lWx6DFH-d4pcBEuxFqEM7vs4Iq8XB0t7AspEiPUNOoNniCZE9j98Oe7SF_RsjoRrVRaruhQ8scmB0idV22EHW1qXN5ReI7yQZpZeg4RqaS0" alt="View tested page in Google Search Console"/></figure>
<p>It’ll show you the HTML rendered, a screenshot of the page, and details like HTTP response and JavaScript console messages.</p>
<p>All of this information is useful, but in this case, you want to look at the screenshot and the HTML fetched.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/uTiq_WoWQRDE3M73PwWiqHV1JrvGdOUjP5FaAPcBp1dlXZMX3VNTu42RKDTXgRPEeY361s8IWH9TlreredUNFEiIeVcFIRFRLc3Zs1WfZKScrT5-I27dtZbGu1o9m48rPchFI4JgdOzvnON4Kse2ZfY" alt="Example of tested page in Google Search Console"/></figure>
<p>The screenshot will show how much of the page is rendered before the test is completed. There’s a good chance it won’t take a screenshot of your entire page but don’t worry.</p>
<p>What matters the most is that the above-the-fold content is completely rendered, and the layout works appropriately. If you are seeing missing content or layout issues at this stage, it’s time to optimize your critical rendering path to prioritize above-the-fold content.</p>
<p><strong>Note:</strong> If your above-the-fold content isn’t rendered, there’s a big chance the rest of your content isn’t as well.</p>
<p>The next thing to check is whether or not your content is within the rendered HTML.</p>
<p>We’ll take the following sentence from our FAQ section for this example.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/TVaMD8WX38fjFPFPrEUELKml9C7YrFoy5pzhjyk43ghCmZ1j-LjORlbD_RQ3h_waAIC3NLmtRGgHDuRRVKpXdnc0rsbsLAD7GDvrH_X_lTV1gKq064a6USf2lJ5HFdSqsZpLCR61NksoxVN5rUSPNVw" alt="Prerender FAQs"/></figure>
<p>This section’s content is hidden and doesn’t appear on the screenshot, so it’s a good candidate for the test. That said, you should copy a fragment of text that’s only visible after JavaScript is executed. If you can find it, then Google can as well.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/UPR3cMV2KlVT5pMl20w1zSJHrquxqwegR-EszimBRZ5fyvbbsyhMAgLOjiBHg_WBbHLKPrqpfuFBEKwjly2mkwuy7lsNYqFimqJUZZhBwtYDF2_vRxLF2aWahCG3n78AcDeRul1ByvTtGcwSlWPifYg" alt="JavaScript code - evaluating TTV"/></figure>
<p>Do this for every page type or template you’re using, and you’ll be able to determine how much of your page is being rendered and what sections aren’t.</p>
<h3 class="wp-block-heading">2. Using Google Search</h3>
<p>Here’s a little trick you can use to see if Google is indexing a piece of text or not. Navigate to Google and use this formula for your search</p>
<figure class="wp-block-table"><table><tbody><tr><td>site: <a href="http://www.yourdomain.com">www.yourdomain.com</a> “the text you want to search for”</td></tr></tbody></table></figure>
<p><strong>Note:</strong> Use the version of your site that’s getting indexed. In our case, using the “www” will return nothing.</p>
<p>Here’s an example using the same text fragment as before:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/xm9gGOVNHvCK8wIAvzfoTNam-ufFSZycOmY6ngiezAWVZOq5hffkaQAEnrjLT8KMwNvLlv23GEZ-vm3t8zl1e5uFulmqKrlFKNaS-ebLcIoWLN-bDKbWXh29SJol06LkGakEcbMkxhe2j4vzxfHC68U" alt="Indexed fragment "/></figure>
<p>This means that Google has rendered and indexed the fragment.</p>
<h2 class="wp-block-heading">How to Fix Partially Rendered (and Empty) JS Pages</h2>
<p>To fix partially rendered pages, waiting for Google to do something about it shouldn’t be your first approach. Instead, you must solve the JavaScript dilemma.</p>
<h3 class="wp-block-heading">1. Site Optimization is Critical</h3>
<p>Creating the perfect conditions for Google to crawl, render, and index your pages properly requires a solid technical SEO foundation, clear site architecture, and UI/UX design to:</p>
<ul class="wp-block-list">
<li>Ensure content loads fast</li>
<li>URLs (even deep ones) are easy to find</li>
<li>Provide the best user experience possible</li>
</ul>
<p>Here are some resources you can use to guide your efforts:</p>
<ul class="wp-block-list">
<li><a href="https://prerender.io/blog/how-to-optimize-your-crawl-budget-with-internal-links/">How to Optimize Your Crawl Budget with Internal Links</a></li>
<li><a href="https://prerender.io/blog/how-to-find-and-eliminate-render-blocking-resources/">How to Find and Eliminate Render-Blocking Resources</a></li>
<li><a href="https://prerender.io/blog/how-to-avoid-missing-content-in-web-crawls/">How to Avoid Missing Content in Web Crawls</a></li>
<li><a href="https://prerender.io/blog/mobile-first-indexing-for-javascript/">How to Optimize Your Website for Mobile-First Indexing</a></li>
<li><a href="https://prerender.io/blog/spa-javascript-seo-challenges-and-solutions/">7 Common SPA SEO Challenges and Solutions</a></li>
</ul>
<p>These optimizations will do more than help with rendering. They’ll help you make Google fall in love with your site – which is super important for your SEO campaign.</p>
<p>However, that’s the hard part. The easiest part – and most impactful – just takes a couple of hours.</p>
<h3 class="wp-block-heading">2. Use Dynamic Rendering with Prerender</h3>
<p>Prerender is a plug-and-play solution that takes complete care of the rendering process for search engines just by <a href="https://prerender.io/blog/how-to-install-prerender/">installing the middleware that matches your website’s tech stack</a> and submitting your sitemap through your dashboard.</p>
<p>From there, Prerender will crawl your pages, generating and caching a fully rendered and functional snapshot of them. When a search bot requests one of these pages, Prerender will send the 100% ready-for-indexing snapshot, removing the barrier of JavaScript from the root.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/bdY6hfspCNV0RE9MxXT53-y3cjP_QXIeZIPfV9mIQVMMvkHVNM5JScGq8RDIxhXWwORU_ox-gpVE7b2gse-rI6PY1Ow8Ry3Uz9ZbtBrdb-T88UegJrS3mdax5oxM0JezxyHjuNo8nKmC8RDFY65KQeo" alt="Prerendering process"/></figure>
<p>Because the snapshot is fully rendered (including 3rd party scripts), your pages will gain near-perfect page performance scores (including core web vitals) and a server response time of 0.03s average.</p>
<p>No more rendering limitations holding your site back. Google will be able to index 100% of your content every time.</p>
<p><a href="https://prerender.io/blog/a-guide-to-prerender-process-and-benefits/">Learn how Prerender works in more detail</a>.</p>
<h2 class="wp-block-heading">Prerender.io Ensures 100% Rendered Pages</h2>
<p>While some SEO experts and developers recommend DIY solutions like server-side rendering (SSR), static rendering, and hydration to address partially rendered JavaScript pages, each of these approaches has its own trade-offs, including cost and technical complexity.</p>
<p>We may be biased, but we believe Prerender offers a superior solution. Unlike SSR or hydration, which requires you to maintain your own server, Prerender handles server maintenance for you. Our pricing starts at just $90 per month, making Prerender the best JavaScript rendering solution to mitigate partially rendered or indexed pages.</p>
<p>Check our comparisons page for a detailed breakdown of <a href="https://prerender.io/comparison/">how Prerender compares to other solutions</a>, and the cost and resource comparison of implementing i<a href="https://prerender.io/blog/in-house-ssr-vs-prerender-io-a-benefit-and-cost-comparison/">n-house SSR vs. the plug-and-play Prerender.io JS rendering solution</a>.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe-DQGmJeAH2KUKI7C4NdKYRSeti9yVAoPKbSJgB14USUutdN10PTXRhY4lVw4-Y_diTOkdpJA_hRRSI3ZxTOYI8lGYxBrw-FJBWTUQMU0ZXf2AolKmpwmKZMybGwPH5RPaXoMMxg?key=2YYtTe3v-g4JZuHCeyDgKd8t" alt="Comparison of Prerender.io vs SSR vs Static Rendering vs Hydration"/></figure>
<p><a href="https://prerender.io/pricing/">Try Prerender free</a> for your first 1,000 renders and see the improvement we can make to your rendering performance.</p>
<p>See you in the SERPs!</p>
<h2 class="wp-block-heading">FAQs on Partially Rendered Pages and Their SEO Effects</h2>
<p>Answering some of the most common questions about JavaScript rendering, partially rendered JS pages, and Prerender.io.</p>
<h3 class="wp-block-heading">1. Why Does Partial Rendering Often Happen to JavaScript Websites?</h3>
<p>Google’s indexing process for JavaScript-heavy websites involves two steps: first, crawling, and then rendering the JavaScript to see the full content. This rendering step can take weeks or even months, while the initial HTML is often indexed quickly. This discrepancy often results in pages being partially rendered and indexed, hindering their SEO potential and traffic generation, as Google doesn’t immediately see the complete content.</p>
<p>Learn more about <a href="https://prerender.io/blog/how-prerender-renders-javascript-websites/">the JavaScript crawling and indexing process here</a>.</p>
<h3 class="wp-block-heading">2. How Does Prerender Solve Partially Rendered JavaScript Pages?</h3>
<p>Prerender renders JavaScript pages into a ready-to-index version (HTML) and saves them as caches. This rendering process can be set to be ahead of search engine crawler requests (hence the name of ‘pre-render’) or on the fly. Prerender then feeds the HTML version to crawlers, allowing them to easily understand and index its content perfectly and quickly.</p>
<p><a href="https://docs.prerender.io/docs/how-does-prerender-work">Discover more about Prerender and its rendering process here.</a></p>
<h3 class="wp-block-heading">3. Can Crawl Budget Cause Partially Rendered JS Pages?</h3>
<p>Yes, a limited crawl budget can lead to partially rendered JavaScript pages. If Googlebot runs out of its allocated crawl budget before fully rendering and indexing your JavaScript content, the process will stop, leaving those pages only partially indexed.</p>
<p>You can manage your crawl budget by <a href="https://prerender.io/blog/robots-txt-and-seo/">using robots.txt to prioritize important pages</a> or, more effectively, by using a solution like Prerender, which enables Googlebot to quickly index fully rendered pages, thus optimizing crawl budget usage.</p>
]]></content:encoded>
<wfw:commentRss>https://prerender.io/blog/how-to-deal-with-partially-rendered-or-empty-pages/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
</channel>
</rss>