想要檢查自己網站的 SEO 重要標籤(如:Title、H1、H2…..等等)有沒有設定好?想要看看競爭對手的網頁寫了什麼?

那麼今天要分享所有想學好 SEO 人都要會的技巧:F12 網頁開發工具,非常實用!


先別怕程式碼:看懂了就不難

如果你是使用 WINDOWS 電腦,不知道有沒有這樣的經驗,本來要按 F11 的全螢幕功能,結果不小心按到了 F12,結果畫面跑出來了好多程式碼,還以為是什麼東西壞掉了。

實際上這個畫面叫做網頁開發者工具,在 Chrome 跟 Edge 按 F12 都會跑出這個畫面。

好比說下面這個畫面即是我的某個網頁按出 F12 的效果,裡面好像有非常多元素,看起來好可怕。但不用慌張!作為 SEO 初學者的我們,我們只需要學幾個關鍵功能就夠了,非常簡單輕鬆!


利用 elements 檢查標籤是否設定正確

一開始點開的預設畫面是 elements,這也是 SEO 最需要了解道的功能。

Elements 就是元素的意思,這個功能是讓開發者來查看、修改 HTML 或 CSS 所使用的。

對於 SEO 來說,可以幫助我們去看網頁中的程式碼是什麼,以及有沒有正確設定。


好比說,我可以在下方的搜尋按鈕搜尋「title」,去看我的 title 寫了什麼。我們可以看到畫面顯示:

<title>【2023年】電子書閱讀器入門指南:幫助你搞懂電子書閱讀器 – Frank Chiu</title>

這是我設定好的 title 沒有錯,檢查正確。

再舉個例子,我想了解我的「description」有沒有設定正確,就在 elements 中搜尋「description」,我得到了:

<meta name=”description” content=”我會比較粗暴的提供電子書閱讀器的購買建議,提供給新手參考” class=”yoast-seo-meta-tag”>

這也跟我設定「description」資訊相同,檢查正確。


檢查箭頭:檢查網頁上元素對應的程式碼

除了從 elements 可以用搜尋找到程式碼以外,我們也能從網頁上去點選我們想要確認的程式碼內容。

我們可以到開發者工具的左上角,會看到這個「檢查箭頭」。我把它叫做檢查箭頭,是因為這個檢查箭頭可以讓我選取網頁上的元素,然後「檢查」它背後有什麼程式碼。

像是我想了解我這個文章標題背後的程式碼是什麼,我就把這個「小箭頭」放到文章標題上,這個時候 elements 就會自動跳到對應的程式碼上了。

畫面中顯示:

<h1 class=”entry-title”>【2023年】電子書閱讀器入門指南:幫助你搞懂電子書閱讀器</h1>

這也跟文章標題的資訊符合,文章標題確實是用 h1 沒錯,檢查成功。


框選右鍵:檢查網頁上元素對應的程式碼

除了檢查箭頭以外,我們還可以把網頁上想要檢查的元素「框起來」,然後按右鍵,選取「檢查」。

這樣我們也能得到跟檢查箭頭相同的效果,檢查到那個元素對應的程式碼是什麼。

以畫面中的例子來說,我把文章標題「【2023年】電子書閱讀器入門指南:幫助你搞懂電子書閱讀器」框了起來,然後按右鍵,選取檢查。

接下來也跳到了對應的程式碼(h1、header 1)標籤,檢查成功。


工商時間

如果你想要更系統化、更輕鬆的學好 SEO,推薦你參考我與知識衛星合作的 SEO 線上課程《SEO 排名攻略學:從產業分析到落地實戰,創造翻倍流量》。

這是我的 SEO 集大成之作,讓你從入門到精通,附贈實戰模板跟檢核表,讓你真正學好 SEO。


常見檢查標籤

你能利用 f12 功能搜尋以下標籤。

  • title
  • description
  • h1、h2、h3、h4……
  • canonical
  • og:type

延伸閱讀:《SEO 自學大全:一篇就搞懂 SEO,完整說明 SEO 的底層邏輯


搭配 AI 的應用

如果有一段程式碼看不懂,你也可以按右鍵把程式碼複製下來(Copy),然後餵給 ChatGTP 請他解釋。


備註

1. MAC 使用者如何找到開發工具

MAC 使用者可以參考以下資訊找到開發工具,以下內容引用自蘋果官網。

如果你是網頁開發者,Safari「開發」選單提供了工具供你使用,確保你的網站能在採用各種標準類型的網頁瀏覽器上正常運作。

若你在選單列中沒有看到「開發」選單,請選擇 Safari >「設定」,按一下「進階」,然後選取「在選單列中顯示『開發』選單」。


2. 檢查 GTM 跟 GA 代碼也能使用

想檢查 GTM、GA 的程式碼是否有正確安裝,也能利用這個開發者工具進行查看哦!


參考資料

使用 Chrome 開發人員工具檢查代碼

2 意見

留下一個答复

請輸入你的評論!
請在這裡輸入你的名字