您網站的源代碼是您網站的“動力”。 它決定了您網頁的感覺、外觀和功能，幫助您實作出色的使用者體驗和其他品牌目标，例如轉化和潛在客戶。
您頁面的源代碼會影響您的 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的原創文章，盡在："汪子熙":