{"id":140985,"date":"2020-05-06T13:59:00","date_gmt":"2020-05-06T13:59:00","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/?p=140985"},"modified":"2023-02-17T13:44:36","modified_gmt":"2023-02-17T13:44:36","slug":"javascript-rendering-and-the-problems-for-seo-in-2020","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2020\/05\/06\/javascript-rendering-and-the-problems-for-seo-in-2020\/","title":{"rendered":"JavaScript rendering and the problems for SEO in 2020"},"content":{"rendered":"<div class=\"well\">\n<h3>30-second summary:<\/h3>\n<ul>\n<li>Anyone working in enterprise SEO in 2020 will have encountered this web architecture scenario with a client at some point. Frameworks like React, Vue, and Angular make web development more simply expedited.<\/li>\n<li>There are tons of case studies but one business Croud encountered migrated to a hybrid Shopify \/ JS framework with internal links and content rendered via JS. They proceeded to lose traffic worth an estimated $8,000 per day over the next 6 months\u2026 about $1.5m USD.<\/li>\n<li>The experienced readers amongst us will soon start to get the feeling that they&#8217;re encountering familiar territory.<\/li>\n<li>Croud&#8217;s VP Strategic Partnerships, Anthony Lavall discusses JavaScript frameworks that deal with the most critical SEO elements.<\/li>\n<\/ul>\n<\/div>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">While running the SEO team at<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"vertical-align: baseline;\">Croud<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0in New York over the last three years, 60% of our clients have been through<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/moz.com\/blog\/no-such-thing-as-a-site-migration\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">some form of migration<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">. Another ~30% have either moved from or to a SPA (Single Page Application) often utilizing an AJAX (Asynchronous Javascript and XML) framework to varying degrees.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Anyone working in enterprise SEO in 2020 will have encountered this web architecture scenario with a client at some point. Frameworks like React, Vue, and Angular make web development more simply expedited. This is especially true when creating dynamic web applications which offer relatively quick new request interactivity (once the initial libraries powering them have loaded &#8211;<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/gmail.com\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">Gmail<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0is a good example) by utilizing the power of the modern browser to render the client-side code (the JavaScript). Then using web workers to offer network request functionality that doesn&#8217;t require a traditional server-based URL call.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">With the increased functionality and deployment capabilities comes a cost &#8211; the question of SEO performance. I doubt any SEO reading this is a stranger to that question. However, you may be still in the dark regarding an answer.<\/span><\/p>\n<h2><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">Why is it a problem?<\/span><\/h2>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Revenue, in the form of lost organic traffic via lost organic rankings. It&#8217;s as simple as this. Web developers who recommended JavaScript (JS) frameworks are not typically directly responsible for long-term commercial performance. One of the main reasons SEOs exist in 2020 should be to mitigate strategic mistakes that could arise from this. Organic traffic is often taken as a given and not considered as important (or controllable), and this is where massive problems take place. <\/span><span style=\"text-decoration: none; vertical-align: baseline;\">There are tons of case studies but one business we encountered migrated to a hybrid Shopify \/ JS framework with internal links and content rendered via JS. They proceeded to lose traffic worth an estimated\u00a0<\/span><span style=\"text-decoration: none; vertical-align: baseline;\">$8,000 per day over the next 6 months&#8230; about $1.5m USD<\/span><span style=\"text-decoration: none; vertical-align: baseline;\">.<\/span><\/p>\n<h2><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">What&#8217;s the problem?<\/span><\/h2>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">There are many problems. SEOs are already trying to deal with a huge number of signals from the most heavily invested commercial algorithm ever created (Google&#8230; just in case). Moving away from a traditional server-rendered website (think Wikipedia) to a contemporary framework is potentially riddled with SEO challenges. Some of which are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">Search engine bot crawling, rendering, and indexing<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0&#8211; search engine crawlers like Googlebot have adapted their crawling process to include the rendering of JavaScript (starting as far back as 2010) in order to be able to fully comprehend the code on AJAX web pages. We know Google is getting better at understanding complex JavaScript. Other search crawlers might not be. But this isn&#8217;t simply a question of comprehension. Crawling the entire web is no simple task and even Google&#8217;s resources are limited. They have to decide if a site is worth crawling and rendering based on assumptions that take place long before JS may have been encountered and rendered (metrics such as an estimated number of total pages, domain history, WhoIs data, domain authority, etc.).<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" class=\"wp-image-140983\" style=\"width: 625px; position: relative; display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px;\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/asg_xUxbPCax7dX2PDfa2Fart_V4EGhJXoWG0NkpLg2F1587651135999-Google27sCrawlingandRenderingProcess.jpg\" srcset=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/asg_xUxbPCax7dX2PDfa2Fart_V4EGhJXoWG0NkpLg2F1587651135999-Google27sCrawlingandRenderingProcess.jpg 1024w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/asg_xUxbPCax7dX2PDfa2Fart_V4EGhJXoWG0NkpLg2F1587651135999-Google27sCrawlingandRenderingProcess-300x164.jpg 300w, https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/asg_xUxbPCax7dX2PDfa2Fart_V4EGhJXoWG0NkpLg2F1587651135999-Google27sCrawlingandRenderingProcess-768x421.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Google&#8217;s Crawling and Rendering Process &#8211; The 2nd Render \/ Indexing Phase (announced at Google I\/O 2018)<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">Speed<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0&#8211; one of the biggest hurdles for AJAX applications. Google crawls web pages un-cached so those cumbersome first loads of single page applications can be problematic. Speed can be defined in a number of ways, but in this instance, we&#8217;re talking about the length of time it takes to execute and critically render all the resources on a JavaScript heavy page compared to a less resource intensive HTML page.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">Resources and rendering<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0&#8211; with traditional server-side code, the DOM (Document Object Model) is essentially rendered once the CSSOM (CSS Object Model) is formed or to put it more simply, the DOM doesn&#8217;t require too much further manipulation following the fetch of the source code. There are caveats to this but it is safe to say that client-side code (and the multiple libraries\/resources that code might be derived from) adds increased complexity to the finalized DOM which means more CPU resources required by both search crawlers and client devices. This is one of the most significant reasons why a complex JS framework would not be preferred. However, it is so frequently overlooked.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Now, everything prior to this sentence has made the assumption that these AJAX pages have been built with no consideration for SEO. This is slightly unfair to the modern web design agency or in-house developer. There is usually some type of consideration to mitigate the negative impact on SEO (we will be looking at these in more detail). The experienced readers amongst us will now start to get the feeling that they are encountering familiar territory. A territory which has resulted in many an email discussion between the client, development, design, and SEO teams related to whether or not said migration is going to tank organic rankings (sadly, it often does).<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">The problem is that solutions to creating AJAX applications that work more like server-based HTML for SEO purposes are themselves mired in contention; primarily related to their efficacy. How do we test the efficacy of\u00a0<\/span><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">anything<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0for SEO? We have to deploy and analyze SERP changes. And the results for migrations to JavaScript frameworks are repeatedly associated with drops in traffic. Take a look at the weekly stories pouring into the<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/groups.google.com\/forum\/#!forum\/js-sites-wg\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">&#8220;JS sites in search working group&#8221;<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0hosted by John Mueller if you want some proof.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Let&#8217;s take a look at some of the most common mitigation tactics for SEO in relation to AJAX.<\/span><\/p>\n<h2><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">The different solutions for AJAX SEO mitigation<\/span><\/h2>\n<h3><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">1. Universal\/Isomorphic JS<\/span><\/h3>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Isomorphic JavaScript, AKA Universal JavaScript, describes JS applications which run both on the client and the server, as in, the client or server can execute the &lt;script&gt; and other code delivered, not just the client (or server). Typically, complex JavaScript applications would only be ready to execute on the client (typically a browser). Isomorphic Javascript mitigates this. One of the best explanations I&#8217;ve seen (specifically related to Angular JS) is from<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/medium.com\/@andresrutnik\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">Andres Rutnik<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0on Medium:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">The client makes a request for a particular URL to your application server.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">The server proxies the request to a rendering service which is your Angular application running in a Node.js container. This service could be (but is not necessarily) on the same machine as the application server.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">The server version of the application renders the complete HTML and CSS for the path and query requested, including &lt;script&gt; tags to download the client Angular application.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">The browser receives the page and can show the content immediately. The client application loads asynchronously and once ready, re-renders the current page and replaces the static HTML with the server rendered. Now the web site behaves like an SPA for any interaction moving forwards. This process should be seamless to a user browsing the site.<\/span><\/li>\n<\/ol>\n<p>Source: <a style=\"text-decoration: none;\" href=\"https:\/\/medium.com\/slalom-engineering\/bringing-seo-to-angular-applications-9de14995dc67\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\"><em>Medium<\/em><\/span><\/a><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">To reiterate, following the request, the server renders the JS and the full DOM\/CSSOM is formed and served to the client. This means that Googlebot and users have been served a pre-rendered version of the page. The difference for users is that the HTML and CSS just served is then\u00a0<\/span><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">re-rendered<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0to replace it with the dynamic JS so it can behave like the SPA it was always intended to be.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">The problems with building isomorphic web pages\/applications appear to be just that&#8230; actually building the thing isn&#8217;t easy. There&#8217;s a decent series<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/medium.com\/@mtmr0x\/the-worst-problems-youll-find-building-an-isomorphic-application-part-1-36a03f86e3e1\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">here from Matheus Marsiglio<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0who documents his experience.<\/span><\/p>\n<h3><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">2. Dynamic rendering<\/span><\/h3>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Dynamic rendering is a more simple concept to understand; it is the process of detecting the user-agent making the server request and routing the correct response code based on that request being from a validated bot or a user.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">This is<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/developers.google.com\/search\/docs\/guides\/dynamic-rendering\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">Google&#8217;s recommended method<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0of handling JavaScript for search. It is well illustrated here:<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-140984\" style=\"width: 394px; height: 105.014px; position: relative; display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px;\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/asg_xUxbPCax7dX2PDfa2Fart_V4EGhJXoWG0NkpLg2F1587649337279-1587649337279.png\" alt=\"JavaScript - Dynamic Rendering from Google\" width=\"499\" height=\"80\" \/><\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">The Dynamic Rendering Process explained by Google<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">The output is a pre-rendered iteration of your code for search crawlers and the same AJAX that would have always been served to users. Google recommends a solution such as prerender.io to achieve this. It&#8217;s a reverse proxy service that pre-renders and caches your pages. There are some pitfalls with dynamic rendering, however, that must be understood:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><strong>Cloaking\u00a0<\/strong>&#8211; In a world wide web dominated primarily by HTML and CSS, cloaking was a huge negative as far as Google was concerned. There was little reason for detecting and serving different code to Googlebot aside from trying to game search results. This is not the case in the world of JavaScript. Google&#8217;s dynamic rendering process is a direct recommendation for cloaking. They are explicitly saying, &#8220;serve users one thing and serve us another&#8221;. Why is this a problem?<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/developers.google.com\/search\/docs\/guides\/dynamic-rendering\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">Google says<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">, &#8220;As long as your dynamic rendering produces similar <a href=\"https:\/\/searchenginewatch.com\/2020\/05\/04\/how-writers-can-optimize-content-for-a-variety-of-search-engines\/\" target=\"_blank\" rel=\"noopener noreferrer\">content<\/a>, Googlebot won&#8217;t view dynamic rendering as cloaking.&#8221; But what is\u00a0<\/span><span style=\"font-weight: 400; text-decoration: none; vertical-align: baseline;\">similar<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">? How easy could it be to inject more content to Googlebot than is shown to users or using JS with a delay to remove text for users or manipulate the page in another way that Googlebot is unlikely to see (because it is delayed in the DOM for example).<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><strong>Caching\u00a0<\/strong>&#8211; For sites that change frequently such as large news publishers who require their content to be indexed as quickly as possible, a pre-render solution may just not cut it. Constantly adding and changing pages need to be almost immediately pre-rendered in order to be immediate and effective. The<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/prerender.io\/pricing\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">minimum caching time<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0on prerender.io is in days, not minutes.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><strong>Frameworks vary massively<\/strong> &#8211; Every tech stack is different, every library adds new complexity, and every CMS will handle this all differently. Pre-render solutions such as prerender.io are not a one-stop solution for optimal SEO performance.<\/span><\/li>\n<\/ul>\n<h3>3.\u00a0<b>Google&#8217;s recommended workaround<\/b><\/h3>\n<div>Google recommends server-side rendering or server-side rendering with hydration. Server-side rendering is inherent in programming languages like PHP. Once a URL is requested, the PHP is executed generating the HTML, CSS, and JS that will comprise the page. The JS elements are already rendered leaving nothing up to the browser. This is ideal for SEO. This is not the case with frameworks like React, Angular, etc. which are not prerendered and require CSR (client-side rendering) to work.<\/div>\n<div><\/div>\n<div>Server-side rendering with hydration is a little more complex but it effectively turns your static web page into a dynamic one by attaching event handlers to the HTML elements. You can find out more about\u00a0<a href=\"https:\/\/lavall.marketing\/javascript\/what-is-server-side-rendering-with-hydration\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-auth=\"NotApplicable\" data-safelink=\"true\" data-linkindex=\"2\">server-side rendering + hydration here<\/a>.<b><\/b><\/div>\n<h3><b>Additional note: CDNs yield additional complexities\u2026 (or any reverse proxy for that matter)<\/b><\/h3>\n<div>Content delivery networks (such as Cloudflare) can create additional testing complexities by adding another layer to the reverse proxy network. Testing a dynamic rendering solution can be difficult as Cloudflare blocks non-validated Googlebot requests via reverse DNS lookup. Troubleshooting dynamic rendering issues therefore takes time. Time for Googlebot to re-crawl the page and then a combination of Google\u2019s cache and a buggy new Search Console to be able to interpret those changes. The mobile-friendly testing tool from Google is a decent stop-gap but you can only analyze a page at a time.<\/div>\n<h2><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">This is a minefield! So what do I do for optimal SEO performance?<\/span><\/h2>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Think smart and plan effectively. Luckily only a relative handful of design elements are critical for SEO when considering the arena of web design and many of these are elements in the &lt;head&gt; and\/or metadata. They are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Anything in the &lt;head&gt; &#8211; &lt;link&gt; tags and &lt;meta&gt; tags<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Header tags, e.g. &lt;h1&gt;, &lt;h2&gt;, etc.<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">&lt;p&gt; tags and all other copy \/ text<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">&lt;table&gt;, &lt;ul&gt;, &lt;ol&gt;, and all other crawl-able HTML elements<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Links (must be &lt;a&gt; tags with href attributes)<\/span><\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Images<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Every element above should be served without any JS rendering required by the client. As soon as you require JS to be rendered to yield one of the above elements you put search performance in jeopardy. JavaScript can, and should be used to enhance the user experience on your site. But if it\u2019s used to inject the above elements into the DOM then you have got a problem that needs mitigating.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Internal links often provide the biggest SEO issues within Javascript frameworks. This is because<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/www.w3schools.com\/jsref\/event_onclick.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">onclick<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0events are sometimes used in place of &lt;a&gt; tags, so it&#8217;s not only an issue of Googlebot rendering the JS to form the links in the DOM. Even after the JS is rendered there is still no &lt;a&gt; tag to crawl because it&#8217;s not used at all &#8211; the onclick event is used instead.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Every internal link needs to be the &lt;a&gt; tag with an href attribute containing the value of the link destination in order to be considered valid. This was confirmed at<\/span><a style=\"text-decoration: none;\" href=\"https:\/\/croud.com\/blog\/seo-all-posts\/google-io-2019-summary-for-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0<\/span><span style=\"font-weight: 400; font-style: normal; text-decoration: underline; vertical-align: baseline;\">Google&#8217;s I\/O event<\/span><\/a><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\u00a0last year.<\/span><\/p>\n<h2><span style=\"font-weight: bold; font-style: normal; text-decoration: none; vertical-align: baseline;\">To conclude<\/span><\/h2>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">Be wary of the statement, &#8220;we can use React \/ Angular because we&#8217;ve got next.js \/ Angular Universal so there&#8217;s no problem&#8221;. Everything needs to be tested and that testing process can be tricky in itself. Factors are again myriad. To give an extreme example, what if the client is moving from a simple HTML website to an AJAX framework? The additional processing and possible issues with client-side rendering critical elements could cause huge SEO problems. What if that same website currently generates $10m per month in organic revenue? Even the smallest drop in crawling, indexing, and performance capability could result in the loss of significant revenues.<\/span><\/p>\n<p><span style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">There is no avoiding modern JS frameworks and that shouldn&#8217;t be the goal &#8211; the time saved in development hours could be worth thousands in itself &#8211; but as SEOs, it&#8217;s our responsibility to vehemently protect the most critical SEO elements and ensure they are always server-side rendered in one form or another. Make Googlebot do as little leg-work as possible in order to comprehend your content. That should be the goal.<\/span><\/p>\n<div>\n<p><em>Anthony Lavall is VP Strategic Partnerships at digital agency Croud. He can be found on Twitter<\/em><em> <a href=\"https:\/\/twitter.com\/AnthonyLavall\" target=\"_blank\" rel=\"noopener noreferrer\">@AnthonyLavall<\/a>.<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Croud&#8217;s VP Strategic Partnerships, Anthony Lavall discusses JavaScript frameworks that deal with the most critical SEO elements.<\/p>\n","protected":false},"author":1092,"featured_media":141068,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,5],"tags":[7575,27708,1396,37,17440,322,22],"content_type":[],"class_list":["post-140985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-seo","tag-ajax","tag-cdn","tag-development","tag-google","tag-href","tag-javascript","tag-seo"],"acf":{"tad_independentcommercial":"","tad_content_format":""},"post_info":{"name":"idris.nagri@blenheimchalcot.com idris.nagri@blenheimchalcot.com","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2020\/04\/javascript-rendering-and-the-problems-for-seo-in-2020.png","category":"Development","timeago":"6y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/140985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/1092"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=140985"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/140985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/141068"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=140985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=140985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=140985"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=140985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}