我们在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的过程:

  • 发出了一个请求。
  • 请求者将收到初始HTML响应(您可以通过右键单击并选择“查看页面源”来查看此响应)。
  • 请求者组装尽可能多的页面,并将呈现页面所需的资源排队。
    值得注意的是:Google将此过程的输出称为“爬行的DOM。”
  • HTML(也称为“爬行的DOM”)通过DOMparser在浏览器中或通过 网页渲染服务
  • 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树。

  • 导航至您要浏览的页面。
  • 按Command + Option + C(Mac)或Control + Shift + C(Windows,Linux,Chrome操作系统)。这将打开devTools到elements面板,您可以看到页面的元素,它们都嵌套得很好。
  • 将鼠标悬停在面板中的元素上将在页面上突出显示该元素。
  • 在控制台的底部查看该元素如何嵌套在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树及其结构,我们只需要在开发工具控制台中投放一些魔术即可。

  • 使用Command + Option + J(Mac)或Control + Shift + J(Windows,Linux,Chrome OS)打开Dev Tools控制台以打开控制台。
  • 复制并粘贴咒语console.log(document.documentElement.childNodes)。
  • 按回车。
    在控制台中查看DOM树“ width =” 760“ height =” 212“ Size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/ 2020/03 / console-log-child-nodes-5e657bdbd0f17-768x214.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-5e657bdbd0f17-480x134 .jpg 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-5e657bdbd0f17-680x190.jpg 680w,https://cdn.searchenginejournal.com/wp -content / uploads / 2020/03 / console-log-child-nodes-5e657bdbd0f17-1024x286.jpg 1024w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child- nodes-5e657bdbd0f17.jpg 1089w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-5e657bdbd0f17-768x214.jpg
  • 单击一个箭头。您已经扩展了该节点!节点可以包含自己的唯一内容和子代。如果您在DOM树中单击任何蓝色的锚文本,则将切换到在devTools的“元素”面板中查看该节点。
    在开发工具中遍历DOM“ width =” 760“ height =” 656“ Size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/ 2020/03 / console-log-child-nodes-expose-child-nodes-5e657c2eb1dc8-768x663.jpg 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child -nodes-expose-child-nodes-5e657c2eb1dc8-480x414.jpg 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-expose-child-nodes- 5e657c2eb1dc8-680x587.jpg 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-expose-child-nodes-5e657c2eb1dc8-1024x884.jpg 1024w,https: //cdn.searchenginejournal.com/wp-content/uploads/2020/03/console-log-child-nodes-expose-child-nodes-5e657c2eb1dc8.jpg 1096w“ src =” https://cdn.searchenginejournal.com/ wp-content / uploads / 2020/03 / console-log-child-nodes-expose-child-nodes-5e657c2eb1dc8-768x663.jpg

您可以一遍又一遍地重复此过程,探索所有分支机构和战利品箱,因为您已经学会了如何 遍历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非常有用。

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

推荐文章