SEO News

Semrush Site Audit Can Now Render JavaScript


Does your site use JavaScript (JS)? It probably does like most websites.

If so, you can use our Site Audit tool to uncover more issues than before.

Google renders your webpages’ unloaded JS to see its full content and to make sure your online visitors can easily access everything too. Now, our Site Audit bots render JavaScript in the same way to identify any hidden issues on your site. 

Here’s how we were able to do that. 

What’s New in Site Audit?

We’ve allocated more resources so we can crawl and render your site’s JavaScript. This means we can correctly crawl sites largely built on JavaScript, even if they are client-side rendered. 

To show you the difference, take a look at a before and after:

Here’s one audit with JS rendering enabled and another audit (of the same site) with JS disabled.

7DnSVSH3uBIDCarAXEimqv4I5RrMfDIXksp9so_hQKUENk5PUfCHyXqpfN6rJyQrBuIIK1LGJKmz6bqCq5_6YdorGn0HR7tDhFvPJAjS5aQ191k7_wWEu3UEyoVDgYfH4wGL09KHVKy1Qbap_9V9j-I

See the big difference between the number of errors and warnings before and after? With JS enabled, it can properly identify the issues that need to be fixed. 

How Does JavaScript Impact SEO and Why Does It Matter?

JavaScript rendering is when a site’s JavaScript files are properly executed and displayed to website visitors. 

How those files turn from lines of code to an interactive website on your browser can happen in a few ways (like client-side vs. server-side rendering). Each has its pros and cons. However, sites that use JS and client-side rendering might run into crawling problems, especially for tech audit bots. 

Why does that happen? In short, it comes down to resources.

Google has the resources to load both static HTML and injected HTML once a site’s JS is executed. But some site auditing bots don’t have the resources to handle that task (like ours before this update). 

Here’s what Airbnb would look like to a bot that can’t render JS. 

4D3Vy5jKVJFvtRaktHDsh4yW2hAOhcg9qCA5Az7rUSzesIvDQCWxFGAv11PbYyY05epfWQc_EtSBAPxTbJj21uq39j_dqF2aDMxaaJ4EXiPf9CYJQ_leQCeVJe3k8K8lxZy7uKJ3n4bh6MdzTF5yFkM

And here’s what it would look like to a bot that can execute and render JavaScript. 

Q25rp_ed-dIM-grR_vO5l3WPvp6q9aKm1wIz-A9XP-O33V2iLFD1Ml9ofUzYcGYoSUV9eGSfGmQp83LrVpOIymDalmlo-0rdBCMhhDjMdRx6WEOMyDTnTroBDaTPE8GkoQdak2d-lhwhM-WaxrPC2e0

What Happens When Google Renders a Site’s JavaScript? 

When Google renders a site’s JavaScript, it first sees if any JS needs to be executed in the first place. If it does, it goes into a queue and then gets executed/rendered to reveal the webpage’s full content. Then, Google indexes it.

Here’s what that looks like:

A8KQn9UiKzmwRbA_J1ip1cwudByyPQNI9k5BreORLAbbWJhkxSgQMTAjcZ8ygSwjNXj7cElUvflDJoIIPTIiLMkRYgtzpxGF3P02GRmO_XPfi6m8GxUyOX3A-y8KUsL1AU73fnk2p2ux5WUUdUmZNcA

In the past, we weren’t able to execute that stage above where a bot processes the JavaScript and renders it. Now our process is similar (minus the indexing). 

Why Should You Enable JS Crawling in a Site Audit?

You might not see the full picture of your site’s issues without enabling JS in your next site crawl. 

Enabling JS could help you find relevant issues that were potentially missed before.

Especially for sites built on the app shell model (where core components are loaded, but usually not the bulk of a site’s content—think of the earlier Airbnb example). 

Some JavaScript sites may use the app shell model where the initial HTML does not contain the actual content and Google needs to execute JavaScript before being able to see the actual page content that JavaScript generates.

Google

How Does Site Audit JavaScript Rendering Work Now?

1. We receive the initial HTML from the web server during crawling

2. We load the JS resources that are linked in this HTML

3. Execute and render JS code 

4. Wait 5 seconds

5. Site Audit uses the final HTML for further analysis steps

When you choose to disable JS in Site Audit, we use the original HTML as we did before. 

Does Enabling JS Affect My Limits? 

No, it will not affect your limits if you choose to enable JS on Site Audit. However, only those with Guru or Business subscriptions can use this feature.

Will It Trigger Trackers, Ads, and Event Handlers? 

No, Site Audit will not trigger trackers, ads, and event handlers (i.e. JS triggered by clicking or scrolls). Here’s what we block when our Site Audit bot crawls a site: 

  • GA4
  • GA3
  • Yandex Metrica
  • Amplitude
  • Adobe Analytics
  • Google Ads
  • OWOX
  • SpeedCurve

Does Site Audit Use Chrome for Rendering JS?

Yes, we use the latest Chromium rendering engine. So, we use the same technology as Google does for crawling. 

How to Crawl Your Site’s JS with Site Audit

Crawling your site’s JS with Site Audit is simple. First, go to the Site Audit tool and click the ‘create project’ button. 

0hRuk_YqMRvkD2RfhAJaa3lqyFH3cYqUrqg8W124lTenJ11Qd5E3gPUXZDHy9tjGrH2RT0IiDh-2Y8JgLpN6eML1lIOWZ4LUyzDXvAwG853JK3HDocYgZF0TylXdEu7zuuA2CLemz37SKb_p2jldjHQ

Next, it will prompt you to set up the audit. The only difference is that you’ll choose ‘enabled’ for ‘JS-rendering’ in the crawler settings. You can still leave it disabled if you’d like or change it later. 

Jn4H1vHf9LMM39YMz3qzZSR8g1sy5_sN9IFjnx0m4zHNHuJRm-tRywMTgf8Kpm5X-n3T-VQ79ilKDwg9vP8RdgbbkAUkJ1ZoWfrFTT6CpLm6vG2Jka2R3_BGGVyth1cmfRD07W3XI4J8vhAxy0a8k9U

You can check if your audit is rendering your site’s JS by looking up here in the report: 

gnhbAszMnXRrltH1ZJNQGwxiKi1ehdAoiqjBT_aEJxtNmiw9nyrfGSlUoqSbfDf27WfyxwOU7gCxggtJw2ZqnVoHqmQQxldf1fodEa9nvM7PUh18rC_P-iy1h4cPHptim1anryLo7BZu5fiEyJ33UZc

How to Crawl an Existing Project’s JS with Site Audit

If JS rendering isn’t enabled on a current project, you can change that in the Site Audit settings. 

0_b7w0ucxheXNS1wj9Ams6lacdo3i2Z9cA6syxcg3QAHAl71M4L4Wn5AC3d7_TCffERwd5rMwVrAWZrcYiqIdt4PDM-mMi65x0rz4Ib85cjScGMhK10bBxK7IBHdoZr3sTfjxMwE4B5SQa4XFqpSdaI

From here, just click the “re-run campaign” button to crawl your site with JS enabled. You can disable JS rendering in the same way if you want to change it back later. 

Find All Of Your Site’s Issues with JS Rendering

JavaScript makes sites more interactive, dynamic, and personalized. For example, Netflix uses JS to update the body of a single web document for a speedy, seamless experience. 

Similarly, many websites use the app shell model (as well as client-side rendering) to benefit both the user agent and the site owner in their own ways. Your site may use JS to achieve the same results. And if your site does, we can identify what issues Google may run into with Site Audit’s new JS rendering feature. 



Source link : Semrush.com

Related Articles

Back to top button
error

Enjoy Our Website? Please share :) Thank you!