核心要點(diǎn)

• Google加速移動(dòng)頁面(AMP)是提升移動(dòng)設(shè)備上網(wǎng)站速度和用戶體驗(yàn)的關(guān)鍵工具，且不會(huì)影響廣告收入。
• AMP可以提升SEO排名，因?yàn)镚oogle在網(wǎng)站排名時(shí)會(huì)考慮加載速度。如果AMP頁面由于加載速度更快而具有更高的點(diǎn)擊率和更低的跳出率，則其排名會(huì)更高。
• 要實(shí)施AMP，開發(fā)者需要?jiǎng)?chuàng)建網(wǎng)頁的兩個(gè)版本：一個(gè)供桌面用戶使用的原始版本和一個(gè)供移動(dòng)用戶使用的AMP版本。AMP不允許表單元素和第三方JavaScript，因此AMP版本可能無法使用某些功能，例如聯(lián)系表單或頁面內(nèi)評論。
• Google Analytics可以與AMP集成以跟蹤網(wǎng)站性能。為了防止多個(gè)分析跟蹤器導(dǎo)致速度下降，Google使用“一次測量，多次報(bào)告”的原則。
• 使用Automattic/WordPress開發(fā)的官方AMP插件可以輕松地將AMP集成到WordPress網(wǎng)站中。但是，務(wù)必驗(yàn)證每個(gè)頁面并修改插件以確保正確的Schema標(biāo)記和Google Analytics集成。

Google加速移動(dòng)頁面(AMP)項(xiàng)目于2016年2月24日啟動(dòng)。隨著這一啟動(dòng)，成千上萬的開發(fā)者成為該項(xiàng)目的積極參與者。無數(shù)網(wǎng)站現(xiàn)在都有AMP版本的頁面，許多開發(fā)者正在學(xué)習(xí)使用AMP——在這種情況下，學(xué)習(xí)如何在WordPress中使用AMP。

Google非常重視AMP。它也是他們的搜索引擎排名標(biāo)準(zhǔn)之一。這樣，Google使AMP幾乎成為許多網(wǎng)站的必需品。在本文中，我將向您提供有關(guān)Google加速移動(dòng)頁面項(xiàng)目的詳細(xì)信息。這包括在您的WordPress網(wǎng)站中調(diào)用它的步驟。

什么是AMP？

一些開發(fā)者可能還不熟悉AMP。它是一個(gè)移動(dòng)友好的框架，可以在移動(dòng)瀏覽器上快速加載您的網(wǎng)頁。它是一種開源技術(shù)，旨在使網(wǎng)站發(fā)布者能夠有效地提高移動(dòng)設(shè)備上加載內(nèi)容頁面的速度和用戶體驗(yàn)。所有這些增強(qiáng)都不會(huì)影響廣告收入。

如果您是一位經(jīng)驗(yàn)豐富的開發(fā)者，您可以通過全面的頁面加載優(yōu)化來實(shí)現(xiàn)類似的增強(qiáng)。但是，加速移動(dòng)頁面使這些優(yōu)化非常易于執(zhí)行，而無需花費(fèi)太多時(shí)間和精力在移動(dòng)布局上。

對于那些已經(jīng)為SEO排名而加倍努力的網(wǎng)站來說，這當(dāng)然會(huì)增加他們待辦事項(xiàng)列表中的更多任務(wù)，因?yàn)锳MP頁面還可以增強(qiáng)您網(wǎng)站的SEO排名。這也許是大企業(yè)也采用AMP的主要原因。

AMP項(xiàng)目

AMP包含三個(gè)主要組件：

• AMP HTML
• AMP JS
• AMP緩存

AMP HTML

它是HTML的一個(gè)子集，具有許多限制、自定義標(biāo)簽和自定義屬性。如果您已經(jīng)熟悉HTML，那么適應(yīng)這一點(diǎn)并不復(fù)雜。但是，如果您發(fā)現(xiàn)有任何困難，我建議您訪問此鏈接以了解有關(guān)如何創(chuàng)建您的AMP HTML頁面的更多信息。

AMP JS

AMP為移動(dòng)網(wǎng)頁提供有限數(shù)量的JavaScript?，F(xiàn)在，關(guān)于AMP中的JS需要記住的一件重要事情是，AMP不允許使用第三方JavaScript。

AMP緩存

Google AMP緩存是用于交付AMP頁面的CDN。你們都知道內(nèi)容交付網(wǎng)絡(luò)的核心功能——它們將資源加載分發(fā)到更靠近您網(wǎng)站查看者的服務(wù)器。對于AMP頁面，由于可能的距離延遲，此CDN將允許最小的加載時(shí)間。

AMP標(biāo)識對SEO的相關(guān)性

早在2016年，當(dāng)Google推出AMP時(shí)，AdAge.com發(fā)表了對Google新聞和社交產(chǎn)品高級總監(jiān)Richard Gingras的采訪。在該采訪中，他說AMP的使用不會(huì)直接與您的搜索排名相關(guān)，因?yàn)樗皇且粋€(gè)直接因素。然后他補(bǔ)充道：“所有其他（搜索引擎排名）信號也需要滿足?！?/p>

然而，在此澄清之后，一切變得更加清晰。他說：“如果我們有兩篇文章，從信號的角度來看，在所有其他特征（速度除外）上的得分相同，那么是的，我們將重點(diǎn)關(guān)注速度快的那篇文章，因?yàn)檫@就是用戶發(fā)現(xiàn)引人注目的地方?！?/p>

即使Google也不否認(rèn)AMP網(wǎng)站對SEO的相關(guān)性。速度在搜索引擎優(yōu)化方面始終是一個(gè)影響因素。如果AMP頁面由于加載速度更快而獲得更多點(diǎn)擊和更低的跳出率，那么Google肯定會(huì)因?yàn)楦玫挠脩趔w驗(yàn)而將網(wǎng)站排名更高。

如何AMP您的網(wǎng)站？

您必須在網(wǎng)站上維護(hù)文章頁面的兩個(gè)版本。原始文章頁面，用于默認(rèn)網(wǎng)頁用戶，以及AMP版本，用于潛在的移動(dòng)用戶。

另請注意，AMP不允許表單元素和第三方JavaScript。這意味著您不能在標(biāo)準(zhǔn)實(shí)現(xiàn)中放置聯(lián)系表單或頁面內(nèi)評論，因?yàn)锳MP主要用于內(nèi)容交付。

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

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

Google Analytics是否適用于AMP？

是的，當(dāng)然，Analytics適用于AMP。事實(shí)上，AMP上的Analytics也很聰明。為了防止網(wǎng)站由于多個(gè)分析跟蹤器而速度下降，它們基于“一次測量，多次報(bào)告”的核心理念。通常，有兩種方法可以在您的網(wǎng)站上為AMP啟用Analytics。

• amp-pixel元素：它是一個(gè)簡單的標(biāo)簽，可以使用GET請求計(jì)算頁面瀏覽次數(shù)（類似于跟蹤像素）。
• amp-anayltics擴(kuò)展組件：此組件比amp-pixel更高級。您可以使用它來衡量AMP頁面上的任何活動(dòng)。它使您可以指定JSON配置，該配置提供有關(guān)要測量的內(nèi)容以及發(fā)送報(bào)告的位置的詳細(xì)信息。

如何在WordPress網(wǎng)站上使用AMP？

事實(shí)上，使用AMP最簡單的方法之一是在您的WordPress網(wǎng)站上實(shí)現(xiàn)它。您可以使用Automattic/WordPress開發(fā)的官方插件。

步驟一：安裝WordPress插件

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

步驟二：驗(yàn)證和調(diào)整

Google搜索控制臺(tái)會(huì)從元標(biāo)記中獲取文章頁面的AMP版本，該元標(biāo)記將由插件附加。但是，問題在于通常需要幾天時(shí)間才能檢測到此類更改。

那么，現(xiàn)在該怎么辦？為了處理這些棘手的情況，我建議結(jié)合使用Chrome驗(yàn)證過程和搜索控制臺(tái)。為了使用Chrome驗(yàn)證過程，請?jiān)贑hrome中訪問您的任何AMP頁面。然后在URL末尾附加#development=1。現(xiàn)在按Control Shift I打開Chrome開發(fā)者工具。

刷新頁面，它會(huì)顯示“AMP驗(yàn)證成功”或提供需要修復(fù)問題的詳細(xì)列表。

您可以看到，僅安裝插件是不夠的。您必須通過訪問頁面并重復(fù)上述步驟來驗(yàn)證每個(gè)數(shù)據(jù)，以便從加速移動(dòng)頁面中受益。

步驟三：驗(yàn)證Schema標(biāo)記

您已經(jīng)了解到，驗(yàn)證Schema標(biāo)記對于您的AMP頁面至關(guān)重要。我建議使用Google的結(jié)構(gòu)化數(shù)據(jù)測試工具來測試您的頁面是否具有有效的Schema標(biāo)記。但是，我發(fā)現(xiàn)WordPress在顯示徽標(biāo)方面存在一些問題。因此，我進(jìn)行了一些修改以克服此問題。

轉(zhuǎn)到插件，單擊“編輯器”，然后選擇“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中指定徽標(biāo)所在的位置，并相應(yīng)地指定高度和寬度。

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

現(xiàn)在，您幾乎完成了。但是，我更喜歡使用Google Analytics來跟蹤統(tǒng)計(jì)數(shù)據(jù)。AMP WordPress插件沒有主動(dòng)激活amp-analytics，但是，執(zhí)行起來非常容易。

為了使AMP WordPress插件能夠與Google Analytics協(xié)同工作，請轉(zhuǎn)到插件->編輯器->選擇“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！

進(jìn)行此更改后，重新驗(yàn)證您的AMP頁面，然后您的AMP頁面將可跟蹤。

對Google AMP項(xiàng)目的結(jié)論

Google希望AMP項(xiàng)目為用戶提供良好的體驗(yàn)。盡管如此，問題仍然是AMP是否可以使一切超級快速。這個(gè)問題的答案是相當(dāng)開放式的。如果您對網(wǎng)站的優(yōu)化效果不佳，那么AMP將帶來一些顯著的提升。

但是，加速移動(dòng)頁面并非靈丹妙藥。從一開始就提供了改進(jìn)網(wǎng)站速度的技術(shù)。AMP只是試圖結(jié)合并消除所有主要的慢速加載因素，并為用戶提供更好的解決方案。

您如何看待AMP項(xiàng)目？請?jiān)谙旅娴脑u論部分分享您的觀點(diǎn)！

關(guān)于在WordPress中使用AMP的常見問題解答(FAQ)

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

使用AMP（加速移動(dòng)頁面）與WordPress的主要好處是增強(qiáng)移動(dòng)瀏覽體驗(yàn)。AMP是Google支持的項(xiàng)目，旨在使網(wǎng)頁在移動(dòng)設(shè)備上加載速度更快。它通過精簡HTML和使用精簡版本的CSS來實(shí)現(xiàn)這一點(diǎn)。這導(dǎo)致頁面加載速度顯著提高，從而可以提高用戶參與度、保留率和改進(jìn)移動(dòng)SEO。

AMP如何影響SEO？

AMP可以顯著提高您的SEO，因?yàn)轫撁婕虞d速度是Google算法中的排名因素。通過使您的網(wǎng)頁加載速度更快，AMP可以幫助提高您在搜索引擎結(jié)果中的可見性，尤其是在移動(dòng)用戶中。此外，Google通常會(huì)在搜索結(jié)果中突出的輪播中突出顯示AMP頁面，從而提供進(jìn)一步的可見性。

我可以在現(xiàn)有的WordPress網(wǎng)站上使用AMP嗎？

是的，您可以在現(xiàn)有的WordPress網(wǎng)站上使用AMP。有幾個(gè)可用的插件可以幫助您在WordPress網(wǎng)站上實(shí)現(xiàn)AMP。這些插件有助于將您現(xiàn)有的帖子和頁面轉(zhuǎn)換為與AMP兼容的版本。

AMP會(huì)影響我的WordPress網(wǎng)站的功能嗎？

AMP限制某些HTML、CSS和JavaScript元素以確?？焖俚捻撁婕虞d時(shí)間。這意味著您的WordPress網(wǎng)站的某些功能在網(wǎng)站的AMP版本上可能無法按預(yù)期工作。但是，大多數(shù)AMP插件都提供選項(xiàng)，可以通過仍然符合AMP標(biāo)準(zhǔn)的方式添加回功能。

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

可以使用CSS自定義AMP頁面的外觀。但是，由于AMP限制使用某些CSS屬性以確?？焖俚捻撁婕虞d時(shí)間，因此您可能需要使用更精簡的方法來設(shè)置樣式。一些WordPress的AMP插件提供內(nèi)置的自定義選項(xiàng)。

如何檢查我的AMP實(shí)現(xiàn)是否成功？

您可以使用Google提供的AMP測試工具來檢查您的AMP實(shí)現(xiàn)是否成功。此工具將分析您的AMP頁面并報(bào)告可能阻止它在Google搜索結(jié)果中作為AMP頁面提供的任何錯(cuò)誤。

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

是的，您可以在WordPress中不使用插件的情況下實(shí)現(xiàn)AMP，但這需要對Web開發(fā)和AMP標(biāo)準(zhǔn)有很好的了解。您需要手動(dòng)創(chuàng)建帖子和頁面的單獨(dú)AMP兼容版本，并手動(dòng)添加必要的AMP HTML標(biāo)簽。

AMP是否支持廣告和分析？

是的，AMP同時(shí)支持廣告和分析。但是，由于AMP限制某些HTML、CSS和JavaScript元素，因此您可能需要使用AMP特定的標(biāo)簽和腳本來進(jìn)行廣告和分析。

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

是的，大多數(shù)WordPress的AMP插件都提供選項(xiàng)來禁用特定帖子或頁面的AMP。如果您有一些與AMP限制配合不好的內(nèi)容，這將非常有用。

AMP是否是響應(yīng)式設(shè)計(jì)的替代品？

不，AMP不是響應(yīng)式設(shè)計(jì)的替代品。雖然AMP可以通過使頁面加載速度更快來增強(qiáng)移動(dòng)瀏覽體驗(yàn)，但它并沒有取代適應(yīng)不同屏幕尺寸的網(wǎng)站設(shè)計(jì)的需求。最好將AMP與響應(yīng)式設(shè)計(jì)結(jié)合使用，以獲得最佳的移動(dòng)用戶體驗(yàn)。

以上是如何與WordPress一起使用AMP的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！