The days when websites consisted of just HTML and CSS code are a thing of the distant past. Today, a Web developer has many more options for making a site dynamic and interactive. One such capability is found in JavaScript, a programming language that is widely used today. Unfortunately, search engines can’t always handle JavaScript as well as they can HTML code. In this article, you can read more about writing JavaScript code that does get indexed by Google.
The difference between JavaScript and HTML/CSS
The front end of a website (frontend), consists of all the visible and possibly interactive elements that visitors encounter on a website. This side of the website is also called the client side. To create the images, text, columns, tables and interactive elements on the frontend, developer uses HTML, CSS and JavaScript. Below is a brief description of the three frontend languages:
- HTML: HTML stands for Hypertext Markup Language. This language is used both to indicate structure on a page (tables, paragraphs, etc.) and to create relationships between different pages.
- CSS: CSS stands for Cascading Style Sheets and is commonly used to design websites. This can be done either in the HTML code at the page level or through a separate stylesheet where the layout for the entire website can be determined.
- JavaScript: This programming language is mostly used to create animations and enable interactive elements. JavaScript adds new functionality to a Web site or is capable of making existing functionality even better.
Client side rendering vs server side rendering
Not only do the languages differ in functionalities and the purpose they accomplish, the way the code is presented to the user also differs. This difference is in how a user or search engine receives the code that makes up a Web site.
HTML code, for example, is presented directly from the server to the browser of a visitor to your Web site. This is also called server side rendering mentioned. HTML code can be presented fairly quickly this way because the server where the website is hosted passes the code directly.
For JavaScript, it works differently. In fact, JavaScript is used via client side rendering loaded. Here, the server presents JavaScript script to a visitor or search engine, after which this script is executed in the browser.
HTML and JavaScript for Google bot
The big difference is in how search engines, especially Google, can understand and index Web sites. For HTML websites, a search engine need only read the code, download CSS files and the page can be indexed in search results.
For JavaScript, it works differently. In this process, an HTML file is downloaded by a search engine, then CSS and JavaScript files are downloaded. Then Google uses Web Rendering Service (WRS) to render the JavaScript, just as a browser would have done. After the code is rendered, the page can be indexed by the search engine.
Thus, for the search engine, an extra step is required with websites that use JavaScript versus those that use only HTML. Despite Google’s increasing ability to understand and index JavaScript, this extra step can still be an obstacle to proper indexing.
This is because JavaScript is much more error-prone than HTML, which can make scripts unreadable to search engines more quickly. As a result, a web page cannot be indexed, so it will not show up in search results.
In addition, JavaScript simply takes longer to load than “regular” HTML/CSS code. This does not improve the overall loading time of a website. This can be extra painful for SEO results, given Google’s recent
Core Web Vitals
update.
Popular frameworks that use JavaScript
JavaScript is commonly used in popular frameworks. These frameworks are used to enable faster creation of an interactive website, easier updating and maintenance, and easier collaboration.
Examples of frameworks that JavaScript is used in are:
SEO and JavaScript: best practices
As described, the way HTML and JavaScript are rendered by search engines varies greatly. For this reason, JavaScript has a number of pitfalls when it comes to SEO. The following describes JavaScript best practices for SEO specialists, web developers and website owners.
-
Insert hyperlinks from HTML
When hyperlinks are placed according to Web Standards, they are best understood by search engines. This means using the HREF HTML attribute. Thus, a hyperlink should always be placed as follows:
<a href=”/blog/”>Visit our blog</a>
From JavaScript, there are several options that can confuse search engines, such as:
< a onclick=”goto(‘https://brthrs.nl/blog’)”>
-
Load images from HTML
Web Standards are also recommended for images. This is especially true when images do not load until the user arrives at the relevant part of a page (lazy loading). In practice, this is one way to make a Web site load faster. However, Google does not scroll past websites the way humans do. As a result, lazy loading via JavaScript may completely hide images from the search engine.
-
Render key information server side
As discussed earlier in this article, the use of client side rendering is somewhat dangerous for indexing capabilities from search engines. Website developers would do well to render at least the following elements through the server:
- The text and images on the page.
- Page title and meta descriptions.
- Structured data and hreflang, indicates the language in which a page is written.
Support for technical SEO
Technical SEO goes beyond JavaScript problems. Brthrs helps organizations meet other technical requirements, such as the Core Web Vitals. Wondering how we do that? Please feel free to
contact us
for more information.
