{"id":1597,"date":"2019-04-16T17:00:09","date_gmt":"2019-04-16T15:00:09","guid":{"rendered":"https:\/\/www.dazzlepop.net\/site\/?p=1597"},"modified":"2019-04-10T11:47:34","modified_gmt":"2019-04-10T09:47:34","slug":"a-survival-kit-for-seo-friendly-javascript-websites","status":"publish","type":"post","link":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/","title":{"rendered":"A survival kit for SEO-friendly JavaScript websites"},"content":{"rendered":"<div style=\"text-align:center\"><\/div><p><strong>JavaScript-powered websites are here to stay. As JavaScript in its many frameworks becomes an ever more popular resource for modern websites, SEOs must be able to guarantee their technical implementation is search engine-friendly.<\/strong><\/p>\n<p>In this article, we will focus on how to optimize JS-websites for Google (although\u00a0<a href=\"https:\/\/blogs.bing.com\/webmaster\/october-2018\/bingbot-Series-JavaScript,-Dynamic-Rendering,-and-Cloaking-Oh-My\">Bing<\/a>\u00a0also recommends the same solution, dynamic rendering).<\/p>\n<p>The content of this article includes:<\/p>\n<p>1. \u00a0 \u00a0JavaScript challenges for SEO<\/p>\n<p>2. \u00a0 \u00a0Client-side and server-side rendering<\/p>\n<p>3. \u00a0 \u00a0How Google crawls websites<\/p>\n<p>4. \u00a0 \u00a0How to detect client-side rendered content<\/p>\n<p>5. \u00a0 \u00a0The solutions: Hybrid rendering and dynamic rendering<\/p>\n<h2><strong>1. JavaScript challenges for SEO<\/strong><\/h2>\n<p>React, Vue, Angular, Node, and Polymer. If at least one of these fancy names rings a bell, then most likely you are already dealing with a JavaScript-powered website.<\/p>\n<p>All these JavaScript frameworks provide great flexibility and power to modern websites.<\/p>\n<p>They open a large range of possibilities in terms of client-side rendering (like allowing the page to be rendered by the browser instead of the server), page load capabilities, dynamic-content, user-interaction, and extended functionalities.<\/p>\n<p>If we only look at what has an impact on SEO, JavaScript frameworks can do the following for a website:<\/p>\n<ul>\n<li>Load content dynamically based on users\u2019 interactions<\/li>\n<li>Externalize the loading of visible content (see client-side rendering below)<\/li>\n<li>Externalize the loading of meta-content or code (for example, structured data)<\/li>\n<\/ul>\n<p>Unfortunately, if implemented without using a pair of SEO lenses, JavaScript frameworks can pose serious challenges to the page performance, ranging from speed deficiencies to render-blocking issues, or even hindering crawlability of content and links.<\/p>\n<p>There are many aspects that SEOs must look after when auditing a JavaScript-powered web page, which can be summarized as follows:<\/p>\n<ol>\n<li>Is the content visible to Googlebot? Remember the bot doesn\u2019t interact with the page (images, tabs, and more).<\/li>\n<li>Are links crawlable, hence followed? Always use the anchor (&lt;a&gt;) and the reference (href=), even in conjunction with the \u201conclick\u201d events.<\/li>\n<li>Is the rendering fast enough?<\/li>\n<li>How does it affect crawl efficiency and crawl budget?<\/li>\n<\/ol>\n<p>A lot of questions to answer. So where should an SEO start?<\/p>\n<p>Below are key guidelines to the optimization of JS-websites, to enable the usage of these frameworks while keeping the search engine bots happy.<\/p>\n<h2><strong>2. Client-side and server-side rendering: The best \u201cfrenemies\u201d<\/strong><\/h2>\n<p>Probably the most important pieces of knowledge all SEOs need when they have to cope with JS-powered websites is the concepts of client-side and server-side rendering.<\/p>\n<p>Understanding the differences, benefits, and disadvantages of both are critical to deploying the right SEO strategy and not getting lost when speaking with software engineers (who eventually are the ones in charge of implementing that strategy).<\/p>\n<p>Let\u2019s look at how Googlebot crawls and indexes pages, putting it as a very basic sequential process:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123897 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png\" alt=\"how googlebot crawls and indexes pages\" width=\"559\" height=\"250\" \/><\/p>\n<p>1. The client (web browser) places several requests to the server, in order to download all the necessary information that will eventually display the page. Usually, the very first request concerns the static HTML document.<\/p>\n<p>2. The CSS and JS files, referred to by the HTML document, are then downloaded: these are the styles, scripts and services that contribute to generating the page.<\/p>\n<p>3. The Website Rendering Service (WRS) parses and executes the JavaScript (which can manage all or part of the content or just a simple functionality).<br \/>\nThis JavaScript can be served to the bot in two different ways:<\/p>\n<ul>\n<li>Client-side: all the job is basically \u201coutsourced\u201d to the WRS, which is now in charge of loading all the script and necessary libraries to render that content. The advantage for the server is that when a real user requests the page, it saves a lot of resources, as the execution of the scripts happens on the browser side.<\/li>\n<li>Server-side: everything is pre-cooked (aka rendered) by the server, and the final result is sent to the bot, ready for crawling and indexing. The disadvantage here is that all the job is carried out internally by the server, and not externalized to the client, which can lead to additional delays in the rendering of further requests.<\/li>\n<\/ul>\n<p>4.\u00a0<a href=\"https:\/\/searchenginewatch.com\/sew\/news\/2050822\/google-search-index-gets-caffeine-shot\">Caffeine (Google\u2019s indexer)<\/a>\u00a0indexes the content found<\/p>\n<p>New links are discovered within the content for further crawling<\/p>\n<p>This is the theory, but in the real world, Google doesn\u2019t have infinite resources and has to do some prioritization in the crawling.<\/p>\n<h2><strong>3. How Google actually crawls websites<\/strong><\/h2>\n<p>Google is a very smart search engine with very smart crawlers.<\/p>\n<p>However, it usually adopts a reactive approach when it comes to new technologies applied to web development. This means that it is Google and its bots that need to adapt to the new frameworks as they become more and more popular (which is the case with JavaScript).<\/p>\n<p>For this reason, the way Google crawls JS-powered websites is still far from perfect, with blind spots that SEOs and software engineers need to mitigate somehow.<\/p>\n<p>This is in a nutshell how Google actually crawls these sites:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123898 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-a-JS-rendered-site.png\" alt=\"how googlebot crawls a JS rendered site\" width=\"468\" height=\"266\" \/><\/p>\n<p>The above graph was shared by Tom Greenaway in\u00a0<a href=\"https:\/\/youtu.be\/PFwUbgvpdaQ?t=834\" target=\"_blank\" rel=\"noopener\">Google IO 2018 conference<\/a>, and what it basically says is \u2013\u00a0If you have a site that relies heavily on JavaScript, you\u2019d better load the JS-content very quickly, otherwise we will not be able to render it (hence index it) during the first wave, and it will be postponed to a second wave, which no one knows when may occur.<\/p>\n<p>Therefore, your client-side rendered content based on JavaScript will probably be rendered by the bots in the second wave, because during the first wave they will load your server-side content, which should be fast enough. But they don\u2019t want to spend too many resources and take on too many tasks.<\/p>\n<p>In Tom Greenaway\u2019s words:<\/p>\n<blockquote><p>\u201cThe rendering of JavaScript powered websites in Google Search is deferred until Googlebot has resources available to process that content.\u201d<\/p><\/blockquote>\n<p>Implications for SEO are huge, your content may not be discovered until one, two or even five weeks later, and in the meantime, only your content-less page would be assessed and ranked by the algorithm.<\/p>\n<p>What an SEO should be most worried about at this point is this simple equation:<\/p>\n<p>No content is found = Content is (probably) hardly indexable<\/p>\n<p>And how would a content-less page rank? Easy to guess for any SEO.<\/p>\n<p>So far so good. The next step is learning if the content is rendered client-side or server-side (without asking software engineers).<\/p>\n<h2><strong>4. How to detect client-side rendered content<\/strong><\/h2>\n<h3><strong>Option one: The Document Object Model (DOM)<\/strong><\/h3>\n<p>There are several ways to know it, and for this, we need to introduce the concept of DOM.<\/p>\n<p>The Document Object Model defines the structure of an HTML (or an XML) document, and how such documents can be accessed and manipulated.<\/p>\n<p>In SEO and software engineering we usually refer to the DOM as the final HTML document rendered by the browser, as opposed to the original static HTML document that lives in the server.<\/p>\n<p>You can think of the HTML as the trunk of a tree. You can add branches, leaves, flowers, and fruits to it (that is the DOM).<\/p>\n<p>What JavaScript does is manipulate the HTML and create an enriched DOM that adds up functionalities and content.<\/p>\n<p>In practice, you can check the static HTML by pressing \u201cCtrl+U\u201d on any page you are looking at, and the DOM by \u201cInspecting\u201d the page once it\u2019s fully loaded.<\/p>\n<p>Most of the times, for modern websites, you will see that the two documents are quite different.<\/p>\n<h3><strong>Option two: JS-free Chrome profile\u00a0<\/strong><\/h3>\n<p>Create a new profile in Chrome and disallow JavaScript through the content settings (access them directly here \u2013\u00a0 Chrome:\/\/settings\/content).<\/p>\n<p>Any URL you browse with this profile will not load any JS content. Therefore, any blank spot in your page identifies a piece of content that is served client-side.<\/p>\n<h3><strong>Option three: Fetch as Google in Google Search Console<\/strong><\/h3>\n<p>Provided that your website is registered in Google\u00a0<a href=\"https:\/\/searchenginewatch.com\/2019\/04\/05\/google-search-console-guide\/\">Search Console<\/a>\u00a0(I can\u2019t think of any good reason why it wouldn\u2019t be), use the \u201cFetch as Google\u201d tool in the old version of the console. This will return a rendering of how Googlebot sees the page and a rendering of how a normal user sees it. Many differences there?<\/p>\n<h3><strong>Option four: Run Chrome version 41 in headless mode (Chromium)\u00a0<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/search\/docs\/guides\/rendering\" target=\"_blank\" rel=\"noopener\">Google officially stated<\/a>\u00a0in early 2018 that they use an older version of Chrome (specifically version 41, which anyone can download from\u00a0<a href=\"https:\/\/commondatastorage.googleapis.com\/chromium-browser-snapshots\/index.html?prefix=Win\/310958\/\" target=\"_blank\" rel=\"noopener\">here<\/a>) in headless mode to render websites. The main implication is that a page that doesn\u2019t render well in that version of Chrome can be subject to some crawling-oriented problems.<\/p>\n<h3><strong>Option five: Crawl the page on Screaming Frog using Googlebot<\/strong><\/h3>\n<p>And with the JavaScript rendering option disabled. Check if the content and meta-content are rendered correctly by the bot.<\/p>\n<p>After all these checks, still, ask your software engineers because you don\u2019t want to leave any loose ends.<\/p>\n<h2><strong>5. The solutions: Hybrid rendering and dynamic rendering<\/strong><\/h2>\n<p>Asking a software engineer to roll back a piece of great development work because it hurts SEO can be a difficult task.<\/p>\n<p>It happens frequently that SEOs are not involved in the development process, and they are called in only when the whole infrastructure is in place.<\/p>\n<p>We SEOs should all work on improving our relationship with software engineers and make them aware of the huge implications that any innovation can have on SEO.<\/p>\n<p>This is how a problem like content-less pages can be avoided from the get-go. The solution resides on two approaches.<\/p>\n<h3><strong>Hybrid rendering<\/strong><\/h3>\n<p>Also known as Isomorphic JavaScript, this approach aims to minimize the need for client-side rendering, and it doesn\u2019t differentiate between bots and real users.<\/p>\n<p>Hybrid rendering suggests the following:<\/p>\n<ol>\n<li>On one hand, all the non-interactive code (including all the JavaScript) is executed server-side in order to render static pages. All the content is visible to both crawlers and users when they access the page.<\/li>\n<li>On the other hand, only user-interactive resources are then run by the client (the browser). This benefits the page load speed as less client-side rendering is needed.<\/li>\n<\/ol>\n<h3><strong>Dynamic rendering<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/search\/docs\/guides\/dynamic-rendering\" target=\"_blank\" rel=\"noopener\">This approach<\/a>\u00a0aims to detect requests placed by a bot vs the ones placed by a user and serves the page accordingly.<\/p>\n<ol>\n<li>If the request comes from a user: The server delivers the static HTML and makes use of client-side rendering to build the DOM and render the page.<\/li>\n<li>If the request comes from a bot: The server pre-renders the JavaScript through an internal renderer (such as Puppeteer), and delivers the new static HTML (the DOM, manipulated by the JavaScript) to the bot.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123899 aligncenter\" src=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-google-does-dynamic-rendering-javascript-sites.png\" alt=\"how google does dynamic rendering javascript sites\" width=\"555\" height=\"250\" \/><\/p>\n<h3><strong>The best of both worlds<\/strong><\/h3>\n<p>Combining the two solutions can also provide great benefit to both users and bots.<\/p>\n<ol>\n<li>Use hybrid rendering if the request comes from a user<\/li>\n<li>Use server-side rendering if the request comes from a bot<\/li>\n<\/ol>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>As the use of JavaScript in modern websites is growing every day, through many light and easy frameworks, it requires software engineers to solely rely on HTML to please search engine bots which are not realistic nor feasible.<\/p>\n<p>However, the SEO issues raised by client-side rendering solutions can be successfully tackled in different ways using hybrid rendering and dynamic rendering.<\/p>\n<p>Knowing the technology available, your website infrastructure, your engineers, and the solutions can guarantee the success of your SEO strategy even in complicated environments such as JavaScript-powered websites.<\/p>\n<div><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Source:\u00a0<a href=\"https:\/\/searchenginewatch.com\/2019\/04\/09\/a-survival-kit-for-seo-friendly-javascript-websites\/\">https:\/\/searchenginewatch.com\/2019\/04\/09\/a-survival-kit-for-seo-friendly-javascript-websites\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript-powered websites are here to stay. As JavaScript in its many frameworks becomes an ever more popular resource for modern websites, SEOs must be able to guarantee their technical implementation is search engine-friendly. In this article, we will focus on how to optimize JS-websites for Google (although\u00a0Bing\u00a0also recommends the same solution, dynamic rendering). The content [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":-1,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[1],"tags":[7,41,23,8],"class_list":["post-1597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-e-marketing","tag-google","tag-search-engines","tag-seo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dazzlepop | A survival kit for SEO-friendly JavaScript websites<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dazzlepop | A survival kit for SEO-friendly JavaScript websites\" \/>\n<meta property=\"og:description\" content=\"JavaScript-powered websites are here to stay. As JavaScript in its many frameworks becomes an ever more popular resource for modern websites, SEOs must be able to guarantee their technical implementation is search engine-friendly. In this article, we will focus on how to optimize JS-websites for Google (although\u00a0Bing\u00a0also recommends the same solution, dynamic rendering). The content [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Dazzlepop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dp.Dazzlepop\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-16T15:00:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/shutterstock_488754805-300x200.jpg\" \/>\n<meta name=\"author\" content=\"Noura Ibrahim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/shutterstock_488754805-300x200.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@dazzle_pop\" \/>\n<meta name=\"twitter:site\" content=\"@dazzle_pop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noura Ibrahim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\"},\"author\":{\"name\":\"Noura Ibrahim\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/53e5e5cffa9109e865719dcfdc83b6b5\"},\"headline\":\"A survival kit for SEO-friendly JavaScript websites\",\"datePublished\":\"2019-04-16T15:00:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\"},\"wordCount\":1869,\"publisher\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png\",\"keywords\":[\"E-Marketing\",\"Google\",\"search engines\",\"SEO\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\",\"url\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\",\"name\":\"Dazzlepop | A survival kit for SEO-friendly JavaScript websites\",\"isPartOf\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png\",\"datePublished\":\"2019-04-16T15:00:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage\",\"url\":\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png\",\"contentUrl\":\"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dazzlepop.net\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A survival kit for SEO-friendly JavaScript websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#website\",\"url\":\"https:\/\/www.dazzlepop.net\/site\/\",\"name\":\"Dazzlepop\",\"description\":\"Digital Marketing Solutions\",\"publisher\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dazzlepop.net\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#organization\",\"name\":\"Dazzlepop\",\"url\":\"https:\/\/www.dazzlepop.net\/site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.dazzlepop.net\/site\/wp-content\/uploads\/2018\/04\/dazzlepop-512.jpg\",\"contentUrl\":\"https:\/\/www.dazzlepop.net\/site\/wp-content\/uploads\/2018\/04\/dazzlepop-512.jpg\",\"width\":512,\"height\":512,\"caption\":\"Dazzlepop\"},\"image\":{\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/dp.Dazzlepop\",\"https:\/\/x.com\/dazzle_pop\",\"https:\/\/www.instagram.com\/dp.dazzlepop\/\",\"https:\/\/www.linkedin.com\/in\/dazzlepop\/\",\"https:\/\/www.pinterest.com\/Mohamed_Adel_DP\/\",\"https:\/\/www.youtube.com\/channel\/UCmtf4MMftrDRlG--YoTp9Yw\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/53e5e5cffa9109e865719dcfdc83b6b5\",\"name\":\"Noura Ibrahim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4de07542ac2857d52bf2184388f6d21b2fbadf67239967f75ce4be7cc4216a04?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4de07542ac2857d52bf2184388f6d21b2fbadf67239967f75ce4be7cc4216a04?s=96&d=mm&r=g\",\"caption\":\"Noura Ibrahim\"},\"url\":\"https:\/\/www.dazzlepop.net\/site\/author\/noura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dazzlepop | A survival kit for SEO-friendly JavaScript websites","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:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/","og_locale":"en_US","og_type":"article","og_title":"Dazzlepop | A survival kit for SEO-friendly JavaScript websites","og_description":"JavaScript-powered websites are here to stay. As JavaScript in its many frameworks becomes an ever more popular resource for modern websites, SEOs must be able to guarantee their technical implementation is search engine-friendly. In this article, we will focus on how to optimize JS-websites for Google (although\u00a0Bing\u00a0also recommends the same solution, dynamic rendering). The content [&hellip;]","og_url":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/","og_site_name":"Dazzlepop","article_publisher":"https:\/\/www.facebook.com\/dp.Dazzlepop","article_published_time":"2019-04-16T15:00:09+00:00","og_image":[{"url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/shutterstock_488754805-300x200.jpg","type":"","width":"","height":""}],"author":"Noura Ibrahim","twitter_card":"summary_large_image","twitter_image":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/shutterstock_488754805-300x200.jpg","twitter_creator":"@dazzle_pop","twitter_site":"@dazzle_pop","twitter_misc":{"Written by":"Noura Ibrahim","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#article","isPartOf":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/"},"author":{"name":"Noura Ibrahim","@id":"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/53e5e5cffa9109e865719dcfdc83b6b5"},"headline":"A survival kit for SEO-friendly JavaScript websites","datePublished":"2019-04-16T15:00:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/"},"wordCount":1869,"publisher":{"@id":"https:\/\/www.dazzlepop.net\/site\/#organization"},"image":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png","keywords":["E-Marketing","Google","search engines","SEO"],"articleSection":["SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/","url":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/","name":"Dazzlepop | A survival kit for SEO-friendly JavaScript websites","isPartOf":{"@id":"https:\/\/www.dazzlepop.net\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage"},"image":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png","datePublished":"2019-04-16T15:00:09+00:00","breadcrumb":{"@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#primaryimage","url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png","contentUrl":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2019\/04\/how-googlebot-crawls-and-indexes-pages.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dazzlepop.net\/site\/a-survival-kit-for-seo-friendly-javascript-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dazzlepop.net\/site\/"},{"@type":"ListItem","position":2,"name":"A survival kit for SEO-friendly JavaScript websites"}]},{"@type":"WebSite","@id":"https:\/\/www.dazzlepop.net\/site\/#website","url":"https:\/\/www.dazzlepop.net\/site\/","name":"Dazzlepop","description":"Digital Marketing Solutions","publisher":{"@id":"https:\/\/www.dazzlepop.net\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dazzlepop.net\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dazzlepop.net\/site\/#organization","name":"Dazzlepop","url":"https:\/\/www.dazzlepop.net\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dazzlepop.net\/site\/#\/schema\/logo\/image\/","url":"https:\/\/www.dazzlepop.net\/site\/wp-content\/uploads\/2018\/04\/dazzlepop-512.jpg","contentUrl":"https:\/\/www.dazzlepop.net\/site\/wp-content\/uploads\/2018\/04\/dazzlepop-512.jpg","width":512,"height":512,"caption":"Dazzlepop"},"image":{"@id":"https:\/\/www.dazzlepop.net\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/dp.Dazzlepop","https:\/\/x.com\/dazzle_pop","https:\/\/www.instagram.com\/dp.dazzlepop\/","https:\/\/www.linkedin.com\/in\/dazzlepop\/","https:\/\/www.pinterest.com\/Mohamed_Adel_DP\/","https:\/\/www.youtube.com\/channel\/UCmtf4MMftrDRlG--YoTp9Yw"]},{"@type":"Person","@id":"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/53e5e5cffa9109e865719dcfdc83b6b5","name":"Noura Ibrahim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dazzlepop.net\/site\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4de07542ac2857d52bf2184388f6d21b2fbadf67239967f75ce4be7cc4216a04?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4de07542ac2857d52bf2184388f6d21b2fbadf67239967f75ce4be7cc4216a04?s=96&d=mm&r=g","caption":"Noura Ibrahim"},"url":"https:\/\/www.dazzlepop.net\/site\/author\/noura\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/posts\/1597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/comments?post=1597"}],"version-history":[{"count":1,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/posts\/1597\/revisions"}],"predecessor-version":[{"id":1599,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/posts\/1597\/revisions\/1599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/media?parent=1597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/categories?post=1597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dazzlepop.net\/site\/wp-json\/wp\/v2\/tags?post=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}