我們在Shadow DOM中做什麼

[ad_1]

我們在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非常有用。

許多瀏覽器將它們用於本機窗口小部件,例如