{"id":51996,"date":"2020-01-20T16:25:46","date_gmt":"2020-01-20T15:25:46","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/indexabilidad-del-shadow-dom.html"},"modified":"2023-10-11T08:10:33","modified_gmt":"2023-10-11T06:10:33","slug":"indexability-shadow-dom","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom","title":{"rendered":"Indexability of the shadow DOM"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Index<\/p><ul class=\"toc_list\"><li><a href=\"#Web_components\">Web components<\/a><\/li><li><a href=\"#Difference_between_light_DOM_shadow_DOM_and_composed_DOM\">Difference between light DOM, shadow DOM and composed DOM<\/a><\/li><li><a href=\"#How_to_know_which_parts_of_a_web_component_are_in_the_shadow_DOM\">How to know which parts of a web component are in the shadow DOM?<\/a><\/li><li><a href=\"#How_to_make_the_shadow_DOM_indexable\">How to make the shadow DOM indexable?<\/a><\/li><li><a href=\"#Conclusions\">Conclusions<\/a><\/li><\/ul><\/div>\n<p><strong>The shadow DOM is difficult to index, as it can only be created with JavaScript <\/strong>and there is no way to declare it in the HTML. However, it is a very useful technology to facilitate the work of developers, so it is increasingly common to find it in new developments. Here we will see <strong>what the shadow DOM is<\/strong>, <strong>what problems it creates for indexing and how you can try to make it indexable<\/strong>.<\/p>\n\n<p>Before getting into the subject, let&#8217;s remember what <strong><em>web components<\/em><\/strong>are : they encompass several technologies, including <strong>the shadow DOM<\/strong>.<\/p>\n<h2><span id=\"Web_components\">Web components<\/span><\/h2>\n<p>The shadow DOM is one of the technologies that we have been talking about for years, used by the <em><a href=\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\" target=\"_blank\" rel=\"noopener noreferrer\">web components<\/a><\/em>. Since then, the specification has evolved from <strong>v0<em>web components<\/em><\/strong> (which were only compatible with Chrome while requiring <em>polyfills<\/em> or <em>frameworks<\/em> for other browsers), to <strong>v1<em>web components<\/em>,<\/strong> which are compatible with all of them.<\/p>\n<p>Web components do <strong>not bring anything new to the user<\/strong>, but they are an excellent way to <strong>isolate parts of the code of a website<\/strong>, facilitating <strong>the parallel work<\/strong> of different developers on the <em>front end<\/em>. Components prevent one developer&#8217;s code from affecting another developer&#8217;s code, by enabling their <strong>encapsulation, because the CSS and JavaScript code inside the shadow DOM is isolated from the rest of the page, <\/strong>within a new HTML tag or <strong>custom element<\/strong>defined with the name that the programmer wants to give it. For this reason, this technology <strong>is appearing more and more frequently in new developments,<\/strong> as can be seen in the following graph, which shows the use of <em>custom elements<\/em> in Chrome, which is one of the base technologies that form the web components:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-37568\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/grafica-web-componentsv1.png\" alt=\"Using Web Componets V1\" width=\"900\" height=\"560\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/grafica-web-componentsv1.png 900w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/grafica-web-componentsv1-720x448.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/grafica-web-componentsv1-768x478.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>This type of components should not be confused with the <strong>components of a framework<\/strong> such as Vue, Angular JS or React, as they directly replace the component with HTML code in the DOM light and can do it on the server using their version of <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\" target=\"_blank\" rel=\"noopener noreferrer\">universal<\/a> and therefore do not pose as many indexability problems as the real ones. <em>web components<\/em>.<\/p>\n<h2><span id=\"Difference_between_light_DOM_shadow_DOM_and_composed_DOM\">Difference between light DOM, shadow DOM and composed DOM<\/span><\/h2>\n<p>In terms of indexability, <strong>the DOM light<\/strong> is the part of the component that<strong> is visible in the code without executing JavaScript<\/strong> and therefore <strong>indexable<\/strong>. On the other hand, the <strong>shadow DOM<\/strong> is the part of the implementation that remains hidden and <strong>creates the developer using JavaScript<\/strong> and, as we already know, <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-does-javascript-and-ajax-affect-google-indexing\" target=\"_blank\" rel=\"noopener noreferrer\">Google does not always have render budget to execute the JavaScript of the pages it indexes<\/a> and, therefore <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/javascript\/fix-search-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">Google recommends that whenever possible, <strong>the content to be indexed should be in the light DOM<\/strong>.<\/a>.<\/p>\n<p><strong>The composed DOM<\/strong> is the mixture of both, since <strong>in the shadow DOM we can define holes, called slots<\/strong>, in which we can <strong>assign pieces of the light DOM<\/strong>.<\/p>\n<p>Let&#8217;s see it with an example: let&#8217;s suppose we have a <em>web component<\/em> (these are recognized because they use an HTML tag with a hyphen in the name, in this case &#8220;my-component&#8221;). This is how the HTML code of this component, without executing JavaScript, would look like:<\/p>\n<pre style=\"color: green;\">    &lt;mi-componente&gt;\r\n        &lt;span slot=\"titulo\"&gt;T\u00edtulo en el light DOM pero con H3 en el shadow DOM&lt;\/span&gt;\r\n        &lt;p&gt;Texto en el light DOM&lt;\/p&gt;\r\n    &lt;\/mi-componente&gt;\r\n<\/pre>\n<p>In addition, we assume that the component has a template declared as follows, in which there is a slot with the name &#8220;title&#8221; and another, initially unnamed, which will take the contents of the component that has no slot name assigned to it:<\/p>\n<pre style=\"color: red;\">   &lt;slot&gt;&lt;\/slot&gt;   \r\n   &lt;h3&gt;&lt;slot name=\"titulo\"&gt;&lt;\/slot&gt;&lt;\/h3&gt;\r\n   &lt;p&gt;Texto en el shadow DOM&lt;\/p&gt;\r\n\r\n<\/pre>\n<p>If we run JavaScript in the above component, the browser will generate the following code, which is <strong>the shadow DOM composed with the light DOM<\/strong>, i.e. the <strong>composed DOM<\/strong>:<\/p>\n<pre>  \r\n   <span style=\"color: green;\">&lt;p&gt;Texto en el light DOM&lt;\/p&gt;<\/span>\r\n   <span style=\"color: red;\">&lt;h3&gt;<\/span><span style=\"color: green;\">T\u00edtulo en el light DOM pero con H3 en el shadow DOM<\/span><span style=\"color: red;\">&lt;\/h3&gt;<\/span>\r\n   <span style=\"color: red;\">&lt;p&gt;Texto en el shadow DOM&lt;\/p&gt;<\/span>\r\n<\/pre>\n<p>In this case, <strong>if Google does not run JavaScript, it will not know that the title uses an h3 tag, it will not see the paragraph that says &#8220;Text in shadow DOM&#8221; and it will crawl the text in another order<\/strong>This is detrimental to the positioning of the page that uses this component, as it is not able to give sufficient importance to the header and loses part of the content and order of the same.<\/p>\n<h2><span id=\"How_to_know_which_parts_of_a_web_component_are_in_the_shadow_DOM\">How to know which parts of a web component are in the shadow DOM?<\/span><\/h2>\n<p><strong>If we disable JavaScript on a page, we will not see anything in the shadow DOM.<\/strong> or require JavaScript, but if we want to know specifically <strong>which parts of a component are in the shadow DOM<\/strong>we can use the i<strong>nspect element,<\/strong> with JavaScript enabled, and <strong>the browser will show us the shadow DOM and the light DOM separately<\/strong>giving a shading to the first one. Example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-37583\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-y-light-DOM.png\" alt=\"shadow DOM and light DOM\" width=\"514\" height=\"291\" \/><\/p>\n<p>In this Google Chrome screenshot, where we see the component of the previous example with the inspect element tool, we can see that <strong>the shadow DOM appears inside the #shadow-root tag<\/strong>, indicating that it is the root of the shadow DOM. In addition, <strong>if we click inside a slot<\/strong>, it <strong>highlights the associated HTML in the DOM light<\/strong>.<\/p>\n<h2><span id=\"How_to_make_the_shadow_DOM_indexable\">How to make the shadow DOM indexable?<\/span><\/h2>\n<p>Currently, the only way to <strong>make the Shadow DOM indexable<\/strong> is to use a technique called <strong>DOM rehydration <\/strong>. This involves running code on the server that <strong>calculates the DOM composite<\/strong> of the component as the browser would, to replace the component with this code. In this way, <strong>everything stays generated in the HTML created on the server<\/strong> before reaching the client. One JavaScript library that implements this technique is <a href=\"https:\/\/github.com\/skatejs\/ssr\" target=\"_blank\" rel=\"noopener noreferrer\">skatejs<\/a>. However, depending on the <em>web component<\/em>, this solution may cause problems.<\/p>\n<p>Another option is, as suggested by Google, to <strong>bring all content likely to affect positioning to the light DOM<\/strong>. But <strong>we can do<\/strong> this <strong>only in certain cases<\/strong>. For example: if the component is a button that performs an action, such as sharing the page on a social network, it is not even necessary to have light DOM. If, on the other hand, it is a component that formats a question and answer block, it can be more problematic, especially if we want to keep the semantic markup of headers and other semantic HTML tags in the DOM light, and that the page styles do not affect these tags.<\/p>\n<h2><span id=\"Conclusions\">Conclusions<\/span><\/h2>\n<p><em>Web components<\/em> <strong>are very useful for<\/strong> custom <strong>development<\/strong> and, if their use is extended to CMSs, it will be possible to better isolate the code of different plugins to avoid incompatibilities. However, to <strong>ensure the indexability<\/strong> of the pages, we must either <strong>not use <em>web components<\/em><\/strong> or <strong>bring all the important code into the<\/strong> component&#8217;s <strong>light DOM<\/strong> or <strong>force developers to use the complex solution of rehydrating the DOM<\/strong>.<\/p>\n<p>None of these approaches is good, because <strong>the ability to encapsulate the code is lost,<\/strong> which is the main reason for using <em>web components. <\/em>So it is to be expected that in the future the specification will evolve to allow declaring the shadow DOM in the HTML in an explicit and indexable way.<\/p>\n<p>&nbsp;<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.<\/p>\n","protected":false},"author":14,"featured_media":48245,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[349],"tags":[357,366],"class_list":["post-51996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-indexability","tag-technical-seo","entry"],"yoast_head":"\n<title>Indexability of the shadow DOM | Human Level<\/title>\n<meta name=\"description\" content=\"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.\" \/>\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.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Indexability of the shadow DOM | Human Level\" \/>\n<meta property=\"og:description\" content=\"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-20T15:25:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Daiatron\" \/>\n<meta name=\"twitter:site\" content=\"@humanlevel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\"},\"headline\":\"Indexability of the shadow DOM\",\"datePublished\":\"2020-01-20T15:25:46+00:00\",\"dateModified\":\"2023-10-11T06:10:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\"},\"wordCount\":1218,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png\",\"keywords\":[\"Indexability\",\"Technical SEO\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\",\"url\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\",\"name\":\"Indexability of the shadow DOM | Human Level\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png\",\"datePublished\":\"2020-01-20T15:25:46+00:00\",\"dateModified\":\"2023-10-11T06:10:33+00:00\",\"description\":\"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png\",\"width\":1080,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.humanlevel.com\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Indexability of the shadow DOM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.humanlevel.com\/en#website\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.humanlevel.com\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"width\":268,\"height\":51,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.\",\"sameAs\":[\"https:\/\/x.com\/Daiatron\"],\"url\":\"https:\/\/www.humanlevel.com\/en\/author\/ramon\"}]}<\/script>\n","yoast_head_json":{"title":"Indexability of the shadow DOM | Human Level","description":"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.","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.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom","og_locale":"en_US","og_type":"article","og_title":"Indexability of the shadow DOM | Human Level","og_description":"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom","og_site_name":"Human Level","article_published_time":"2020-01-20T15:25:46+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png","type":"image\/png"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@Daiatron","twitter_site":"@humanlevel","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"Indexability of the shadow DOM","datePublished":"2020-01-20T15:25:46+00:00","dateModified":"2023-10-11T06:10:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom"},"wordCount":1218,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png","keywords":["Indexability","Technical SEO"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom","url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom","name":"Indexability of the shadow DOM | Human Level","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png","datePublished":"2020-01-20T15:25:46+00:00","dateModified":"2023-10-11T06:10:33+00:00","description":"Discover how shadow DOM and web components affect the indexability of pages to avoid positioning problems.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadowdom.png","width":1080,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"Indexability of the shadow DOM"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","width":268,"height":51,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","caption":"Ram\u00f3n Saquete"},"description":"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.","sameAs":["https:\/\/x.com\/Daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/51996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=51996"}],"version-history":[{"count":4,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/51996\/revisions"}],"predecessor-version":[{"id":52033,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/51996\/revisions\/52033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/48245"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=51996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=51996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=51996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}