Blogger 新版 RWD 範本,對 SEO 有哪些加分之處?

Blogger 新版 RWD 範本,對 SEO 有哪些加分之處?

A+
前陣子介紹了「Blogger 推出的全新自適應 RWD 官方範本」,有讀者提問新範本 SEO 的相關問題,這表示 Blogger 對 SEO 做了哪些加強,也是大家關注的事情。

那麼本篇就來整理一下,這個 RWD 範本對 SEO 下了什麼功夫、有什麼特別之處。

(圖片出處: 699pic.com)


一、HTML5 語意標籤


由於過去接到不少需求,想要將 Blogger 原本的範本內容,改為使用 HTML5 語意標籤。那麼第一個好消息是,Blogger 目前官方最新的範本內容,已經使用了不少 HTML5 標籤。


1. HTML5 特色

首先可大致瞭解一下 HTML4 與 HTML5 的差別,參考這篇「HTML 5 與 HTML4 的差異與特色」:

  • HTML4 多半使用 DIV 標籤來定義區塊,搜尋引擎很難瞭解該區塊的用途、性質。
  • HTML5 增加了許多新的標籤,看名稱就知道用途是什麼
  • 例如 NAV 就是導覽列、ARTICLE 就是文章、ASIDE 就是側邊欄

除了我們自己閱讀網頁架構比較清楚之外,搜尋引擎爬資料時,也更能分辨資料的屬性,能製作更精確的索引。


2. 新舊範本差異

簡單地拿新舊範本來比較一下,以本站 WFU BLOG 為例,檢視了網頁原始碼後,以下這些 HTML5 標籤找不到,不過 RWD 範本可以看到:

  • NAV
  • ARTICLE


3. 修改注意事項

要將原範本內容改用 HTML5 標籤並不困難,但麻煩的是,要檢查所有相關的 CSS 是否會影響到

因此除非 CSS 非常熟悉,建議別自己改 HTML5 標籤,免得網站版面大亂。

直接改用新的 RWD 範本、或是買現成的 HTML5 範本會比較建議且省事。



二、結構化資料標記


1. 新範本語法

之前寫過一篇「部落格如何處理 "結構化資料" 標記 + 修復錯誤訊息」,主要是因為 Blogger 原本範本中,使用的 "結構化資料標記" 語法,在測試工具中總是會出現許多錯誤訊息。

由於 "結構化資料標記" 語法種類非常多,標準也沒有統一,其實也不必在意這件事。不過對於新版 RWD 的使用來說,這一點倒是有好消息,因為 Blogger 採用了目前算是最新的格式:JSON-LD

打開文章頁面的網頁原始碼,新的 RWD 範本會看到類似以下這一段文字:

<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://wfu-blog-backup.blogspot.com/2017/03/blogger-rwd.html"
},
"headline": "Blogger 推出全新自適應 RWD 官方範本及佈景主題&#65292;並支援行動裝置","description": "前幾天 Blogger 官方發佈了公告&#12300; Share your unique style with new Blogger themes &#12301;&#65292;從現在起後台可以套用的佈景主題&#65292;多了 4 個大分類&#65292;共 20 款新樣式可選擇&#12290; \n雖然款式很多&#65292;不過版面設計的邏輯都差不多&#65292;也可看成官方提供了一種 RWD(自適應&#8230;","datePublished": "2017-03-25T08:19:00+08:00",
"dateModified": "2017-04-03T08:19:29+08:00","image": {
"@type": "ImageObject","url": "https://3.bp.blogspot.com/-j_Nfsef6ri4/WNSi_pMKUtI/AAAAAAAAPV8/DN3WYhIDW68ZXWgTXosMdbuJEjSzIr7GgCLcB/w1200-h630-p-k-no-nu/blogger-official-rwd-template.jpg",
"height": 630,
"width": 1200},"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
"width": 206,
"height": 60
}
},"author": {
"@type": "Person",
"name": "Wayne Fu"
}
}</script>

這樣的 "結構化資料" 是由範本自動產生,我們無法在範本中看到、也無法修改。使用這樣的技術後,搜尋引擎爬資料會更方便快速,不必在散落各處的 HTML 標籤中,花費更多功夫才拼湊出這些文章的關鍵資訊。

以上簡單介紹這項新的技術,不準備深入說明艱深的 SEO 知識,想要瞭解更多的讀者,可參考:



2. 自行製作語法

雖然這些新的語法看不到、也不能修改,不過既然從網頁原始碼能看到格式,那麼沒使用 RWD 範本的使用者,就能依樣畫葫蘆,在自己的範本相關位置,加入同樣的內容。

之前的文章提過,對於部落格而言,這個項目對 SEO 影響層面不大,就不詳細說明如何進行,大概舉例一下就好,請讀者自行舉一反三:

  • "@id" 的值為文章網址,在範本中可用 Blogger 語法標記 "<data:post.canonicalUrl/>" 來表示
  • "headline" 的值為文章標題,在範本中可用 "<data:post.title/>" 來表示
  • "description" 的值為文章搜尋說明,在範本中可用 "<data:blog.metaDescription/>" 來表示

有興趣瞭解更多 Blogger 標記,可參考「list of Blogger Layout Data Tags」。



三、自適應圖片尺寸


在 HTML5 規格中,IMG 標籤新增了一個屬性「SRCSET」,其作用是可以塞入同一張圖片、各種不同尺寸的連結網址,那麼瀏覽器就可根據不同尺寸的裝置,顯示最合適的一張圖片,可大大減少圖片下載的時間,也就能加快網頁載入速度。

關於這個屬性的語法說明,可參考這篇「用 srcset 屬性做簡單的 Responsive Image」。

在新版 RWD 範本的首頁,我也發現了「SRCSET」,以 WFU BLOG 的某張首頁圖片為例,語法長得像這樣:

<img alt='圖片' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/s1600/blog-when-to-improve-seo.jpg' srcset='https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w256-h162-p-k-no-nu/blog-when-to-improve-seo.jpg 256w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w512-h325-p-k-no-nu/blog-when-to-improve-seo.jpg 512w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w945-h600-p-k-no-nu/blog-when-to-improve-seo.jpg 945w, https://2.bp.blogspot.com/-_cLN_Lf6wy4/WN3-71FfU3I/AAAAAAAAPXU/H476NwSy2Ts_L1QgOXHmkgGdE5YZRvnCgCLcB/w1684-h1069-p-k-no-nu/blog-when-to-improve-seo.jpg 1684w'/>

這項新作法真的很不錯,以前 Blogger 行動版採用的方式是,直接將圖片縮小為 280px,可參考這篇「加快 Blogger 行動版圖片載入速度的密技」,不過這方法適合手機螢幕直立時的顯示方式,因為橫擺之後,螢幕寬度將會遠大於 280px。而採用新作法後,各種螢幕尺寸都能有對應的圖片尺寸,會更有彈性。

很可惜的是,由於 Blogger 語法有先天上的限制,只能對文章封面圖自動產生 "SRCSET" 屬性,這也就是說,每篇文章最多只有第一張圖片,可以做到 "自適應圖片" 效果

不過既然瞭解了原理,就能製作「自適應圖片語法產生器」。之前已經做過「Blogger 圖片語法轉換器」,之後再找時間來增加這項功能就好。

由於排程不少,不確定何時會進行,需要追蹤此功能的讀者,可訂閱本站最新文章。



四、小結


Blogger 新版範本的改變非常多,本篇這幾項是比較明顯、我有發現的,跟 SEO 比較有關的項目。

如果是想要專心寫作、沒時間把範本改來改去的站長,那麼就非常推薦直接使用新版的 RWD 範本,可省下不少煩惱 SEO 的時間。


更多 SEO 相關文章:

2 則留言:

  1. 不好意思打擾,想請教站長是否知道Blogger官方範本"Emporio"這個範本,在手機或平板介面的文章首頁圖會模糊,不知道該怎麼解決?圖片如果點進去文章內則不會模糊,僅有在首頁出現時會模糊,也不知道該從何修改起,故想請教站長指點或協助。 相片的部份我都確定有將解析度設定夠清楚(要不然點入文章內應該也會是模糊的)。 感謝!

    回覆刪除
    回覆
    1. 請見本文 →「三、自適應圖片尺寸」的說明,官方 RWD 範本首頁的縮圖,會使用 RWD 圖片語法,自動改以小尺寸圖片載入,也就是你覺得看起來模糊的樣子,實際上就是小尺寸縮圖的效果。

      或許有辦法可以改 CSS 參數,但我建議不喜歡這個效果的話,請不要使用官方 RWD 範本,原因請參考「Blogger 推出全新自適應 RWD 官方範本」http://www.wfublog.com/2017/03/blogger-rwd-official-template.html →「五、總結 」,沒事最好別動官方 RWD 範本。

      真的想自己改範本的話,建議買 RWD 付費範本來改,自由度會比較大!

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP