[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

Blogger 範本:文章日期 HTML 標籤 SEO 優化

Blogger SEO:Blogger 網誌官方預設的版型,文章日期 HTML 標籤為「h2 標籤」,這樣的設計不利 SEO 的部屬優化。幫網站做 SEO ( 搜尋引擎最佳化 ) 規劃時,通常都會將「h1、h2 標籤」讓給標頭或是文章標題做使用。因為「h1、h2 標籤」所佔的「搜尋權重比」較高。

設置 h2 標籤在「文章日期」中,本身在搜尋上無太多實質的幫助。比較建議的做法是將 Blogger 中「文章日期」的 HTML 標籤,更改為「h3、h4 或 h5」標籤。

Blogger 範本:文章日期 HTML 標籤 SEO 優化_001

另外,在 Blogger 版面配置「範本設計工具」裡的,Blogger 預設版型的「文章日期 h2 標籤」,與「小工具標題 h2 標籤」的部份會重疊。例如,點擊「進階 〉小工具」,文章日期與小工具標題都會一起顯示。

Blogger 範本:文章日期 HTML 標籤 SEO 優化_002

「範本設計工具」裡小工具與文章日期重疊的部份,可以觀察「Blogger 版面配置小工具標題 HTML 標籤 SEO 優化」與本文的設置方式,兩者一起配置即可解決問題。



文章中的範例,僅以下列打勾的官方版型做示例,其他官方版型可如法泡製。如果使用本文做練習,也可應用以下模板試作,出問題的機率會比較低。

Blogger 範本:文章日期 HTML 標籤 SEO 優化_003



設置流程

  1. 置換 HTML 文章日期標籤為 h4
  2. 調整 CSS 讓「範本設計工具」正常運作

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

Step 1

置換 HTML 文章日期標籤為 h4

這裡,我們將 HTML 的文章日期改為「h4」作為示例。前往 Blogger 後台「範本 〉編輯 HTML」,搜尋『<h2 class='date-header'>』。

找到的「<h2 class='date-header'>」資料會有兩筆,一筆為電腦版網站的文章日期,一筆為行動版網站的文章日期。將含有「h2」的部份更改為「h4」即可完成 SEO 的部署。

整體代碼如下:

<h4 class='date-header'><span><data:post.dateHeader/></span></h4>



Step 2

調整 CSS 讓「範本設計工具」正常運作

接著我們還要調整 CSS 的部份,這樣才能讓 Blogger 後台「版面配置」右上角的「範本設計工具」正常運作。

在範本中搜尋「h2.date-header」,找到的完整代碼如下:

h4.date-header {
  font: $(date.header.font);
}

我們將含有「h2」的部份更改為「h4」即可完成 CSS 的部署。



小結

以上就是變更 Blogger 當前範本中,所有「文章日期  h2 tag」的方法。如果你的範本不是官方提供的,CSS 的部份就得自行調整了。

文章中文章日期 h2、h4 的部署,僅以操作教學而做編排,SEO 可能隨著時間,而會有所不同。知道如何修改,這比較重要。



相關文章

Blogger 範本:版面配置「小工具標題」HTML 標籤 SEO 優化

Blogger 範本:網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化

[教學] Blogger 範本:文章標題及網誌名稱 SEO 優化教學



分享

共有 8 則留言

留言迴響
Xiao Alexander
管理員
1/19/2017 1:55 PM ×

我比較了你和WFU的標籤CSS後, 就把你的CSS樣式複製到了我的範本!!
https://hexiezuo.blogspot.com/2017/01/h2h3h4css.html
看下效果很不錯, 其中幾個圖片,我稍後會修改為我自己的頭像!!
我現在,還沒照片,等我照片,照完後,做一定的剪裁,就替換上去!!

回覆
avatar
coke tech
管理員
1/19/2017 6:31 PM ×

感謝支持 :D

回覆
avatar
Wang Henry
管理員
1/20/2017 3:12 PM ×

哈囉COKE,第一步驟我有找到、並且H2換成H4。

但是第二步驟CSS的部分找不到一模一樣的!

h4.date-header {
font: $(date.header.font);
}

但是有類似的

.main-inner .widget h2.date-header {
margin: 0 -15px 1px;
padding: 0 0 $(date.padding.bottom) 0;

font: $(date.font);
color: $(date.text.color);

background: $(date.background);

上面的H2應該就是教學文內要替換的對吧?

回覆
avatar
coke tech
管理員
1/20/2017 3:54 PM ×

文章忘了說明,等下補充。

文章是以下面這個版型操作的:

https://4.bp.blogspot.com/-TMfR6P7lz7s/WH_EGcQQbII/AAAAAAAAI1I/YMsZ7GZc3LEQXPMk1px99ixcPRL-iA7ZwCLcB/s1600/blogger-h1-h2-h3-tag-seo_003.jpg

實際操作,要以你的版型為主。

可以試你的 css 代碼,看看變更後的成果。

別忘了,備份模板。

回覆
avatar
Wang Henry
管理員
1/20/2017 4:08 PM ×

報告~

我剛剛已經把第二步驟的改成了H4,也就是第一步驟+第二步驟都做了。

這樣要去哪裡檢查變更後的效果? (即,要怎樣注意到已經達到本篇文章教學的目的)

謝謝^^

回覆
avatar
coke tech
管理員
1/20/2017 4:17 PM ×

使用 Chrome 瀏覽器,對著文章日期按右鍵「檢查」,看到變更為 h4 即可完成。

另外,版面配置頁右上角「範本設計工具」,檢查功能是否運作正常。

回覆
avatar
Wang Henry
管理員
1/20/2017 4:57 PM ×

看起來COKE提到的兩點都OK。

感謝^^

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *