廣告

SEO 研究院 HTML Checker 免費的瀏覽器外掛工具


市面上有很多 HTML 檢查工具,但是都無法很完整的檢查網頁內該有的元素是否存在以及是否正確,因此只好自己撰寫一個 Google Chrome 外掛 :  SEO 研究院 HTML Checker,並且還可以將檢查結果匯出,以便日後查核。

這是一個完全免費的瀏覽器外掛工具,歡迎安裝並給予好評,如果有其他需求也歡迎提出。

Chrome extension, html checker interface

這個外掛的主要功能如下 : 

(1) 檢查連線與安全

1. 檢查網頁的 HTTP Response Code 是否為 200?
2. HTTPS 使用狀態是否正確? 
3. 網頁內是否存在 Broken Link (失效連結)?  
4. 網頁內是否存在 Mixed Content? 也就是在 HTTPS 內是否混雜著 HTTP ?

以上的檢查項目中,最常被忽略的就是 Mixed Content,根據 Google 在 2019年的公告 : No More Mixed Messages About HTTPS,清楚告訴大家 Mixed Content 會有安全疑慮,因此會預設封鎖。如此會導致三個後果 : 直接影響 HTTPS 排名加分失效與安全性警告、間接影響網站體驗與 SEO 核心指標下滑、以及使得 Googlebot 爬取失敗與資源缺失。

HTML Checker - 檢查連線與安全

如果檢查網頁內的連結與資源太密集的話,很可能會被伺服器阻擋,因此介面上提供了三種抓取延遲 (Request Delay) : 0.5秒、1秒、1.5秒,如下圖。

如果你不確定伺服器阻擋的情況,建議從1.5秒開始使用。

HTML Checker - request delay

因為網頁內部的連結可能很多,因此檢查範圍也提供選擇 : 隨機檢查5個連結、只檢查主文內的連結 (也就是不包含選單跟側邊欄的連結)、全部檢查,如下圖。

HTML Checker - link check scope

(2) HTML 基本結構

1. HTML 基本框架是否正確?
檢查 html、head、body 是否均唯一存在? 因為看過有些網站會莫名其妙的出現 2 個 <HTML> 或是 <BODY>,通常發生在手誤的情況、將 AI 給的語法直接放入內容、或是錯誤的套用範本。 
2. HTML Lang 是否設定? 正常來說繁體中文 lang="zh-TW" 為有效的語言標記。 正確的語言設定有助於搜尋引擎、瀏覽器及輔助技術判斷頁面的主要語言。
3. Meta Charset 是否設定? 正常來說繁體中文 charset="UTF-8" 為有效的字元集。 UTF-8 可支援繁體中文及大多數語言文字,也是目前網頁最普遍使用的字元編碼。
4. Meta Viewport 是否設定? 在 head 內應該唯一存在且內容不為空白,Viewport 是行動裝置正確顯示網頁版面的基本設定,也是判斷網站是否具備響應式網頁設計 (RWD) 基礎條件之一。

HTML Checker - HTML 基本結構檢查畫面

(3) 搜尋引擎抓取與索引

1. Meta Robots 是否存在阻擋搜尋引擎抓取與索引的設定? 
2. X-Robots-Tag  是否存在阻擋搜尋引擎抓取與索引的設定? 
3. robots.txt 是否阻擋搜尋引擎抓取?
4. Canonical 是否存在且不重複? 
5. Hreflang 是否存在且不重複? 
6. Alternate 是否存在且不重複?  
7. Sitemap 是否存在?
8. Atom Feed 是否存在?
9. RSS Feed 是否存在?

以上這些設定都會影響搜尋引擎抓取與索引的行為,因此必須嚴格的檢查。

HTML Checker - 搜尋引擎抓取與索引

HTML Checker - 搜尋引擎抓取與索引-2

HTML Checker - 搜尋引擎抓取與索引-3

(4) 頁面標題與內容結構

1. Title 標題是否存在於 head 區域內並且唯一存在且不為空白? 
2. Meta Description 是否存在於 head 區域內並且唯一存在且不為空白?
3. H1 是否唯一存在且非空白?
4. H2~H6 是否內容均不為空白?
5. 圖片 Alt  是否均不為空白?

H1 是否必須唯一存在? 這點有不同的說法。Google 在文件撰寫規範中確實曾經要求「H1 唯一存在」,因此在這個檢查工具中,還是檢查「H1 是否唯一存在且非空白」,也當成一個檢查點。

如果你認為 H1 可以沒有 (首頁就可能沒有),也可以多個,那就忽略這項檢查。

HTML Checker - 頁面標題與內容結構

(5) 結構化資料

1. Schema.org 是否存在? 有哪些格式與型別組合?
2. Open Graph 是否存在? 有哪些 Open Graph 宣告?
3. Twitter Card 是否存在? 有哪些 Twitter Card 宣告?

HTML Checker - 結構化資料

(6) 網站技術與數據工具

1. 前端框架檢查 : 用來了解網頁框架。
2. CMS 檢查 : 用來了解網頁的內容管理平台。
3. GA4/GTM : 用來了解網頁是否安裝數據工具?
4. Google Search Console 驗證線索 :  用來了解網頁是否使用 GSC? 當然 DNS 或檔案驗證方式無法由本頁確認。 
5. Bing Webmaster Tools 驗證線索 : 用來了解網頁是否使用 BWT? 當然 DNS 或檔案驗證方式無法由本頁確認。

HTML Checker - 網站技術與數據工具

(7) AI 與代理協定

1. Universal Commerce Protocol (UCP) 是否存在?
2. Web Model Context Protocol (WebMCP) 是否存在?
3. LLMs.txt 系列檔案是否存在? 會尋找 llms.txt、llms-full.txt、llms-ctx.txt 或 llms-ctx-full.txt。

以上三個跟 AI 有關的檔案及協定,雖然目前還不普遍,但是也必須開始關注。

HTMK Checker - AI 與代理協定

SEO 研究院也曾經在"llms.txt 是必要的嗎? 是否該花時間建置?"提過,認為「如果不麻煩,可以建置,以備不時之需。但是如果你的網站是客製化網站,沒有外掛幫你產生,可以密切觀察再說。」

UCPWebMCP 則是正在發展中的協定,你的網站暫時可以沒有這些協定,但是一定要了解這些可以做什麼? 

簡單來說,UCP 與 WebMCP 就是要讓網站更容易被 AI Agent 理解與操作,UCP 就是要讓 AI 代理可以直接在電子商務網站搜尋產品、下單、結帳的協定;WebMCP 就是要讓 AI Agent 可以「操作網站」的協定。

整個檢查完成之後,你可以將檢查結果匯出報表,如下圖 : 

SEO 研究院 HTML Checker - Report export


[使用注意事項]

SEO 研究院 HTML Checker 外掛在使用時,如果不要離開開啟的頁籤 (tab),外掛工具會停留在原來的工作狀態。也就是你正在檢查網頁A,只要不離開網頁A,點選外掛工具的圖示就會回到原來的工作狀態,不需要讓你重頭再檢查一遍。

但是如果你離開開啟的頁籤 (tab),也就是在檢查網頁A時,你點選其他頁籤 (tab) 的話,外掛工具就會回到初始狀態。

本工具完全符合 Google Web Store 相關規範,隱私權聲明請參考 : 
https://blog.dns.com.tw/p/privacy.html