前陣子介紹了「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 官方範本及佈景主題，並支援行動裝置","description": "前幾天 Blogger 官方發佈了公告「 Share your unique style with new Blogger themes 」，從現在起後台可以套用的佈景主題，多了 4 個大分類，共 20 款新樣式可選擇。 \n雖然款式很多，不過版面設計的邏輯都差不多，也可看成官方提供了一種 RWD(自適應…","datePublished": "2017-03-25T08:19:00+08:00",
"dateModified": "2017-04-03T08:19:29+08:00","image": {
"@type": "ImageObject","url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWjaTw_vsWHCWyGP8l0g4t_GMaWw1RUCD5nocr6tK9N5GnXgnDJp44LyNibmX7TCKxoejJa7a4jkQL8ABXo9Eg7p9bYSP5n79qF6Wi3J7wQDYkHgrjeGXrJnNi-Mt07EV5s6b2fthPQvbn/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 知識，想要瞭解更多的讀者，可參考：
- 整理好的投影片資料「Json ld 簡介」
- 或這篇「JSON-LD, 決定未來 SEO 的 25 項標準與通訊協定」
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMr4sjHOku6O86-TQ3pAYBjBJ_2QqXc0lCiq4kRAGB1uJXmD0G0yhcVetveN-FKxq5i6tJDzWH5DQoCbaRFdaXIdKccuZ83qyI3O4bG8lpNIOg_I4t17aRrYnz1EbyW13Y0QtsJnYWJTS/s1600/blog-when-to-improve-seo.jpg' srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMr4sjHOku6O86-TQ3pAYBjBJ_2QqXc0lCiq4kRAGB1uJXmD0G0yhcVetveN-FKxq5i6tJDzWH5DQoCbaRFdaXIdKccuZ83qyI3O4bG8lpNIOg_I4t17aRrYnz1EbyW13Y0QtsJnYWJTS/w256-h162-p-k-no-nu/blog-when-to-improve-seo.jpg 256w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMr4sjHOku6O86-TQ3pAYBjBJ_2QqXc0lCiq4kRAGB1uJXmD0G0yhcVetveN-FKxq5i6tJDzWH5DQoCbaRFdaXIdKccuZ83qyI3O4bG8lpNIOg_I4t17aRrYnz1EbyW13Y0QtsJnYWJTS/w512-h325-p-k-no-nu/blog-when-to-improve-seo.jpg 512w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMr4sjHOku6O86-TQ3pAYBjBJ_2QqXc0lCiq4kRAGB1uJXmD0G0yhcVetveN-FKxq5i6tJDzWH5DQoCbaRFdaXIdKccuZ83qyI3O4bG8lpNIOg_I4t17aRrYnz1EbyW13Y0QtsJnYWJTS/w945-h600-p-k-no-nu/blog-when-to-improve-seo.jpg 945w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMr4sjHOku6O86-TQ3pAYBjBJ_2QqXc0lCiq4kRAGB1uJXmD0G0yhcVetveN-FKxq5i6tJDzWH5DQoCbaRFdaXIdKccuZ83qyI3O4bG8lpNIOg_I4t17aRrYnz1EbyW13Y0QtsJnYWJTS/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 相關文章：
不好意思打擾，想請教站長是否知道Blogger官方範本"Emporio"這個範本，在手機或平板介面的文章首頁圖會模糊，不知道該怎麼解決?圖片如果點進去文章內則不會模糊，僅有在首頁出現時會模糊，也不知道該從何修改起，故想請教站長指點或協助。 相片的部份我都確定有將解析度設定夠清楚(要不然點入文章內應該也會是模糊的)。 感謝！
回覆刪除