{"id":9567,"date":"2020-11-10T13:29:16","date_gmt":"2020-11-10T07:59:16","guid":{"rendered":"https:\/\/vividreal.co.in\/vividreal1.0\/?p=9567"},"modified":"2020-11-10T13:29:16","modified_gmt":"2020-11-10T07:59:16","slug":"javascript-seo-the-things-you-need-to-know","status":"publish","type":"post","link":"https:\/\/vividreal.co.in\/vividreal1.0\/javascript-seo-the-things-you-need-to-know\/","title":{"rendered":"JavaScript SEO: The Things You Need to Know"},"content":{"rendered":"<p><span style=\"font-weight: 500;\">JavaScript is a programming language that can be used to design interactive and dynamic web pages. It operates on the visitor\u2019s computer and doesn\u2019t need constant downloads from the website. JS is the only scripting language that is backed by all web browsers that handle client-side scripting. Another advantage of JS is that it doesn\u2019t require any special program to create usable code, a basic plain editor is enough to write it. Most websites, even if they\u2019re under easy-to-manage content management systems, tend to use some kind of JavaScript to add dynamic &amp; interactive elements to the website and improve the overall user experience. In this article, we\u2019ll be discussing all you need to know about JavaScript SEO.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>What is JavaScript SEO?<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">JavaScript SEO is a part of <\/span><a href=\"https:\/\/vividreal.co.in\/vividreal1.0\/introduction-to-technical-seo\/\"><span style=\"font-weight: 500;\">technical SEO<\/span><\/a><span style=\"font-weight: 500;\"> aimed at making JavaScript-heavy websites easy to crawl and index, as well as search-friendly, i.e, is to make your JavaScript-backed website searchable via Google. When optimizing for SEO, you don\u2019t really have to learn JavaScript, instead, you need to know how Google handles JavaScript and how to troubleshoot issues. Even though most websites use JS, many underperform in Google because they don\u2019t do JavaScript SEO properly.\u00a0<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>Some Basic Definitions\u00a0<\/b><\/span><\/p>\n<ul>\n<li><span style=\"color: #00ccff;\"><b>HTML:<\/b><\/span><span style=\"font-weight: 500;\"> Hypertext Markup Language is the backbone, or the organizer of content, on a site. It organizes the code for elements that define the structure of the website, i.e, headings, paragraphs, list elements, etc.\u00a0<\/span><\/li>\n<li><span style=\"color: #00ccff;\"><b>CSS: <\/b><\/span><b>\u00a0<\/b><span style=\"font-weight: 500;\">Cascading Style Sheets are the design and style that are added to a website, making up the presentation layer of the page.\u00a0<\/span><\/li>\n<li><b><span style=\"color: #00ccff;\">JavaScript:<\/span> <\/b><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 500;\">JavaScript is a programming language<\/span><span style=\"font-weight: 500;\"> that makes web pages interactive and dynamic.\u00a0<\/span><\/li>\n<li><span style=\"color: #00ccff;\"><b>AJAX:<\/b><\/span><span style=\"font-weight: 500;\"> AJAX is Asynchronous JavaScript and XML. It basically updates website content without refreshing the whole page. It also enables web applications and servers to communicate without intruding on the current page.\u00a0<\/span><\/li>\n<li><b><span style=\"color: #00ccff;\">DOM:<\/span> <\/b><span style=\"font-weight: 500;\">Document Object Model helps Google analyze and understand webpages. The browser initially receives an HTML document, the contents are parsed within this document and additional resources, such as images, CSS, and JavaScript files are fetched. A structured, organized version of the webpage\u2019s code formed after this is called DOM.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #00ccff;\"><b>Why Google (and Other Search Engines) Find Difficulties with JavaScript?<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Usually, while crawling a normal website, Googlebot downloads the HTML file,\u00a0 extracts the links from the source code, and visits them simultaneously. They also download CSS files and send every downloaded resource to Google\u2019s Indexer, which then indexes the page.\u00a0 But, things become a bit complicated when it comes to crawling a JavaScript-based website. Here, Googlebot will not find links in the source code immediately after downloading the HTML file, since they are only injected after executing JavaScript. Once the CSS and JS files are downloaded, the Googlebot uses the Google Web Rendering Service (WRS) to parse, compile, and execute JavaScript. This WRS\u00a0 fetches the data from external APIs, from the database, etc and the indexer finally indexes it<\/span><span style=\"font-weight: 500;\">.<\/span><\/p>\n<p><span style=\"font-weight: 500;\">But rendering and indexing can go wrong in JavaScript websites. As you would have noticed in the above-mentioned steps, the process gets complicated when JavaScript is involved. Parsing, compiling, and running JavaScript files is a time-consuming process for both users as well as Google (and other search engines). For JS based websites, Google is not allowed to index the content until the website is fully rendered. While the rendering process also involves discovering new links, Google would find it difficult to discover any links on a page before the page is rendered.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>Googlebot doesn\u2019t Crawl Like Your Browser\u00a0<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Googlebot works just like a browser by visiting web pages, but it is not typically a browser. Googlebot declines user permission requests, for instance,\u00a0 it will deny video auto-play requests. Resources like cookies, local, and session storage are cleared across page loads. Thus, if the website content relies on cookies or other stored data, Google won\u2019t pick it up. Another difference between the two is that, while browsers download all the resources (such as images, scripts, stylesheets), Googlebot may not choose to do the same.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">Since Google optimizes its crawlers for performance, it may not load all the resources from the server and may not even visit all the pages that it encounters. Google algorithms try to identify if a resource is necessary from a rendering point of view. And, resources may not get fetched by Googlebot if the algorithm fails to detect it.\u00a0<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>How to Make JavaScript SEO Friendly?<\/b><\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>1. Recheck robots.txt so that Search Engines See Your JavaScript<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Always start with checking your robots.txt file and meta robots tag to make sure someone hasn\u2019t blocked the bots accidentally. Robots.txt provides Google with search engines with appropriate crawling opportunities. Blocking JS will make the page appear differently to web crawlers than it does to users. This leads to different user-experience for search engines, and Google can end up interpreting such actions as cloaking.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">To avoid this from happening, it is better to provide web crawlers with all the resources they need to see web pages in the exact same manner as users. So, it is better to discuss with your developers and decide together which files should be hidden from search engines, and which of them should be made accessible.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>2. Use HTTP Status Codes to Interact with Bots<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Bots determine what went wrong during the crawling process using HTTP status codes. Meaningful status codes can be used to convey bots the message that a certain web page should not be crawled or indexed, such as a page requiring a login. In such instances, a 401 HTTP status code can be used. These codes can be used to inform bots if a certain page has been shifted to a new URL, instructing it to index the page accordingly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">Have a look at some most commonly used HTTP status code:<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 500;\"><span style=\"font-weight: 500;\">401\/403: Page unavailable due to permission issues.<\/span><\/li>\n<li style=\"font-weight: 500;\"><span style=\"font-weight: 500;\">301\/302: Page now available at a new URL.<\/span><\/li>\n<li style=\"font-weight: 500;\"><span style=\"font-weight: 500;\">404\/410: Page unavailable now.<\/span><\/li>\n<li style=\"font-weight: 500;\"><span style=\"font-weight: 500;\">5xx: Issues on the server-side.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"color: #00ccff;\"><b>3. Check Your JavaScript Code\u2019s Compatibility with Different Browsers<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Different browsers use different APIs. Your website\u2019s JS code needs to be compatible with these APIs to work perfectly under any browser. The JS code needs to be written considering it\u2019s compatible with browsers of all kinds. Consider the various features and limitations of most common bots (at least of Google and Bing), and write the code. Entrust a team to identify and fix JavaScript issues that may be hindering indexing or display of your page on search engines.\u00a0<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>4. Try Search Friendly Loading<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Images affect a website\u2019s bandwidth and performance, but it is a resource that can\u2019t be excluded as well. Try something like a lazy-loading where images are loaded later, but in a search-friendly manner. Ensure that you do it correctly without ending up hiding content from the search engine. You can use a JavaScript library since it supports the loading of content when it enters the viewport.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>5. Test Your Website Frequently<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Although Google is able to crawl and understand many forms of JavaScript, it is still recommended to conduct some testing frequently. There are two basic steps to detect breaks in the website. One is to check whether the content on your webpages appears in the DOM and the other is to test a couple of pages to make sure that Google is able to index your content.<\/span><\/p>\n<p><span style=\"font-weight: 500;\">Sometimes, Google may not be able to see your content and JavaScript in your robots.txt and analyze it properly. In such cases, consider manually checking parts of your content and fetching them with Google to see if the content appears. Simply test Googlebot&#8217;s ability to fetch your page using the URL Inspection tool to run a live test of the page.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>6. Use HTML Snapshots<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">An HTML snapshot is a capture of a webpage, displaying contents of the page after it has been completely parsed, interpreted, and rendered by the browser. These help search engines in situations when they cannot grasp the JavaScript on your website. The snapshots will make the content interpretable and thus indexable without the need of executing any JavaScript code.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">Google strives to feel the exact same experience as a viewer does. HTML snapshots help Google with it. Thus, it is better to return HTML snapshots to search engine crawlers. With all that being said, use HTML snapshots only when there is something wrong with JavaScript, and it isn\u2019t possible to contact your support team.<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>7. Site Latency<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">Usually, when a browser creates DOM using the received HTML document, it loads the majority of resources exactly as they are mentioned in the HTML document. But, when the large files mentioned on top of the HTML code loads, it automatically delays loading other resources. Placing important sections of the content above the fold is the key idea that Google\u2019s critical rendering path focuses. It appreciates loading content that are crucial to people.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">There could be render-blocking JavaScript that pulls down the website loading speed. They are hindering the page\u2019s speed, which otherwise would have appeared faster. These can be detected by analyzing results from tools like\u00a0 Page Speed Insights or other similar tools. <\/span><span style=\"font-weight: 500;\">\u00a0If you find it difficult to do so, we have <a href=\"https:\/\/vividreal.co.in\/vividreal1.0\/hire-seo-gurus\/\">an amazing team of SEO experts<\/a> who can help you go through this.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">You can resolve this issue to an extent by adding JavaScript in the HTML and using the \u2018async\u2019 attribute to make your JavaScript asynchronous. But, remember to follow the basic rules of JavaScript. For instance, while you modify the code, things would go wrong if the script\u2019s order of precedence gets altered (referring to files that weren\u2019t loaded before within the code).\u00a0<\/span><\/p>\n<p><span style=\"color: #00ccff;\"><b>Conclusion<\/b><\/span><\/p>\n<p><span style=\"font-weight: 500;\">JavaScript is a powerful tool to build websites interactively. JavaScript and SEO can go well together if it\u2019s rightly implemented. Ensure that the Javascript you use on the website is easily accessible to Google by carrying out meticulous testing. Understand how search engine bots are designed to crawl and index web content and try implementing the approaches we mentioned in this article.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 500;\">Still confused? We\u2019ve got <a href=\"https:\/\/vividreal.co.in\/vividreal1.0\/hire-seo-gurus\/\">a team of SEO experts<\/a> to help you. They\u2019ll be glad to help you out!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript is a programming language that can be used to design interactive and dynamic web pages. It operates on the visitor\u2019s computer and doesn\u2019t need constant downloads from the website. JS is the only scripting language that is backed by all web browsers that handle client-side scripting. Another advantage of JS is that it doesn\u2019t &hellip; <a href=\"https:\/\/vividreal.co.in\/vividreal1.0\/javascript-seo-the-things-you-need-to-know\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript SEO: The Things You Need to Know&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9572,"comment_status":"closed","ping_status":"open","sticky":false,"template":"wpb-single-post.php","format":"standard","meta":[],"categories":[3,27,195,30,28],"tags":[381,380,382,379,376,377,250,383,378],"_links":{"self":[{"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/posts\/9567"}],"collection":[{"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/comments?post=9567"}],"version-history":[{"count":3,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/posts\/9567\/revisions"}],"predecessor-version":[{"id":9576,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/posts\/9567\/revisions\/9576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/media\/9572"}],"wp:attachment":[{"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/media?parent=9567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/categories?post=9567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal1.0\/wp-json\/wp\/v2\/tags?post=9567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}