JavaScript is a good choice to make web site pages extra interactive and much less boring.
But it’s additionally a great way to kill an internet site’s SEO if carried out incorrectly.
Here’s a easy reality: Even the perfect issues on this planet want a option to be discovered.
No matter how nice your web site is, if Google can’t index it attributable to JavaScript issues, you’re lacking out on site visitors alternatives.
In this put up, you’ll study every little thing it is advisable learn about JavaScript SEO greatest practices in addition to the instruments you should utilize to debug JavaScript points.
Why JavaScript Is Dangerous for SEO: Real-World Examples
“Since redesigning our web site in React, our site visitors has dropped drastically. What occurred?”
This is simply one of many many questions I’ve heard or seen on boards.
Advertisement
Continue Reading Below
You can substitute React with some other JS framework; it doesn’t matter. Any of them can harm an internet site if carried out with out consideration for the SEO implications.
Here are some examples of what can probably go flawed with JavaScript.
Example 1: Website Navigation Is Not Crawlable
What’s flawed right here:
The hyperlinks within the navigation aren’t in accordance with net requirements. As a consequence, Google can’t see or observe them.
Advertisement
Continue Reading Below
Why it’s flawed:
- It makes it more durable for Google to find the inner pages.
- The authority inside the web site will not be correctly distributed.
- There’s no clear indication of relationships between the pages inside the web site.
As a consequence, an internet site with hyperlinks that Googlebot can’t observe will be unable to make the most of the power of internal linking.
Example 2: Image Search Has Decreased After Improper Lazy Load Implementation
What’s flawed right here:
While lazy loading is a good way to lower web page load time, it can be harmful if carried out incorrectly.
In this instance, lazy loading prevented Google from seeing the photographs on the web page.
Why it’s flawed:
- The content material “hidden” underneath lazy loading may not be found by Google (when carried out incorrectly).
- If the content material will not be found by Google, the content material will not be ranked.
As a consequence, picture search site visitors can undergo so much. It’s particularly vital for any enterprise that closely depends on visible search.
Example 3: The Website Was Switched to React With No Consideration of SEO
What’s flawed right here:
This is my favourite instance from an internet site I audited some time in the past. The proprietor got here to me in spite of everything site visitors simply tanked. It’s like they unintentionally tried to kill their web site:
Advertisement
Continue Reading Below
- The URLs weren’t crawlable.
- The photographs weren’t crawlable.
- The title tags had been the identical throughout all web site pages.
- There was no textual content content material on the inner pages.
Why it’s flawed:
- If Google doesn’t see any content material on the web page, it received’t rank this web page.
- If a number of pages look the identical to Googlebot, it might select simply one in all them and canonicalize the remaining to it.
In this instance, the web site pages seemed precisely the identical to Google, so it deduplicated them and used the homepage as a canonical model.
A Few Things You Need to Know About Google–JavaScript Relationships
When it involves how Google treats your content material, there are just a few most important issues it is best to know.
Google Doesn’t Interact With Your Content
Googlebot can’t click on the buttons in your pages, broaden/collapse the content material, and so forth.
Advertisement
Continue Reading Below
Googlebot can see solely the content material obtainable in rendered HTML with none extra interplay.
For instance, when you’ve got an expandable textual content part, and its textual content is obtainable within the supply code or rendered HTML, Google will index it.
On the opposite, when you’ve got a bit the place the content material will not be initially obtainable within the web page supply code or DOM and hundreds solely after a consumer interacts with it (e.g. clicks a button), Google received’t see this content material.
Google Doesn’t Scroll
Googlebot doesn’t behave like a normal consumer on an internet site; it doesn’t scroll by the pages. So in case your content material is “hidden” behind an countless quantity of scrolls, Google received’t see it.
See: Google’s Martin Splitt on Indexing Pages with Infinite Scroll.
Google doesn’t see the content material which is rendered solely in a browser vs on a server.
That’s why client-side rendering is a nasty thought if you’d like Google to index and rank your web site (and you do need it when you want site visitors and gross sales).
Advertisement
Continue Reading Below
Ok, so is JavaScript actually that dangerous?
Not if JavaScript is carried out on an internet site utilizing greatest practices.
And that’s precisely what I’m going to cowl under.
JavaScript SEO Best Practices
Add Links According to the Web Standards
While “net requirements” can sound intimidating, in actuality, it simply means it is best to hyperlink to inner pages utilizing the HREF attribute:
Your relevant anchor text
This manner, Google can simply discover the hyperlinks and observe them (except you add a nofollow attribute to them, however that’s a special story).
Don’t use the next methods so as to add inner hyperlinks in your web site:
By the way in which, the final possibility can nonetheless be efficiently used on a web page if you wish to convey folks to a particular a part of this web page.
But Google won’t index all particular person variations of your URL with “#” added to it.
Advertisement
Continue Reading Below
See: Google SEO 101: Do’s and Don’ts of Links & JavaScript.
Add Images According to the Web Standards
As with inner hyperlinks, picture utilization must also observe net requirements in order that Googlebot can simply uncover and index photographs.
To be found, a picture needs to be linked from the ‘src’ HTML tag:
Many JavaScript-based lazy loading libraries use a ‘data-src’ attribute to retailer the actual picture URL, and they substitute the ‘src’ tag with a placeholder picture or gif that hundreds quick.
For instance:
shops more information concerning the picture.
It helps with web page velocity optimization and works nicely if carried out appropriately.
If you need Google to choose up your actual picture as a substitute of the placeholder, swap the placeholder picture to the goal picture in order that exhibits the trail to the goal picture.
During the current Google Search Central Live event, I did a reside case examine of the right way to debug points with photographs lazy-loaded utilizing a JavaScript Library.
Advertisement
Continue Reading Below
Alternatively, you may get rid of JavaScript through the use of native lazy loading. which is now supported by many browsers.
Use Server-Side Rendering
If you need Google to learn and rank your content material, it is best to ensure that this content material is obtainable on the server, not simply in a consumer’s browser.
Alternatively, you should utilize dynamic rendering which means detecting search engines like google and yahoo and serving them static HTML pages whereas customers are served HTML + JavaScript content material of their browsers.
Make Sure That Rendered HTML Has All the Main Information You Want Google to Read
You must ensure that rendered HTML exhibits the correct info similar to:
- Copy on the web page.
- Images.
- Canonical tag.
- Title & meta description.
- Meta robots tag.
- Structured information.
- hreflang.
- Any different vital tags.
Gone are the times whenever you’d solely wanted to have a look at the supply code of a web page to verify if it contains the correct content material.
Advertisement
Continue Reading Below
JavaScript has made it extra sophisticated, in that it might add, take away or change completely different components. Looking on the supply code will not be sufficient; it is advisable verify the rendered HTML as a substitute.
Step 1: Check How Much a Website Relies on JavaScript to Serve the Content
The very first thing that I often do after I see an internet site that depends on JavaScript is to verify how a lot it relies on it. The easiest method to do that is to disable JS in your browser.
I take advantage of the Web Developer Chrome extension for that.
Simply open settings, click on Disable JavaScript and reload the web page:
Once you do it, you’ll see how a web page would look with none JS.
Advertisement
Continue Reading Below
In the instance above, you may see that no content material is obtainable with out JavaScript.
Note that this technique simply offers you an outline of how a lot JavaScript influences content material supply. It doesn’t let you know if Google will index it or not.
Even when you see a clean web page like above, it doesn’t imply that nothing’s working. It simply implies that an internet site closely depends on JavaScript.
That’s why it is advisable check the rendered HTML with the instruments I’ll present you within the subsequent step.
Step 2: Check if Googlebot Is Served the Right Content and Tags
Google Mobile-friendly Test Tool
Google’s Mobile-friendly Test Tool is likely one of the greatest and most dependable instruments with regards to checking mobile-rendered HTML since you get info proper from Google.
What it is advisable do:
- Load the Mobile-friendly tool.
- Check your URL.
- Look on the data within the HTML tab:
That’s the place the technical SEO facet is available in, as you’ll need to verify the code to ensure it has the correct info.
Advertisement
Continue Reading Below
Note: you should utilize the Rich Results Test tool to do these checks, too:
URL Inspection Tool in Google Search Console
The URL Inspection device additionally offers you entry to the uncooked HTML of your web page that Googlebot makes use of for evaluating your web page content material:
The Mobile-friendly Test Tool vs URL Inspection Tool
Ok, so what’s the distinction between these instruments and which is most well-liked?
Advertisement
Continue Reading Below
The brief reply is that there’s no distinction within the output for the reason that Mobile-Friendly Test and URL inspection device use the identical core expertise.
There are some variations in different facets, although:
- To use the URL Inspection Tool, it is advisable have entry to the Google Search Console of the web site you’re checking. If you don’t have such entry, use the Mobile-Friendly Test (or Rich Results Test).
- The URL inspection device can present you two variations of the identical web page — the final crawled model and the reside model. It’s useful if one thing has simply been damaged by JavaScript and you may evaluate the brand new implementation to the earlier one.
The Mobile-Friendly Test and Rich Results Test provide the output on your present reside web page model solely.
Other Debugging Tools
View Rendered Source Chrome Extension
I like this extension because it exhibits the distinction between the supply code and rendered HTML. It offers you an outline of what JavaScript modifications on the web page:
Note: Make positive you verify cell rendered HTML vs desktop.
Advertisement
Continue Reading Below
To do that, it is advisable first load a cell view within the Chrome inspection device and then use the View Rendered Source extension:
JavaScript Rendering Check
I feel that is probably the most user-friendly JS debugging device as you don’t even must verify the code.
It checks the principle components within the web page supply code for you and compares them to the identical components within the rendered HTML (once more, ensure that to verify the cell model):
In this instance, I see that JavaScript modifications the principle components on the web page such because the Title Tag, canonical, inner hyperlinks.
Advertisement
Continue Reading Below
It’s not all the time a nasty factor however as an SEO skilled, you’ll want to research whether or not these modifications hurt the web page you’re checking or not.
You may also use the SEO Pro extension to see the Title tag and different vital tags present in rendered HTML, not supply code:
I favor utilizing a mix of the instruments talked about above to research JavaScript SEO points or be sure that greatest practices are carried out.
Advertisement
Continue Reading Below
More Resources:
Image Credits
All screenshots taken by writer, March 2021
