用搜尋引擎的網站管理員 (webmaster) 工具做 SEO (2) – Google 篇

上一篇文章「用搜尋引擎的網站管理員 (webmaster) 工具做 SEO (1) – Bing 篇」談論到了用 Bing 網站管理員做 SEO,這一篇則將談論用 Google 網站管理員工具與 Google 提供的工具做 SEO。

Google 搜尋引擎的網站管理員 (Google Webmaster) 在這個網址: https://www.google.com/webmasters/tools/home?hl=zh-TW

Google 的網站管理員目前只提供簡易的「改善 HTML」建議,要獲得這些建議前同樣地需要先在 Google 網站管理員裡驗證你的網站,請參考以下這篇文章先完成網站驗證:
向搜尋引擎的網站管理員 (webmaster) 驗證網站並提交網站地圖 (sitemap)

如上面文章提到的,完成網站驗證以後最好也提交你的網站之網站地圖,這有利於加速搜尋引擎收錄你所期望的那些網址。完成網站驗證和網站地圖提交以後,你需要等待一段期間後才能看到 Google 網站管理員對你的網站頁面之 「改善 HTML」建議

你可以在以下這個位置看到 Google 網站管理員對你的網站頁面之 「改善 HTML」建議

網站管理員工具 > 最佳化 > 改善 HTML

這些「改善 HTML」建議分為以下幾類:

1o 中繼描述
- 重複的中繼說明
- 長的中繼說明
- 短的中繼說明

「中繼描述」指的是 HTML 中 <head> 區段的 <meta name=”descriptioncontent=”…..” /> 所寫的內容,過長、過短或不同頁面卻有相同的中繼說明都不好。Bing 是建議 25 到 160 個字元之間,那 Google 應該多長才適合?手邊有資料是建議 155 字元內。

2o 標題標記
- 遺失標題標記
- 重複的標題標記
- 長的標題標記
- 短的標題標記
- 非資訊性的標題標記

「標題標記」指的是 HTML 中 <head> 區段的 <title>…..</title> 所寫的內容,過長、過短、不同頁面卻有相同的標題標記或頁面沒有給標題標記都不好。Bing 是建議 5 到 100 個字元之間,那 Google 應該多長才適合?手邊有資料是建議 67 字元內。

3o 無法建立索引的內容

上面的建議項目要是偵測到有頁面需要改善的話,該項目會可以點進去,點進去以後就會知道哪些網址(URL)需要根據建議去改善。


除了 Google 網站管理員工具以外,也可以使用 Google PageSpeed Insights 獲得一些頁面改善的建議,不但能改善你網站頁面的速度,也一樣有利於 SEO:

https://developers.google.com/speed/pagespeed/insights

在輸入框中輸入你要分析的網站之網址後,按 ANALYZE 按鈕即可會得該網址頁面的改善建議。

以下列舉一些 Google PageSpeed Insights 的建議項目:

o 使用瀏覽器快取功能 (Medium priority)
- 一般瀏覽器對網站頁面中的圖片、外部 CSS 檔案、外部 JavaScript 檔案等都會有快取功能,以在重新載入相同頁面時可以加快速度。
- 對於頁面中的圖片、外部 CSS 檔案、外部 JavaScript 檔案等快取資源的有效期間會被建議設定成距離今天至少一週以上的未來日期做為這些資源的到期日。

o 快取驗證資訊
- 靠著快取驗證資訊的指定,例如: Last-Modified 或 ETag header,可以確保快取資源的有效性能被有效率地判定。
- PHP 中使用 Last-Modified 或 ETag header 的方法請見: PHP中如何對輸出的資源檔案使用 Last-Modified 或 ETag

o 將圖片合併到 CSS 合併圖片 (Medium priority)
- 請儘可能將多個小圖片加以合併成一張圖,然後用 CSS 的方式存取之。這樣減少圖片總數可以減少多個圖片時的載入時間。
- 工具:CSS SPRITES GENERATORCSS 圖片合併產生器

o 延後剖析 JavaScript (Low priority)
- 初次載入網頁時進行 JavaScript 剖析會延緩頁面載入的速度。延後剖析 JavaScript 可以避免系統無法顯示網頁的情形。
- 如果 JavaScript 的執行不影響頁面架構呈現結果,那可以將 (內嵌/外部) JavaScript 儘量往後擺放,例如:放在 HTML 尾端的 </body> 之前。

o 避免首頁有頁面重導的情況 (Low priority)
- 避免首頁有頁面重導的情況可加速訪客載入你網站首頁的時間
- 盡可能地移除首頁頁面重導的情況
- 關於網頁重導技術的介紹請見:轉導、轉向(Redirect)網址的方法

o 將重新導向次數降到最低
- 減少頁面重新導向次數可以縮短主機和瀏覽器間額外資料往返的時間,進而縮短整體頁面呈現的等待時間。

o 最佳化圖片 (Low priority)
- 可將圖片最佳化,使檔案大小減少,以加快檔案的下載速度。

o 壓縮 JavaScript (Low priority)
- 可以將 JavaScript 壓縮,以加快檔案的下載速度。
- 工具:Google Closure Compiler Servicehttp://closure-compiler.appspot.com/home

o 壓縮 CSS (Low priority)
- 可以將 CSS 壓縮,以加快檔案的下載速度。
- 工具:http://www.cssdrive.com/index.php/main/csscompressoradvanced/

o 移除靜態資源中的查詢字串 (Low priority)
- 部分 Proxy 快取伺服器不會快取網址中含有「?」的資源,請移除查詢字串,並將資源的網址參數予以編碼。

o 減少要求序列化 (Experimental rules)
- 將序列化的要求改成可以平行載入。

o 刪除不必要的回流 (Experimental rules)
- 一些執行的 JavaScript 造成不必要的回流。如要減少網頁轉譯時間,請修改 JavaScript,這樣就不會造成回流。

o Avoid a character set in the meta tag
- 或許它是建議頁面在 HTTP request 標頭就指定好你的頁面的字集而不是在 HTML <head> 區段時才指定。但是 <header> 區段還是應該指定字集以免網頁被存檔重新開啟後會無法知道它的字集為何。

o 優先使用用非同步資源
- 用非同步的 JavaScript 語法去載入資源,以避免那些要載入的資源卡住頁面的載入時間。
- 如何將 JS 改寫成非同步的 JavaScript?請參考這一篇:非同步載入執行JavaScript的寫法

o 內嵌小型 CSS
- 如果 CSS 語法很小的話,可以將此 CSS 區段放在 HTML 頁面中,這樣可以避免要載入額外的 CSS 檔案,以縮短主機和瀏覽器間額外資料往返的時間,進而縮短頁面載入時間。

o 內嵌小型 JavaScript
- 如果 JavaScript 語法很小的話,可以將此 JavaScript 區段放在 HTML 頁面中,這樣可以避免要載入額外的 js 檔案,以縮短主機和瀏覽器間額外資料往返的時間,進而縮短頁面載入時間。

o 啟用壓縮功能
- 可以啟用網頁伺服器的 gzip 或 deflate 功能以壓縮輸出的網頁或資源檔案、減少網路上資料傳輸量。 (瀏覽器和網頁伺服器都要同時都支援此功能,此功能才會能運作)
- 例如:Apache 網頁伺服器上可啟用 deflate 模組、指定壓縮率來實現壓縮功能。
- 如要在 Apache 伺服器中設定啟用壓縮功能,請參考文章:如何設定 Apache 網頁伺服器以壓縮輸出的網頁或資源檔案?

o 在文件標頭中加入 CSS
- 將內嵌的 CSS 或外部 CSS 寫在 <head> 區段,以改善頁面的排版呈現效率。

o 壓縮 HTML
- 將頁面的 HTML 輸出結果壓縮 (包含頁面中內嵌的 JavaScript 和 CSS),進而節省資料傳輸量以提升速度。

o 從相同的網址提供資源
- 資源檔案盡量放在同個網址下,這樣縮短主機和瀏覽器間額外資料往返的時間,也可以減少 DNS 的查詢次數。

o 指定 Vary: Accept-Encoding 標頭
- 指示 proxy 伺服器去快取兩種版本的資源:壓縮版和非壓所版
- 這樣可以避免 proxy 伺服器忽略了 <head> 區段的 Content-Encoding 屬性。

o 指定圖片尺寸
- 指定圖片的長度和高動可以加速頁面的排版呈現效率。

o 指定字元集
- 盡早為你的 HTML 頁面指定字元集可以讓瀏覽器馬上開始執行 scripts。

o 提供大小經過調整的圖片
- 調整圖片成為要呈現的大小,這樣可以節省不少資料傳輸量和空間。

o 最佳化樣式和指令碼的順序
- 最佳化樣式和指令碼的順序可以讓不同的資源平行地被下載,以加速頁面載入時間。

o 最小化要求大小
- 讓 cookies 和 HTTP header 盡量小,以確保一個封包就可以傳送完這個 HTTP request。

o 避免使用 CSS @import
- 用 CSS @import 會延遲頁面載入的時間。

o 避免使用無效的要求
- 刪除頁面裡已經無效的鏈結,或是那些會產生 HTTP 404/410 錯誤的鏈結。

o 避免使用長期執行的指令碼
- 例如,長期執行的 JavaScript 程式碼。

更多的 Google PageSpeed Insights 相關文章請參考:Web Performance Best Practices (英文版)

你喜歡這篇文章嗎? 馬上分享它:

相關文章:

  1. 用搜尋引擎的網站管理員 (webmaster) 工具做 SEO (1) – Bing 篇
  2. 向搜尋引擎的網站管理員 (webmaster) 驗證網站並提交網站地圖 (sitemap)
  3. 一些驗證網站頁面的工具與網頁相關標準
  4. Google 的 +1 指標 (plusone): 新增 +1 按鈕讓訪客在 Google 上推薦您的網站
  5. 做簡易的 Search-Engine-Friendly 的網頁/網站之幾項建議
This entry was posted in HTML, SEO, 架站 and tagged , , , , . Bookmark the permalink.

Leave a Reply