網頁原始碼怎麼看？在電腦版 Chrome 或 Edge 按 Ctrl + U，就能顯示目前網頁的 HTML 原始碼，Mac 版 Chrome 則按 ⌘ + Option + U；Safari 要先在「設定」的「進階」勾選「顯示網頁開發者的功能」，再使用「開發」選單中的工具。手機瀏覽器沒有對應的快速鍵，可以改用 Search Console 的網址檢查工具查看 Google 取得的 HTML，或把手機接上電腦檢查。看原始碼的目的，是確認標題、描述、canonical、robots 中繼標記與 GA4、GTM 代碼是否真的輸出在頁面上，而不是只相信後台設定畫面。
原始碼和開發人員工具看到的差別
「顯示網頁原始碼」和「開發人員工具」都能看到 HTML，但內容不一定相同：
- 網頁原始碼：瀏覽器收到的 HTML，Chrome 說明稱之為不可編輯的 HTML 原始碼。適合確認伺服器或網站系統實際輸出了什麼，例如範本有沒有寫入標題與 canonical。
- 開發人員工具的元素面板：顯示網頁的 DOM。Chrome 開發人員工具說明，HTML 代表初始網頁內容，DOM 代表目前有效的網頁內容，當 JavaScript 新增、移除或編輯節點時，DOM 就會與 HTML 不同。
所以同一個標籤，可能在元素面板看得到、在原始碼裡找不到，代表它是載入後由程式加上的。做 SEO 檢查時兩邊都看：原始碼確認基本設定，元素面板或 Search Console 的測試結果確認程式執行後的狀態。
電腦查看網頁原始碼：Chrome、Edge與Safari
| 瀏覽器 | 顯示網頁原始碼 | 開啟開發人員工具 |
|---|---|---|
| Chrome（Windows、Linux） | Ctrl + U | Ctrl + Shift + J |
| Chrome（Mac） | ⌘ + Option + U | ⌘ + Option + I |
| Edge | Ctrl + U（檢視原始檔） | Ctrl + Shift + I |
| Safari（Mac） | 選 Safari >「設定」>「進階」，勾選「顯示網頁開發者的功能」 | 使用選單列「開發」選單中的工具 |
在 Chrome 也可以對網頁上的元素按右鍵選「檢查」，直接打開元素面板並選取該元素；或從網址列右側的選單選「更多工具 > 開發人員工具」。
手機網頁原始碼怎麼看
手機瀏覽器沒有顯示原始碼的快速鍵，常用的做法有兩種。
用 Search Console 網址檢查工具
- 在 Search Console 開啟網站所屬的資源，網址必須位於目前開啟的資源中。
- 在畫面頂端的檢查搜尋列輸入要檢查的完整網址。
- 按「查看已檢索的網頁」，可以看到傳回的 HTML、HTTP 回應與已載入的資源；只在網址狀態為「網址在 Google 服務中」（含出現問題）時提供。
- 想看目前線上的版本，按「測試線上網址」，完成後在評定資訊卡按「查看已測試的網頁」；轉譯後網頁的螢幕截圖只在即時測試時提供。
這個方法看到的是 Google 取得的內容，手機與電腦都能操作。
把手機接上電腦遠端檢查
- Android：在手機的「開發人員選項」選取「啟用 USB 偵錯」；在電腦版 Chrome 前往 chrome://inspect#devices，確認已勾選探索 USB 裝置，再用傳輸線接上電腦並在手機上允許偵錯；接著在手機用 Chrome 開啟網頁，於該網址旁按「檢查」。
- iPhone、iPad：在「設定」App 進入「App > Safari」，捲到「進階」開啟「網頁檢閱器」，用傳輸線接上 Mac 並開啟 Mac 版 Safari 的「開發」選單；裝置出現在選單後，選取要檢查的網頁。裝置可能會先詢問是否信任這台 Mac。
用原始碼檢查標題與描述
打開原始碼後，用尋找功能搜尋下列字串：
- 標題元素（title）：確認每頁只有一個標題元素，內容描述的是這一頁，而不是全站共用同一句。Google 說明搜尋會使用多種來源自動判斷標題連結，並建議用標題元素替每一頁指定標題。
- name=”description”：確認描述存在、每頁不同，且文字和頁面內容相符。Google 說明摘要主要依網頁內容自動決定，若描述更適合說明網頁內容，也會採用描述。
常見問題是 SEO 外掛和佈景主題各輸出一組標題或描述。描述該怎麼寫，可參考SEO描述的寫法與常見錯誤。
檢查canonical與robots中繼標記
- rel=”canonical”：Google 說明這個元素只有出現在 head 區段才會被接受，並建議使用絕對網址。確認它指向你希望被收錄的網址，沒有多出追蹤參數，也沒有指到測試站或舊網域。
- noindex：搜尋 name=”robots” 的中繼標記，確認正式頁面沒有被設成 noindex；改版上線後特別要檢查這一項。另外，網頁若被 robots.txt 封鎖，檢索器就無從發現 noindex 規則。
原始碼裡的 canonical 只是你對 Google 的宣告。網址檢查工具會同時列出「使用者宣告的標準網址」與「Google 所選的標準網址」，兩者不一致時，表示 Google 選了其他網頁作為標準網址，要回頭檢查重複內容與內部連結。canonical 的基本概念見canonical的作用與設定檢查。
確認GA4與GTM代碼有沒有裝對
在原始碼搜尋以下字串，可以快速判斷追蹤代碼是怎麼安裝的：
- GTM-：Google 代碼管理工具的容器 ID 開頭為 GTM。官方說明前段程式碼貼在 head 內並盡量靠上，後段緊貼在 body 開頭標記後面，每一頁都要有。
- G-：Google 代碼 ID 開頭通常為 G-，可以在 GA4 的「管理 > 資料串流」點選串流後找到，確認和原始碼中的 ID 一致。
同一個代碼 ID 若同時出現在範本、外掛與代碼管理工具裡，先釐清每一處的來源，再決定保留哪一種安裝方式。原始碼確認代碼存在後，再用代碼管理工具的預覽模式與 Tag Assistant 確認代碼有在正確的事件觸發，設定步驟見GTM 教學的預覽與發布步驟。
原始碼裡找不到設定時怎麼判斷
- 由程式載入：標籤若是透過 JavaScript 或代碼管理工具插入，原始碼裡不會出現，改看元素面板或網址檢查工具的測試結果。
- 快取沒有更新：網站或主機有快取時，後台改完可能還看到舊版本，請維護人員清除快取後再檢查。
- 看錯網址：有沒有 www、http 或 https、結尾斜線不同，都可能是不同網址，要檢查的是正式網址。
- 外掛或範本沒有輸出：後台填了欄位，但佈景主題或外掛設定沒有輸出到頁面上，這時要從範本或外掛設定處理。
常見問題
查看網頁原始碼會改到網站嗎？
不會。顯示原始碼只是讀取目前網頁的內容，Chrome 說明這個畫面不可編輯。要修改網站內容，仍要透過網站後台或主機上的檔案，由有權限的人處理。
原始碼看得到，就代表 Google 看得到嗎？
不一定。網頁可能被 robots.txt 封鎖、設定了 noindex，或內容要經過 JavaScript 轉譯才出現。要確認 Google 實際取得的內容，用網址檢查工具的「查看已檢索的網頁」或「測試線上網址」。
可以看其他網站的原始碼嗎？
可以看到瀏覽器收到的 HTML、CSS 與 JavaScript，但看不到伺服器端的程式與資料庫。看得到不代表可以任意複製使用，網站的內容與程式碼仍可能受著作權保護。
手機版和電腦版的原始碼會不一樣嗎？
可能不同，視網站做法而定。Google 以智慧型手機檢索的行動版內容建立索引，並建議行動版和電腦版含有同樣的內容，所以兩個版本的標題、描述與 canonical 都要檢查。
需要會寫程式才看得懂原始碼嗎？
做 SEO 檢查不需要。只要知道要搜尋哪些字串，例如 title、description、canonical、noindex 與代碼 ID，再對照找到的內容是否正確即可；要修改時再交給維護人員。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
建議先挑首頁、主要服務頁與一篇文章，照本文搜尋標題、描述、canonical、noindex 與代碼 ID，記下和預期不同的地方。京采的技術 SEO 與網站健檢服務可以逐一檢查各類範本的輸出，對照 Search Console 的索引狀態找出設定與實際不一致之處，並協助修正範本與外掛設定；需要協助判讀，歡迎與我們聯繫。
