發表文章

目前顯示的是 1月, 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 的「結構化資料標記」時,可以使用「擷取網址」與提交「程式碼片段」的方式,做標記的即時調試分析。 目前使用「結構化資料測試工具」時,一次可以檢測一個網頁。如果有多個頁面需要檢測時,就得重複提交網址,建議可以將網站裡重要的頁面進行調試分析。以下是工具的使用方式。

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

圖片
使用 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 靜態網頁建立聯絡表單 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:includa

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;}

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:

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

繼續閱讀: