JavaScript

Well, instead of having a static HTML page, JS interacts with the user and is focused on the client side for web page behavior. This is it’s main purpose and the reason for it’s dominant use.

JS devs are very sought after in today’s job market. Building websites is essential in running almost every business in today’s society. It is hard to learn JavaScript? Not really, if you put in the required amount of time and effort harder things can be achieved. The key here is reaching the programming state of mind. Once you wire your brain to think like a programmer, you will find out that it’s one of the easiest programming languages for beginners. It’s popularity is very much owed to its simplicity. So if you are looking to learn more about this, or you are considering a career as a web developer, stick around and read more.

JavaScript and HTML

You can build a website using just HTML. However, the bond that the JavaScript HTML duo create together enables interactivity on all websites. If you apply JS to an HTML document it will make the page dynamic and allow users to use modern day web apps that don’t need to be reloaded every time a user wants to interact with the web page. This can be used as an advantage for direct interaction for dynamic content changes, image manipulation and form validation.

JavaScript enables dynamic interactivity on websites when it is applied to an HTML document with JS. JS helps the users to build modern web applications to interact directly without reloading the page every time. This takes the load off the server, giving in return fast load times and swift results. We will address faster load times and how you can ease this for the server in another passage in this text. The obvious issue here is that the lag makes the users ‘bounce’ or leave the site.

Source: https://storage.googleapis.com/twg-content/original_images/mobile-page-speed-new-industry-benchmarks-01-01-download.jpg

JavaScript functions

JavaScript functions are so-called Code Constructor Properties. Others include the object, array string, boolean, etc. and many will be explained in more detail further in the text. But for now, let’s look at the JavaScript function which is a block of code that can be named, and executed numerous times throughout the code. You define it by giving it a name, and the best practice here is to use a keyword that relates to the JS code that you want to execute. This is not to be confused with js fn, which is not an acronym, In fact fn refers to a jquery prototype. Jquery is a library that you can extend with your own functions to simplify many things while you code js.

One of the functions that came as a result of best practice, was to use JavaScript parseInt to convert string to a int primitive instead of Integer ​(String s) for example. You can define two separate parameters using this syntax: parseInt (string, radix)

• string – this represents the value to be parsed. If the value is not a string, it will be converted to one using the ToString abstraction method.
• radix – this represents what numeral system you want to be used. This can be a value between 1 and 55. Although it is optional, the recommended thing to do is to define a radix (base value) to avoid any confusion or possible warnings from the code. A radix value of 10 is commonly used (from 0 to 9).

JSON and JavaScript

Another helpful asset that you can utilize is JSON. It is a programming language and the acronym JSON stands for JavaScript Object Notation. The object notation syntax that it uses is derived from JavaScript. Usually, these objects consist of attribute-value pairs and arrays. Let’s take a look at an example:

{

“musicians”:[

{“firstName”:”Freddie”, “lastName”:”Mercury”},

{“firstName”:”Stevie”, “lastName”:”Wonder”},

{“firstName”:”Eric”, “lastName”:”Clapton”}]

}

The code (that is used for JSON format) is identical to the syntax of the code one would use for creating JavaScript objects. That makes it easy for a JS program to convert any code written in JSON. JS even has a built-in function to convert this JavaScript string into an object. That is why the primary use of JavaScript JSON is to store and transport data. Most often it involves sending data to a web page from a server.

JavaScript RegEx

Another form of object that can be found in this programming language is the JavaScript RegEx. It stands for regular expression and it consists of patterns. Those patterns are used to match character combinations in strings. A RegExp can either be constant, or new. If the latter is the case, the new RegExp will be formed based on the user input.

Constant:        let re = /ab+c/;
New:                let re = new RegExp(‘ab+c’);

Unlike objects, JavaScript classes exist, but are not actually needed. Since JS is prototype-based and you can extend any object property. Until 2015, the practice was to use constructor functions to mimic object-oriented design patterns that are a staple in other programming languages.

After a new version of JS called ES6 came to be, the update brought the function of javascript class to the language. In terms of functionality, it was something that made the syntax much cleaner and more similar to other prominent script languages, which in turn makes the job easier for developers who need to move between languages. Perhaps the introduction of the JS class seemed like a very small step, but it was a big help and made coding more consistent and straightforward for all web developers.

Besides interacting with other programming languages, there are also APIs that provide utilities to JS. A method called JavaScript fetch uses the The Fetch API. This interface is used for manipulating, and accessing first and foremost, parts of the HTTP pipeline, such as requests and responses.

Is JavaScript bad for SEO?

If you are just using JS to enhance some visuals, you don’t have to worry about the JavaScript for SEO. And if all the content of a webpage can exist without JS it won’t impact your site in any shape or form. Nevertheless, there are now many JavaScript websites that use JS to dynamically load and display more content on your pages (clicking on ‘read more’ for example). You can use a simple GET request together with JS to access website data and provide infinite scroll.

It may be that additional content is critical to your site and you want to add it by having the user scroll or click to view more content. You should know that only the visible content (without user clicking to see more or scrolling) will be indexed in the first wave of indexing. But for the rest of that content to be indexed as well, we will have to wait for rendering.

If your important content is not indexed, it won’t be discoverable via search. And if this content contains the additional content and internal links, you should take all necessary steps to have this content crawled and indexed by Google bots.

Web apps that rely heavily on the React library may not need any optimization at all, as it is not a design goal of React (realtime chat apps, social media apps). However, many React Web Apps that rely on content like e-commerce pages or blogs do require search engine optimization. So if you want to rank better you should look into ReactJS SEO best practices and tips in order to set up your page so it’s good for both users and SEO.

How Googlebot processes JavaScript?

The crawling starts as usual when the Crawler sends GET requests to the server which in turn responds with all the building blocks of the page. You have two options to embed the JS code on your website. Either put the code inside a script element inside an HTML document, or, use an external JavaScript file.

Source: https://seranking.com/blog/css-and-javascript-seo/

If we don’t have a JS file and opt for code within the page, we can make changes to the content by an onclick property. This is often done by using DOM (document object model) in order to manipulate its elements. What DOM does is organize a document like a logical tree that branches out. You can access each branch of the HTML DOM and alter it with DOM Javascript. When this is rendered it will show the output in the browser.

You have the option to use the same JavaScript on multiple pages and avoid writing the same script over and over again. Choose option one (embed JavaScript file in HTML) or two (external JavaScript file) depending on your needs. It is important to use best practices here as it will help with crawling and rendering immensely. Having a file with the same code will allow this content to be cached. As a result, the user gets the content faster and the data load is transferred from the server to the user through cached resources.

So, let’s say Googlebot comes across your JS file, it will then download it. The next step for it is to parse, compile and execute JS by using the Google Web Rendering Service (WRS). WRS fetches all the databases from many external APIs you used. Then the indexer actually indexes the content. If Google discovers new links in this content, it will add them to the crawling que and the cycle continues.

If we don’t have JS, Google runs through all the HTMLs without the extra rendering stage. This stage is expensive so we should always separate indexing and rendering to speed things up. Contents that don’t require JS as fast are indexed first. This means it may take longer for the JS content to update. Because of this, it’s important to optimize a website like this, as not everything might be indexed during a given crawl period.

Server-Side Rendering

So while crawling and indexing of the normal content is done immediately, the JS file that needs to be executed and rendered is getting indexed in the second wave of indexing. If you have some important content in it and you want your updates to appear immediately in the SERPs (price changes for an e-commerce site), then you shouldn’t wait for the second wave of indexing to crash. The solution would be pre-rendering or server-side rendering (SSR).

SSR is the ability to display the web-page entirely on the server instead of rendering it in the browser. The client receives a fully rendered page by the server, then the JavaScript bundle takes over and a SPA framework (like React which we mentioned previously) can operate.

SSR and Vue.js

Besides the time delay when it comes to indexing, there are other possible pitfalls that you can avoid by SSR. One of them is Google bot crawl skipping some resources or inability to fully render the webpage. This is where we recommend Vue.js as Vue.js is one of the most popular JS frameworks. Besides an active community of users, established systems of developers, tool kit and extensive documentation vue.je and SSR can bring it fast up to date.

If you use Vue-JS server side rendering the crawlers will be able to see the full page immediately. In this way you avoid the waiting time or risk that your page will not be indexed at all. The decision here is to know the difference between needing prerendering or SSR. You should consider which of your pages need to be displayed immediately. If it’s something smaller like the about us or contact page prerendering will do. Don’t go for SSR if you expect a lot of traffic and your server can’t handle that without additional load time as you risk an increased bounce rate.

Summary

JS on it’s own is not bad for SEO. Anything that can improve the user experience, like fast interactivity with the website or faster loading time, is definitely something that sends a positive signal to Google. However, you have to be really mindful of indexing, before you decide to implement a lot of JS to your pages. Choose wisely between prerendering or SSR. There is no one size fits all solution and it all depends on how you value faster indexing or loading for your users.