原文:How to View HTML Source in Chrome and Why

您網(wǎng)站的源代碼是您網(wǎng)站的“動(dòng)力”。 它決定了您網(wǎng)頁的感覺、外觀和功能，幫助您實(shí)現(xiàn)出色的用戶體驗(yàn)和其他品牌目標(biāo)，例如轉(zhuǎn)化和潛在客戶。

您頁面的源代碼會(huì)影響您的 SEO。 這是因?yàn)樗撬阉饕妗伴喿x”的內(nèi)容，以確定您的網(wǎng)站排名。 這基本上意味著頁面源中未檢測(cè)到的錯(cuò)誤可能會(huì)導(dǎo)致您的網(wǎng)站無法按預(yù)期排名，更糟糕的是，會(huì)導(dǎo)致 SEO 數(shù)據(jù)不準(zhǔn)確甚至糟糕的用戶體驗(yàn)。

Why do you need to view your site’s source code?

如前所述，您的頁面源會(huì)影響 SEO。 事實(shí)上，您應(yīng)該將查看源代碼作為 SEO 審計(jì)的一部分，但如果需要更深入地使用 SEO 工具作為組合。 能夠查看頁面源代碼的一件很酷的事情是，這是查看競爭對(duì)手正在做什么的一種方式，并想出對(duì)其進(jìn)行“逆向工程”以實(shí)現(xiàn)您自己的業(yè)務(wù)目標(biāo)的方法。

以下是您應(yīng)該查看源代碼的更多原因：

It helps with checking for title tags

如果您的網(wǎng)站沒有標(biāo)題標(biāo)簽，它就不會(huì)出現(xiàn)在搜索引擎上。 您將在 HTML 文檔的 head 部分找到標(biāo)題標(biāo)簽。 標(biāo)題標(biāo)簽是顯示在搜索引擎上的，它們通常是可點(diǎn)擊的。

例如，如果您在 Google 搜索中輸入“SEOptimer”，則第一個(gè)結(jié)果是“SEOptimer: Analyze Websites With Our Free SEO Audit & Reporting Tool”

我們能夠在該網(wǎng)站的 head 區(qū)域的 title 標(biāo)簽里，看到搜索引擎顯示的搜索結(jié)果：

標(biāo)題標(biāo)簽應(yīng)該是對(duì)網(wǎng)頁內(nèi)容的簡明描述。檢查標(biāo)題標(biāo)簽時(shí)，您需要確保它位于頁面的 head 部分。

Countercheck meta descriptions

也可以在 HTML 的 head 部分找到，元描述(meta description)是您需要注意的另一個(gè)重要因素。 元描述是一個(gè)簡短的摘要，伴隨著搜索引擎結(jié)果上的標(biāo)題標(biāo)簽。 它通常是用戶用來確定您的網(wǎng)站是否會(huì)給他們提供他們尋求的價(jià)值的“決定因素”。

最重要的是，請(qǐng)注意：

標(biāo)題標(biāo)簽和元描述都應(yīng)該位于 HTML 的 head 部分。 此外，無論您是使用內(nèi)容管理系統(tǒng) (CMS) 還是編寫自己的網(wǎng)站，您都需要注意任何重復(fù)的標(biāo)題標(biāo)簽和元描述。 如果您使用的是 WordPress，您可能安裝了兩個(gè)不同的插件，并可能導(dǎo)致標(biāo)題或元標(biāo)記重復(fù)。

Countercheck your Heading tags

在這里您需要注意的是，網(wǎng)頁上只有一組標(biāo)題標(biāo)簽。 這是因?yàn)槭褂?h1 標(biāo)簽是重要的頁面 SEO 策略之一。 使用多個(gè) h1 標(biāo)簽可能會(huì)被搜索引擎解釋為“過度優(yōu)化”，這絕對(duì)不利于您的“帶有搜索引擎的書籍”。 理想情況下，h1 標(biāo)簽用于網(wǎng)站上最大的標(biāo)題，它傳達(dá)了頁面的主要目的。

您安裝的某些 CMS 或主題，例如 WordPress 站點(diǎn)可能有多個(gè) h1，尤其是在 /blog 或 post 部分，其中每篇文章的標(biāo)題可能是 h1 與 h2。

這不是一個(gè)好的做法。

應(yīng)該使用 H2 和 H3 標(biāo)簽來分解內(nèi)容，以便讀者更容易閱讀。 他們應(yīng)該使用次要關(guān)鍵字來支持主要關(guān)鍵字。 檢查它們的格式是否正確。

Countercheck scripts

雖然腳本非常適合為您的網(wǎng)站添加功能，但如果數(shù)量過多，它們可能會(huì)導(dǎo)致加載時(shí)間顯著增加。請(qǐng)記住，至少有一半的互聯(lián)網(wǎng)用戶希望網(wǎng)站在短短 2 秒內(nèi)加載完畢。

當(dāng)涉及到腳本時(shí)，您應(yīng)該注意什么？它們通常需要位于頁面底部，就在您關(guān)閉 HTML 中的 body 標(biāo)記之前。更好的做法是將腳本放在一個(gè) Javascript 文件（由文件擴(kuò)展名 .js 表示）中，該文件鏈接到頁面底部的 HTML。

您還需要驗(yàn)證您安裝的跟蹤代碼（例如 Facebook 跟蹤代碼的 Google Analytics）是否已正確安裝。腳本中有一個(gè)錯(cuò)誤或缺少代碼，您將無法正確收集任何數(shù)據(jù)。

無論您是使用 CMS 平臺(tái)還是想知道您的網(wǎng)站是否已被黑客入侵，您都可以查看任何腳本以驗(yàn)證您是否對(duì)其進(jìn)行了授權(quán)。如果不查看頁面源代碼，就無法 100% 了解已安裝的內(nèi)容。

Countercheck Security

單擊開發(fā)工具上的安全性。 對(duì)于頁面，總結(jié)如下：

• 該頁面是安全的
• 使用有效的 HTTPS
• 證書有效且受信任
• 連接已加密并經(jīng)過身份驗(yàn)證
• 所有資源都得到安全服務(wù)

Check for the rendering of the main elements

重要的是要確認(rèn)您網(wǎng)站的元素確實(shí)看起來像您期望的那樣。 引入了 DOM 概念，從用戶的角度來看，它基本上是頁面源代碼外觀的細(xì)分。

Chrome DevTools Elements 面板中的 DOM 樹視圖顯示了當(dāng)前網(wǎng)頁的 DOM 結(jié)構(gòu)。

要查看 DOM（文檔對(duì)象模型），請(qǐng)?jiān)诎凑赵L問頁面源的過程之后選擇“元素”。 請(qǐng)注意，head 元素在 DOM 中不可見。 您將看到源代碼的細(xì)分。 當(dāng)您指向特定部分時(shí)，它會(huì)突出顯示。

如果您注意到某個(gè)特定部分在 DOM 中沒有正確呈現(xiàn)，您可以修復(fù)它。

Javascript based website (Single Page Application) and SEO

渲染 DOM 是 Google 最終將用于索引您網(wǎng)站內(nèi)容的內(nèi)容。 但是，我們知道 Javascript 會(huì)阻礙抓取，例如單頁應(yīng)用程序 (SPA)。 單頁應(yīng)用程序基于 Javascript，它根據(jù)請(qǐng)求從客戶端和服務(wù)器端下載數(shù)據(jù)，簡單來說，javascript 不是用來創(chuàng)建網(wǎng)站的。 HTML/CSS 很容易抓取，搜索引擎抓取工具只能看到原始 HTML 的頁面，Javascript 會(huì)增加加載時(shí)間和延遲，Google 也會(huì)多次抓取您的頁面，使用第一種在完整呈現(xiàn)頁面之前抓取 HTML 的方法：

如果你查看像你這樣的 SPA 網(wǎng)站的“查看頁面源代碼”，你只會(huì)得到 javascript 填充的代碼，這對(duì)于爬蟲來說“更難”索引。
Javascript 站點(diǎn)示例：

Example of view source code from a normal HTML site:

渲染和加載時(shí)間將影響爬蟲是否或何時(shí)通過 Javascript 更好地了解您的內(nèi)容。 有人說不到 5 秒就可以索引，但我們不能 100% 準(zhǔn)確地知道爬蟲何時(shí)決定。

由于 URL 需要一段時(shí)間的任何重定向，任何點(diǎn)擊或隱藏內(nèi)容（用戶事件）可能根本不會(huì)被索引，基本上你為 SEO 優(yōu)化所做的任何事情，它都需要對(duì)用戶和爬蟲來說都很快。 谷歌確實(shí)首先呈現(xiàn)所有頁面，但如果失敗，它們會(huì)進(jìn)入原始 HTML，這時(shí)谷歌會(huì)認(rèn)為你沒有任何內(nèi)容、重復(fù)項(xiàng)等。

您可以查看此比較原始 HTML 與呈現(xiàn)的 HTML 指南，或者將您的視圖頁面課程與 Google Search Console 爬網(wǎng)頁面/實(shí)時(shí)測(cè)試進(jìn)行比較，以查看是否有任何差異。

• Crawled Pages：爬蟲如何看到頁面
• 實(shí)時(shí)測(cè)試：Google 的索引器最終將如何呈現(xiàn)頁面

Check for viewport rendering

到目前為止，我們已經(jīng)使用“元素”、“來源”和“網(wǎng)絡(luò)”檢查了元素。 所有這些都可以在 DevTools 中找到，這是包含所有這些工具的窗口。 我們可以使用的另一個(gè)工具是設(shè)備工具欄，就在“元素”之前。 這將允許您查看各種資源如何在各種視口上呈現(xiàn)，例如，在移動(dòng)設(shè)備上。

如果您想查看它在特定設(shè)備上的呈現(xiàn)方式，請(qǐng)?jiān)陂_發(fā)工具右上角的自定義和控制開發(fā)工具（三個(gè)按鈕）上選擇“設(shè)置”，然后選擇“設(shè)備”。

View source vs. Inspect element

有兩種方法可以查看代碼“查看源代碼”和“檢查元素”。 它們是兩個(gè)瀏覽器功能，可讓您查看頁面的 HTML。 主要區(qū)別在于“查看源代碼”顯示從 Web 服務(wù)器傳送到瀏覽器的 HTML。Inspect Elements 是一種開發(fā)人員工具，用于在瀏覽器應(yīng)用其糾錯(cuò)以及任何 Javascript 操作 DOM 之后查看 DOM 樹的狀態(tài)。

這是細(xì)分：

• 由瀏覽器修正 HTML 錯(cuò)誤
• 瀏覽器的 HTML 規(guī)范化
• 使用 Javascript 進(jìn)行 DOM 操作

正如我之前提到的，在單頁應(yīng)用程序中使用“查看源代碼”，您將看到 Javascript 與 HTML。 任何 HTML 錯(cuò)誤也可能在“檢查元素”工具中得到糾正。

這是您使用“查看源代碼”可能會(huì)看到的假設(shè)錯(cuò)誤：

<h1>The title</h2><p>The first sentence.<strong>The second sentence.</p></strong>

而“檢查元素”會(huì)將 “” 更正為 “”

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Chrome View Source Code 那些事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。