發表文章

目前顯示的是 一月, 2017的文章

Google 結構化資料測試工具:使用方式與基本準則

圖片
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 的「結構化資料標記」時,可以使用「擷取網址」與提交「程式碼片段」的方式,做標記的即時調試分析。

目前使用「結構化資料測試工具」時,一次可以檢測一個網頁。如果有多個頁面需要檢測時,就得重複提交網址,建議可以將網站裡重要的頁面進行調試分析。以下是工具的使用方式。

標記網頁的結構化資料,可參考官方文件「Introduction to Structur…

Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源

圖片
使用 Google PageSpeed InsightsBlogger 網站做網頁速度檢測時,會發現有幾筆禁止轉譯JavaScriptCSS 資源,而且是 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.19 秒」很罕見,剛好想寫這篇的時候被測到。


以下是移除…

Blogger 靜態網頁建立聯絡表單 RWD 網站也適用

圖片
網站訪客有時礙於隱私問題,不想讓他人看到文章中的留言內容。又或是有特殊問題需要單獨請益聯絡站長,這時可以我們可以幫網站加入聯絡表單功能,建立一個讓訪客方便聯繫的管道。

本篇會運用「版面配置」裡面的聯絡表單小工具,在 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:includable>」裡面的資料做刪除,並按下「儲存範本」。


(*「mobile='yes'」在這步驟其實可以不用添加,不過如果有使用 Blogger 行動版網站的話,會比較建議習慣性的幫小工具加入「mobile='…

Blogger 使用 HTML5 Validator 解決 xmlns 與 border 錯誤的方式

圖片
使用 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;}」。再將每篇文章中圖片的「border="0"」做刪除。

(* 如果範本中「.post-body …

Blogger 如何完全刪除「版面配置」範本 CSS b:template-skin

圖片
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:template-skin刪除 b:version='2' 設置前準備 若對編譯 Blogge…

Validator.nu (X)HTML5 網頁 HTML/XHTML 線上驗證器

圖片
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」後就能做細部驗證。



將網頁拉到最底下,就會顯示 HTML 結構樹了。




小結 Validator.nu (X)HTML5 在幫網頁做 HTML5 除…

繼續閱讀: