我们在Shadow DOM中做什么

[ad_1]

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

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

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

为什么ShadowDOM很重要？

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

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

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

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

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

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

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

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

地下城与DOM

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

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

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

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

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

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

• 发出了一个请求。
• 请求者将收到初始HTML响应（您可以通过右键单击并选择“查看页面源”来查看此响应）。
• 请求者组装尽可能多的页面，并将呈现页面所需的资源排队。
  值得注意的是：Google将此过程的输出称为“爬行的DOM。”
• HTML（也称为“爬行的DOM”）通过DOMparser在浏览器中或通过 网页渲染服务。
• HTML和资源将转换为DOM文档，即页面内容的表示。

DOM中有什么？

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

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

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

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

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

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

看起来像：

• 公开节点（想想汉堡包菜单和手风琴）。
• 更改内容（窗体）。
• 隐藏节点（关闭横幅广告）。

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

我如何看待DOM？

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

• 导航至您要浏览的页面。
• 按Command + Option + C（Mac）或Control + Shift + C（Windows，Linux，Chrome操作系统）。这将打开devTools到elements面板，您可以看到页面的元素，它们都嵌套得很好。
• 将鼠标悬停在面板中的元素上将在页面上突出显示该元素。
• 在控制台的底部查看该元素如何嵌套在DOM树中

在Search Console中可视化DOM树

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

• 使用Command + Option + J（Mac）或Control + Shift + J（Windows，Linux，Chrome OS）打开Dev Tools控制台以打开控制台。
• 复制并粘贴咒语console.log（document.documentElement.childNodes）。
• 按回车。
  
• 单击一个箭头。您已经扩展了该节点！节点可以包含自己的唯一内容和子代。如果您在DOM树中单击任何蓝色的锚文本，则将切换到在devTools的“元素”面板中查看该节点。
  

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

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

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

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

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

光与影

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

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

影子DOM是一个全新的DOM树，它连接到Light DOM中的元素（其影子宿主）。

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

Shadow DOM如何使用？

Shadows DOM非常有用。

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