在 WordPress 網站使用 Google AMP 技術，提升頁面開啟速度教學

上半年 Google 宣佈推出一項全新技術 AMP（Accelerated Mobile Pages），大幅加快使用者在行動裝置（例如手機、平板電腦）開啟網站的速度，雖然 Google 表示這項技術並不會影響網站在搜尋引擎結果排名，但滿足某些特定條件時，將有機會在其他區域優先顯示。換句話說，Google AMP 不一定適合所有網站使用，為避免不公平的情形發生，有或沒有加入這項技術皆不影響 SEO，但有助於最佳化你的使用者體驗和獲得更多曝光。

Google AMP 常被拿來和 Facebook Instant Articles 比較，兩者本質上差不多，將現有內容套入技術框架，重新改寫後在遠端伺服器建立快取以提高載入速度。Google 也提到這項技術適合各種靜態內容網頁，例如新聞、食譜、電影列表、產品頁面、評論、影片及網誌，因此非常推薦 WordPress 網站使用。

如果你是使用 WordPress 架站，Automattic 已經和 Google 合作推出 AMP for WordPress 外掛，並將專案開放原始碼放上 GitHub ，只要簡單安裝啟用即可為現有網誌整合這項新技術；WordPress.com 使用者則從去年底開始支援 AMP，無須做其他設定。

在為網站加入 AMP 技術後，Google 搜尋結果旁邊會標示 AMP 閃電標誌，使用者點擊就會直接跳轉到 AMP 網站。Google 表示開啟速度會比原本還快四倍！近期台灣使用者已陸續看到相關網站出現於行動裝置搜尋結果，或許可以自己做個實驗看看。

我想站長們最想知道的就是目前趨勢，以及追求最新技術來提供網站訪客更快更好的閱讀體驗吧！以下我會就如何在你的 WordPress 網站使用 Google AMP 技術教學，不用花大錢也可以自己做網站最佳化。

加入 Google AMP 技術，讓訪客秒開網頁

STEP 1

開啟 WordPress 控制台，點選「安裝外掛」後輸入 AMP 進行搜尋，第一個搜尋結果就是官方版的 AMP 外掛功能（請確認作者是否為 Automattic）。沒問題的話點選「安裝」即可遠端將它下載、安裝到你的網站。

STEP 2

在 AMP for WordPress 外掛啟用後不會有任何新的設定頁面，至少目前沒有，自訂選項只能透過函式來加入（稍後介紹）。

STEP 3

要如何確認你的 WordPress 網站已經支援 Google AMP 呢？

開啟任一篇文章，查看原始碼裡是否有 <link rel="amphtml" 標籤，這是告訴 Google 該頁面的 AMP 網址，安裝外掛後才會產生，如果有的話，代表你的網站已經有 AMP 頁面。

STEP 4

你也可以直接在文章頁面的網址後方加上 /amp/（如果你有使用固定網址），若維持預設的網址格式，就在網址後方加上 ?amp=1 即可看到網站的 AMP 效果，不過從電腦版感受不到它的速度有多快，還是要透過手機才行。

Google 已經提供一個測試 AMP 功能，以手機開啟 https://g.co/ampdemo 即可。

STEP 5

因為 Google AMP 有非常嚴格的語法格式規範，任何錯誤都不會索引頁面，因此要維持 AMP 頁面正確才行。還好 AMP for WordPress 外掛會自動產生 AMP 頁面，排除可能的語法錯誤問題，不過最好還是手動檢查一下。

要如何檢查呢？最簡單的方法是在 AMP 頁面網址後面加上 #development=1，接著開啟瀏覽器的開發者工具功能，切換到 Console 如果有出現 Powered by AMP 就表示正確。

另一個我偏好的測試方式是利用 AMP Project 提供的線上驗證器「The AMP Validator」，將網址複製貼上、點選「VALIDATE」，如果測試結果為綠色的 PASS 就表示該頁面沒有存在任何的錯誤語法。

STEP 6

Google 需要一段時間才會開始為加速行動版網頁建立索引，因此不會立即在 Google 搜尋結果出現，但透過 Google 網站管理者工具可以知道目前的索引及錯誤情形，可以的話盡量維持藍色數量，減少有問題的 AMP 網頁數，Google 也會顯示相關的錯誤資訊及修正方法。

前面提過 AMP for WordPress 沒有設定頁面，因此功能都必須要透過程式碼加入，其實方法並不會太難，從網路上就可以找到一些程式碼範例。舉例來說，如果想在 AMP 網頁加上 Google Analytics 追蹤代碼，只要在現有的佈景主題中開啟 functions.php ，加入以下：

.gist table { margin-bottom: 0; }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
	function xyz_amp_add_custom_analytics( $analytics ) {
	if ( ! is_array( $analytics ) ) {
	$analytics = array();
	}

	// https://developers.google.com/analytics/devguides/collection/amp-analytics/
	$analytics['xyz-googleanalytics'] = array(
	'type' => 'googleanalytics',
	'attributes' => array(
	// 'data-credentials' => 'include',
	),
	'config_data' => array(
	'vars' => array(
	'account' => "UA-XXXXX-Y"
	),
	'triggers' => array(
	'trackPageview' => array(
	'on' => 'visible',
	'request' => 'pageview',
	),
	),
	),
	);

	return $analytics;
	}