We have a lot to cover, so let’s jump right in!
- Zoom (Brand #1) Analysis:
- Analysis of Zoom’s website reveals differences between raw HTML and rendered HTML, such as missing hreflang attributes in raw HTML.
- Instances like missing H1 tags in raw HTML can impact SEO and hinder website performance.
- Asana (Brand #2) Analysis:
- Similar to Zoom, Asana faces issues like differing page titles in raw HTML and rendered HTML.
- Neil Patel (Brand #3) Analysis:
- Neil Patel’s website also exhibits attributes displayed in rendered HTML but not in raw HTML.
Before we dive in, though, here’s a crash course in HTML rendering and JS rendering.
We’ll be discussing two types of HTML formats in this post. The first is raw HTML and the second is rendered HTML.
Now you may be asking, where and when does rendering JS take place?
There are two possibilities. The first is server-side rendering, and this is done at the website’s server before being sent to the client (i.e. user browser). This is the most common rendering option because it provides a smoother experience for the user.
Now that you have some background knowledge, let’s begin our analysis of three SaaS brands: Zoom, Asana, and Neil Patel.
Brand #1: Zoom
The first SaaS brand we analyzed was Zoom, a cloud-based video conferencing service.
Right away, we can see a difference in the way the hreflang attribute is handled in the original HTML versus the rendered HTML. More specifically, hreflang is missing from the original HTML (lines 39 through 56):
Let’s look at another example where raw HTML and rendered HTML differ:
Instances like this can have major impacts on SEO and hinder website performance.
It’s not always the case that an important property is missing entirely from the raw HTML, but instead, it may be different from what the rendered HTML is showing. In the below example, the title tag in the raw HTML is “Loading” while the title tag in the rendered HTML is “Zoom Learning Center”:
Just take, for example, Zoom’s author pages like this one for Janine Pelosi:
From a credibility standpoint, that’s a loss.
How can a visitor see your website as credible and authoritative if they can’t put a face to a name? The same can be said for imagery and logos that your website displays elsewhere, like at checkout.
Overall, the above issues are not causing issues for page rendering. So while some on-page elements or data may not be available to Google crawlbots in the raw HTML, they will get them in the rendered HTML.
One major issue that’s not unique to Zoom is a website blocking .js files in the robots.txt file. This can prevent Google crawlbots from crawling, rendering, and indexing these files which could be detrimental to your SEO ranking.
If this isn’t corrected, it can have major impacts on rankings.
Brand #2: Asana
The second SaaS brand we examined was Asana, a work and project management platform.
This isn’t a major issue, assuming there is nothing blocking the pages from rendering as they should.
Don’t want to wait the weeks or months it could take for Google to recrawl your site?
Brand #3: Neil Patel
Similar to Zoom and Asana, we see a number of attributes (e.g. hreflang, content) displayed in the rendered HTML but not in the raw HTML:
Blocked .js Files in Your robots.txt File
You or your website administrator simply need to update the robots.txt file to remove resource blocks. This just takes a little bit of knowledge of robots.txt files. Once completed, you can ask Google to recrawl your URLs.
There are a few ways to directly communicate with search engine crawlbots in your HTML code. These are known as directives, and some well-known examples of them are the “noindex” and “nofollow” tag attributes.
The noindex directive tells crawlbots not to index the page, while the nofollow directive tells crawlbots not to pass link juice from the current URL to the linked URL.
Fortunately, the fix for this is also simple.
In many cases, like most JS rendering errors, these won’t have an impact on overall website performance. However, you should know which links are non-renderable and remove them on a regular basis to avoid script bloat.
With server-side rendering, the client contacts the server via an HTTP connection. The server then fetches required data (either from the database or third parties) and creates a rendered HTML file which it then sends to the client. This means the information being sent from server to client is complete and does not require further rendering at the endpoint.
Do you have questions about common JS rendering issues? Let us know in the comments below.
See How My Agency Can Drive More Traffic to Your Website
- SEO - unlock more SEO traffic. See real results.
- Content Marketing - our team creates epic content that will get shared, get links, and attract traffic.
- Paid Media - effective paid strategies with clear ROI.
Are You Using Google Ads? Try Our FREE Ads Grader!
Stop wasting money and unlock the hidden potential of your advertising.
- Discover the power of intentional advertising.
- Reach your ideal target audience.
- Maximize ad spend efficiency.