如何與WordPress一起使用AMP

核心要點

• Google加速移動頁面(AMP)是提升移動設備上網站速度和用戶體驗的關鍵工具，且不會影響廣告收入。
• AMP可以提升SEO排名，因為Google在網站排名時會考慮加載速度。如果AMP頁面由於加載速度更快而具有更高的點擊率和更低的跳出率，則其排名會更高。
• 要實施AMP，開發者需要創建網頁的兩個版本：一個供桌面用戶使用的原始版本和一個供移動用戶使用的AMP版本。 AMP不允許表單元素和第三方JavaScript，因此AMP版本可能無法使用某些功能，例如聯繫表單或頁面內評論。
• Google Analytics可以與AMP集成以跟踪網站性能。為了防止多個分析跟踪器導致速度下降，Google使用“一次測量，多次報告”的原則。
• 使用Automattic/WordPress開發的官方AMP插件可以輕鬆地將AMP集成到WordPress網站中。但是，務必驗證每個頁面並修改插件以確保正確的Schema標記和Google Analytics集成。

Google加速移動頁面(AMP)項目於2016年2月24日啟動。隨著這一啟動，成千上萬的開發者成為該項目的積極參與者。無數網站現在都有AMP版本的頁面，許多開發者正在學習使用AMP——在這種情況下，學習如何在WordPress中使用AMP。

Google非常重視AMP。它也是他們的搜索引擎排名標準之一。這樣，Google使AMP幾乎成為許多網站的必需品。在本文中，我將向您提供有關Google加速移動頁面項目的詳細信息。這包括在您的WordPress網站中調用它的步驟。

什麼是AMP？

一些開發者可能還不熟悉AMP。它是一個移動友好的框架，可以在移動瀏覽器上快速加載您的網頁。它是一種開源技術，旨在使網站發布者能夠有效地提高移動設備上加載內容頁面的速度和用戶體驗。所有這些增強都不會影響廣告收入。

如果您是一位經驗豐富的開發者，您可以通過全面的頁面加載優化來實現類似的增強。但是，加速移動頁面使這些優化非常易於執行，而無需花費太多時間和精力在移動佈局上。

對於那些已經為SEO排名而加倍努力的網站來說，這當然會增加他們待辦事項列表中的更多任務，因為AMP頁面還可以增強您網站的SEO排名。這也許是大企業也採用AMP的主要原因。

AMP項目

AMP包含三個主要組件：

• AMP HTML
• AMP JS
• AMP緩存

AMP HTML

它是HTML的一個子集，具有許多限制、自定義標籤和自定義屬性。如果您已經熟悉HTML，那麼適應這一點並不復雜。但是，如果您發現有任何困難，我建議您訪問此鏈接以了解有關如何創建您的AMP HTML頁面的更多信息。

AMP JS

AMP為移動網頁提供有限數量的JavaScript。現在，關於AMP中的JS需要記住的一件重要事情是，AMP不允許使用第三方JavaScript。

AMP緩存

Google AMP緩存是用於交付AMP頁面的CDN。你們都知道內容交付網絡的核心功能——它們將資源加載分發到更靠近您網站查看者的服務器。對於AMP頁面，由於可能的距離延遲，此CDN將允許最小的加載時間。

AMP標識對SEO的相關性

早在2016年，當Google推出AMP時，AdAge.com發表了對Google新聞和社交產品高級總監Richard Gingras的採訪。在該採訪中，他說AMP的使用不會直接與您的搜索排名相關，因為它不是一個直接因素。然後他補充道：“所有其他（搜索引擎排名）信號也需要滿足。”

然而，在此澄清之後，一切變得更加清晰。他說：“如果我們有兩篇文章，從信號的角度來看，在所有其他特徵（速度除外）上的得分相同，那麼是的，我們將重點關注速度快的那篇文章，因為這就是用戶發現引人注目的地方。”

即使Google也不否認AMP網站對SEO的相關性。速度在搜索引擎優化方面始終是一個影響因素。如果AMP頁面由於加載速度更快而獲得更多點擊和更低的跳出率，那麼Google肯定會因為更好的用戶體驗而將網站排名更高。

如何AMP您的網站？

您必須在網站上維護文章頁面的兩個版本。原始文章頁面，用於默認網頁用戶，以及AMP版本，用於潛在的移動用戶。

另請注意，AMP不允許表單元素和第三方JavaScript。這意味著您不能在標準實現中放置聯繫表單或頁面內評論，因為AMP主要用於內容交付。

• 我建議重寫整個網站模板以應對這些限制。例如，AMP頁面的CSS必須內聯，頁面大小小於50 kb。此外，由於字體的快速加載，應在amp-font擴展程序的幫助下加載它們，以便有效地加載頁面。
• 建議必須謹慎處理多媒體。對於圖像，您需要使用該元素以及精確的寬度和高度。此外，如果您的圖像是GIF，則需要使用單獨的amp-anim擴展組件。
• 對於視頻，有兩種選擇。有一個用於嵌入視頻的自定義標籤，稱為amp-video。但是，如果您想嵌入YouTube視頻，則有一個名為amp-youtube的特定標籤。
• 對於嵌入幻燈片，您可以使用amp-carousel。除此之外，如果您想添加圖像燈箱，您可以使用amp-image-lightbox。
• 對於嵌入社交媒體平台，例如Twitter、Facebook、Instagram、Pinterest和Vine，您可以使用每個相應的組件。
• 這點非常重要。現在，一旦一切設置好，您就可以使用您的AMP頁面了，您必須讓Google知道您的AMP網站。您必須在您的主要帖子頁面上添加一個關於您的AMP頁面的標籤以及AMP頁面上關於主要頁面的規範標籤。

您可以在此處了解有關AMP標籤和Schema.org元數據的更多信息。 Schema.org元數據“是使您的內容有資格出現在Google搜索新聞輪播演示中的要求”。因此，如果您希望通過Google AMP取得成功，則必須正確設置您的Schema。

Google Analytics是否適用於AMP？

是的，當然，Analytics適用於AMP。事實上，AMP上的Analytics也很聰明。為了防止網站由於多個分析跟踪器而速度下降，它們基於“一次測量，多次報告”的核心理念。通常，有兩種方法可以在您的網站上為AMP啟用Analytics。

• amp-pixel元素：它是一個簡單的標籤，可以使用GET請求計算頁面瀏覽次數（類似於跟踪像素）。
• amp-anayltics擴展組件：此組件比amp-pixel更高級。您可以使用它來衡量AMP頁面上的任何活動。它使您可以指定JSON配置，該配置提供有關要測量的內容以及發送報告的位置的詳細信息。

如何在WordPress網站上使用AMP？

事實上，使用AMP最簡單的方法之一是在您的WordPress網站上實現它。您可以使用Automattic/WordPress開發的官方插件。

步驟一：安裝WordPress插件

讓我們開始安裝吧！從上面的鏈接下載插件，然後在您的WordPress網站上安裝插件。安裝後，您只需將“/amp/”附加到文章頁面即可。如果您沒有啟用漂亮的永久鏈接，您可以嘗試?amp=1。

步驟二：驗證和調整

Google搜索控制台會從元標記中獲取文章頁面的AMP版本，該元標記將由插件附加。但是，問題在於通常需要幾天時間才能檢測到此類更改。

那麼，現在該怎麼辦？為了處理這些棘手的情況，我建議結合使用Chrome驗證過程和搜索控制台。為了使用Chrome驗證過程，請在Chrome中訪問您的任何AMP頁面。然後在URL末尾附加#development=1。現在按Control Shift I打開Chrome開發者工具。

刷新頁面，它會顯示“AMP驗證成功”或提供需要修復問題的詳細列表。

您可以看到，僅安裝插件是不夠的。您必須通過訪問頁面並重複上述步驟來驗證每個數據，以便從加速移動頁面中受益。

步驟三：驗證Schema標記

您已經了解到，驗證Schema標記對於您的AMP頁面至關重要。我建議使用Google的結構化數據測試工具來測試您的頁面是否具有有效的Schema標記。但是，我發現WordPress在顯示徽標方面存在一些問題。因此，我進行了一些修改以克服此問題。

轉到插件，單擊“編輯器”，然後選擇“AMP”。更改編輯器中的這些行以修改插件。

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>

到：

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>

請確保在URL中指定徽標所在的位置，並相應地指定高度和寬度。

步驟四：將Google Analytics與AMP WordPress插件集成。

現在，您幾乎完成了。但是，我更喜歡使用Google Analytics來跟踪統計數據。 AMP WordPress插件沒有主動激活amp-analytics，但是，執行起來非常容易。

為了使AMP WordPress插件能夠與Google Analytics協同工作，請轉到插件->編輯器->選擇“AMP”，並將以下代碼添加到其末尾。

<code>add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
     async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">>
    <?php }

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics> type="googleanalytics" id="analytics1"></amp-analytics>
     type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    >
    >
    <?php }
</code>

確保將值UA-XXXXX-Y更改為您自己的Google Analytics屬性ID！

進行此更改後，重新驗證您的AMP頁面，然後您的AMP頁面將可跟踪。

對Google AMP項目的結論

Google希望AMP項目為用戶提供良好的體驗。儘管如此，問題仍然是AMP是否可以使一切超級快速。這個問題的答案是相當開放式的。如果您對網站的優化效果不佳，那麼AMP將帶來一些顯著的提升。

但是，加速移動頁面並非靈丹妙藥。從一開始就提供了改進網站速度的技術。 AMP只是試圖結合併消除所有主要的慢速加載因素，並為用戶提供更好的解決方案。

您如何看待AMP項目？請在下面的評論部分分享您的觀點！

關於在WordPress中使用AMP的常見問題解答(FAQ)

使用AMP與WordPress的主要好處是什麼？

使用AMP（加速移動頁面）與WordPress的主要好處是增強移動瀏覽體驗。 AMP是Google支持的項目，旨在使網頁在移動設備上加載速度更快。它通過精簡HTML和使用精簡版本的CSS來實現這一點。這導致頁面加載速度顯著提高，從而可以提高用戶參與度、保留率和改進移動SEO。

AMP如何影響SEO？

AMP可以顯著提高您的SEO，因為頁面加載速度是Google算法中的排名因素。通過使您的網頁加載速度更快，AMP可以幫助提高您在搜索引擎結果中的可見性，尤其是在移動用戶中。此外，Google通常會在搜索結果中突出的輪播中突出顯示AMP頁面，從而提供進一步的可見性。

我可以在現有的WordPress網站上使用AMP嗎？

是的，您可以在現有的WordPress網站上使用AMP。有幾個可用的插件可以幫助您在WordPress網站上實現AMP。這些插件有助於將您現有的帖子和頁面轉換為與AMP兼容的版本。

AMP會影響我的WordPress網站的功能嗎？

AMP限制某些HTML、CSS和JavaScript元素以確保快速的頁面加載時間。這意味著您的WordPress網站的某些功能在網站的AMP版本上可能無法按預期工作。但是，大多數AMP插件都提供選項，可以通過仍然符合AMP標準的方式添加回功能。

如何自定義AMP頁面的外觀？

可以使用CSS自定義AMP頁面的外觀。但是，由於AMP限制使用某些CSS屬性以確保快速的頁面加載時間，因此您可能需要使用更精簡的方法來設置樣式。一些WordPress的AMP插件提供內置的自定義選項。

如何檢查我的AMP實現是否成功？

您可以使用Google提供的AMP測試工具來檢查您的AMP實現是否成功。此工具將分析您的AMP頁面並報告可能阻止它在Google搜索結果中作為AMP頁面提供的任何錯誤。

我可以在WordPress中不使用插件的情況下使用AMP嗎？

是的，您可以在WordPress中不使用插件的情況下實現AMP，但這需要對Web開發和AMP標準有很好的了解。您需要手動創建帖子和頁面的單獨AMP兼容版本，並手動添加必要的AMP HTML標籤。

AMP是否支持廣告和分析？

是的，AMP同時支持廣告和分析。但是，由於AMP限制某些HTML、CSS和JavaScript元素，因此您可能需要使用AMP特定的標籤和腳本來進行廣告和分析。

我可以為特定的帖子或頁面禁用AMP嗎？

是的，大多數WordPress的AMP插件都提供選項來禁用特定帖子或頁面的AMP。如果您有一些與AMP限製配合不好的內容，這將非常有用。

AMP是否是響應式設計的替代品？

不，AMP不是響應式設計的替代品。雖然AMP可以通過使頁面加載速度更快來增強移動瀏覽體驗，但它並沒有取代適應不同屏幕尺寸的網站設計的需求。最好將AMP與響應式設計結合使用，以獲得最佳的移動用戶體驗。

以上是如何與WordPress一起使用AMP的詳細內容。更多資訊請關注PHP中文網其他相關文章！