When Your Fancy Website Design Hides Content From Google
Whilst having a modern looking website can help provide an impressive and interactive site, search engines may struggle to crawl, render and index your site. If you are relying completely on JavaScript to display key texts, links & page elements, Google could have difficulties.
JavaScript SEO is an important factor to consider when creating a website. You want to provide a website that functions well and is understood by search engines. You shouldn’t compromise your organic visibility just to make your site more visually appealing & have complex features.
How do modern JavaScript sites affect search engines?
JavaScript can be used to help developers create interactive sites. This can include dynamic content, animations, filtering features & many other advanced features. Popular frameworks used include React, Angular & Vue.
However, if a large amount of JavaScript is used to display the key content on a site, there may be issues. Search engines will initially receive an HTML file with little information. They will then have to render the JavaScript.
If the site cannot render, this can cause issues where key information on the page may not be found by search engines.
What is JavaScript SEO & why is it important?
JavaScript SEO is the process of making sure a JavaScript site is accessible and understood by search engines. This can include checking how easily the search engines can crawl pages, render scripts & understand the content.
JavaScript SEO can help highlight any issues with the site appearing differently to search engines than the actual visitor.
How does JavaScript affect how a site loads?
Traditionally websites will provide the key content within the HTML. This can be displayed instantly in the browser.
However, with JavaScript sites the server may only provide a basic HTML file. The content, navigation, images & other page elements will be loaded via JavaScript.
Whilst this can increase interactivity, there may be technical issues. If a script doesn’t load, then the full content may not be displayed.
HTML vs JavaScript Rendering
HTML provides the basic elements on a page. This includes headings, paragraphs, links & images. JavaScript can manipulate this or create extra elements.
For example, a service page may provide an almost blank page via HTML. The service description, headings & internal links will be added via JavaScript.
Whilst a visitor may view the full page if their browser is working, search engines will have to render the JavaScript. If there are any issues with rendering, the page may not provide all the information needed.
How does Google handle JavaScript?
Although Google can handle JavaScript, not all JavaScript sites will be perfect for SEO. Googlebot will crawl a URL and collect the available resources. The page may then be rendered. Google will attempt to run the scripts & understand the content.
If key resources are blocked, there are errors within the scripts or content relies on unsupported interactions, the page may not be fully rendered.
You should always check what Google can actually see.
How does Google crawl & render JavaScript sites?
Google has specific stages for crawling & understanding pages. JavaScript sites will require extra consideration.
Crawling, Rendering & Indexing
Generally there are 3 stages:
- Crawling – Googlebot will find URLs & ask for the content.
- Rendering – Google will process the page & run the scripts.
- Indexing – Google will assess what information is available & decide if the page should be indexed.
Any issues within any of these stages can affect your organic visibility. For example, the page may crawl but not display the key content.
Rendering Queue
Extra processing is needed for JavaScript. Google may add the page to a queue before running the scripts.
This means the JavaScript generated content may not be seen straight away after crawling. How long depends on how quickly Google processes the page.
Whilst JavaScript can be used, businesses shouldn’t rely on JavaScript to render content. If possible, provide key information within the initial HTML response to make it easier for the content to be seen.
How does Googlebot handle JavaScript generated content?
Googlebot can run JavaScript & process the page. However, it must have the ability to access the right scripts, stylesheets & resources.
If important JavaScript files are blocked within robots.txt or there are errors returned from the server, Google may not render the page.
Developers should ensure key resources are accessible & the important information is present within the rendered page.
When does site design affect SEO?
When the design of a website causes issues with search engines seeing key information. There are a number of ways this can occur.
Content only appears after user interaction.
Some sites may only show content once the user interacts with a button, scrolls to a certain point or interacts with something else.
For example, a service description may only appear when the user clicks a tab. Whilst this may work for users, search engines shouldn’t have to interact with the page to see key information.
Key texts should be shown within the rendered HTML.
Hidden text within tabs, accordions & dropdowns.
Tabs, accordions & dropdowns can be used to help organise large amounts of information. They can also help with the browsing experience if done correctly.
However, developers should ensure key content within these elements can be seen within the rendered HTML. If the information can’t be seen until the user interacts with it via JavaScript, search engines may struggle to see this.
Focus on making information visible.
Navigation & internal links reliant on JavaScript.
Internal links can help search engines find pages & understand the relationship between sections.
Some JavaScript sites may use buttons or events rather than traditional links. Whilst this may work for the user, there may not always be a crawlable URL for search engines.
Key navigation should use traditional anchor links so search engines can find relevant pages.
Infinite scroll without crawlable pagination.
Infinite scroll allows users to load extra content by scrolling down. This is commonly used on blogs, product listings & content heavy sites.
However, if the content isn’t crawlable, search engines may not be able to find all the items. Adding crawlable pagination or similar URLs will help search engines get further into the content.
No content in the initial HTML response.
Some pages will have a basic HTML structure. The key content will be provided via JavaScript. This can cause issues.
If the JavaScript fails or there are issues with rendering, search engines may not see all the information. Providing key headings, texts, links & metadata from the server will help reduce this issue.
Common JavaScript SEO Issues
There can be a number of technical issues with JavaScript sites causing search engines to struggle to find & understand key pages.
Client Side Rendering Issues
Client Side Rendering means much of the responsibility for showing content is placed onto the browser. If the JavaScript application fails to load, there may be little or no meaningful content.
This can cause complications with crawling & indexing. If the site is completely reliant on client Side Rendering.
Blocked JavaScript & CSS
Google needs to be able to access key resources to properly render a page. If key JavaScript or CSS files are blocked within robots.txt, Google may not understand the layout or content of the page.
Review what resources are being blocked & ensure Googlebot can access what is needed.
Canonical Tags Issues
JavaScript can change canonical tags. If there are conflicting canonical URLs between the initial response & rendered page, search engines may be confused with how to index.
Canonical tags should be consistent & show what the preferred version of each page is.
Script Errors
An error with the script may stop key elements from loading. This can cause issues for visitors & search engines.
Regular technical testing can help identify any scripts that have failed, rendering issues & resources not loading.
No internal links
JavaScript can be used to create navigation. This can cause search engines to struggle to find key URLs. If there aren’t any accessible internal links, search engines may not find pages.
Having a clear site structure & crawlable internal links can help search engines find relevant pages.
CSR vs SSR vs Static Rendering
The way a site is rendered can affect how search engines can access content. Choosing between options should depend upon website’s needs, performance, functionalities, and SEO.
Client Side Rendering (CSR)
Client-side rendering would involve rendering most of the content inside the browser. Initial responses from HTML might not have much data in them. The rest would be added using the application.
Such approach would help in building an interactive site. However, it may be difficult to achieve in practice.
Server Side Rendering (SSR)
Server side rendering will mean creating the HTML for the page at the server-side. The important content will be present in the first response itself.
This will help in making important content easily available for search engines and will lessen dependence on client-side rendering.
Static Site Generation (SSG)
Static site generation will mean creating the HTML pages during the build process. When a user or search engine requests a page, the server will send the HTML page which has been generated.
This can help provide quick content & make key information more accessible.
Which is best for SEO?
There isn’t one option that will be best for all sites. SSR & SSG can help make key information more accessible. CSR can still work if implemented correctly.
The main thing to remember is that search engines need to be able to access the same meaningful information as visitors. Choose the rendering option that will help with the functionality of the site & visibility within organic search.
How to find JavaScript SEO issues
To find any JavaScript SEO issues you should check the initial HTML response & rendered page. Even if the site looks fine within the browser, there may be issues.
Compare Source HTML & Rendered HTML
The first thing to do is compare the source HTML & rendered HTML. If key headings, paragraphs, links & metadata are only shown once JavaScript has been run, the site will be reliant on the content being rendered.
This can help you identify if there is any missing content.
Google Search Console
Google Search Console can help with checking how Google can access individual URLs. The URL Inspection tool can provide information about how the page has been indexed. You can also test the live URL.
This is a good place to check out if there's any missing content or blocked resources.
Crawl the website using Screaming Frog
Screaming Frog SEO Spider can be used for crawling a JavaScript rendered website. By comparing HTML and JavaScript rendered websites, one can find discrepancies in their content, linking and metadata.
This can also help identify any broken links, missing titles, canonical issues & pages that rely heavily on JavaScript.
Check key page elements
During an audit check that search engines can see:
- Key headings & content.
- Internal links & navigation.
- Title tags & meta descriptions.
- Canonical tags & structured data.
- Images & key resources.
How to Fix JavaScript SEO Issues
To fix JavaScript SEO issues, ensure that SEO experts work alongside developers to ensure critical information on your website is accessible. Here are some ways to do this:
Server Side Rendering For Critical Pages
Use server-Side Rendering or static generation for pages that rely on organic search traffic. This will help to ensure your critical information is delivered in HTML format so there’s less chance that search engines will miss out any important information.
Critical Information Easily Accessible
Ensure that your critical information does not require users to click any buttons, open any tabs or scroll. Ensure your important information is available without any user interaction.
Standard Navigation Using Anchor Tags
Ensure you’re using standard anchor tags for navigation throughout your website. Every critical page should have an easy to find URL.
Googlebot Can Access Resources
It is critical that your robots.txt file and server are configured in such a way that Googlebot can access your important JavaScript and CSS files. There should be no server issues that can interfere with the loading of the scripts.
Title Tags, Meta Descriptions, Canonicals & Structured Data Corrected
Make sure that you have the title tags, meta descriptions and canonicals configured properly. Make sure that there are no issues between your original HTML and the rendered HTML.
Crawl Website
Once your developers have made changes to your website, crawl your website and check your important URLs within Google Search Console. Ensure that your rendered content, internal links and meta data are available.
Final Thoughts – Beautiful Websites Should Still Be Search Friendly
Your website should offer an amazing experience for your users but still allow search engines to crawl your site. While having beautiful page designs, animations and interactive features is great, we don’t want to stop Google from finding your important information.
JavaScript SEO helps you identify issues with how your website renders, helping to improve crawlability. Performing regular technical audits and working with your developers and SEO experts will ensure that your design choices don’t impact your organic visibility.
Vipul Rajput is an Javascript SEO expert from Delhi , ensuring your website has good visibility. With over 8 years of experience and certifications from Semrush, HubSpot and Google Analytics, Vipul aims to simplify how search engines understand your website. A technically sound website doesn’t just need to look good, it needs a strong SEO foundation.
