Website Rendering Or How to fix a JavaScript Site: Guide

JavaScript Frameworks

From a usability perspective, JavaScript frameworks are fantastic because they’re convenient and fast. However, there’s a catch. Most sites using these frameworks face ranking issues because Googlebot might not see all the elements of the HTML document; for it, they might as well not exist.

This leads to common questions from clients or beginner SEO specialists like:

“Is there something wrong with our domain? We only rank for branded queries. We’ve posted over 100 links, and have great SEO texts, but our positions are still zero.”
“Our site is beautiful and fast, but pages keep dropping out of the index. Everything is unique and useful, but we don’t know what to do.”
“Our page is in the index, but our text doesn’t rank,” and so on.

Here are some of the most popular frameworks that often employ these techniques:

React: This framework is frequently used with Server-Side Rendering (SSR) to improve indexing by search engines and loading speed. Libraries and frameworks like Next.js make it easier to implement SSR with React.
Angular: Angular Universal is a technology that allows Angular applications to be rendered on the server. This enhances loading speed and search engine optimization.
Vue.js: Vue.js can also utilize SSR, particularly with the help of the Nuxt.js framework, which simplifies the process of setting up SSR for Vue applications.
Svelte: Can use SSR to enhance performance and SEO.
Backbone.js, Ember.js, and others: Older or less popular frameworks can also use SSR, though it might require a more complex configuration.

Sites using JavaScript frameworks often require Server-Side Rendering (SSR) or Pre-Rendering to ensure better compatibility with search engines and to provide a superior user experience. These techniques help in rendering the HTML on the server side, making the content more accessible and indexable by search engines, which typically struggle with JavaScript-heavy sites. This approach not only aids in SEO but also enhances the overall performance and speed of the site, contributing to a more seamless user experience.

Therefore, our task as SEO specialists consists of two things:

Determine if there is a rendering problem.
Provide recommendations for their resolution.

Tell us about your project

And find out how our SEO will help your business reach a new level

What should a search engine see on a website page for it to be competitive and rank well?

Search bots, such as Googlebot, focus on certain elements when indexing web pages that help them understand the content and structure of the page. Here are the key elements they pay attention to, and you should ensure they are accessible to the bot:

HTML Content: Bots read the HTML elements of a page, so all main content (text, images with alternative texts, links) must be available in HTML.
Meta Tags: This includes header tags (for example, <title>, meta <description>), which help determine how the page will be displayed in search results.
Header Tags (H1, H2, H3…): They are important for structuring content and help search engines understand the hierarchy and organization of content on the page.
Alt Attributes in Images: They are important for SEO, as they describe the images and help search engines understand what is depicted in them.
Structured Data (Schema.org): This helps search engines better understand the content and context of the page, and can also affect how the page appears in enhanced search results.
Internal and External Links: Links help search engines determine the relevance and authority of a page, as well as understand the structure of the site.
CSS and JavaScript Files: Although search engines can process some JavaScript, the main content and navigation must be accessible without executing it.

How To Find Website Rendering Issues

Tools You Will Need

Web Developer (extension for Google Chrome)
1000 Bots (extension for Google Chrome, an alternative to Web Developer)
Google Search Console
Rich Result Test
“Cache:” Operator
Your attentiveness:)

Symptoms That a Website Has Rendering Issues:

If a website has rendering issues, several symptoms can indicate this problem:

Content Missing in Cached Version: When viewing the cached version of the site (using cache:websiteurl.com in Google), if significant content is missing or different from what you see in a regular browser, it suggests rendering issues.
Poor Search Engine Rankings: If the website has high-quality content but still ranks poorly in search results, it could be due to search engines not being able to properly render and index the content.
Google Search Console Warnings: Google Search Console might show crawl errors or warnings indicating that Googlebot is having trouble accessing or rendering the site’s content.
Incomplete Text-Only View: In the text-only version of the cached page, if key text, headings, or links are missing, it’s a sign that these elements are not being rendered properly for search engine crawlers.
Slow Loading Times: Excessive loading times can indicate that the site’s JavaScript or CSS is hindering the rendering process.
JavaScript-Dependent Content: If the site relies heavily on JavaScript to display content, and this content doesn’t appear in the text-only cache view, it’s a sign of rendering issues.
Discrepancies in Structured Data: If structured data (like Schema.org) is not being recognized or is inconsistent in search engine results, it could be due to rendering problems.
Inconsistent SERP Snippets: If the snippets in search engine results pages (SERPs) don’t match the actual content or meta descriptions of the site, it could be a rendering issue.

If you have already encountered something similar, then the following tips will help you to confirm your suspicions.

How Does it Look in Practice?

The first method is the simplest:

Take your website, for example, we will use bitcasino.io, for example.
Look at its cached page, for this, you need to enter <cache: + URL of the page>. Here’s how it looks: cache:https://bitcasino.io.
Then, go to the text version of the page:

Web page cache

And we see:

Internal linking and headings H1-H3 are displayed in the source HTML

We check:

Internal and external links – checked
Headings H1, H2, H3… – checked

The view of the text with placed headings is the view in the Google cache

SEO text – checked

Next, we open the code:

The purpose of the "Title" tag in the page code

The “Title” meta tag is present in the page’s source code.

The "Description" meta tag in the source code of the page

The “Description” meta tag is present in the source code of the page.

Description of the picture, "Alt", in the site code.

There is only one Alt for the company logo. Ideally, all images should be in the original HTML, but in this case, they are not. It would be nice to be able to improve it, but without harming the site’s loading speed.

Let’s go to the Rich Result Test.

Rich Result Page Test

Structured data markup – absent

Shirt Summary

The page has most of the elements important for its indexing and Googlebot. But lacks structured data markup and alt text for most images. In the context of this website, it may not be critical, but if these elements are implemented, the results could be improved. Especially for those pages that rank low.

Example Of A Site That Has Ranking Problems

For obvious reasons, we cannot name the site, but for a general understanding, screenshots will suffice.

Main page:

The main page of the site, which is not indexed

You say there can be many reasons… So let’s use the Web Developer tool and disable JavaScript.

Turn off Java Script

Reload the page and see.

View of the page with JavaScript disabled

As you can see, there are not many elements crucial for the correct reading of the page by Googlebot.

Additionally, we remove styles to see the content that is accessible to Googlebot.

Page view with JavaScript disabled and styles removed

As you can see in the screenshot above, search bots can only see the logo and two anchors. However, here is what is on the page when JavaScript is enabled:

A blurred screenshot of a page with a schematic description of the content on the page.

This page has a low potential for receiving traffic because key elements of the page are not present in the source HTML. When it comes to SEO, it is necessary to create a technical task and make the necessary edits.

Still don't know how to reach the TOP of Google Search Results?

Order a free consultation and start solving all your SEO problems today!

let us show you how

How To Fix Rendering Issues in 5 Steps

Step 1: Identify Rendering Issues:

Use browser developer tools to inspect the page. Look for layout problems, missing elements, or content not displaying as intended.

Step 2: Validate HTML and CSS:

Ensure your HTML and CSS code is valid. Use online validators to check for syntax errors or issues.

Step 3: Specify elements in the <head> section of the HTML document (for all types of pages):

<title></title>
<meta name=”description” content=””>
<meta charset=”utf-8″>
<meta name=”viewport” content=””>
<link rel=”canonical””>
<meta name=”robots” content=””>
<link rel=”alternate” hreflang=”” >
<style>all critical styles necessary for building the correct page layout</style>

Important! In the HTML DOM of the adaptive version, all menu items must be present, even if they are not visually displayed to users. This is necessary for the correct indexing of the site by search engines in the conditions of Mobile First Indexing and for internal linking.

Make Sure That Page Elements for Rendering and Providing to the Search Bot on all Types of Pages:

Side menu
Language switches
Logo
Login/registration buttons
Internal linking block in the footer
Text description

Make a detailed description for developers. Ideally, you should describe all elements for each site page template.

Important! There may be more elements in your case, so be careful.

Step 4: Set Prerender Settings

For the correct delivery of code to search engines and users, dynamic rendering needs to be configured.

Prerender Settings Schema

You can find more detailed information about this configuration at this link – Dynamic Rendering Configuration
Detection of search bots – Verifying Googlebot
Googlebot crawlers that require rendering configuration – Overview of Google Crawlers

Step 5: After configuring rendering, the following rules should be applied:

After rendering static HTML, it is sent only to search engine bots. Regular visitors receive the version with JavaScript.

Differentiation between these two groups can be achieved using cookies. Rendering should be configured for User Agents such as Googlebot Desktop and Googlebot Smartphone. Detailed information on their identification can be found in the Google documentation.

Conclusion

In conclusion, navigating JavaScript website rendering challenges demands a comprehensive understanding of rendering techniques, frameworks, and effective diagnostics. SEO specialists play a pivotal role in optimizing websites for search engines, ensuring not only visibility but also a seamless user experience in the evolving landscape of web development.

It is important to make your site beautiful and user-friendly, but if Search Engines cannot interact with it, you can waste a lot of time-solving these errors. Therefore, it is better to consult with specialists before developing a new project that should be at the TOP of the Search Results.