For most professionals out there, SEO optimization practices always meant working with plain text versions of content. However, as the technology continues to evolve, this is no longer the case, because SEO requires understanding technical knowledge to work with dynamically generated content, like through JavaScript.
Optimization of pages built with JavaScript represents a great example of the need for technical knowledge for professionals. To be able to provide helpful advice to developers and ensure that they follow the best SEO practices, professionals need to understand the essentials of JavaScript search engine optimization.
Are you also an SEO professional looking to enhance your knowledge of JavaScript SEO? It’s certainly a good knowledge to have because you need to know the relationship between Google and the content rendered by JavaScript to be able to improve the latter’s performance.
In this article, we are going to give you everything you need to know before starting to work JavaScript and SEO so you have a perfect understanding of how a website using JavaScript can be properly crawled and indexed, and ranked high on Google.
Let’s begin.
In fact, here’s a graph for you showing the usage of JavaScript, courtesy of BuiltWith Trends.
JavaScript utilizes frameworks to create beautiful, interactive web pages by managing the performance of page elements. These frameworks run inside an Internet browser; this means that you load a page using your browser, it uses its built-in interpreter that finds a JavaScript code on the page and runs it.
Well, newsflash: Google does not handle JavaScript perfectly no matter what its developers say on it blog. In fact, they even kinda admitted that on the aforementioned page of the Webmaster Central Blog. Specifically, they wrote that (the following is an excerpt from the Blog):
“Sometimes the JavaScript may be too complex or arcane for us to execute, in which case we can’t render the page fully and accurately.
Some JavaScript removes content from the page rather than adding, which prevents us from indexing the content.”
As you can see, saying that Google can crawl JavaScript-rendered content is not exactly true. Clearly, there are some limitations and caveats when it comes to crawling and they don’t disappear even after users follow Google’s advice to “follow the principles of progressive enhancement.”
The first respective process happens before a web page is loaded into a browser. This is a traditional approach in which a browser receives an HTML that completely describes the requested page. Typically, Google and other search engines do not have any problems with server-side rendering. The copy of content is there, so all a search engine or browser have to is to download CSS (Cascading Style Sheet, a programming language that describes how HTML elements are displayed on the screen) and “paint” the page’s content on the screen.
On the other hand, client-side rendering uses a different approach, and Google has some problems with adapting to it. In this case, a browser or a search engine receives a blank HTML page without any content. Next, JavaScript downloads the copy of the content from the server, refreshes your screen, and alters the DOM (Document Object Model).
Simply explained, DOM is the process that browsers use after receiving the HTML copy of content to render the page. You can actually see DOM when you click on “Inspect Element” in Firefox.
Unfortunately, JavaScript also brings some problems. For example, many struggle to SEO-optimize the content that uses JavaScript.
Naturally, a question arises: should an SEO professional know how JavaScript affects Google ranking. The answer, is yes, of course.
The reason why should know how to make your JavaScript more SEO-friendly is that Google does not take care of everything on its end, so most of the problems your JavaScript-built website will have may be a result of a lack of optimization, not Google’s inability to handle JavaScript properly.
Also, here’s what Google had to say to explain that:
The main job for SEO professionals is to take care of three important things related to JavaScript on their websites:
To make sure that crawler bots do their job, you should clean up and optimize the site code and structure, because they are critical for the success of crawling.
Let’s now see what can prevent Google from crawling your website:
To ensure that bots can find all the pages on your website, you should submit XML sitemaps to Webmaster Tools. Google has all the instructions to build and submit a sitemap to them. Also, you can use free tools like XML SiteMap Generator.
In addition to the structure and hierarchy of your website, it may also contain maps for images and videos. The optimization of these maps is important to help Google crawl non-text content.
“Also, to clean your site’s architecture, you should use internal linking,” advises Mark Bledsoe, a web developer at A-Writer. “It is basically a signal for Google to understanding the architecture and importance of the pages.”
Its purpose is threefold:
Here’s what you should do ensure that internal linking enhances the overall search-optimized value of the website.
Google defines robots.txt as “a file at the root of your website that indicates those parts of your website you don’t want accessed by search engine crawlers.”
An example of a simple robots.txt file for a website built with WordPress:
User-agent: *
Disallow: /wp-admin/
(This example tells Google to leave /wp-admin/ directory alone).
In other words, this file has directives for Google on whether to crawl specific parts of your website. To ensure that it supplies Google with the information you need, follow these tips:
The following are robots meta tag values and how Google interprets it, according to Webmaster Central Blog:
To ensure no limits and an inadvertent blockage of content, some web developers use the following meta tag:
To ensure that Google finds and ranks the website, it is important to get a good understanding of how it crawls and interacts with the website’s content. Here are some facts you need to know:
Since no one can guarantee that Google loves your JavaScript-built website, testing various aspects of its performance and content is a good idea. So, test the pages on your website to ensure that Google can index them.
Here are some examples of how it affects a website’s performance, courtesy of Google.
However, you may interfere with this path if your JavaScript files are blocking your website’s or a specific page’s ability to load. Therefore, testing for these files is very important.
Oh, and one more thing for you: optimization and implementation of JavaScript come with different risks, so expect to run into something that doesn’t work properly at some point. You just need to take your time and test everything, and Google will do the rest.
About Author: Audrey is a passionate blogger and marketer at college-paper.org. Her areas of interests are very wide, but mostly she writes about content marketing and business relations. Her aim is to engage people to self-growth and staying motivated.
Continue Reading
Optimization of pages built with JavaScript represents a great example of the need for technical knowledge for professionals. To be able to provide helpful advice to developers and ensure that they follow the best SEO practices, professionals need to understand the essentials of JavaScript search engine optimization.
Are you also an SEO professional looking to enhance your knowledge of JavaScript SEO? It’s certainly a good knowledge to have because you need to know the relationship between Google and the content rendered by JavaScript to be able to improve the latter’s performance.
In this article, we are going to give you everything you need to know before starting to work JavaScript and SEO so you have a perfect understanding of how a website using JavaScript can be properly crawled and indexed, and ranked high on Google.
Let’s begin.
What is JavaScript? How does it Work?
JavaScript is one of the most popular programming languages that can create websites that engage visitors in a great way. The list of websites using JavaScript includes such well-known platforms such as Google. Wikipedia, Facebook, YouTube, Reddit, and Amazon. The ability of this language to provide a great user experience using animations, smooth content transitions and page transitions, zoom effects, and other effects made it very popular among web developers.In fact, here’s a graph for you showing the usage of JavaScript, courtesy of BuiltWith Trends.
JavaScript utilizes frameworks to create beautiful, interactive web pages by managing the performance of page elements. These frameworks run inside an Internet browser; this means that you load a page using your browser, it uses its built-in interpreter that finds a JavaScript code on the page and runs it.
Can Google Crawl JavaScript?
According to Google’s Webmaster Central Blog, the search engine has gotten pretty good at understanding pages built with JavaScript. Even though the developers at Google would have us think that we shouldn’t worry about JavaScript and website crawling because they’ll take care of everything, this is not entirely true.Well, newsflash: Google does not handle JavaScript perfectly no matter what its developers say on it blog. In fact, they even kinda admitted that on the aforementioned page of the Webmaster Central Blog. Specifically, they wrote that (the following is an excerpt from the Blog):
“Sometimes the JavaScript may be too complex or arcane for us to execute, in which case we can’t render the page fully and accurately.
Some JavaScript removes content from the page rather than adding, which prevents us from indexing the content.”
As you can see, saying that Google can crawl JavaScript-rendered content is not exactly true. Clearly, there are some limitations and caveats when it comes to crawling and they don’t disappear even after users follow Google’s advice to “follow the principles of progressive enhancement.”
What is the Difference between Client-Side Rendering and Server-Side Rendering?
Before starting to work with SEO for JavaScript, you need to know two critical concepts: server-side (back-end) and client-side (front-end) rendering.The first respective process happens before a web page is loaded into a browser. This is a traditional approach in which a browser receives an HTML that completely describes the requested page. Typically, Google and other search engines do not have any problems with server-side rendering. The copy of content is there, so all a search engine or browser have to is to download CSS (Cascading Style Sheet, a programming language that describes how HTML elements are displayed on the screen) and “paint” the page’s content on the screen.
On the other hand, client-side rendering uses a different approach, and Google has some problems with adapting to it. In this case, a browser or a search engine receives a blank HTML page without any content. Next, JavaScript downloads the copy of the content from the server, refreshes your screen, and alters the DOM (Document Object Model).
Simply explained, DOM is the process that browsers use after receiving the HTML copy of content to render the page. You can actually see DOM when you click on “Inspect Element” in Firefox.
How JavaScript affects SEO?
Using JavaScript allows to achieve higher versatility, faster server load, more loading time speed, and easier implementation. That’s great news for SEO! With website speed being one of the most important ranking factors, you can certainly use these advantages to get ahead of the competition.Unfortunately, JavaScript also brings some problems. For example, many struggle to SEO-optimize the content that uses JavaScript.
Naturally, a question arises: should an SEO professional know how JavaScript affects Google ranking. The answer, is yes, of course.
The reason why should know how to make your JavaScript more SEO-friendly is that Google does not take care of everything on its end, so most of the problems your JavaScript-built website will have may be a result of a lack of optimization, not Google’s inability to handle JavaScript properly.
Also, here’s what Google had to say to explain that:
What should you be concerned about as a SEO professional?
The main job for SEO professionals is to take care of three important things related to JavaScript on their websites:
- Crawlability. The ability of search bots to crawl your website.
- Obtainability. The ability of search bots to obtain information regarding your website and parse through its content.
- Critical Rendering Path. According to Google, this term refers to “prioritizing the display of content that relates to the current user action.”
Crawlability
This term refers to optimizing the website for Google’s crawler bots that read and categorize our website, thus deciding where it should be displayed in search results.To make sure that crawler bots do their job, you should clean up and optimize the site code and structure, because they are critical for the success of crawling.
Let’s now see what can prevent Google from crawling your website:
The HTTP Header Saying That a Page Does Not Exist
The initiation of crawling begins only if a crawler took a look at HTTP header that confirmed the existence of a certain web page by a status code. If the header says that a page does not exist, so the crawler won’t be able to crawl the website, therefore, Google will not crawl your website.To ensure that bots can find all the pages on your website, you should submit XML sitemaps to Webmaster Tools. Google has all the instructions to build and submit a sitemap to them. Also, you can use free tools like XML SiteMap Generator.
In addition to the structure and hierarchy of your website, it may also contain maps for images and videos. The optimization of these maps is important to help Google crawl non-text content.
“Also, to clean your site’s architecture, you should use internal linking,” advises Mark Bledsoe, a web developer at A-Writer. “It is basically a signal for Google to understanding the architecture and importance of the pages.”
Image Source: Neil Patel
Its purpose is threefold:
- Help Google with website navigation
- Define the website’s structure and hierarchy
- Distribute page authority and ranking.
Here’s what you should do ensure that internal linking enhances the overall search-optimized value of the website.
- Create a lot of content. Internal linking is impossible without internal pages, so create as much quality content as you can.
- Avoid links to top pages. Do not link to homepage and contact us page. This is too ‘salesy.’
- Use informative links to match the context of the content. The users will use links only if they make sense to them.
- Don’t link for the sake of linking. For example, if you have a page about social media marketing plans and a page with a car review, linking them will not make any sense because the content on the first respective page is totally irrelevant to the content on the second page.
Robots.Txt File Can Block the Crawler
If this happens, no search engine will ever find your website or a certain page.Google defines robots.txt as “a file at the root of your website that indicates those parts of your website you don’t want accessed by search engine crawlers.”
An example of a simple robots.txt file for a website built with WordPress:
User-agent: *
Disallow: /wp-admin/
(This example tells Google to leave /wp-admin/ directory alone).
In other words, this file has directives for Google on whether to crawl specific parts of your website. To ensure that it supplies Google with the information you need, follow these tips:
- Robots.txt must reside in the root of your website (for example, if your website is www.example.com, you should place it at www.example.com/robots.txt).
- The file is valid only for the full domain it resides on, including https
- Be super attentive when making changes. Remember: this file can prevent your website from being found by Google.
- Avoid using the crawl-delay directive for Google as much as you can.
- Test your robots.txt file with a free tool from Google.
Robots Meta Tag Can Block Google, too
Since this tag tells search engines what to follow and what not to follow, it can block them from indexing the page. While this still allows them to crawl that page, it makes it impossible to index it.The following are robots meta tag values and how Google interprets it, according to Webmaster Central Blog:
- NOINDEX – this tag blocks Google from indexing the page
- NOFOLLOW – this tag prevents Google from following any links on the page
- NOSNIPPET – this tag prevents a description of the website from appearing in search engine’s results
- NOARCHIVE – this tag blocks a cached copy of the webpage from being available to search engines.
- NONE – equivalent to “NONINDEX, NOFOLLOW.”
To ensure no limits and an inadvertent blockage of content, some web developers use the following meta tag:
Obtainability
Google and other search engines use headless browsing (action of fetching webpages without the user interface) to render the ROM to obtain as much information about the content and the user’s experience. In other words, they process JavaScript and utilize the DOM instead of HTML.To ensure that Google finds and ranks the website, it is important to get a good understanding of how it crawls and interacts with the website’s content. Here are some facts you need to know:
- If JavaScript loading time exceeds five seconds, Google may not be seeing your website at all
- If JavaScript has some errors, Google may miss some pages
- Crawling bots do not see actions that your site requires from users.
How to Ensure that Google Gets Your Content
There are a lot of speculations about how Google interacts with different libraries and frameworks of JavaScript. The studies like this one described on Elephate blog found that the search engine had different patterns of interaction with different JavaScript frameworks and libraries.Since no one can guarantee that Google loves your JavaScript-built website, testing various aspects of its performance and content is a good idea. So, test the pages on your website to ensure that Google can index them.
Critical Rendering Path
The last thing on our list of things that SEO professionals should be concerned about has to do with the user experience. A search engine’s critical rendering path is tailored to enhancing user experience because it aims to deliver it by loading pages faster.Here are some examples of how it affects a website’s performance, courtesy of Google.
However, you may interfere with this path if your JavaScript files are blocking your website’s or a specific page’s ability to load. Therefore, testing for these files is very important.
Wrapping Up
For you as an SEO professional, the most important thing about JavaScript and SEO is that you have to pay close attention to the factors described in this article. They can help you resolve nearly all issues and questions you can have when trying to optimize your JavaScript content for Google or any other search engine.Oh, and one more thing for you: optimization and implementation of JavaScript come with different risks, so expect to run into something that doesn’t work properly at some point. You just need to take your time and test everything, and Google will do the rest.
About Author: Audrey is a passionate blogger and marketer at college-paper.org. Her areas of interests are very wide, but mostly she writes about content marketing and business relations. Her aim is to engage people to self-growth and staying motivated.
