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

輸入關鍵字,搜尋引擎撈爬網站資料時,在搜尋結果頁關係著文章的自然出現率,從關鍵字的角度觀察通常有幾個重點。 ( 以 google 為例 )

一是文章標題及下方網址列的關鍵字,再者是內文的一段文章描述及下方結構化資料關鍵字,若是在網站中有設置「導航標籤 breadcrumb 麵包屑」,那在搜尋結果頁的網址列,會以結構化的導航路徑出現,將原始文章的網址取代。

常做上網查資料的動作會發現,搜尋引擎在調符合我們查詢結果的資料時,最優先的第一筆資料,會是以文章熱門度或標題關鍵字含量較多者為優先,再來才是網址及文章描述中的關鍵字,也就是說,標題的重要性較網址及文章引文還來的重要!

直觀的分析,一般出現在搜尋引擎的文章標題與網站名稱組合有兩種,一是文章標題在前網站名稱在後,另一種是網站名稱在前文章標題在後。我們可以從搜尋的關鍵字查詢結果得知,搜尋結果頁的每筆資料寬度有限。

google 搜尋的標題字元最多約可容納 28 個中文字,bing 搜尋約 22 個,yahoo 搜尋約 35 個,倘若在網站名稱及文章標題都落落長的情形下,網站名稱在前文章標題在後的排列方式,會讓文章標題於搜尋引擎的查詢結果中無法完整呈現 ( yahoo 除外!超出的會在第二行顯示 ),導致搜尋者查閱到不完整的文章標題資訊。

由此可知,網站在設計標題組合時的排列定位,「文章標題在前」的排列方式是較為合宜的。

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


仔細觀察會發現,一般情況下瀏覽器頁籤顯示的網站標題排列與搜尋引擎的搜尋結果有著直接的關係!以 Blogger 來說,從上圖和下圖兩張擷圖可以得知,我們為瀏覽器頁籤設定的網站標題組合,等於直接在搜尋頁顯示的查詢結果。

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


本篇配置教學重點:經過部署的 Blogger 範本 文章標題網誌名稱SEO 優化組合,除了網站首頁名稱是在說明的前面,在文章頁、靜態網址頁、網誌存檔、標籤頁、站內搜尋結果頁、404 錯誤頁的排列順序皆在網站名稱之前,簡短且無多餘的的字墬。(* 本文建議搭配「Blogger 範本:網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化」一起使用。)



相關連結

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版


設置流程

  1. 找查需要置入程式代碼的 HTML 區段
  2. 更換程式代碼

設置前準備

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



設定教學

Step 1

找查需要置入程式代碼的 HTML 區段

前往 Blogger 後台,點選【範本 \ 編輯HTML】

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



在程式碼頁框裡面用滑鼠左鍵點一下,並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ,在出現的搜尋框中輸入「<title>」按下鍵盤【Enter】

[教學] Blogger 範本:文章標題及網誌名稱 SEO 優化_102
上圖為 HTML 範本裡的程式代碼搜尋方法



Step 2

更換程式代碼

將下面的程式代碼替換包含「<title> ~ </title>」之間的程式代碼,在【儲存範本】後即可看到效果。


<title>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:blog.pageTitle/>|說明文字
    <b:else/>
    <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
      <data:blog.pageName/>|<data:blog.title/>
      <b:else/>
      找不到網頁|<data:blog.title/> 
    </b:if>
  </b:if>
</title>

程式代碼說明:
網頁標題在
   如果部落格的網址等於首頁網址的情況下
     顯示 " 部落格頁面標題|說明文字 "
     否則 ( 如果不是的話 )
     如果部落格頁面類型又不在404錯誤頁的話
       顯示 " 部落格頁面名稱|網站名稱 "
       否則 ( 如果不是的話 )
       顯示 " 找不到網頁|網站名稱 "
     如果
  如果
網頁標題

整段程式代碼大致意思是,目前使用者瀏覽的頁面只要不是在首頁及 404 錯誤頁,那麼標題則顯示為 "頁面名稱|網站名稱",第二行不用「pageType + index」去包是因為用「index」會包到其他頁面,那麼就無法顯示出其他頁面 "頁面名稱|網站名稱" 的絕對性。



技巧小貼士:
在範本的HTML 中 「<head>」裡「meta 資料」的部份,加入的 Blogger 判斷式資料必需為全域性的,例如「data:blog.metaDescription」和「data:description」前者為全域性資料,判斷的方式是查看當中是否有「blog」。

data:blog.metaDescription」為我們幫網誌設置的 "中繼資料"
data:description」為我們幫網誌設置的 "詳細介紹" 或 "網誌說明"

<b:if>」判斷式「頁面類型〈data:blog.pageType〉」應用「首頁〈index〉」時具有以下特性:包含「首頁、搜尋、標籤 label 頁面」



第三行的,顯示 " 部落格頁面標題|說明文字 " 即為一個實際的網站名稱,在搜尋引擎中顯示的就是我們設置的樣貌,若你想只保留網站前方的網站名稱,可將 "|說明文字 " 刪除。

由下圖可以發現,經過部署後的網站搜尋結果頁,網站名稱右側有較簡短的網誌走向提要,在網址列下方則列出關於網站的整體描述 ( 中繼資料 )。

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



「中繼資料 ( 包含:首頁、搜尋頁、標籤頁、網誌存檔 )」設置路徑:Blogger 後台 \ 設定 \ 搜尋偏好設定 \ 中繼標記

「中繼資料 ( 包含:文章頁、靜態網址頁 )」設置路徑:寫文章時 \ 搜尋說明




小結

在試過了數十種組合後,還是有一個頁面類型無法正確顯示,由下圖可知,該頁面的頁籤中網站名稱前是空的。

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



網址結構為「/search」列出所有文章頁,若您有測試成功,煩請回報您的設置方法,讓 Blogger 社群更臻完善。



相關文章

Blogger 製作 Breadcrumb 文章標籤導航麵包屑

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

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

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


留言

  1. 哈囉 COKE, 好久不見~

    想藉由這篇文章的教學來發問^^

    目前我有一篇文章算是在GOOGLE搜尋很前面的,(PS:這篇文章的教學我已經做了)

    但不知道為什麼用不同的關鍵字搜尋到的同一篇文章,會出現不同的文章標題顯示?

    https://i.imgur.com/xGfvYAZ.jpg

    同時,以前搜尋 【雙WIPE】 這個關鍵字是擺在第一篇,結果今天搜尋卻被超前了QQ

    不知道原因為何?

    ==

    另外,在搜尋 【雙WIPE】關鍵字的結果中可以看到網站名稱變成了【Wang Henry(W.H.)娛樂數位台日韓遊戲心得】,而不是簡約的【Wang Henry(W.H.)娛樂數位】。

    我有在範本內搜尋關鍵字【台日韓遊戲心得】也查無所獲@@

    這會不會是因為這篇文章初稿的時間已經很多年,所以在GOOGLE引擎內已經根深蒂固而在這一個關鍵字搜尋結果下才顯示成這樣異常的狀況?

    謝謝。

    回覆刪除
    回覆
    1. (?)
      目前我有一篇文章算是在GOOGLE搜尋很前面的,(PS:這篇文章的教學我已經做了)

      但不知道為什麼用不同的關鍵字搜尋到的同一篇文章,會出現不同的文章標題顯示?

      ---

      (A)
      這點蠻怪的,Henry 網誌目前還是使用兩個標頭嗎?

      另外還有,該篇文章標題「【教學】『雙WIPE、雙清、2wipe』當手機異常(關機、重開機、出現錯誤),送修前先試試『雙WIPE(雙清)』恢復原廠。」是否曾經只使用『雙WIPE』當作 "標題"。

      而第二張圖,搜尋『手機怪怪的』的搜尋結果,才是真正的文章標題「【教學】『雙WIPE、雙清、2wipe』當手機異常(關機、重開機、出現錯誤),送修前先試試『雙WIPE(雙清)』恢復原廠。」。

      依照搜尋結果判斷,有可能 Google 使用新的規則。那篇文章中含有『雙WIPE』的標籤,而文章標題與內容中也含有『雙WIPE』資料,另外使用者搜尋之後文章參考價值高,所以幫那篇文章獨立出『雙WIPE』關鍵字的索引。

      如果是 Google 使用新的規則的話,那代表 Henry 那篇文章寫的相當好。


      ~~~



      (?)
      同時,以前搜尋 【雙WIPE】 這個關鍵字是擺在第一篇,結果今天搜尋卻被超前了QQ

      ---

      (A)
      Henry 的「【教學】『雙WIPE、雙清、2wipe』當手機異常(關機、重開機、出現錯誤),送修前先試試『雙WIPE(雙清)』恢復原廠。」這篇文章,是操作與解決教學,而「什麼是Wipe?什麼又是雙Wipe?」這篇文章著重在說明『什麼是雙Wipe?』。

      也許 Google 在判斷使用者搜尋『雙WIPE』資料時,發現較多人想要了解「什麼是Wipe?」,所以將「什麼是Wipe?什麼又是雙Wipe?」這篇文章,放在第一筆。

      另外,也有可能 Google 將規則更改,所以把帶有疑問式的「文章標題」放在搜尋結果的最前面。

      例如,我們再搜尋『雙清』這個關鍵字,google 搜尋結果的第一筆資料也是疑問式標題『手機刷機要「雙清」,什麼是「三清」和「四清」?』,排名第二的就是帶有解決辦法的「【教學】『雙WIPE、雙清、2wipe』當手機異常(關機、重開機、出現錯誤),送修前先試試『雙WIPE(雙清)』恢復原廠。」這篇文章。







      ==================================

      (?)
      另外,在搜尋 【雙WIPE】關鍵字的結果中可以看到網站名稱變成了【Wang Henry(W.H.)娛樂數位台日韓遊戲心得】,而不是簡約的【Wang Henry(W.H.)娛樂數位】。

      我有在範本內搜尋關鍵字【台日韓遊戲心得】也查無所獲@@

      這會不會是因為這篇文章初稿的時間已經很多年,所以在GOOGLE引擎內已經根深蒂固而在這一個關鍵字搜尋結果下才顯示成這樣異常的狀況?


      ---

      (A)
      如果曾經使用「Wang Henry(W.H.)娛樂數位台日韓遊戲心得」當作網誌標題,Google 可能還會保留資料舊資料。而你的網誌名稱,首頁全名目前應該是『Wang.Henry (W.H) 娛樂數位|日本遊戲APK|3C教學(Android,Line)|3C活動開箱』。

      Google 除了舊資料的問題,也有 H1 H2 之間變化而產生不同『文章標題』結構的搜尋樣貌,再加上如果「範本主題」是使用兩個標頭的話也可能產生不同的衍生結果。而 Google WebMasters 那邊是否有重複提交 sitemap,又或是其中有其他的設定問題,又將衍生出不一樣的搜尋結果。



      ~以上存屬推論~

      刪除
    2. 謝謝COKE,我剛剛才發現這次留言沒有勾選到通知,所以現在才來回復。

      目前主站的架構感覺上真的很亂,這個站剛開始是參照WFU的文章架構起來的,所以有用到雙標頭。

      不過前陣子因為看了COKE的文章有所變動,將其中一個標頭的WIDGET小工具(版型那邊)直接移除,不知道是不是這樣子等於是沒有清理乾淨?

      ==

      雙WIPE的文章沒有單獨用過這幾個字作為文章標題,文章發表至今只有將標題做些變動。(EX:減少不相關字眼在文章標題前頭、把"雙WIPE"往前擺。)

      剛剛用另外領個關鍵字 雙清 / 2WIPE 出現的文章標題就正常了。
      (但應該是字數太多,網站名稱被藏起來了XD)

      ==

      SITEMAP重複提交,指的是說開戰時提交過一次SITEMAP.XML,後來有刪除後再重新傳一次的意思嗎?
      (以上為舉例)

      還是說我現在有提交SITEMAP.XML、另外還有/atom.xml?redirect=false&start-index=1&max-results=500這兩種,就會形成重複提交的狀態?

      又或者是說第一次提交且被引擎收錄進去了,後面不管有沒有刪除、或是用ATOM提交,引擎就會保留這篇文章的網址,保留期限直到該篇文章完全被刪除為止?


      ====

      其他:目前看到你的文章圖片不論在電腦版或手機板都能夠正常地縮放到滿版,不知道COKE站內有沒有教學?

      (這個問題我是不是有問過@@?有種似曾相識的感覺,哈哈)

      剛剛有GOOGLE了關鍵字:【BLOGGER 圖片自動滿版】,但找到的都沒有說明得很清楚OTZ,繼續尋求解答中。

      刪除
    3. 圖片的部份,在 CSS 區塊將圖片改為以『百分比 (%)』來顯示,就能滿版顯示圖片。

      其他部份,混合了多種可能,一步一步拆解,就能找到原因。

      刪除
    4. 圖片css 應該是下面這一段?

      .post-body img {
      max-width: 100%;
      }

      這段加入主題-進階-css 那邊填入之後,測試了一下將圖片顯示原圖大小,依舊會超出文章範圍@@

      刪除
    5. 包住文章與圖片的框架『fauxcolumn-outer fauxcolumn-center-outer』或『fauxcolumn-outer fauxcolumn-left-outer』也必須改成 100% 。

      還是建議你直接使用 Blogger 提供的自適應範本來改,改成自己想的的風格。就如同上面所示,改完框架,之後可能文字大小又要改成「百分比」,且改了一個框架,其他的框架也得動工成「百分比」。

      直接使用「自適應範本主題」來『做』,會比『問』還來的快。在『做』的同時,自然會找到「自適應範本主題」與「一般範本主題」兩者之間的異同;大方向來觀察,框架、CSS 僅在名稱上有所不同,而前者多了「百分比」狀態。

      刪除
    6. 恩恩,剛剛艘巡coke提到的『fauxcolumn-outer fauxcolumn-center-outer』或『fauxcolumn-outer fauxcolumn-left-outer』,一模一樣的關鍵字是在 div 裡面的。coke指的是這邊要加入100%嗎?

      目前最主要是想把照片文章自動縮放,文字的部分是次要。

      因為完全不懂css、不熟html,所以目前已經打算購入書籍來摸索,或許之後才會比較熟吧@@

      BUT現在就只能看著教學找到對應的關鍵來做網頁上的設計><(目前無法舉一反三),然後遇到問題的時候請求協助。

      謝謝COKE的回覆 :)

      刪除
    7. fauxcolumn-outer』、『fauxcolumn-center-outer』、『fauxcolumn-left-outer (左側版) 』這幾個一個一個試,找到位置後,設置為 100% 即可讓左邊的版面滿版,不過『column-right-outer (右側版) 』也必須和左側版一起調整。

      正常來說左側版可能設置為 70 % ,那右側版就會設置為 30%,而『columns fauxcolumns (可能為包含左側版與右側版的整個區域) 』就可以設置為 100 % 。

      整體基本位置找到後,開始加入自適應狀態,讓版型在各寬度 px 的情況下都能自行放大、縮小面版。(可參考「自訂 BLOGGER 行動版範本與自適應設計原理 」STEP7 - RWD 自適應版型原理。)

      fauxcolumn-left-outer (左側版) 』是包住整個文章區塊的框框,限制為 70 % 後,最大寬度就是以百分比顯示。自然的,圖片設為 100 % ,也就會被限定在這 70 % 中。(☆不過不同的裝置寬度,又需不同的百分比數值。)

      要以百分比設置版型,牽一髮動全身,這並不是簡單的工程,對自身使用的版型css、html 架構名稱熟悉後再做處理,會較為適宜。

      再者,後台「版面配置」頁裡的『主題設計工具』也有些許部份會失效,除非也幫『主題設計工具』設置每一區塊框架的自適應狀態。

      刪除
    8. 如果僅是想幫圖片滿版,可以試著將以下代碼放置在 CSS 區塊:


      a img {
      border: none;
      position: relative;
      height: auto;
      width: 100%;
      }

      刪除
    9. 謝謝COKE,目前有先將這段語法加入,不過終於能體會到COKE說的要大調整的意思了XD

      因為加入了CSS語法之後,不但圖片變大之外、原本LINE分享按鈕、以及文章編輯的那支鉛筆都一起放大了!哈哈~

      所以我就暫時先取消這段CSS,並且變更一下分享的按鈕。

      參考資料:
      https://www.techcoke.com/2013/11/how-to-install-social-share-button-on-blogger-mobile-template.html

      目前這個分享按鈕安裝完畢,四個分享中目前只有遇到FB的按下去只有+1的動作,沒有開啟FB來分享,不知道是不是這功能原本只是一個【讚】的概念呢?

      刪除
    10. 補充:好像是自己帳號的狀態下按FB分享不會跳出分享?

      我的另一台手機沒登入,以及其他人的手機都會跳出。

      刪除
    11. 因為寫文章當時,「FB 分享」的按鈕高度與其他社群分享按鈕有落差,比例不好看,當時只有「FB 推薦」的按鈕比例,與其他社群分享按鈕的高度是一致,所以才選擇「FB 推薦」來使用。

      目前「fb 分享」的按鈕高度比例應該已經 ok 了,可以到『FB Share Button』按鈕大小選擇「small」即可使用,正常分享文章。

      刪除
  2. 謝謝COKE唷,我把分享的問題在相關文章內提出。

    回覆刪除
    回覆
    1. 在相關頁面回覆了。

      記得,在 FB Share Button 的那個設置頁面,網址的部份不用填寫,FB 分享按鈕會自動抓取文章網址。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰