[原文:How to View HTML Source in Chrome and Why](https://www.seoptimer.com/blog/view-source-chrome/)

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

您頁面的原始碼會影響您的 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”

![](https://img-blog.csdnimg.cn/img_convert/1e2b20da3dfc4ac58335fcc44b5a25b5.png)

![](https://img-blog.csdnimg.cn/img_convert/6e14be399566352483d50ec067ace5f4.png)

我們能夠在該網站的 head 區域的 title 標籤裡，看到搜尋引擎顯示的搜尋結果：
![](https://img-blog.csdnimg.cn/img_convert/0ea06f3c3594c6f92dca78419f57c5ef.png)

標題標籤應該是對網頁內容的簡明描述。檢查標題標籤時，您需要確保它位於頁面的 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
* 證照有效且受信任
* 連線已加密並經過身份驗證
* 所有資源都得到安全服務

![](https://img-blog.csdnimg.cn/img_convert/63ae9db472611fb0540433b35f6c1418.png)

# 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 的方法：

![](https://img-blog.csdnimg.cn/img_convert/4a3f15b3cd59624eaf9436e5dd866835.png)

如果你檢視像你這樣的 SPA 網站的“檢視頁面原始碼”，你只會得到 javascript 填充的程式碼，這對於爬蟲來說“更難”索引。
Javascript 站點示例：

![](https://img-blog.csdnimg.cn/img_convert/4827559145bc13e2db4d17fcd3244cfb.png)

Example of view source code from a normal HTML site:
![](https://img-blog.csdnimg.cn/img_convert/970c38d5c113269ee83b7dbf92894e9d.png)

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

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

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

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

![](https://img-blog.csdnimg.cn/img_convert/35000caa768368de616b09dfe891dd5f.png)

# Check for viewport rendering

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

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

![](https://img-blog.csdnimg.cn/img_convert/57db1448b294e8248f99c305a659df2e.png)

# View source vs. Inspect element

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

這是細分：

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

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

這是您使用“檢視原始碼”可能會看到的假設錯誤：

```html
<h1>The title

</h1><p>The first sentence.<strong>The second sentence.</strong></p>
```

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

Chrome View Source Code 那些事

相關文章