技研可樂

Google 結構化資料測試工具 ，是 Google 提供的網頁「結構化資料標記」檢測分析工具，網站中藉由佈置 HTML 結構化語意，能讓搜尋引擎更容易地組織並在搜尋結果中顯示結構化信息。 舉凡食譜標記、麵包屑、連結搜索框、活動、評論、網站徽章 、社交簡介、公司商家資訊、音樂、電視、電影、圖書等類型的資料，都能將網站豐富吸引人的內容在搜尋引擎裡顯示。 結構化資料標記使用 JSON-LD、Microdata、RDFa 這三種標記類型，依據 schema.org 開放協作社群共享編輯。使網站管理員和開發人員更容易的使用統一模式，建立網頁的結構化信息。 現在搜尋引擎已經越來越人性化，除去以往對搜尋引擎的刻板印象。 Google、Microsoft、Yahoo、 Yandex 等搜尋引擎，皆已支援網頁 HTML 的結構化標記，訪客在搜尋引擎中得到的搜尋結果，網站關聯信息都能經由使用「結構化資料標記」，在搜尋引擎中呈現豐富連結單元。 Google 在「 技術指南 」中，建議可在自己的官方網站中使用 schema.org 提供的 JSON-LD、Microdata、RDFa 這三種標記類型，部署網站的結構化資料標記。網站 robots.txt 文件中則不能建立阻擋 Googlebot ( 自動尋檢程式 ) 撈取網頁的資料。 使用結構化資料標記時，Google 建議盡可能使用 JSON-LD 標記。除了「Breadcrumb 階層導覽麵包屑」無法使用 JSON-LD 標記外，Google 也正在為所有主要標記添加 JSON-LD 的支持。 額外的，除了須提供網頁「rel="canonical"」首選版本的連結元素外，也可以標記 AMP HTML 網頁的等效項目，以提供跨設備瀏覽的最佳體驗。 使用流程 擷取網址 提交程式碼片段 Google Search Console 檢查標記 使用方式 在「結構化資料測試工具」幫網頁檢測 HTML 的「結構化資料標記」時，可以使用「擷取網址」與提交「程式碼片段」的方式，做標記的即時調試分析。 目前使用「結構化資料測試工具」時，一次可以檢測一個網頁。如果有多個頁面需要檢測時，就得重複提交網址，建議可以將網站裡重要的頁面進行調試分析。以下是工具的使用方式。

使用 Google PageSpeed Insights 幫 Blogger 網站做網頁速度檢測時，會發現有幾筆 禁止轉譯 的 JavaScript 與 CSS 資源，而且是 Blogger 原生的渲染阻塞資源。 CSS 的部份，分別有「css_bundle_v2.css ( 電腦版 )、widget_css_mobile_2_bundle.css ( 行動版 ) 與 authorization.css」。JavaScript 的部份則為「widgets.js、plusone.js 與看不到的 shindig_random.js」。Blogger 導覽列 ( Navbar ) 預設也藏了一筆「plusone.js」。 上列禁止轉譯的 JavaScript 與 CSS 資源，會影響網頁的載入速度，是 Blogger 範本的底層架構，並不在範本裡出現，僅在網站的「網頁原始碼」中顯示。 CSS 的部份負責按鈕漸層、網頁排板、簡單色塊的組成。網站中原生的分享按鈕、小工具則靠「widgets.js」運作。 非必要，其實可以不用註釋掉這些底層資源，資源移除之後影響深遠，等於得全部自己來。「widgets.js」等 JavaScript 的部份，從某些角度操作還有辦法用 if 判斷式解決，CSS 就需要一些基本功才能做調整。 如果你正在規劃設計 Blogger 版型，或是調整設計 Blogger AMP 網頁，總是被速度或這些「禁止轉譯的 JavaScript、CSS」底層資源限制住，那麼本文應該會很適合你。 我們這裡做個小實驗，觀察一下清除了禁止轉譯的 JavaScript 與 CSS 資源的 Blogger，底層速度到底有多快。測速時使用 Chrome 擴充「 Open SEO Stats 」，來觀察瀏覽器載入網頁的即時速度。 實驗時使用官方的「簡單」範本，並將範本中「b:skin」裡面的「CSS」清空，版面配置只清除「導覽列」這個小工具，以當作速度測試時的條件。 這邊可以觀察到，在清除「禁止轉譯 JavaScript、CSS 資源」後，Blogger 網誌首頁開啟速度，最快能到「0.19 秒」。採十次用 F5 重刷網頁，平均數值約在「0.36 秒」。一般僅注釋掉 Navbar 導覽列後，平均網頁開啟速度約為「1 秒」。「0.1

網站訪客有時礙於隱私問題，不想讓他人看到文章中的留言內容。又或是有特殊問題需要單獨請益聯絡站長，這時可以我們可以幫網站加入聯絡表單功能，建立一個讓訪客方便聯繫的管道。 本篇會運用「版面配置」裡面的 聯絡表單 小工具，在 Blogger 的「 靜態網頁 ( /p/static_page.html )」建立一個聯絡表單的表單提交頁面，也就是網站中常見的「聯絡我們」頁面。 表單樣式使用 CSS font-awesome 風格，按鈕樣式趨向 Google 配色，輸入框則加入了一些過場效果。支援 RWD 自適應網站使用。如果你的 Blogger 網誌剛好缺一個聯絡表單頁面，不妨參考本文的設置方式，幫網站新增表單提交頁面，建立一個讓往來訪客能夠方便的與自己聯繫的溝通管道。 範例連結 範例 DEMO 頁面｜電腦版網頁：「 電腦版 DEMO 」 範例 DEMO 頁面｜行動版網頁：「 行動版 DEMO 」 設置流程 新增聯絡表單小工具 修改聯絡表單小工具 建立靜態網頁加入聯絡程式碼 部署 font-awesome 及 CSS 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 新增聯絡表單小工具 前往「版面配置」頁面，增加一個『新增小工具』。 點取「更多小工具」，並按下畫面中的『聯絡表單』。 接著按下『儲存』。 Step 2 修改聯絡表單小工具 接下來，前往 Blogger 後台「範本 〉編輯 HTML」。 在「跳至小工具」的下拉式選單中，點選『ContactForm1』。 這時會看到「 id='ContactForm1' 」的小工具「 b:widget 」。接著點擊『左邊的黑色小鍵頭』，展開程式碼。 完整 HTML 程式碼如下圖。 接著在「 b:widget 」裡面增加「 mobile='yes' 」行動版網頁的適用屬性，再將「 <b:includable id='main'> ~ </b:includa

使用 Validator.nu (X)HTML5  幫自己的 Blogger 網站做  HTML5 Validator  修正與除錯時，解決到最後一定會遇到無法處理的 Google「 xmlns 」與 img 圖片「 border="0" 」的問題。 Google「xmlns」是 Blogger 範本中與「b:template-skin ( 版面配置頁 CSS )」對應的資料。xmlns 在範本中共有三筆，分別為「xmlns:b、xmlns:data、xmlns:expr」。 img 圖片「border="0"」的問題，則是文章圖片。Blogger 系統在我們寫文章貼入圖片時，會自動幫圖片加上「border="0"」標記。 由於 Google「xmlns」在 HTML5 Validator 上是屬於不允許的屬性，所以會顯示錯誤。img 圖片「border="0"」則是 HTML 舊的語法標記，無法符合 HTML 5 標準。 以下就是解決 Google「xmlns」與 img 圖片「border="0"」的方式。 設置流程 解決 img 圖片「border="0"」錯誤的方法 解決  Google「xmlns」錯誤的方法 設定教學 Step 1 解決 img 圖片「border="0"」錯誤的方法 解決 img 圖片「border="0"」錯誤的方法有兩種。建議使用方法一，因為如果有一天換 Blogger 模板的話，就不用再更動到範本中的 CSS。 Step1-1 方法一： 第一種是，在每一次寫文章時，切換到 HTML 模式，將圖片「 border="0" 」修改為「 style="border:none;" 」。如下圖： Step1-2 方法二： 第二種解決方式，則是在 Blogger 範本的 CSS 區塊或在「 <b:skin><![CDATA[ ~ ]]></b:skin> 」之內，加入「 .post-body img {border: 0;}

Blogger 範本 中的「 b:template-skin 」，是調整 Blogger 後台「 版面配置 」頁面 CSS 的系統核心組件。一般情況下，很少會做 刪除 或移除的動作，除了少見特殊情形。 會做刪除「b:template-skin」的動作，主要是因應在做「 Validator.nu (X)HTML5 」驗證網頁時，出現的「xmlns」錯誤。 Blogger 範本中的「b:template-skin」，與 html 開頭的「b:version='2'」兩者相乎應，如果要刪除「b:template-skin」，就得兩個一起做刪除，不然會出現「嚴重錯誤」的信息。 「b:version='2'」刪除後，也就能連帶的刪除掉，在做「Validator.nu (X)HTML5」驗證網頁時，出現的「xmlns」錯誤。 「b:template-skin」刪除後，由於缺少了 CSS 來調整「版面配置」整個頁面的長寬比例，和「小工具 b:widget」及「小工具底座 b:section」的寬高比例。所以 Blogger 後台「版面配置」頁面，就會變成一片式的管理介面。那是因為「側邊欄」會被移到「網誌文章」的下方。 本想將本文加入下一篇的「 Blogger 使用 HTML5 Validator 解決 xmlns 與 border 錯誤的方式 」中。但後來想到，如果有人搜尋「如何刪除 Blogger template-skin」，也許這篇能夠幫上一點忙。 想一想還是從裡面獨立出來好了，如果以後有其他的創意用法，再做額外的補充吧！ 這邊觀察一下，如果直接刪除「b:template-skin」或「b:version='2'」，會發生什麼事。如下圖，會有「Blogger 裂掉」的圖示和錯誤說明。 如果像下圖一樣，直接刪除 Google「xmlns」的資料，按鍵盤 F5 重整網頁，Blogger 系統還是會把 Google「xmlns」的資料裝填回範本中。 完全刪除 Google「xmlns」資料及「b:template-skin」，可以使用以下方式。 設置流程 找到 b:template-skin 與 b:version='2' 刪除 b:

Validator.nu (X)HTML5 Validator 是 HTML5 網頁的線上驗證器。這類線上檢查器設置的目的，在幫助網站前端工程師，快速的檢測自己設計的網頁，是否符合或是達到 W3C 標準。 W3C「 全球資訊網協會 ( World Wide Web Consortium )」趨向讓 HTML 和 CSS 的設計語言，能達到統一的規範。進而讓使用者，在各種裝置系統的 Web 應用及瀏覽器上，都能觀看到一致性的網頁畫面。 另外 W3C 也制訂了一套，讓各瀏覽器廠商都能統一遵行的模型規範，以解決設計好的網頁，拿到 Chrome 可以用，放在 IE 上跑就行不通的窘境。 使用 Validator.nu (X)HTML5 Validator 驗證器 幫 網頁 做  HTML5 驗證時，可以經由提交網址的方式，檢測 HTML/XHTML 網頁的 HTML 標記。 Validator.nu (X)HTML5 會撈取「網頁原始碼」進行嚴格的驗證檢查。 Validator.nu (X)HTML5 檢測網頁時，會顯示錯誤標記的原始碼對照組，以方便我們做除錯的動作。目前支援使用網址提交、檔案上傳、貼入 HTML 文字資料的方式檢測網頁，一次只能檢查一個網頁頁面。 使用方式 前往 Validator.nu (X)HTML5 Validator 驗證頁面，預設選擇「Address」並貼上自己的網站網址後，勾選「Show Image Report」與「Show Source」，按下『Validate』即可開始做除錯的動作。 如果網頁中的 HTML5 資料都正確，畫面中就會出現一個驗證通過的綠色大框框，與簡易 HTML 架構信息。 若驗證時出現錯誤，可以觀看 Error 信息，再點取「超連結」觀察錯誤情形。 這裡可以觀察到錯誤值為，缺少網頁首選網址的「 rel='canonical' 」和地區語言「 hreflang='x-default' 」的網址。 畫面往下拉，也能觀察圖片行數與位置。 額外的，如果要觀察網頁上的 HTML 大綱，可以點取「More options」。 重新輸入並勾選設定值，按下「Validate」後就能做細部驗證