2014年6月16日

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

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 標籤)
  • 顏色色碼可自行更改
  • 不需要時可全部刪除
  • 其他次標題需要條列式項目時可複製過去使用

K~O:用於文章中的次標題,使用三個 H3 標籤(避免過度使用 H2)

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

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

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


文章標題最佳化系列:

5 則留言:

  1. [quote]網誌名稱(h1)
    <b:if cond='data:blog.pageType != "index"'>
    <b:if cond='data:blog.pageType == "archive"'>
    //這裡植入原程式碼,並將標籤改為h1
    <b:else/>
    //這裡改為h2
    </b:if>
    <b:else/>
    //這裡改為h1
    </b:if>

    文章標題(h3)

    <b:if cond='data:blog.url != data:post.url'>
    //這裡植入原程式碼,並將標籤改為h2
    <b:else/>
    //這裡改為h1
    </b:if>
    [/quote]
    目前測試時沒發現有什麼問題

    回覆刪除
  2. <8093584278720565215>(以上內容請勿刪除,從括號之後開始留言)大概知道你要表達的意思,利用判斷式來動態調整「網誌名稱」、「文章標題」的 h1、h2 等標籤的設定。

    這個方法可以成立的前提是,所有 h1、h2 等等的 CSS 設定都一模一樣,那就沒有差別。但如果範本中的 h 標籤各有 CSS 樣式設定,就無法套用了。

    回覆刪除
  3. <6451475967563794474>(以上內容請勿刪除,從括號之後開始留言)通常CSS的選擇器,網誌名稱是用.header h1,文章標題是用h3.post-title。
    直接用字串取代的方法,確實會造成樣式跑掉,所以我是手動修正成h1,h2一併指定,才能在文內/列表保持外觀一致。
    這樣必須具備一定的CSS知識才比較適合用,如果務求完美又不嫌手動對應麻煩的話,倒是蠻推薦的。(雖然會去改這種細節的人,應該對網頁都有一定熟悉度才對?)

    回覆刪除
  4. <6305772650049755403>(以上內容請勿刪除,從括號之後開始留言)我的文章主要寫給常態分佈曲線最多人的那個族群區塊。太新手的東西寫不完、太深的東西沒人看(等於浪費時間),寫給最多人看得懂的東西,比較有時間效益。

    無論如何你的留言補充內容很好啊,我的內容供大部分使用者套用,你的內容可以給想自訂的人參考,剛好可以讓這個主題產生最高的效益 :)

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。