核心要點(diǎn)

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

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

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

什麼是AMP？

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

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

對(duì)於那些已經(jīng)為SEO排名而加倍努力的網(wǎng)站來(lái)說(shuō)，這當(dāng)然會(huì)增加他們待辦事項(xiàng)列表中的更多任務(wù)，因?yàn)锳MP頁(yè)面還可以增強(qiáng)您網(wǎng)站的SEO排名。這也許是大企業(yè)也採(cǎi)用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)有任何困難，我建議您訪問(wèn)此鏈接以了解有關(guān)如何創(chuàng)建您的AMP HTML頁(yè)面的更多信息。

AMP JS

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

AMP緩存

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

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

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

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

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

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

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

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

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

您可以在此處了解有關(guān)AMP標(biāo)籤和Schema.org元數(shù)據(jù)的更多信息。 Schema.org元數(shù)據(jù)“是使您的內(nèi)容有資格出現(xiàn)在Google搜索新聞?shì)啿パ菔局械囊蟆?。因此，如果您希望通過(guò)Google AMP取得成功，則必須正確設(shè)置您的Schema。

Google Analytics是否適用於AMP？

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

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

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

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

步驟一：安裝WordPress插件

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

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

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

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

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

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

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

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

請(qǐng)確保在URL中指定徽標(biāo)所在的位置，並相應(yīng)地指定高度和寬度。

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

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

為了使AMP WordPress插件能夠與Google Analytics協(xié)同工作，請(qǐng)轉(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頁(yè)面，然後您的AMP頁(yè)面將可跟蹤。

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

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

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

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

關(guān)於在WordPress中使用AMP的常見(jiàn)問(wèn)題解答(FAQ)

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

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

AMP如何影響SEO？

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

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

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

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

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

如何自定義AMP頁(yè)面的外觀？

可以使用CSS自定義AMP頁(yè)面的外觀。但是，由於AMP限制使用某些CSS屬性以確保快速的頁(yè)面加載時(shí)間，因此您可能需要使用更精簡(jiǎn)的方法來(lái)設(shè)置樣式。一些WordPress的AMP插件提供內(nèi)置的自定義選項(xiàng)。

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

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

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

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

AMP是否支持廣告和分析？

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

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

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

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

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

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