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

您網站的源代碼是您網站的“動力”。 它決定了您網頁的感覺、外觀和功能，幫助您實現出色的用戶體驗和其他品牌目標，例如轉化和潛在客戶。

您頁面的源代碼會影響您的 SEO。 這是因為它是搜索引擎“閱讀”的內容，以確定您的網站排名。 這基本上意味著頁面源中未檢測到的錯誤可能會導致您的網站無法按預期排名，更糟糕的是，會導致 SEO 數據不準確甚至糟糕的用戶體驗。

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

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

以下是您應該查看源代碼的更多原因：

It helps with checking for title tags

如果您的網站沒有標題標簽，它就不會出現在搜索引擎上。 您將在 HTML 文檔的 head 部分找到標題標簽。 標題標簽是顯示在搜索引擎上的，它們通常是可點擊的。

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

我們能夠在該網站的 head 區域的 title 標簽里，看到搜索引擎顯示的搜索結果：

標題標簽應該是對網頁內容的簡明描述。檢查標題標簽時，您需要確保它位于頁面的 head 部分。

Countercheck meta descriptions

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

最重要的是，請注意：

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

Countercheck your Heading tags

在這里您需要注意的是，網頁上只有一組標題標簽。 這是因為使用 h1 標簽是重要的頁面 SEO 策略之一。 使用多個 h1 標簽可能會被搜索引擎解釋為“過度優化”，這絕對不利于您的“帶有搜索引擎的書籍”。 理想情況下，h1 標簽用于網站上最大的標題，它傳達了頁面的主要目的。

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

這不是一個好的做法。

應該使用 H2 和 H3 標簽來分解內容，以便讀者更容易閱讀。 他們應該使用次要關鍵字來支持主要關鍵字。 檢查它們的格式是否正確。

Countercheck scripts

雖然腳本非常適合為您的網站添加功能，但如果數量過多，它們可能會導致加載時間顯著增加。請記住，至少有一半的互聯網用戶希望網站在短短 2 秒內加載完畢。

當涉及到腳本時，您應該注意什么？它們通常需要位于頁面底部，就在您關閉 HTML 中的 body 標記之前。更好的做法是將腳本放在一個 Javascript 文件（由文件擴展名 .js 表示）中，該文件鏈接到頁面底部的 HTML。

您還需要驗證您安裝的跟蹤代碼（例如 Facebook 跟蹤代碼的 Google Analytics）是否已正確安裝。腳本中有一個錯誤或缺少代碼，您將無法正確收集任何數據。

無論您是使用 CMS 平臺還是想知道您的網站是否已被黑客入侵，您都可以查看任何腳本以驗證您是否對其進行了授權。如果不查看頁面源代碼，就無法 100% 了解已安裝的內容。

Countercheck Security

單擊開發工具上的安全性。 對于頁面，總結如下：

• 該頁面是安全的
• 使用有效的 HTTPS
• 證書有效且受信任
• 連接已加密并經過身份驗證
• 所有資源都得到安全服務

Check for the rendering of the main elements

重要的是要確認您網站的元素確實看起來像您期望的那樣。 引入了 DOM 概念，從用戶的角度來看，它基本上是頁面源代碼外觀的細分。

Chrome DevTools Elements 面板中的 DOM 樹視圖顯示了當前網頁的 DOM 結構。

要查看 DOM（文檔對象模型），請在按照訪問頁面源的過程之后選擇“元素”。 請注意，head 元素在 DOM 中不可見。 您將看到源代碼的細分。 當您指向特定部分時，它會突出顯示。

如果您注意到某個特定部分在 DOM 中沒有正確呈現，您可以修復它。

Javascript based website (Single Page Application) and SEO

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

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

Example of view source code from a normal HTML site:

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

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

您可以查看此比較原始 HTML 與呈現的 HTML 指南，或者將您的視圖頁面課程與 Google Search Console 爬網頁面/實時測試進行比較，以查看是否有任何差異。

• Crawled Pages：爬蟲如何看到頁面
• 實時測試：Google 的索引器最終將如何呈現頁面

Check for viewport rendering

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

如果您想查看它在特定設備上的呈現方式，請在開發工具右上角的自定義和控制開發工具（三個按鈕）上選擇“設置”，然后選擇“設備”。

View source vs. Inspect element

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

這是細分：

• 由瀏覽器修正 HTML 錯誤
• 瀏覽器的 HTML 規范化
• 使用 Javascript 進行 DOM 操作

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

這是您使用“查看源代碼”可能會看到的假設錯誤：

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

而“檢查元素”會將 “” 更正為 “”

更多Jerry的原創文章，盡在：“汪子熙”:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。