{"id":112313,"date":"2017-06-27T16:03:32","date_gmt":"2017-06-27T08:03:32","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=12313"},"modified":"2023-08-09T15:14:59","modified_gmt":"2023-08-09T07:14:59","slug":"javascript-user-experience","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/javascript-user-experience\/","title":{"rendered":"Incorrect Application of Javascript in Your Site Is Ruining Your SEO"},"content":{"rendered":"<p><a href=\"https:\/\/seo-hacker.com\/javascript-user-experience\/\"><img decoding=\"async\" class=\"fpi-shvzz\" class=\"wp-image-112315 size-large aligncenter lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience.jpg\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg\" alt=\"Javascript- Bot Experience and User Experience\" width=\"600\" height=\"768\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/768;\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Knowing and understanding Javascript, and its underlying potential to affect your SEO campaign is an essential skill that a modern SEO expert should have. Javascript &#8211; among other components &#8211; lets search engines crawl and analyze a website. Hence, if a webmaster fails to properly incorporate Javascript into their website, it will lead to a failure of indexing and ranking.<\/span><\/p>\n<p><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">The most important part about Javascript&#8217;s impact on SEO is whether the search engines can locate the content and understand its meaning. Also, webmasters should be mindful of their website&#8217;s ability to be <a href=\"https:\/\/seo-hacker.com\/google-major-index-divide\/\">indexed in mobile platforms<\/a>. If search engines could not, then what should you do? But, before we get into optimizing your Javascript, let\u2019s start with the basics.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1.jpg\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-12316 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1-1024x768.jpg\" alt=\"Javascript- Bot Experience and User Experience-1\" width=\"1024\" height=\"768\" data-wp-pid=\"12316\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/768;\" \/><\/a><\/p>\n<h2><b>Back to Basics<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">When webmasters are creating a website, there are 3 major components that they need to take note of, namely:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Also known as Hypertext Markup Language, it serves as the structure, backbone, and the \u201cskeletal system\u201d of the website. It serves to organize the content, define the static content, make the headings, list elements, paragraphs, etc.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">CSS<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The Cascading Style Sheet, or otherwise known as CSS, is in charge of the website\u2019s design, aesthetics, and style. Basically, it is the page\u2019s layer of presentation. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Javascript<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This is the component that is in charge of interactivity and the main element related to the dynamic web. It is either placed inside the HTML document in the &lt;script&gt; tags, or it is linked or referenced to. With today\u2019s progress, a variety of Javascript frameworks and libraries are now available such as jQuery, ReactJS, EmberJS, etc. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What You Need To Know About AJAX<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Asynchronous Javascript and XML, when combined form AJAX. It is a set of techniques for web developers that enables web applications to communicate with a server while not disturbing the current page. The word \u201cAsynchronous\u201d means that lines of code and other functions can still run while the \u201casync\u201d script is currently active. In the past, XML used to be the primary language used by web developers to pass data, however, AJAX is now used to pass numerous types of data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The most commonly known use of AJAX is to update the content or layout of a web page without causing a refresh on the current page. Historically, whenever a user loads a page, all the elements of the page must be transported from the server to the page, and then the process of rendering begins. However, with the introduction of AJAX, only the elements or assets that differ between the pages need to be loaded, which means that user does not have to refresh the entire page. This entails that the overall experience of users will improve drastically.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The best representation of AJAX is to think about it as calling mini servers. Also, the best example of AJAX in use is in Google Maps, wherein you do not have to refresh the entire page just to get the right place &#8211; instead Google maps call the mini servers to get the different element\/assets needed, and the page updates without an entire page reload. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The DOM (Document Object Model)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Being an SEO professional, you might have known what DOM already is, but if you do not, DOM is what Google uses to analyze, inspect, and understand web pages. You can see the DOM whenever you go to the \u201cInspect Element\u201d in a browser. A simple way of looking at DOM is that this is the process the browser does whenever it receives the HTML document so that it could start rendering the page. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The entire process &#8211; not just the DOM &#8211; starts with the browser receiving the HTML document. Afterward, it will start parsing all the content of the received document and all the additional resources such as CSS and Javascript files are also transported into the page. The DOM is created from the parsing of all the content and resources. It could be understood as the structured, organized, and systematically arranged version of the page\u2019s code. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Today, the DOM is usually very different from the initial HTML document due to the existence of <\/span><i><span style=\"font-weight: 400;\">dynamic <\/span><\/i><span style=\"font-weight: 400;\">HTML. This kind of HTML is the page\u2019s ability to change the content it shows depending on the user\u2019s input, environmental conditions, and other variables. Simply put, Dynamic HTML leverages HTML, CSS, and Javascript. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Headless Browsing<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This process is basically transporting web pages without the user interface. Its importance has recently been noticed because Google and Baidu use headless browsing to better understand the content of the page and the user\u2019s experience. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Examples of scripted headless browsers are <\/span><a href=\"http:\/\/phantomjs.org\/\"><span style=\"font-weight: 400;\">PhantomJS<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"http:\/\/zombie.js.org\/\"><span style=\"font-weight: 400;\">Zombie.js<\/span><\/a><span style=\"font-weight: 400;\">. It is commonly used to automate web interaction for research purposes and to render static HTML snapshots for the purpose of initial requests.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-2.jpg\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-12317 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-2-1024x768.jpg\" alt=\"Javascript- Bot Experience and User Experience-2\" width=\"1024\" height=\"768\" data-wp-pid=\"12317\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/768;\" \/><\/a><\/p>\n<h2><b>Javascript, SEO, and Fixing the Issues<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Usually, there are 3 main reasons why you should be concerned about the Javascript on your site:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Crawlability &#8211; The capability of bots to crawl your website.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Obtainability &#8211; The capability of bots to access your site\u2019s information, and to parse through its content.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Perceived Site Latency &#8211; Also known as the Critical Rendering Path<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Crawlability<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">One of the main jobs of web developers and webmasters is to make sure that bots could find their URLs and understand their site\u2019s structure. Two key elements are in play:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Blocking the search engines from your site\u2019s Javascript<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Proper internal linking &#8211; which means that you did not leverage your Javascript as replacement for HTML tags<\/span><\/li>\n<\/ol>\n<p><b>Why You Should Unblock Javascript<\/b><\/p>\n<p><span style=\"font-weight: 400;\">As mentioned, when Javascript is blocked, search engines are unable to receive your site\u2019s full experience. This means that the search engine could not see what the end users are seeing on your site. This will lead to a reduction of your site\u2019s allure to search engines, and can even lead to search engines interpreting it as cloaking. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">One of the best ways to see if there are things that Googlebot is blocked from is to use <\/span><a href=\"https:\/\/www.google.com\/webmasters\/tools\/googlebot-fetch?pli=1\"><span style=\"font-weight: 400;\">Fetch as Google<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/technicalseo.com\/seo-tools\/fetch-render\/\"><span style=\"font-weight: 400;\">Fetch and Render<\/span><\/a><span style=\"font-weight: 400;\">, and TechnicalSEO.com\u2019s <\/span><a href=\"https:\/\/technicalseo.com\/seo-tools\/robots-txt\/\"><span style=\"font-weight: 400;\">robot.txt<\/span><\/a><span style=\"font-weight: 400;\"> testing tools to identify those that are blocked. After researching the things that are blocked, the best thing that any web developer or webmaster can do is to unblock those resources and give Google the access that they need. <\/span><\/p>\n<p><b>Internal Linking<\/b><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/seo-hacker.com\/vital-internal-linking\/\">Internal Linking<\/a> should be one of the webmasters top priorities whenever they are making or cleaning their site\u2019s architecture. So, when internal linking is made, it should be used with regular anchor tags within the HTML or the DOM.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">More importantly, do not use Javascript\u2019s onclick events as a replacement for internal linking. Although end URLs might be crawled through Javascript and XML sitemaps, they will not be included in your site\u2019s global navigation. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Internal Linking is one of the main signals for search engines to understand your site\u2019s architecture, and for them to know the importance of your pages. You should not underestimate the power of internal links because sometimes, they can override \u201cSEO hints\u201d like canonical tags.<\/span><\/p>\n<p><b>URL Structure<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Normally, AJAX sites or the Javascript-based websites are using fragment identifiers (the hashtag symbol &#8211; #) within their URLs<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Not Recommended<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Only the Hash (#) &#8211; This is not crawlable. This is mainly used for identifying anchor links &#8211; these are the links that allow a user to jump to a piece of content inside a given page. The important thing to remember is that anything after the Hash (#) of the URL is never sent to the server, and it will cause the page to immediately scroll to the first element with a matching ID. Also, <\/span><a href=\"https:\/\/plus.google.com\/u\/0\/+JohnMueller\/posts\/LT4fU7kFB8W\"><span style=\"font-weight: 400;\">Google recommends<\/span><\/a><span style=\"font-weight: 400;\"> avoiding the use of \u201c#\u201d in the URLs.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The Hashbang (#!) &#8211; Hashbang URLs were originally a hack to support crawlers. A few years back, Google and Bing developed a complex AJAX solution wherein the Hashbang (#!) in the URL with the UX co-existed with an escaped_fragment HTML based experience for bots. Google has now rescinded this recommendation, and have preferred to receive the exact experience users have. Inside escaped fragments, there are two experiences:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Original Experience &#8211; This URL must either possess a Hashbang (#!) within the URL to indicate there is an escaped fragment or a meta element which indicates there exists an escaped fragment.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Escaped Fragment &#8211; This replaces the hashbang (#!) in the URL with \u201c_escaped_fragment_\u201d and serves the HTML snapshot. It is also called the Ugly URL because it is long, and somehow looks like a hack.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Recommended<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">pushState History API &#8211; Pushstate is navigation-based and is usually a part of the History API (your browsing history). Normally, pushState updates the URLs in the address bar and only the necessary changes are updated. It also allows Javascript sites to leverage URLs. It is currently allowed by Google, only when supporting navigation in the browser for the client-side or hybrid rendering.<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A great use of pushState is the process of \u201cinfinite scroll\u201d or the process wherein when the user reaches a new part of the page, the URL automatically updates. Essentially, if the user clicks refresh on the page, they will land on the same part once the refresh is finished. However, with pushState, they do not need to refresh the page because the URL is automatically updated when they reach new content. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Obtainability<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Search engines have been known to make use of headless browsing to render the DOM to obtain a better understanding of the content of the page, and the user\u2019s experience. This means that Google can still process Javascript and use the DOM &#8211; instead of the HTML document. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the other hand, there are still situations wherein search engines have difficulty comprehending a site\u2019s Javascript. It is definitely important for a webmaster or web developer to understand how bots crawl and interact with their site\u2019s content. If you are not sure, then conduct tests.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For search engine bots that execute Javascript, there are a few elements that they need for them to be able to obtain a site\u2019s content:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If your site requires some actions from the users, search engines probably don\u2019t see it.<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Google\u2019s bots do not have the capability to click, write, or do any other activity that requires a user\u2019s actions. So, if your website has elements like this, Google probably does not have the same experience as the end user. That is why it is important for you to be mindful that both the bots and actual users should have the same experience.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If your Javascript loading time takes more than five seconds, search engines may not be seeing your page.<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It has been known that there is no timeout value for websites, however, they should aim to load in 5 seconds or less.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If errors exist inside your Javascript, both browsers and search engines have a possibility to miss out on sections of your page if the code is not executed properly.<\/span><\/li>\n<\/ul>\n<p><b>Making Sure Search Engines Get Your Content<\/b><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Test<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">The most commonly used solution to resolve Javascript is to just let it be. Just let Google\u2019s algorithm do its work. Giving Google the experience that the users have is naturally its preferred choice. 2014 was the year that Google first announced that they were able to better understand the web regarding Javascript and other elements. However, experts in the industry have speculated that Google could crawl Javascript websites way before their 2014 announcement. Hence, if you could see your website\u2019s content in the DOM, there is a high probability that it is being parsed by Google.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A recent study conducted by Bartosz Goralewicz <\/span><a href=\"https:\/\/goralewicz.com\/blog\/javascript-seo-experiment\/\"><span style=\"font-weight: 400;\">tested a combination of different libraries and frameworks of Javascript<\/span><\/a><span style=\"font-weight: 400;\"> to determine how Google interacts with them. The test eventually concluded that Google has the capability to interact with varying Javascript forms, and has showcased that some forms of Javascript are more challenging to interact with than others.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The studies conducted by different experts help SEO practitioners understand how they can effectively make their websites, and take on a more proactive role in the overall scheme of their website. However, it is still better for webmasters and web developers alike to make a habit out of testing and experimenting with small sections of their website &#8211; this is to find the appropriate solution for them. You could test and examine through:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Affirming that your site\u2019s content can be viewed in the DOM<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Testing a group of pages to check if Google can index its content<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Check some quotes from your content<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fetch it with Google and see if content appears.<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">An important note to remember when using Fetch with Google is: when you use Fetch with Google, it usually occurs during the load event or before timeout. This is definitely a great way to check if Google could see your content, and whether your Javascript is blocking the robots.txt. This way is still subject to error, however, it is a really good first step. <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">After all the testing, what should you do if there is an error, and search engine bots still could not index and get your content? Well, if any errors are found in your testing, you can opt to try HTML snapshot.<\/span><\/p>\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\"> HTML Snapshot<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">These are basically completely rendered pages that could be returned to search engine bots. HTML Snapshot is a controversial topic when it comes to Google, however, it is important for you to understand it because there are cases when using it is your only option. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML snapshots could be used when search engines and other sites such as Facebook cannot get ahold of your Javascript, then it is better to return an HTML snapshot than to not get your content indexed &#8211; or not even understood at all. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, take note that Google wants the same experience that the users have. So, only provide them with snapshots if it is absolutely necessary, and other experts or forums could not be of help to you. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whenever you consider using HTML snapshots, always remember that Google has already \u201cdevalued\u201d the use of this AJAX recommendation. Although they still support it in some ways, they still recommend avoiding the use of AJAX. The direction that Google wants to walk on is understandable because they want to have the same experience as the users. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">The second thing to take note of is the possibility of cloaking. If ever you have returned an HTML snapshot, and the search engine found that it does not &#8211; in any way &#8211; represent your website, it is already considered a cloaking risk.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Despite all the drawbacks, HTML snapshots have their own advantages:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> It will help search engines and crawlers understand the experience on the website. This is because some types of Javascript are harder to understand.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Other search engines and crawlers should be able to understand user\u2019s experience. Bing, like some search engines, has not announced that it has the capability to crawl and index Javascript. The only solution that Javascript-heavy websites could do is to make use of HTML snapshots. However, you have to be wary if this is really the case before using HTML snapshots.<\/span><\/li>\n<\/ol>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Site Latency<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Whenever browsers receive the HTML document and proceed to create the DOM, most of the resources included in the page is loaded as they appear in the document. Simply put, if your HTML document has a large file at the top, the browser will prioritize that file first. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google\u2019s critical rendering path is catered to the improvement of user experience because the concept behind it is that the browser loads whatever the user needs as soon as possible. However, if your HTML document has an unnecessary amount of resources or Javascript files blocking the page\u2019s ability to load you are getting \u201crender-blocking Javascript\u201d. This means that your Javascript is impeding the page\u2019s capability to appear as if it is loading faster (the appearance is also known as perceived latency).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Using page speed measuring tools, test if you have render-blocking Javascript issues, there are three potential solutions:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Inline: You should add the Javascript into the HTML document<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Async: add the \u201casync\u201d attribute to the HTML tag to make your Javascript asynchronous<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Defer: Lower the placement of the Javascript in the document. However, it is important to remember that the scripts should be arranged in terms of priority. So, if your Javascript is among the top priorities in your page, avoid deferring it to a lower position. <\/span><\/li>\n<\/ol>\n<p><b>Key Takeaway<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The most important aspect of any practitioner\u2019s SEO campaign is to have their website crawled, indexed and ranked. Additionally, one of the main components of a website is its Javascript. However, elements like Javascript can also break your website\u2019s goal of ranking on the first page of the SERPs. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Always make sure that the content of your website is crawlable, obtainable, and is producing the optimal site latency. Although this is more inclined on <a href=\"https:\/\/seo-hacker.com\/ace-technical-seo-infograph\/\">technical SEO<\/a>, the content of this article could still be immensely helpful for your SEO campaign. Keep all the things mentioned here in mind, and you will have a great time optimizing your website. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Are you now able to properly use your Javascript? Do you still need help in any other issues of your website? Tell me in the comments below, and let\u2019s help each other out. <\/span><\/p>\n<p><b>P.S.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">SEO Hacker will be hosting a no-nonsense SEO conference and it&#8217;s none other than the SEO Summit 2017. I want to invite you to attend the Summit if you want to improve your business\u2019 online presence. Renowned experts will be sharing their in-depth knowledge of SEO, digital marketing, conversion rate optimization, and much more. Interested? <\/span><a href=\"https:\/\/seo-hacker.com\/seo-summit-2017\/\"><span style=\"font-weight: 400;\">Click the link for more information<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"wl_entities_gutenberg":"","footnotes":""},"categories":[100008],"tags":[102405,102408,102406,102403,102401,100331,101845,102402,200154,102404,101769,102407],"wl_entity_type":[102583],"class_list":["post-112313","post","type-post","status-publish","format-standard","hentry","category-seo","tag-bot-experience","tag-bot-tutorial","tag-bot-user-experience","tag-css","tag-html","tag-internal-linking","tag-java-script","tag-javascript","tag-seo-2","tag-seo-and-javascript","tag-user-experience","tag-ux-tutorial","wl_entity_type-article"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How Javascript Affects SEO this 2017<\/title>\n<meta name=\"description\" content=\"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seo-hacker.com\/javascript-user-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Javascript Affects SEO this 2017\" \/>\n<meta property=\"og:description\" content=\"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seo-hacker.com\/javascript-user-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Services Agency in Manila, Philippines\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-27T08:03:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-09T07:14:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg\" \/>\n<meta name=\"author\" content=\"Sean Si\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/\"},\"author\":{\"name\":\"Sean Si\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\"},\"headline\":\"Incorrect Application of Javascript in Your Site Is Ruining Your SEO\",\"datePublished\":\"2017-06-27T08:03:32+00:00\",\"dateModified\":\"2023-08-09T07:14:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/\"},\"wordCount\":2976,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg\",\"keywords\":[\"bot experience\",\"Bot Tutorial\",\"bot user experience\",\"CSS\",\"HTML\",\"internal linking\",\"java script\",\"Javascript\",\"seo\",\"SEO and Javascript\",\"user experience\",\"UX Tutorial\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/\",\"name\":\"How Javascript Affects SEO this 2017\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg\",\"datePublished\":\"2017-06-27T08:03:32+00:00\",\"dateModified\":\"2023-08-09T07:14:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\"},\"description\":\"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#primaryimage\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/Javascript-Bot-Experience-and-User-Experience.jpg\",\"contentUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/Javascript-Bot-Experience-and-User-Experience.jpg\",\"width\":1024,\"height\":768,\"caption\":\"Javascript- Bot Experience and User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/javascript-user-experience\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/seo-hacker.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Incorrect Application of Javascript in Your Site Is Ruining Your SEO\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#website\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/\",\"name\":\"SEO Services Agency in Manila, Philippines\",\"description\":\"SEO Hacker is an SEO Agency and SEO Blog in the Philippines. Let us take your website to the top of the search results with our holistic white-hat strategies. Inquire today!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/seo-hacker.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\",\"name\":\"Sean Si\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"caption\":\"Sean Si\"},\"description\":\"Sean Si is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project...\",\"sameAs\":[\"https:\\\/\\\/sean.si\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Javascript Affects SEO this 2017","description":"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/seo-hacker.com\/javascript-user-experience\/","og_locale":"en_US","og_type":"article","og_title":"How Javascript Affects SEO this 2017","og_description":"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.","og_url":"https:\/\/seo-hacker.com\/javascript-user-experience\/","og_site_name":"SEO Services Agency in Manila, Philippines","article_published_time":"2017-06-27T08:03:32+00:00","article_modified_time":"2023-08-09T07:14:59+00:00","og_image":[{"url":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg","type":"","width":"","height":""}],"author":"Sean Si","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#article","isPartOf":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/"},"author":{"name":"Sean Si","@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf"},"headline":"Incorrect Application of Javascript in Your Site Is Ruining Your SEO","datePublished":"2017-06-27T08:03:32+00:00","dateModified":"2023-08-09T07:14:59+00:00","mainEntityOfPage":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/"},"wordCount":2976,"commentCount":0,"image":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg","keywords":["bot experience","Bot Tutorial","bot user experience","CSS","HTML","internal linking","java script","Javascript","seo","SEO and Javascript","user experience","UX Tutorial"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seo-hacker.com\/javascript-user-experience\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/","url":"https:\/\/seo-hacker.com\/javascript-user-experience\/","name":"How Javascript Affects SEO this 2017","isPartOf":{"@id":"https:\/\/seo-hacker.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience-1024x768.jpg","datePublished":"2017-06-27T08:03:32+00:00","dateModified":"2023-08-09T07:14:59+00:00","author":{"@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf"},"description":"Javascript is an integral part of SEO and we breakdown how it can help your SEO and how you can take advantage of all of its features.","breadcrumb":{"@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seo-hacker.com\/javascript-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#primaryimage","url":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience.jpg","contentUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2017\/06\/Javascript-Bot-Experience-and-User-Experience.jpg","width":1024,"height":768,"caption":"Javascript- Bot Experience and User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/seo-hacker.com\/javascript-user-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seo-hacker.com\/"},{"@type":"ListItem","position":2,"name":"Incorrect Application of Javascript in Your Site Is Ruining Your SEO"}]},{"@type":"WebSite","@id":"https:\/\/seo-hacker.com\/#website","url":"https:\/\/seo-hacker.com\/","name":"SEO Services Agency in Manila, Philippines","description":"SEO Hacker is an SEO Agency and SEO Blog in the Philippines. Let us take your website to the top of the search results with our holistic white-hat strategies. Inquire today!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seo-hacker.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf","name":"Sean Si","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","caption":"Sean Si"},"description":"Sean Si is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project...","sameAs":["https:\/\/sean.si"]}]}},"_wl_alt_label":[],"jetpack_featured_media_url":"","wl:entity_url":"http:\/\/data.wordlift.io\/wl0320\/post\/incorrect_application_of_javascript_in_your_site_is_ruining_your_seo","_links":{"self":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts\/112313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/comments?post=112313"}],"version-history":[{"count":0,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts\/112313\/revisions"}],"wp:attachment":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/media?parent=112313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/categories?post=112313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/tags?post=112313"},{"taxonomy":"wl_entity_type","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/wl_entity_type?post=112313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}