JavaScript Rendering & SEO
Search engines treat JavaScript content on a website differently from typical HTML content and will render it separately. As the use of JavaScript on the web increases due to the number of features it makes possible, it is important to understand how search engines view this content and optimize for this. Check out our “Hamburger Analogy” an introduction to client-side vs. server-side JavaScript rendering.
Our SEO Office Hours notes and video clips compiled here cover JavaScript-related SEO best practices from Google, along with notes on the latest advancements to their rendering engine.
AJAX Content Loaded After 20 Seconds Won’t Be Seen by Google
Content not loaded onto a page via AJAX immediately, probably won’t be seen by Google. John says 20-30 seconds is too long.
Fetch and Render Will Show Rendered HTML
To help diagnose issues with JavaScript based sites, Google is working on changing Fetch and Render to show the final HTML instead of just showing an image, but John couldn’t give a timeframe for this to be released.
JavaScript Rendering Can Take a Day Longer than Crawling
Google’s JavaScript rendering of pages might not happen for a day after the HTML is crawled
Pre-rendered Pages Can Be Easier to Work With
Although it should not impact search performance, pre-rendering pages can make it easier to test a site with SEO tools.
Fetch as Google Content Shows a More Limited Page Size than Web Search
Fetch as Google is limited to a couple of hundred KBs, which is lower than the amount accepted by Web search.
Google Stores Undrendered and Rendered Content
John suggests that Google is storing the content for both unrendered and rendered content separately, and both versions could be used for matching against search queries.
Markup and Content can be Loaded with JavaScript
Reviews and markup can be included on the page via JavaScript if the pages can be fully rendered by Google.
Hreflang Can be Added with JavaScript
It’s fine to use JavaScript to insert the hreflang tags, provided they are visible in the correct part of the page when rendered.
JavaScript Rendering Has a Timeout
If pages cannot be JavaScript rendered within a ‘reasonable’ time, then the rendering might fail and Google will revert to the HTML version.
Don’t Cloak Lazy Loading Images
If images are not visible to Google because they are lazy loading or below the fold, you shouldn’t be cloaking them for Google.