SEO & JavaScript: 6 Things You Need to Know

Author Topic: SEO & JavaScript: 6 Things You Need to Know  (Read 2893 times)

Offline richardmsmithTopic starter

  • Trade Count: (0)
  • Full Member
  • ***
  • Thank You 3
  • Posts: 220
  • Karma: 0
  • Gender: Male
    • Trucking App Solution
SEO & JavaScript: 6 Things You Need to Know
« on: 08-10-2018, 04:20:58 »
JavaScript is a programming language used to make webpages dynamic and interactive. You can place JavaScript into an HTML document, or make a link or reference to it.
HTML stands for Hypertext Markup Language. In simple words, it is a content organizer: HTML provides a website’s structure (bullet lists, headlines, subheadlines, paragraphs, etc.) and defines static content.
AJAX is Asynchronous JavaScript and XML. Basically, it updates content without refreshing the whole page. AJAX enables web applications and servers to communicate without intruding on the current page.
1. Let Search Engines See Your JavaScript
2. Internal Linking
3. URL Structure
4. Test Your Website
5. HTML Snapshots
6. Site Latency

Offline supergolfer

  • Trade Count: (0)
  • Semi-Newbie
  • *
  • Thank You 1
  • Posts: 39
  • Karma: 0
Re: SEO & JavaScript: 6 Things You Need to Know
« Reply #1 on: 04-13-2019, 00:05:06 »
SEO & JavaScript: 6 Things You Need to Know

1. Let Search Engines See Your JavaScript
Robots.txt is set to provide Google search engines with appropriate crawling opportunities. If you block them from seeing JavaScript, the page will appear differently to web crawlers than it does to users.

This means that search engines won’t get the full user experience, and Google may interpret such actions as cloaking.

The best approach is to provide web crawlers with all the resources they need to see webpages in the exact same manner as users.

Consider arranging a meeting with developers, and decide together which files should be hidden from search engines, and which of them should be made accessible.

2. Internal Linking
Internal linking is a strong SEO tool used to show search engines your website architecture and point to the most important webpages.

The most essential advice here: use internal linking, and do not even try to replace it with JavaScript on-click events.

Yes, end URLs are likely to be found and crawled with on-click events, but web crawlers won’t associate them with the global navigation of your site.

Therefore, you would be better off to implement internal linking by using regular anchor tags within the HTML or DOM, to provide users with a better experience.

3. URL Structure
JavaScript-based websites used to include fragment identifiers within URLs, but lone hashes (#) and hashbangs (#!) are not recommended by Google.

A highly recommended method is pushState History API. It updates the URL in the address bar and allows JavaScript websites to leverage clean URLs.

A clean URL is also called a search engine-friendly URL, which consists of a plain text, easily understood by non-expert users.

Consider using pushState for infinite scroll, so the URL updates each time the user hits a new part of the page. In a perfect scenario, the user can refresh the page and still remain at the exact same spot.

Also, explore SEO best URL practices and start using them to improve user experience.

4. Test Your Website
Google is able to crawl and understand many forms of JavaScript, although some of them may be more challenging than others.

Here is an experiment by Bartosz Góralewicz that shows how Googlebot interacts with JavaScript on different frameworks.

This study helps us to understand when it is time to worry and act proactively.

However, it’s always better to predict possible mistakes and problems and avoid them, so why not conduct some testing?

Follow these two basic steps to detect possible breaks:

Check whether the content on your webpages appears in the DOM.
Test a couple of pages to make sure that Google is able to index your content.
It is crucial to find out whether Google is able to see your content and JavaScript in your robots.txt and analyze it properly. Therefore, consider manually checking pieces of your content and fetching them with Google to see if content appears.

Test your website by following this short guide from Google.
5. HTML Snapshots
Google introduced HTML snapshots in 2009 and disapproved them in 2015. That is a long story and an ongoing topic.

The thing you should know is that Google stills support HTML snapshots, although it has determined them to be elements to “avoid.”

HTML snapshots may be necessary for a couple of situations, so you should at least be familiar with them.

For example, if search engines cannot grasp the JavaScript on your website, you can provide them with an HTML snapshot, which is better than not having your content indexed and understood at all.

In a perfect world, a website would use some kind of user-agent detection on the server side and show the HTML snapshot to bots and users.

Note that Google strives to see the exact same experience as a viewer. Therefore, it is better to return HTML snapshots to search engine crawlers.

However, only do so in cases where there is currently something wrong with JavaScript, and it isn’t possible to contact your support team.

6. Site Latency
When a browser creates DOM using a received HTML document, it loads the majority of resources exactly as they are mentioned in the HTML document.

If a massive file exists at the top of an HTML document, a browser will load this huge file first, and all other information will appear only afterward, with a significant delay.

The key idea of Google’s critical rendering path is to first load pieces of information that are crucial for users. In other words, to place the most essential content for users above-the-fold.

If your JavaScript files or some unnecessary resources clog up the page load speed, you probably have a render-blocking JavaScript, also called a perceived latency.

This means that your pages have the potential to appear faster, but JavaScript code is slowing them down.

Check how long it takes to load a page with Page Speed Insights or other similar tools. Analyze the results to see if there is a render-blocking JavaScript.

Here are a couple of top solutions to resolve it:

Add JavaScript in the HTML.
Add the ‘async’ attribute to HTML to make your JavaScript asynchronous.
Reduce JavaScript elements within the HTML document.
When trying to improve the situation, keep in mind the basic rules of JavaScript.

For instance, scripts must be arranged in a certain order (order of precedence). If some scripts reference files, they can be used only after the referenced files are loaded.

You should constantly stay in touch with your development team to make sure that any alterations do not interrupt user experience.


Related Topics

  Subject / Started by Replies Last post
7 Replies
Last post 05-28-2021, 08:12:43
by Lishmalinyjames
0 Replies
Last post 05-23-2010, 17:30:10
by itraider
10 Replies
Last post 08-18-2015, 00:02:43
by SanviMalhotra
3 Replies
Last post 08-18-2015, 00:25:30
by SanviMalhotra
8 Replies
Last post 08-23-2021, 01:22:47
by julia timpi