修改範本 H1 H2 H3 標籤實用技巧﹍Blogger 文章標題最佳化(3)

上一篇「符合 SEO 的 H1 H2 H3 標籤配置研究」說明了在 Blogger 範本中，如何配置 H 標籤的概念。本篇則說明如何用最簡單的方法，來批次修改所有的 H 標籤，來達到較佳的 SEO 效果。

除此之外，在文章之中，還可運用各種 HTML 標籤，來達到加強 SEO 效果。

一、修改範本的難處

如果要進行本篇的操作，最好詳讀上一篇「符合 SEO 的 H1 H2 H3 標籤配置研究」的內容再來，才不會一頭霧水。本篇將會示範以下的操作：

• 網站標題(原使用 H1) → 改用 H2 標籤
• 文章標題(原使用 H3) → 改用 H1 標籤
• 小工具、日期(原使用 H2) → 改用 H5 標籤

不過，如果遵循一步一腳印的方式，來逐步修改各個標籤的話，相信讀者會發現，這是一個挺折騰的流程。因為每個 H 標籤在範本中，各自有 CSS 語法設定了相關的參數。

舉例來說，可能會有以下麻煩：

• 將所有 H1 標籤修改為 H2 後，原來的 H1 標籤 CSS 樣式將不會套用過去。
• 為了延續 CSS 樣式，將範本中原本 H1 的相關 CSS 參數後，改成 H2 的 CSS 參數 → 又可能導致跟原始 H2 標籤的 CSS 參數打架。

意思就是說，這幾個 H 標籤彼此之間，要順利完成所有相關的 HTML/CSS 轉換，是一件不小的工程。

以下 WFU 試著找到一個最容易操作的流程，但不一定符合 SEO 最佳解，讀者可以參考後自行評量如何取決。

二、修改範本最佳流程

1. 修改原理

如果經由置換字串的方式，可以同時將 HTML 標籤與 CSS 內容同時置換。經查驗 Blogger 範本後，發現 H1～H4 標籤有使用、H5 與 H6 未使用。若經由以下流程，H 標籤的轉換不會發生任何差錯：

• 先將 H2(小工具、日期) 轉換為 H5
• 再將 H1(網站標題) 轉換為 H2
• 最後將 H3(文章標題) 轉換為 H1

這可看成一個簡單的益智遊戲，過程如何推導出來就不解釋了，可自行驗證，以上流程已經是最佳、最速解。


2. 操作流程

建議使用記事軟體來進行字串批次置換，例如 WFU 常用的 notepad++。請按以下操作步驟：

• 將 Blogger 範本所有內容複製到記事軟體
• 將所有 "H2" 字串置換為 "H5" 字串
• 將所有 "H1" 字串置換為 "H2" 字串
• 將所有 "H3" 字串置換為 "H1" 字串
• 將記事軟體的內容複製回Blogger 範本

儲存後就輕鬆完成了這個原本可能的大工程。

不過這個流程，是針對將「文章標題」改為 H1 標籤。如果看過上一篇，你的需求不是這樣的話，請依照本文的原理自行找出屬於自己的最佳解。

三、加強文章中的 SEO 效果

除了文章標題，文章內容也能運用各種 HTML 標籤，來對 SEO 進行最佳化。

1. 幾個對 SEO 有幫助的 HTML 標籤

根據這篇「學會Semantic HTML」，文章內容可用 strong、em 這兩個標籤來產生粗體、斜體，又達到強調的效果(對 SEO 有幫助)；而常見的 B、I 標籤雖能產生粗體、斜體，但對 SEO 無效。

除此之外，根據上一篇的概念，文章內的次標題，我們還可使用 H 標題來增加 SEO 效果。


2. 有效率的文章範本範例

雖然了解了以上知識，但在實作上，誰會一邊寫文章，一邊打上 <strong>、</strong>、<H2>、</H2> 這樣的字串呢？這實在太麻煩了！

為了方便作業，WFU 會使用以下這樣的文章範本，每次要寫文章時，將範本叫出來，那麼文章內容要進行 SEO 就是一件很輕鬆的事情了：


請參照以上行號──

A：繼續閱讀語法

C、K：用於文章中的次標題，頭兩個次標題使用 H2 標籤。使用編號(一、二..)為 WFU 的個人習慣，可自行更改。

E～I：

• 用於次標題中的條列式項目，若包含重要關鍵字時，使用 strong 標籤可利於 SEO(若沒有包含關鍵字，則可去除 strong 標籤)
• CSS 的 class 可自行設定
• 不需要時可全部刪除
• 其他次標題需要條列式項目時可複製過去使用

K～O：用於文章中的次標題，使用三個 H3 標籤(避免過度使用 H2)

S：次標題太多時，可改用 H4～H6 標籤，不過須自訂 H4～H6 的 CSS 樣式設定。

補充：H2、H3 等標籤，可參考「特殊文字區塊」來變化 CSS 樣式，讓這些次標題的版面看起來活潑一點，來分隔比較死板的文字段落，CSS 效果可參考本站使用的次標題效果。

以上範例酌供參考，請依據自己的需求修改、或增加自己的常用字串，如此撰寫文章時可節省不少時間。

文章標題最佳化系列：