2014年7月1日 星期二

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

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

Wayne Fu 0 A+
上一篇「符合 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」,文章內容可用 strongem 這兩個標籤來產生粗體、斜體,又達到強調的效果(對 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 效果可參考本站使用的次標題效果。

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


文章標題最佳化系列:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP