AMP 詳細指南 - Google 的加速移動頁面

已發表: 2018-05-21

AMP是如何工作的? 如何創建和自定義加速移動頁面? 網站所有者可以在流行的 CMS 上使用哪些工具,包括 WordPress、Joomla!、Drupal、OpenCart? 站長在實施 AMP 時會面臨哪些陷阱以及如何解決問題?

在以下手冊中檢查這些和其他問題的答案!

內容

什麼是 AMP 及其工作原理

AMP 代表加速移動頁面。 該術語是指為移動用戶顯示網站頁面的技術,可提供最大的網站加載速度。

AMP 是傳統網頁的根本截斷版本。 在加速頁面上仍然是主要內容。 大多數輔助元素,包括小部件、評論表單、推薦內容塊、傳統廣告在加速頁面上都沒有。

Accelerated Mobile Pages 是一個由 Google 領導的開源平台和項目負責人。 因此,任何人都可以免費使用該倡議。

該項目的思想啟蒙者和代言人是谷歌。 世界上最大的搜索引擎使用 AMP 頁面將其顯示在搜索結果頁面 (SERP) 上。 此外,谷歌緩存加速的移動友好頁面並充當它的 CDN。 因此,移動用戶即使在低速數據連接下也能快速下載 AMP 內容。

這張圖表和解釋來自 Will Critchlow 的周五白板,簡化了這個過程:

什麼是加速移動頁面 (AMP)

加速頁面由帶有特殊標籤的 HTML 標記和專用的 JavaScript 庫組成。

  • AMP 強制您使用精簡版的 CSS;
  • 根本不允許使用 Javascript;
  • 您被迫使用 AMP 為您提供的現成 Javascript 庫——這會強制您的圖像延遲加載。

在 AMP 頁面上,您可以使用一組有限的標籤和腳本。 這會降低頁面的功能和外部吸引力,但會顯著提高加載速度。 此外,谷歌的預緩存技術減少了頁面加載時間。

網絡衝浪者可以以兩種完全不同的方式使用 AMP。 第一個涉及將數據從站點所有者的服務器傳輸到訪問者的計算機,並在瀏覽器中顯示頁面的加速版本。 例如,在啟用 AMP 的網站上,您可以設置將所有移動用戶自動重定向到加速頁面。 訪問者可以通過移動設備訪問 AMP 或在瀏覽器地址欄中的 URL 中添加後綴“/amp”。

第二種方法涉及從 Google 服務器查看 AMP 的緩存版本。

AMP-rich-card-carousel-Final-Trimmed

世界上最大的搜索引擎在 SERP 中以輪播格式顯示指向加速頁面的鏈接,或使用 AMP 徽標圖標標記 AMP 內容。

AMP 搜索結果

在查看頁面時,用戶並沒有訪問該站點,而是從發布者的頁面瀏覽相同的內容。

不幸的是,谷歌認為沒有必要在為這些設備生成的問題頁面上顯示 AMP 輪播。 因此,感謝 Search Engine Land 的一個例子。

是否值得使用 Accelerated Mobile Pages?

要回答這個問題,您需要注意實施 AMP 的優點、缺點和結果。

AMP的優勢

AMP 的主要優勢是顯著的加載速度優化。 該表顯示了通過幾個流行的指標服務測試頁面的基本和加速 AMP 版本的結果。

服務/頁面基本的安培
來自 Google 的 PageSpeed 見解移動端 62 分,台式機 77 分。 移動設備 88 分,台式機 94 分。
Pingdom的加載速度加載時間為 5.94 秒,
頁面大小為 3.5 MB。
加載時間為 2.46 秒,
頁面大小為 381.4 KB。
GTmetrix 加載速度測試加載速度為18.6秒,
頁面大小為 3.49 MB。
加載時間為 3.4 秒,
頁面大小為 314 KB。

低加載速度會對用戶體驗產生負面影響。 超過一半的訪問者等待內容顯示的時間不超過 3 秒。 加速頁面的加載速度比標準頁面快得多。

這是可能的,因為使用 AMP 技術傳輸的數據量顯著減少。

加載時間對網站轉化率和跳出率的影響

此外,如果一個在線購物網站每天賺取 100,000 美元,那麼 1 秒的頁面延遲可能會導致您每年損失 250 萬美元的銷售額。

快速加載對於移動設備用戶來說至關重要。 這就是為什麼谷歌會預先緩存 AMP 並為使用慢速互聯網的人提供 CDN。

網站的加載速度和用戶體驗是谷歌排名的主要因素之一。 Accelerated Mobile Pages 本身是否在 Google 排名中提供了額外的優勢?

2016 年年中,在芝加哥舉行的 Google 搜索引擎期刊峰會上,Google 發言人 Harry Illes 表示,Accelerated Mobile Pages 不在排名因素之列。 但谷歌代表無法明確表示 AMP 不會成為未來的排名因素。

這是什麼意思? AMP 技術本身並不能為網站帶來排名優勢。 儘管如此,它顯著提高了網站的加載速度,Rankbrain 分析了谷歌排名算法的行為因素。

新聞網站和內容項目在進入 AMP 輪播時受益於 AMP 實施。 此元素顯示在搜索結果上方的 SERP 頂部。 這為發布商提供了額外的點擊次數,並間接提高了搜索引擎和 SEO 的排名。

因此,加速頁面的主要優點是加載速度快。 它改善了用戶體驗,並可以間接影響網站在 Google SERP 中的位置。 此外,由於 AMP 輪播,資源可以獲得額外的視圖。

加速移動頁面的缺點

AMP 幾乎沒有缺點。 以下是主要內容:

  • AMP 頁面的訪問者無法通過網站主版本上的標準 Google Analytics 代碼進行跟踪。 要跟踪 AMP 視圖和訪問者,您需要向 AMP 頁面添加專用跟踪代碼。 您可以使用 Glue for Yoast SEO & AMP 插件輕鬆完成此操作。
  • 與基本頁面相比,加速頁面的功能有所減少。 所有經典模塊,如導航菜單、相關帖子塊、側邊欄、評論表單都必須手動或通過插件添加。
  • 為了高加載速度,你犧牲了網站的視覺效果。
  • 如果谷歌在輪播中顯示網站的加速頁面,用戶可以在不離開 SERP 的情況下閱讀它們。

為了高速加載,您必須為頁面的功能和外觀付出代價。 值得注意的是,大部分缺點都可以完全或部分消除。 但是,AMP 將始終是網站基本頁面的簡化版本。

AMP 實施結果

Google 可以快速識別網站上的 AMP。 在網站上推出 AMP 後的幾天內,有關已編入索引的 AMP 頁面的信息會顯示在 Search Console“搜索外觀 >> 加速移動頁面”部分中。

幾乎在編入索引後,Google 會將流量發送到您網站的 AMP 版本。 截至 2018 年 5 月末,大約 50% 的訪問者從 Google 直接訪問加速版頁面而不是基本版。 以下是一些有趣的統計數據:

  • 從 5 月 20 日到 26 日的一周內,有 1812 名訪問者從 Google 來到考場。
  • 1812 人中有 1011 人是移動用戶。
  • 來自 Google 的 842 名用戶登陸了加速移動頁面。

使用特定資源的示例而不聲稱具有代表性,很明顯 Google 願意將訪問者發送到 AMP 頁面。 在搜索引擎的加速頁面上出現了 46% 的用戶總數或 83% 的移動用戶。 其餘 17% 的智能手機和平板電腦用戶使用自適應佈局進入基本頁面。

以下是您應該注意的數據:

  • Accelerated Mobile Pages 的跳出率明顯高於標準頁面。 根據谷歌分析,它在常規頁面上達到 86%,而在常規頁面上達到 55%。 這可能是由於 Google Analytics 服務對加速頁面性能的錯誤跟踪所致。 當用戶從 AMP 移動到基本頁面時,監控系統會計算一次新訪問。 在這種情況下,加速頁面的跳出率會增加,會話深度會降低。
  • AMP 訪問者的每次會話頁數比率低於自適應頁面或常規頁面的訪問者。 與常規頁面的訪問者相比,用戶使用相關帖子的一部分移動到網站的其他頁面的可能性要小得多。

實施 AMP 後,來自 Google 的流量略有增加。 搜索流量適度增長的動力依然存在。

為了評估使用 AMP 的結果,僅使用一種來自 Google 的平均每天大約 150 名獨立訪問者的資源是不夠的。 因此,值得參考別人的經驗。 以下是一些有趣的數據:

根據研究結果,谷歌表示與基本頁面相比,AMP 上的上下文廣告效率更高。 顯示在屏幕可見部分的 AdSense 塊增加了 80%,廣告塊的 CTR 增加了 90%。

來自 Search Engine Watch 的好奇數據。 得益於 AMP,Wired Magazine 的搜索結果中的 CTR 鏈接增加了 25%。 加速頁面上的廣告點擊率增長了 63%。 實施 AMP 後,Slate 雜誌網站的月訪問量增長了 44%。

CNN 的代表在接受《華爾街日報》採訪時表示,AMP 和基本頁面在廣告的幫助下同樣有效地貨幣化。

AMP 的加載速度比基本頁面快得多。 但是您必須犧牲頁面的功能和外觀。 在測試站點上,AMP 實施後流量沒有突然增加。 然而,谷歌將三分之一的訪問者引導至三分之二的移動用戶加速而不是標準的測試博客頁面。

一些網站管理員認為 AMP 是 Google 不必要的突發奇想,另一方面,互聯網上的許多發布商報告網站訪問者數量增加並提高了廣告的有效性。 此信息將幫助您自行決定是否使用加速移動頁面。

如何在 WordPress 上安裝 AMP

為了 WordPress 用戶的好運,Accelerated Mobile Pages 可以在一分鐘內實現。 為此,您需要安裝並激活來自 WordPress 開發團隊的 AMP for WordPress 插件。 Automattic 的 AMP 插件沒有設置,但它在常規博客文章中完美運行,並且與幾乎所有 WordPress 主題兼容。

您可以在 AMP 驗證器上測試您的 AMP 頁面。

為了擴展功能並改善 AMP 頁面的外觀,我們建議為 WP 插件使用替代 AMP。 安裝並激活插件後,進入管理面板中的快速頁面設置菜單。

用於 WordPress 常規設置的 AMP

如有必要,在“常規”部分中,上傳站點徽標。 推薦的圖像尺寸為 190×36 像素。 使用 Resize 按鈕,您可以指定徽標的任意大小。 與 Automattic 的 AMP on WordPress 插件不同,如果您需要 AMP 版本的靜態頁面,請將按鈕切換到 O​​n 位置。

用於 WordPress 分析的 AMP

在分析部分,使用 Google Analytics 啟用 AMP 訪問跟踪。 為此,請輸入 Google Analytics ID。 此外,您可以在此處使用 Google Tag Manager 啟用 Google Analytics。

用於 WordPress 設計主題的 AMP

在設計部分,您可以更改 AMP 頁面的主題和佈局。 在這裡您可以選擇現成的設計選項。 您還可以使用 AMP 主題框架創建自己的自定義主題。

在 SEO 部分,您可以配置來自 Yoast SEO 插件的元數據在加速頁面上的顯示,將任意 HTML 代碼添加到標題中,還可以配置檔案和類別頁面的索引。 如果您不使用 Yoast SEO 插件,請保留默認設置。

AMP for WordPress AdSense 設置

在廣告部分,配置 AdSense 廣告的顯示。 該插件提供四種廣告選項:所有頁面的頁眉上方、所有頁面的頁腳下方以及出版物頁面內容的上方和下方。

要在發布頁面的內容下方放置廣告,請打開按鈕 AD # 4。選擇廣告的尺寸。 在您的 AdSense 帳戶中創建一個廣告,並將用戶 ID 和廣告單元 ID 添加到建議的字段中。 從創建的廣告代碼中獲取數據。

您可以在需要時在加速頁面上顯示匹配的內容塊。 匹配內容是一種免費的推薦工具,它為您提供一種簡單的方式來向您的網站訪問者宣傳您的內容。 通過為您的讀者提供更多與他們相關的內容,您可以增加網站的頁面瀏覽量、在網站上花費的時間、讀者忠誠度、廣告印像以及最終的廣告收入。 為了使它發生,請在插件的相應字段中指定塊 ID。

用於 WordPress 單篇文章設計的 AMP

在 Single 部分中配置帖子頁面的外觀和功能。 您可以啟用附加在屏幕底部的社交圖標、指向上一個和下一個帖子的鏈接,還可以配置相關帖子塊。

AMP 架構和結構化數據

在社交分享部分,啟用社交分享按鈕。 在結構化數據部分中,加載加速頁面微標記的圖像。 谷歌可以使用它來生成搜索結果。 此外,指定在社交網絡上發布指向加速頁面的鏈接時將在片段中使用的圖像大小。

在通知部分,您可以配置通知的顯示。 例如,您可以告知訪問者有關 cookie 使用政策的信息並顯示 GDPR 通知。

AMP 意見表

在 Disqus 評論部分,您可以在加速頁面上啟用評論系統 Disqus。 為此,將 Disqus Comments Support 按鈕切換到 O​​n,指定 Disqus 系統中資源的 URL,以及服務器上評論文件的路徑。

如果不啟用評論系統,AMP頁面將顯示基本頁面訪問者留下的評論文本和“評論”按鈕。 通過單擊按鈕,用戶將被重定向到頁面的基本版本。

WodPress AMP 設置

在高級設置部分,您可以啟用主頁的加速版本以及標題和檔案的頁面。 對於此功能,請使用主頁支持和存檔頁面支持按鈕。

移動重定向按鈕可將所有移動用戶從自適應版本的站點自動重定向到 AMP。

不要將所有用戶重定向到 AMP。 並非所有訪問者都需要網站的加速頁面。 重定向將迫使智能手機和平板電腦用戶使用功能有限的縮略版頁面。 這可能導致網站轉化率下降。

此外,如果 Google 看到該網站和 AMP 的桌面版本,它會為移動優先索引選擇桌面版本。 由於缺乏對移動設備的資源適應性,這可能導致流量丟失。

請務必使用頁腳按鈕中的“鏈接到非 AMP”按鈕啟用頁腳中完整版頁面的鏈接。 這將幫助用戶導航到具有額外功能的基本頁面。

在擴展部分,您可以購買和啟用插件的附加組件。 例如,您可以使用其他工具來管理加速頁面上的廣告或將微標記“評級”添加到 AMP。

在修復 AMP 錯誤部分,您可以啟用付費支持。 該插件的開發人員將幫助您了解設置並擺脫 Search Console 中的錯誤通知。

導入/導出塊允許您將加速頁面的設置從一個站點遷移到另一個站點。

因此,在 WordPress 網站上,您可以在幾分鐘內實現加速頁面。 多一點時間花在使用 AMP for WP 插件自定義佈局和功能上。

用於 Drupal 的 AMP

要在 Drupal 站點上實施 Accelerated Mobile Pages,請使用以下工具:

  • AMP 模塊。
  • AMP 主題。
  • AMP 庫 HTML。

要使用 AMP 模塊,需要插件 Token 和 Chaos Tools。 如果您計劃在 AMP 頁面上展示 AdSense 廣告,請安裝 Google AdSense 集成擴展。

在配置選項卡的 AMP 設置頁面上,啟用顯示出版物和頁面的加速版本。 選擇將用於創建加速頁面的主題。 輸入 Google Analytics ID 以跟踪頁面訪問。 此外,您可以使用 AMP-pixel 來計算觀看次數。

在 AMP 元數據選項卡上,輸入站點的名稱。 如有必要,下載徽標並選擇其大小。

配置後檢查頁面加速版本的顯示。 為此,將值“?amp”添加到 URL。

Joomla 的 AMP!

在 Joomla 上實現加速頁面! 網站使用擴展名 wbAMP。 這個插件的完整版每年將花費你 44 美元。 社區版是免費提供的。

安裝並激活插件後,進入設置頁面。 該插件的免費版本功能有限,因此您只能配置顯示加速頁面的基本參數。

保留 AMP URL 的默認後綴值。 在這種情況下,您只需要添加 amp 值即可查看加速頁面。

此外,請在主設置頁面上提供有關網站和發布者數據的信息。 選擇適當的微標記類型:NewsArticle 用於新聞註釋,BlogPosting 用於博客文章。

選擇要為其創建加速版本的頁面。 為此,請切換到“選擇頁面”選項卡。

完成“com_content 規則”部分。 如果您計劃僅為出版物顯示加速頁面,請在“查看”字段中指定文章的值。 在“類別”字段中,選擇其出版物將具有 AMP 版本的類別。 輸入字段 ID、物料 ID 號和“任務”,輸入值“*”。 在這種情況下,將為所選類別中的所有出版物創建 AMP。

免費版插件中的其他設置不可用。

在 Joomla 上創建加速頁面還有另一個商業工具! 網站:Jamp 插件。 它的價格為 39 歐元。 在插件的測試站點上,您可以看到該工具如何將標準頁面轉換為加速頁面。

與 WordPress 和 Drupal 不同,對於 Joomla! 沒有用於創建 AMP 的完全免費的工具。

用於在線商店的 AMP

AMP 技術主要用於內容項目:新聞資源、博客。 我應該為電子商務網站創建加速頁面嗎?

AMP 項目的作者認為,在線商店可以而且應該使用加速頁面。 支持在電子商務資源上實施技術的主要論據——提高移動頁面的加載速度對轉換產生積極影響。 順便說一句,eBay 從 2016 年年中開始就在試驗 AMP。

用於 OpenCart 的 AMP

為了為 OpenCart 創建加速頁面,請使用 Accelerated Mobile Pages 模塊。 這是一個付費的解決方案。 並且始終能夠從鏈接中查看借助此模塊創建的加速移動頁面的測試版本。

您還可以測試產品頁面模塊的 AMP。 這是一個免費的解決方案。 該插件僅為產品頁面創建 AMP。 對於產品頁面的 AMP 工作,您需要 SEO Friendly URLS 模塊。

此時最好不要推薦用於產品頁面模塊的免費 AMP,因為現在在先前的資源上測試了一個半工作日並且無法正常工作。 在 OpenCart 版本 2.3.0.2 上安裝和激活程序後,網站上的加速頁面不會出現。 該插件會在頁眉中添加指向 AMP 版本的鏈接。 單擊鏈接時,會出現 404 錯誤。

此外,由於安裝了該模塊,該站點會定期變得無法訪問,並且在瀏覽器的屏幕上會出現不同種類的塗鴉和 mojibake。 移除並重新安裝模塊後,可維護性恢復。

也許問題與缺乏管理 OpenCart 網站的實際經驗有關。 個人資料論壇的用戶主要對產品頁面模塊的 AMP 給予正面反饋。

Magento 的 AMP

如果您的在線商店在 Magento 平台上運行,請使用付費插件 Accelerated Mobile Pages。 該模塊為主頁面、類別頁面和產品頁面創建 AMP。

PrestaShop 的 AMP

PrestaShop 商店的加速頁面可以使用付費模塊 PrestaShop AMP 創建。 它生成主頁面、類別頁面和產品卡片的加速版本。

可以在測試站點上評估模塊功能。

是否實施 AMP,這是個問題!

如果您有一個在 WordPress 上運行的內容項目,則可以快速且經濟高效地實施 AMP 頁面。 您將花一分鐘安裝基本插件和半小時來安裝和配置替代 AMP 插件。

Drupal 管理的站點也有一個可以快速安裝和配置的免費解決方案。 但是對於 Joomla! 並且必須購買用於創建 AMP 的在線商店插件的 CMS。

但是,在某些情況下,AMP 結果可能不像您期望的那樣明亮和閃亮。 在 AMP 實施案例研究中,Kinsta 分享了非常重要的見解——當時在 Kinsta 博客上啟用了 AMP:

  • 移動潛在客戶下降了 59.09%。
  • 來自移動設備的時事通訊電子郵件註冊量下降了 16.67%。
  • 來自移動設備的帳戶創建量下降了 10.53%。

此外,當 AMP 完全移除 Kinsta 後,排名實際上上升了。 為什麼會這樣? 可能最大的原因之一是 AMP 可以提高廣告密集型和麵向新聞的項目的 SERP 性能,與此同時,如果您的網站在移動設備上已經相當快,那麼 AMP 不會產生巨大的積極影響。

據谷歌稱,到 2020 年,全球 70% 的蜂窩網絡連接將以 3G 或更慢的速度發生。因此,儘管針對移動設備進行優化非常重要,但那些已經擁有良好優化網站的網站可能不會注意到巨大的差異。

如果Accelerated Mobile Pages的功能和外觀不如標準頁面,並且在排名上還沒有明顯優勢,那麼使用Accelerated Mobile Pages是否有意義?

搜索市場的全球領導者谷歌顯然只會在這個項目上走得更遠,其他人將不得不遵守它的規則。 邏輯很簡單:移動流量的份額正在增長,並將繼續增長。 人們不僅會在手機和手錶的幫助下上網。 甚至咖啡機和洗衣機現在也在線。 因此,在移動設備的屏幕上顯示內容的技術將會發展。

順便說一句,幾年前,網站所有者對調整網站以適應移動流量的必要性持懷疑態度。 今天,移動版本或自適應佈局是有效運營在線資源的必要條件。

在可預見的未來,AMP技術極有可能成為網站有效性的基本條件之一。