部落格 SEO 優化與關鍵字策略 分享如何透過網頁速度優化、HTML 語意化與關鍵字策略

me
林彥成
2021-05-07 | 9 min.
文章目錄
  1. 1. 如何透過 SEO 優化提升部落格的 MAU 流量?
  2. 2. 網站架構調整:提升網頁速度與 HTML 語意化
    1. 2.1. 網頁速度優化工具實測
      1. 2.1.1. 延後載入非必需資源
      2. 2.1.2. 提供 AMP 支援
    2. 2.2. HTML 語意化
    3. 2.3. 中繼資料 (meta data)
    4. 2.4. 結構化資料 (Microdata)
  3. 3. 文章關鍵字優化
    1. 3.1. 優化曝光高點擊少
    2. 3.2. 降低跳出率
  4. 4. 網站地圖 (Sitemap.xml)
  5. 5. 成效分析與評估
    1. 5.1. Campaign URL
  6. 6. FAQ:部落格 SEO 與流量成長常見問題
    1. 6.1. Q1:網站載入速度對 SEO 排名的影響力究竟有多大?
    2. 6.2. Q2:為什麼在 SEO 策略中,「結構化資料 (Schema)」是必備的?
    3. 6.3. Q3:如何判斷文章是否需要進行關鍵字重新優化?

如何透過 SEO 優化提升部落格的 MAU 流量?

部落格 SEO 優化教學 的核心在於從「技術體質」與「內容價值」雙向提升網站權威度。 搜尋引擎優化方法 包含:1. 基礎建設優化:利用 網頁速度優化工具(如 PageSpeed)提升 Core Web Vitals 指標,並透過 HTML 語意化與 SEO 標籤(如 article, section)讓爬蟲精確理解內容;2. 資料驅動決策:藉由 Search Console 成效分析 找出高曝光、低點擊的文章,重新優化標題與描述;3. 主動索引建置:完成 網站地圖 Sitemap 提交 並實作 結構化資料應用(Schema),爭取搜尋結果中的豐富摘要。透過這套 MAU 提升實戰 策略,本站成功在一個月內實現月活躍用戶從 3000 成長至 4000 的顯著突破。


搜尋引擎優化 (SEO) 是一門透過調整網站體質以符合搜尋引擎運作規則,進而提升自然搜尋排名的關鍵技術。

本文以本技術部落格為實戰案例,為您開箱專業的部落格 SEO 優化教學。我們將深入探討如何優化文章曝光與點擊率,並分享在調整後的一個月內,月活躍用戶 (MAU) 從 3000 成功成長至 4000 的完整優化過程。

部落格 SEO 優化後的 MAU 成長成果
技術部落格 MAU 流量成長趨勢圖

當網站實際運行一段時間後,建議透過 Google Search Console 進行成效分析,找出使用者常搜尋的核心關鍵字。在執行搜尋引擎優化方法前,我們主要聚焦於以下三大面向:

  1. 網站架構調整:包含速度優化與語意化結構。
  2. 文章關鍵字優化:鎖定高曝光、低點擊的文章進行標題與內容補強。
  3. 網站地圖 (Sitemap) 提交:主動告知搜尋引擎網站結構。

網站架構調整:提升網頁速度與 HTML 語意化

在跟同事討論前我主要從網站速度跟架構面切入

  • 網頁速度優化工具與實作:針對 Google 的「網站體驗核心指標(Core Web Vitals)」進行評估。
  • HTML 語意化與 SEO:確保爬蟲能精確理解網頁內容。
    • 調整 HTML 相關的結構和語法
    • 文章目錄,加速使用者找到資料,方便 Google 閱讀
    • 文章 QA
    • 結構化資料

網頁速度優化工具實測

當使用者用行動裝置時,網頁的載入速度快慢會直接影響跳出率。網站的載入時間一旦超過 3 秒,訪客通常就會選擇離開,但大部分行動版網站的載入時間平均卻比這個目標多出 1X 秒

本次優化主要透過以下搜尋引擎優化方法進行:

  1. 延後載入:延後載入當下非必需的腳本、資源。
  2. AMP 支援:提供 AMP 的支援來優化行動裝置體驗。
  3. 網頁速度優化工具:透過 Page Speed 跑分工具進行測試。

同時,在技術上來說,對同樣一台伺服器來說更快的載入速度也代表同樣時間能夠提供更多的使用者服務。不過網站速度雖然重要,但權重並沒有頁面相關性高。目前 Google 調整後只有不到 1% 的搜尋會受到網站速度影響

Page Speed 跑分工具
page-loading-performance

延後載入非必需資源

  • 透過程式撰寫 Lazy Load 的函式延後載入腳本、資源
  • 透過 Google Tag Manager 來做到延遲載入的效果

如果各位是工程師,那這邊也提供更進階的四種加快網站開啟速度的常見方法給大家。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function async(u, c) {
var d = document,
t = "script",
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) {
o.addEventListener(
"load",
function (e) {
c(null, e);
},
false
);
}
s.parentNode.insertBefore(o, s);
}

async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js", function () {
anchors.options = {
visible: "always",
placement: "right",
icon: "#",
};
anchors
.add()
.remove(".intro-header h1")
.remove(".subheading")
.remove(".sidebar-container h5");
});

提供 AMP 支援

AMP (Accelerated Mobile Pages),是 Google 規範用來加速行動裝置存取網站用的技術,應該很多部落格都會提供這樣的外掛或是範本讓使用者進行修改,實作完成後通常網址後面加上 /amp 就會導到 AMP 版本的網頁,接著 Google 爬取後在搜尋結果上就會出現小閃電的符號。

AMP 網頁會在搜尋結果中出現小閃電
AMPResult

HTML 語意化

因為搜尋引擎是透過爬蟲來蒐集並分析處理網站內容,所以對於網頁的內容來說就要讓爬蟲更方便的去讀取,譬如標題我們就使用 h1~`h6` 而不要使用 div 搭配樣式設定,因為爬蟲只會讀取標籤並不會解析樣式。

這樣的優化我們就叫做 HTML 語意化,在來就是搜尋的結果中有時候會有更酷的呈現方式,這時候就需要透過中繼資料 (meta data) 和結構化資料 (Microdata) 來協助 Google 提供更棒的搜尋結果呈現。

從前端攻城獅的角度,來看有什麼地方是可以加強的,其中重要的地方在 html 的語意化,語意化帶來的好處一方面是方便維護,二來當程式交接的時候,只要是理解標準的人很快就可以了解網頁結構。

另一方面在 html 5 訂出標準後, <section>, <article>, <nav>, <header>, <footer> , <aside> 更直觀的標籤出現,這樣機器或是人也就可以更容易了解網頁的架構。

另外 Google 爬蟲現在很厲害,所以圖片名稱也很重要,盡量使用有意義的圖片名稱,譬如 “父親節特惠_桁架結構避震慢跑鞋.png” 就會比 101-2-99.png 好很多。

中繼資料 (meta data)

中繼資料 (meta data) 比較重要的是提供各平台的資訊,主要用於跟各平台溝通以及顯示資訊,舉例來說像是可以跟搜尋引擎說不要索引這個網站、或是跟 Facebook 說分享時顯示的圖片是這張,這樣在在各平台時,才能夠顯示正確且適當的資訊,Facebook 也提供了分享偵錯工具來防呆。

結構化資料 (Microdata)

再來是 Microdata 結構化資料,目前還沒有真的實作過,但看起來如果想要讓 google 的搜尋結果出現厲害的卡片或表格,甚至是其他未來可能出現更酷炫的結果,在網頁商品設計的同時,這個看來是必須認真去規劃的,實作之後也別忘了使用 google 提供測試工具測試一下。

文章關鍵字優化

接著透過 GA 的報表可以看出來,目前需要優化的是跳出率過高以及曝光高但點擊少的部份,同事因為是行銷部門的關係,所以主要是從 Customer Insight 的角度來建議。

經過一個月過後,每月瀏覽人次 (MAU) 上升了 1000 左右。

  • 優化曝光高的文章關鍵字成功增加了 468 次的點擊
  • 透過文章內的連結增加 57 次,降低了跳出率

優化曝光高的文章
OptimizeConversion

優化關鍵字一個半月後,排名前進到第一位
Ranking

增加文章內的連結
OptimizeBounceRate

因為屬於技術類相關的部落格,常見的情境會是

尋求教學的人來查答案,查完答案後沒其他需求就直接離開。不過,尋求教學的人很可能會想廣泛或深入理解相關內容。

搜尋引擎的操作,如果有 google ads 的帳號,我們可以使用關鍵字規劃工具、搜尋字詞報表,若沒有也可以使用 google 搜尋趨勢觀察熱搜,用詞上也可以透過自動完成的提示來猜測。

但在看了請輸入檢索詞 WWW 後,可能也要好好思考地方性的搜尋引擎在人工干預上的影響力。

「狂牛症」、「彈劾」成為熱門檢索詞不到一分鐘,NAVER 疑似馬上刪去相關資訊

google-trend

優化曝光高點擊少

曝光高代表關鍵字選擇正確,點擊少代表標題以及搜尋結果中的預覽內容並不是使用者想要的,所以優化的方向就會是誘導使用者點擊,首先可以嘗試的方向是去觀察競爭網站前三名的標題、文章架構。

曝光高點擊少
SearchConsoleResult

接著使用相關的關鍵字去優化,至於該怎麼使用相關關鍵字去優化,小編之前有介紹了運用 google 相關工具的方法,有兩種直接的方式:

  1. 觀察 Google 搜尋的自動完成

    20 歲在意長高 vs 30 歲在意存款
    google-autocomplete

  2. 透過 Google Trend 來觀察目前熱門搜尋

    GoogleTrendWall

  3. 透過專業和生活經驗去觀察動機
    • 可能還會想要知道的知識
    • 來查詢可能的動機

降低跳出率

跳出率過高,主因是因為尋求教學的人查完答案就離開頁面,解決方式可能是增加站內的導流

  • 寫進階文章吸引點擊或是新增概論文章導流
  • 站內搜尋功能
  • 相關文章
    • 內文編排方式人工加入文末
    • 插入在內文,連結站內文章

跳出率 = 單頁工作階段 / 所有工作階段

工作階段是什麼?工作階段是指特定時間範圍內,在網站上發生的多次使用者互動。舉例來說,一個工作階段可能包含多個網頁瀏覽、事件、社交互動和電子商務交易。根據預設,一個工作階段會在閒置 30 分鐘後結束,但您可以自行調整閒置時間的長度,短至數秒、長至數小時都可以。

跳出率過高
BounceRate

網站地圖 (Sitemap.xml)

最後是定義 Sitemap.xml ,各種語言應該都有相對應的工具能夠自動產生這個配置檔,如果想要手動提交的話,可以透過 google search console 去提交或是停止顯示某些頁面,用途是告訴搜尋引擎目前網頁有哪些路徑需要給機器去閱讀和索引,下面的例子就是定義更新的頻率以及重要程度。

1
2
3
4
5
6
<url>
<loc>https://sample.com/samples</loc>
<lastmod>2018-09-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>

成效分析與評估

在蘋果新的 IDFA 政策出現後,未來在使用者的個人分析上會越來越困難,網路上有看到一篇文章,在能夠有選擇的情況下目前 96% 的使用者都會拒絕被追蹤,所以未來走向以總體成效分析搭配以商品知識為基礎的推論會越來越重要。

目前相關分析的工具都已經非常方便,唯一要注意的就是當網站修改完成後,記得可以要求 Google 重新建立索引,另外目前我有在使用的監控工具有三種

  • 熱點分析: 透過觀察網站瀏覽的熱點,非常適合用來分析擺放 CTA 位置
  • GTM: 設定基本的事件追蹤,不過目前這個正在實驗中
  • Campaign URL 帶 UTM 參數: 把 direct/none 做更細緻的區分

熱點分析
HeatMapResult

Campaign URL

Campaign URL 入門款可以使用 Google 提供的工具 Campaign URL Builder (GA Dev Tools) 來產生,透過客製化的參數來減少無法區分的 direct/none,GA 來源是從網頁中的 HTTP Referrer 來的,以下幾種情況都會產生:

  1. 直接輸入網址
  2. 瀏覽器我的最愛書籤
  3. 文件中點超連結進到網頁 (例:word、excel、PDF 等)
  4. 手機 APP 的連結
  5. 當帶有來源參數的網址,部分情况下來源參數遺失
  6. 線下文宣品的 QR code (網址未帶參數)
  7. 從 EDM / Email 進入網站(網址未帶參數)
  8. 通訊軟體 (Line、TG) 轉貼連結的點擊

社群連結、EDM / Email、線下傳單的 QR code 其實都算是流量來源,那同樣一個產品網頁,要怎麼分析不同的文案、宣傳圖、管道之間的差異,在網站有安裝 GA 後,GA 有提供五個 utm 的參數給大家使用

GA 中怎麼去手動區分流量來源,GA 提供了底下 5 種參數

  1. utm_source: 來源,必填欄位,Ex: googleblog
  2. utm_medium: 媒介,必填欄位,Ex: cpcemailbanner
  3. utm_campaign: 名稱,必填欄位,Ex: utm_campaign=spring_sale
  4. utm_term: 型態,選填,Ex: running+shoes20% OFF
  5. utm_content: 內容,Ex: logolink or textlink 可用來評估 A/B 測試,看不同文案的效果

舉例來說: 部落格 (utm_source=blog) 橫幅中 (utm_medium=banner) 推廣的春季特賣 (utm_campaign=spring_sale) 8 折 (utm_term=20% OFF) 手表 (utm_content=watch) 最後產生的連結就會長得像是這樣 https://domain/?utm_source=blog&utm_medium=banner&utm_campaign=spring_sale&utm_term=20%25off&utm_content=watch,這樣最後各個管道撒出去的連結進到 GA 的來源和媒介就不會都是 direct/none 啦!


FAQ:部落格 SEO 與流量成長常見問題

Q1:網站載入速度對 SEO 排名的影響力究竟有多大?

A:雖然 Google 將 Core Web Vitals 列為排名因素,但內容的「相關性」依然是第一權重。然而,網頁速度優化工具 的實測顯示,載入速度超過 3 秒會導致用戶的高跳出率。因此,優化速度不只是為了搜尋引擎,更是為了維持使用者體驗與留存。

Q2:為什麼在 SEO 策略中,「結構化資料 (Schema)」是必備的?

A: 結構化資料應用 能讓您的搜尋結果具備「豐富摘要 (Rich Snippets)」,例如顯示 FAQ 折疊選單、評分星等或產品價格。這能顯著提升搜尋結果的視覺佔比與點擊率,是實踐 部落格 SEO 優化教學 的關鍵進階技巧。

Q3:如何判斷文章是否需要進行關鍵字重新優化?

A:透過 Search Console 成效分析 找出曝光量大但「點擊率 (CTR)」低於平均的文章。這暗示了您的標題或描述並未精確命中使用者的搜尋意圖。修正方式是:針對該關鍵字重新設計更具誘因的標題,並在內容開頭實踐 AIO 摘要,直接回答核心問題。



喜歡這篇文章,請幫忙拍拍手喔 🤣