我们在Shadow DOM中做什么

我们在Shadow DOM中做什么

技术SEO可能有点吓人。有尖牙。

要击败技术上的SEO怪兽,您必须冒险进入代码库的洞穴和城堡-有时只有手握木桩。

为此,我招募了精通SEO的开发人员和专业的哥特 戴夫·斯玛特 向技术SEO中最恐怖的部分之一发出阴影:Shadow DOM。

为什么ShadowDOM很重要?

像大多数事物一样,您只关心可能在您的世界中露头的SEO怪物。

我已经深入到深渊 渲染图角度的性能指标 但这是我的朋友,这是技术SEO的地下墓穴。

如果/当您正在使用使用Web组件或JavaScript框架的网站时,您将在了解Shadow DOM中发现实用价值。

或者您正在盯着看起来像这些怪异骨架之一的页面源。



您会在乎的是,Shadow DOM有点习惯,在消失到下层领域之前先将内容吸进去。

“当Googlebot渲染页面时,它会平化阴影DOM和浅色DOM的内容。这意味着Googlebot只能看到在呈现的HTML中可见的内容…如果该内容在呈现的HTML中不可见,则Googlebot将无法对其进行索引。” – 了解JavaScript SEO基础知识,搜索开发人员

我们将对此重新表述,并为城堡后面的人大声一点:

如果我们的内容未编入索引,我们的内容将无法排名。

我们在Shadow DOM中的操作“ width =” 760“ height =” 429“ Size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/shadow-dom-abduction-5e67c27f78381-768x434.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-abduction-5e67c27f78381-480x272.jpg 480w ,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-abduction-5e67c27f78381-680x385.jpg 680w,https://cdn.searchenginejournal.com/wp-content/uploads/ 2020/03 / shadow-dom-abduction-5e67c27f78381.jpg 960w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-abduction-5e67c27f78381-768x434.jpg地下城与DOM

在进入隐窝之前,您需要了解DOM是什么。

DOM是的首字母缩写 文件对象模型

DOM是随每个页面请求一起构建的。

有时,当DOM构建出现问题时,页面看起来不正确。

其他时候,它缓慢地聚集在一起,引起了一个过度关注但意图良好的同事的恐慌。

让我们看一下将HTML转换为DOM的过程:

DOM中有什么?

HTML在DOM中由一系列称为节点的嵌套对象表示。

每个节点可以包含内容或子节点。

就像站点地图和站点地图索引之间的关系一样。

大多数现代浏览器针对1,500个节点进行了优化。

节点的这个迷宫式集合称为DOM树。

可视化的dom树“ width =” 760“ height =” 477“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03 /resting-under-the-dom-tree-5e66926d3c270-768x482.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/resting-under-the-dom-tree-5e66926d3c270- 480x301.jpg 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/resting-under-the-dom-tree-5e66926d3c270-680x426.jpg 680w,https://cdn.searchenginejournal。 com / wp-content / uploads / 2020/03 / resting-under-the-dom-tree-5e66926d3c270-1024x642.jpg 1024w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/resting -under-the-dom-tree-5e66926d3c270.jpg 1518w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/resting-under-the-dom-tree-5e66926d3c270-768x482 .jpg

我们可以操纵DOM树并与之交互。

看起来像:

这是一个重要的概念,因为它是DOM,而不是提供的初始HTML定义了您在浏览器中看到的内容,并扩展了呈现页面的搜索引擎(例如Google!)对您的索引和排名。

我如何看待DOM?

Chrome devTools为您提供了一种很好的,人性化的方式来查看DOM树。

我们在Shadow DOM中的操作“ width =” 760“ height =” 492“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/inspect-dom-5e669823b4eda-768x497.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/inspect-dom-5e669823b4eda-480x310.jpg 480w,https:/ /cdn.searchenginejournal.com/wp-content/uploads/2020/03/inspect-dom-5e669823b4eda-680x440.jpg 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/inspect- dom-5e669823b4eda-1024x662.jpg 1024w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/inspect-dom-5e669823b4eda-1600x1035.jpg 1600w,https://cdn.searchenginejournal.com/ wp-content / uploads / 2020/03 / inspect-dom-5e669823b4eda.jpg 1874w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/inspect-dom-5e669823b4eda-768x497。 jpg

在Search Console中可视化DOM树

要一次看到整个DOM树及其结构,我们只需要在开发工具控制台中投放一些魔术即可。

您可以一遍又一遍地重复此过程,探索所有分支机构和战利品箱,因为您已经学会了如何 遍历DOM

如果这些看上去恐怖的东西超出您的议价范围,那就可以了。

它并不是真的要成为人类的饲料。

这是组成页面的骨架和松软的位。

它是内容,结构和样式,以及它们之间的相互关系以及如何相互应用。

光与影

如果按照检查DOM的步骤进行操作,则会看到“轻型DOM”。

仅当涉及阴影时,才称为Light DOM。

影子DOM是一个全新的DOM树,它连接到Light DOM中的元素(其影子宿主)。

没错-就像一盏灯可以投射很多阴影一样,一盏Light DOM可以包含多个Shadow DOM。

阴影DOM可视化“ width =” 760“ height =” 460“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03 /shadow-dom-visualized-5e669f0394798-768x465.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-visualized-5e669f0394798-480x291.jpg 480w,https:/ /cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-visualized-5e669f0394798-680x412.jpg 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/ shadow-dom-visualized-5e669f0394798-1024x620.jpg 1024w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-visualized-5e669f0394798.jpg 1578w“ src =” https:/ /cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-visualized-5e669f0394798-768x465.jpg

Shadow DOM如何使用?

Shadows DOM非常有用。

许多浏览器将它们用于本机窗口小部件,例如

(是的,在这些元素后面隐藏着一个阴影DOM!)

假设我们有一个电子商务网站,我们想建立一个类别页面。

我们可以这样标记页面:

东西1

可爱的绿色事物” class =“回应

事物1就像事物2一样,但绿色

细节

东西2

可爱的红色东西

事物2就像事物1但红色

细节

我们将一遍又一遍地重复此结构,直到列出所有产品。

如果我们对该解决方案进行了硬编码,则每次库存更改时都必须对其进行更新。

为了节省我们的理智,我们可以转向影子DOM,拥抱Web组件的黑手艺,并创建一个类似以下的自定义元素:

东西1
可爱的绿色东西

事物1就像事物2一样,但绿色

东西2
可爱的红色东西

事物2就像事物1但红色

我们的自定义元素使我们可以简化流程。

我们可以在任何页面上重复使用它。

只需在Web组件中进行召唤,即可获得可重用的,基于组件的体系结构的收益。

这是devTools中组件及其熟悉的Shadow DOM的外观。

自定义元素和阴影DOM的示例“ width =” 633“ height =” 595“ size =”(最大宽度:633px)100vw,633px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/component-with-shadow-dom-5e67b6b71de41.jpg 633w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/component-with-shadow-dom-5e67b6b71b41de480-451x451。 jpg 480w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/component-with-shadow-dom-5e67b6b71de41.jpg

React,Vuejs和Angular等框架也有自己的可重用组件。

这些JavaScript框架和库不使用影子DOM,而是直接使用轻型DOM。

尽管最初有相似之处,但针对不同的事物。

JavaScript框架更关心保持数据和状态同步,而Web组件则不关心。

如果您使用的是JS框架,并且想要自己的影子DOM:请不要担心!

您可以将Web组件与所有这些组件一起使用,例如, 角度元素

除了这支黑暗军外,还有LitElement和lit-HTML来自 聚合物项目 以及从中收集的现成的Web组件 https://www.webcomponents.org/

Shadow DOM的相关性很快将变得越来越流行。

浏览器支持

Web组件,特别是 自定义元素 自2018年以来,Chrome和Firefox自2018年以来一直为Chrome和Firefox提供支持(Chrome为5月,Firefox为10月),并获得了除Internet Explorer和Edge之外所有主要浏览器的支持。

Internet Explorer停留在11,但是Edge更改为基于Chromium(Chromium是从中构建Chrome的开源版本),因此它也将支持自定义元素。

迄今为止,微软浏览器缺乏支持一直是一个棘手的问题,但是随着Edge即将转向铬,这一障碍将被清除。

直到那时, 保鲜膜 可用于创建兼容性。

Googlebot和Shadow DOM

作为SEO,我们最终关心Googlebot(以及其他精明的搜索引擎)如何检索,呈现内容并最终对其进行排名。

假设我们的页面源包含以下HTML。

如果使用devTools检查该元素,则会看到:

我们在Shadow DOM中的工作“ width =” 533“ height =” 76“ Size =”(最大宽度:533px)100vw,533px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/shadow-dom-with-boundary-5e67bf28a2a30.jpg 533w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-with-boundary-5e67bf28a2a30-480x68。 jpg 480w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/shadow-dom-with-boundary-5e67bf28a2a30.jpg

看到#shadow-root(open)位吗?

那就是光/阴影DOM的边界。

被“拉平”意味着边界被刺穿。

所有的影子DOM树都被压缩到轻型DOM树中,从而生成单个DOM。

幸运的是,对于SEO,这正是Google处理Shadow DOM的方式。

这是在移动设备适合性测试工具中呈现的相同组件。

我们在Shadow DOM中的操作“ width =” 624“ height =” 30“ Size =”(最大宽度:624px)100vw,624px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/mobile-friendly-test-shadow-dom-results-5e67c0d86dba6.jpg 624w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/mobile-friendly-test-shadow- dom-results-5e67c0d86dba6-480x23.jpg 480w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/mobile-friendly-test-shadow-dom-results-5e67c0d86dba6.jpg

我们的内容存在!

Google的渲染与我们自己的浏览器内体验之间的区别是,光与阴影DOM之间没有边界。

麾!一切正常!

我们可以收拾行李回家!

好吧……不太好……

必应&Shadow DOM

Google可能是您的主要关注点,但请不要忘记Bing上的朋友。

尽管市场份额较小,但Bing仍然可以成为许多网站的有用流量来源,目前,Web组件的前景并不乐观。

Bing目前似乎无法渲染上述自定义元素,即使该Polyfill已经存在,因此它们也可以在Edge中使用。 (另一种“它可以在我的机器上工作”的情况等同于“我马上回来”恐怖分子)。

必应会看到我们的组件是这样的:

那不满足。没什么。

哦麻烦了

救援!

那么,这是Bing中用于Web组件的窗帘吗?

不用了,多亏了元件!

slot元素可以跨越光和阴影DOM之间的边界,并且具有在Light DOM中存在的其他优点,这些服务可以使DOM扁平化。

让我们想到一个组件:

这是插槽中的东西

接下来,我们将声明该组件:

虽然Googlebot会提供完整的信息:

Googlebot呈现的广告位“ width =” 753“ height =” 34“ size =”(最大宽度:753px)100vw,753px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/ 03 / googlebot-slot-render-5e67c760de218.jpg 753w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/googlebot-slot-render-5e67c760de218-480x22.jpg 480w,https:// cdn.searchenginejournal.com/wp-content/uploads/2020/03/googlebot-slot-render-5e67c760de218-680x31.jpg 680w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/ 03 / googlebot-slot-render-5e67c760de218.jpg

Bing至少会获得广告位内容:

我们在Shadow DOM中的操作“ width =” 760“ height =” 25“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads /2020/03/bing-render-slot-component-5e6824ee16692-768x25.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/bing-render-slot-component-5e6824ee16692- 480x16.jpg 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/bing-render-slot-component-5e6824ee16692-680x22.jpg 680w,https://cdn.searchenginejournal.com/ wp-content / uploads / 2020/03 / bing-render-slot-component-5e6824ee16692.jpg 977w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/bing-render- slot-component-5e6824ee16692-768x25.jpg

因此,如果必应非常重要,请确保您的关键内容在插槽中传递。

替代方案:移动或克隆节点

免责声明:节点操纵超出了作者的拼写能力,但她肯定会尝试提供全面的资源。

如果投稿内容不是您的大锅菜,那么熟练的工程师可以协助移动或克隆节点。

一个节点在DOM树中基本上有两个连接点:组件实例(作为Web组件可见,作为文档树中的HTML标记)和影子根。

每个节点只能有一个父节点,但这对我们有利。

我们可以在树中四处移动节点,并将每个子节点附加到其相应的组件或影子根。

通过移动节点并最终更改其父权,我们可以将元素从轻型DOM转移到阴影DOM,反之亦然。

如果您准备升级 DOM启示,科迪·林德利(Cody Lindley)是学习结节状囊袋尺寸的绝佳资源。

我们最喜欢的互联网童话Martin Splitt甚至精心制作 一点节点移动代码 供SEO检查。

Bingbot即将推出

ing 宣布 他们的网络抓取工具将变得常绿。

与Google于2019年5月发布的公告类似,他们计划使用最新版本的Edge浏览器渲染页面,并指出切换到基于铬的浏览器可能包括对影子DOM的支持。

那是否意味着以与Google Web Rendering Service相同的样式进行扁平化,只有时间才能证明。

测试您的Shadow DOM

如果您想为Google测试您的内容,则有很多选择。

Search Console中的URL检查工具, 行动装置相容性测试丰富的结果测试 全部返回由Google的Web渲染服务创建的相同渲染HTML。

这些对于确认它们可以可靠地拾取任何阴影DOM内容以进行索引非常有用。

请确保复制并粘贴由这些工具创建的渲染HTML,以进行更彻底的检查。

它提供了对可用内容的全面了解,而不是我们可以尝试依靠的肤浅截图。

如果您正在寻找第三方工具,则大多数工具不会像Googlebot那样使DOM扁平化。

如果您使用网络搜寻器服务或软件,并且在Web组件(例如导航栏Web组件)中具有链接,则这些服务和软件很可能会丢失这些链接。

驯服机器人 提取并渲染 是使DOM扁平化的显着例外。

结论

如果这一切看起来有点令人费解和复杂,那么……您没错。

但是,在您陷入连任之前,请记住我们的目标是要注意狼,而不是发誓狼。

我们在Shadow DOM中所做的事情对我们网站的可见性至关重要。

对Shadow DOM直到看不见的基本了解可以帮助您更好地与开发人员进行交流并实现您的共同目标。

再次感谢前端开发人员和Google Webmaster Central金产品专家 戴夫·斯玛特 分享他在死灵法典的黑暗艺术中的专业知识。

感谢您的阅读,我期待着我们在公共学习下的共同冒险。

| ———– |
|不读|
|拉丁|
|和总是|
|评论|
|您的验证码|
| ———– |
( __ /)||
(•ㅅ•)||
/

图片积分

特色图片: Pixabay /由作者修改,2020年3月
由作者拍摄的所有屏幕截图,2020年3月

Total
0
Shares
相关文章