云课堂
账户

介绍

历史

2015年Facebook出了一个instant article，用户看新闻的时候，一点就会以高速显示出新闻的基本资料，看完关闭仍停留在Facebook。好处是用户不用离开Facebook平台。Google同样也想让用户停留在自己的搜索引擎，所以有此项目，叫做AMP Site。

  • AMP，Accelerated Mobile Pages，加速的移动页面，是Google2015年定项，16年2月份推出的一个提高移动页面访问速度的技术。
  • 2017加入了AMP广告，这时大概有90万域名使用了AMP；
  • 2018年分别和AMP邮件，同年推出了用于WordPress定官方AMP插件，同年大概有31M （三千万）万域名使用AMP。
  • 2019年js文件终于可以使用了，饱受诟病定Signed Exchange 问题解决了。下面重点讲下这两个问题

AMP一开始不支持JS，因此只适合简单定博客新闻文章页面，AMP对于内容经营者来说是相当重要的技术，一秒内立即载入对于资讯爆炸时代来说是非常有优势的！AMP官方释出最新消息，现在可以使用 <amp-script> 在AMP页面上加上你专属的Javascript，且仍能维持超极速的载入体验，不必再受限之前的JS格式！

Google会缓存页面内容，但当使用者点击AMP网页后，实际上进入的是Google缓存的页面。但是显示定方法是 google.com/amp/yourdomian.com/your-page/,由于有众多用户反应AMP页面为什么不是自己的网址名称，因此Google于2019年4月提出AMP能使用自订网域的解决方法：Signed Exchange。这项新的技术能在使用者点进AMP网页后，浏览器显示自有网域URL，不会被强制加上「google.com/amp/」。不用再担心流量都被Google偷走，AMP网页分散流量、网页资安及影响品牌形象的风险，统计信息也更加方便。

目前Cloudflare也针对AMP推出「AMP Real URL服务」，让所有用户都能免费使用。到现在AMP从角色到操作体验上都已经非常成熟了。

刚推出AMP site，一来较多限制，二来会影响SEO。今天讲 AMP site加速移动网页，跟普通网页不同的就是它会加速。

当前用户比例：Desktop 48.88%，Mobile 48.62%，Tablet 2.5%

简介

在讲求速度，分秒必争的互联网时代，网页下载速度影响到你的竞争力及业务。据统计，有40%的人会放弃浏览打开时间超过3秒的网站，而使用AMP这种式比传统的网页下载速度快超过4倍，不少安装AMP网页后，页面读取速度提高数倍到数十倍，方便用户可更快获取页面内容。

AMP技术是在HTML网页语言基础上进行改良，它的核心称作AMP HTML，是HTML的一种。但它的格式与传统网页有着不同的格式，主要分别是在浏览器在生成（Rende）页面的速度，让使用者有更快的浏览体验。

是原本网页的HTML、JS(Java Script)等内容，透过插件来转换成AMP HTML、AMP JS、以及将网站结构正确的AMP网页页面加入到Google AMP Cache，使其显示在搜寻结果中。要使网页具有AMP的效果，

简单而不一定准确地说，AMP页面是大大简化了的移动页面，因此加载更快。AMP有几个特点：

AMP的HTML代码是标准HTML的一个子集，某些代码不让用了，如table, frame等
CSS代码也简化，而且要写在HTML中，不能调用外部CSS文件
JS大部分不能用了，当然就快了，但很多互动功能也就没了
资源控制，比如图片、视频等用户下拉到图片时再加载
高度缓存，Google将页面缓存在自己服务器了

Google最近在大力推AMP，很可能AMP会变成国际上信息类网站移动页面的主流。

 

https://amp.dev

 

 

三部分

 

AMP即是透过「规范HTML框架」、「限制JavaScript」、「Google高速缓存」这三种要素，缩小网页档案、缩短传输时间、降低页面载入时间。

  1. AMP html：一种专为AMP设计的html规范，包括图片、影片或广告等，例如：<amp-img>、<amg-carousel>等。和HTML一样是描述网页所用的标记式语言。然而，为了确保其网页内容的可信度，会限制一般HTML的部分功能。使用时必须遵守一套严谨的格式，例如文本格式、图像、影像、广告等都会有一定的格式。
  2. AMP JS：AMP JS是可实现所有AMP的最佳性能方式，管理网页加载，提供自定义标记等，这些都是为了确保页面能快速渲染。一般来说，由于同步Javascript有可能会破坏网页DOM的架构，所以AMP是禁止在网页内使用同步Javascrip，但可允许使用非同步Javascrip。是一套JavaScript库，用不同步的方式加载所有外部资源，其目的是要确保AMP HTML能够正确且快速地显示。不仅如此，如果使用的浏览器只支援普通HTML，AMP JS也能支援AMP HTML的专属功能。
  3. AMP Cache：是一种快取于传输AMP的内容传递系统，它可提取AMP html页面，能对页面进行缓存，并自动改进页面性能。Google AMP Cache还带有内置验证系统，确保页面能够正常工作，并不依赖于外部资源。Google搜寻引擎会先快取并缓存AMP页面，在缓存的同时会加强网页性能，已加快页面加载的速度。也就是说，用户在搜寻引擎中点击AMP网页时，实际上存取的是最佳化后的快取页面。

只要透过「行动装置」搜寻时，发现网址前面显示一个闪电符号⚡️即属于AMP网页，通常优先出现在排序前几名，甚至让用户点击进去等不到一秒，就能看到网页内容。不仅提高点击率，也降低了因网页载入太久的跳出率。

 

优势

AMP网页加速有什么好处？

1.   提升使用者体验UX：

由于你的网页能更轻巧更快捷地在流动设备下载及观看，提升了的用户使用经验 user experience。
如前文所述，在资讯唾手可得的情况下使用者要求的不只是精准的资讯，更要快速且便利。若使用者在浏览网站时获得良好的使用者体验，也会增加使用者回流的机率。

2.   提升SEO成效：
AMP的主​​要是为了解决网页载入速度过慢的问题，以AMP网页容易出现在搜寻结果前几名看来，点击率（CTR）的提升也能间接性地影响SEO排序。从搜索引擎的角度，你的网站更加好用，因此它有理由将你排在自然排名organic research比较高的位置，间接提升你网站的吸客力。

4. 在网站上跳出率更低平均停留时间更长

速度的提高将使读者在您的网站上停留的时间更长，从而有助于降低跳出率。虽然这可能不是搜索引擎优化工作中最重要的排名因素，但较低的跳出率可以告诉搜索引擎您的网页提供了他们所说的所有内容，并且主要受众认为它们很有帮助。尽管网站上的内容对网站访问者具有吸引力非常重要，但是如果网站加载时间缓慢，内容的质量将显得不那么重要。 通过缩短加载时间，访问者可以访问您的网站足够长的时间以订阅新闻通讯或购买产品。

5. 在Google搜索热门故事中轮播，并获得更高的点击率（CTR），提高文章页面的点击率；

如果您是发布商/新闻网站，并且在SEO工作上遇到困难，一个简单方法来增强SEO是通过集成AMP。它将使您的网站页面显示在Google新闻轮播中，这是Google的一个版块，比任何移动搜索的首屏放置都具有优先权。Google新闻轮播中的网站页面将获得更多关注。

6. 当您试图建立一个能够吸引目标受众的成功网站时，该网站的功能与其外观一样重要。 如果访问效果不佳，访问者将不会在您的网站上停留很长时间。 在这个数字时代，普通的移动用户等待页面加载的时间不会超过六秒。 人们希望从网站上快速访问所需的信息，如果信息加载太慢，他们将放弃浏览该网站。 根据Google的说法，总体在线流量的一半来自移动设备，因此，强烈建议着重提高移动网站的加载速度。 网站页面加载所需的时间将决定客户对您访问网站时的体验是否满意。

增加用户粘性，降低网站跳出率；

研究表明，加载需要六秒的网站跳出率会更高。 但是，将加载时间减少到三秒或更短时间会降低跳出率并提供更好的用户体验。 提高页面速度的最有效方法之一是加速移动页面（AMP）。 如果实施正确，则AMP可以为您的网站提供许多好处，有助于增加网站的访问量并提高转化率。

3.   适合新闻媒体、内容经营者：
行动装置浏览比例增加，为了降低使用者因等候而分心跳出的机率，AMP对于内容经营者来说是相当重要的技术，一秒内立即载入对于资讯爆炸时代来说是非常有优势的！由于你的网页经过转化，去除了一些会拖慢你网页下载的元素，所以版面与原有的电脑版或手机版可能会不同。

缺点

1） 由于AMP本质属于静态网页，因此AMP会限制Javascript的使用。

4） 为了提高网页读取速度，AMP限制style的大小使用不超过75KB，同时inline style只能写网页档案内<header>部分，<style amp-custom></style>的区块内。

5） AMP若引用外部资源（如图片、广告等），需在html内提供外部资源的大小，让AMP确认外部资源的大小，避免layout需重新计算或设计等问题。

6） 字体使用需要连结标签或CSS中的＠font face rule，同时关于字体引用，AMP也限定特定的字体供应商。

SEO

采用AMP的页面是否对排名有帮助呢？很多人都认为，作为Google的衍生物，网页安装AMP后，手机网站的排名就会更靠前，手机网站SEO优化也会更方便。这到底是不是呢？

做SEO的肯定都知道，页面打开速度是搜索排名因素之一。Google把页面速度作为排名算法因素之一早在2010年4月就公布并开始了。不过页面速度只是排名算法的很小一个因素，只影响了1%的查询排名，只有速度真的非常非常慢的页面会被影响。从2010年就开始的页面速度影响排名指的是PC搜索和PC页面打开速度，并不是移动搜索。

2016年，Google明确表示，AMP不在排名算法中。因为当时的网址还是google开头的，谷歌想做的一个类似一个百度百家号之类的。因为压根跟原站没太大关系，所以声明AMP不影响SEO。

2018年，更新应该被称为移动速度更新，Mobile Speed Update，因为这是针对移动页面和移动搜索排名的。，Google分批次把满足条件的网站转向移动优先索引，Google Search Console通知，已经转为移动优先索引了，也就是Google开始索引网站的移动版，而不是PC版，作为排名的依据。将会在7月份把页面速度作为移动搜索的排名因素。

现在大部分认为，透过AMP提升行动页面的载入速度，让行动用户获得更好的使用者体验的同时，也能间接性地提高SEO自然排序、转换率。

试试呢？我们搜索AMP和SEO，谷歌自己给出的答案是，直接影响，而不是间接影响了。

Is AMP important for SEO?
Accelerated Mobile Pages (AMP) has been out for a few years now and it has become an integral part of SEO. … But, Google now gives higher importance on website speed and mobile-friendliness with their switch to mobile-first indexing and the introduction of Core Web Vitals which makes AMP an indirect ranking factor.

增加流量和提高SEO排名

加载时间是SERP排名的重要因素，它决定了您的网站在Google搜索结果中的排名。大多数互联网用户都避免点击前三个搜索结果以外的任何内容，因此对相关关键词进行高度排名很重要。 即使网站的其余部分进行了优化，但负载不足也会导致搜索引擎（如Google）对您的网站排名较低。 同样重要的是要了解您的平均移动用户将不会等待超过六秒钟的时间来加载网站上的页面。取而代之的是，他们将跳出您的网站，并将其业务转移到效果更好的竞争对手的网站上。网站上的页面越快，排名就越高，这意味着更多的访客在浏览您的内容，从而增加了获得更高收入的机会。

 

AMP对手机网站SEO优化有什么影响？

香港网页SEO优化公司表示，关于这个问题，Google官方也有解释：AMP推出的目的，只是让手机版网站的读取速度变得更快，这对网站用户体验的提升有一定的帮助，是增加手机版网站竞争力的其一关键要素。但影响网站用户体验的因素有很多，而SEO优化也有很多决定因素，若仅仅是提高手机版网站，而没有真正为用户解决问题，这对手机版网站排名并没有太大帮助。

当然，AMP能提高手机版网站的加载速度，同时也帮助用户更容易获取资讯，Google还是非常鼓励所有网站安装。尽管目前AMP功能还存在很多限制，但随着Google逐步强化，AMP技术不断完善，这无论对网页，还是用户都会带来更好的体验。

具体影响有多大？

Do AMP pages rank higher?
While Google does not explicitly say all websites should have AMP pages, it is ranking those that do higher than ever. A recent study found that even a 1-second delay in mobile browser load time can lower conversion rate by 3.5%, bring down pageviews by 9%, and increase bounce rate by 8%.

SEO的三个方向，

2020年最重要的SEO优化趋势就是：网页速度Pagespeed、安全性问题https、手机设备优先Mobile-first。

操作

 

站长，

有了AMP機制之後還要做什麼？

你需要請負責幫你做內容行銷的公司或SEO公司，協助你在Google Search Console裏面進行登記，讓Google能夠快速地抓取你的AMP網頁，同時也可以檢測一下你AMP網頁的情況，看是否有哪些地方需要改進。

分析，

Accelerated Mobile Pages 需要使用不同的 Google Analytics（分析）代码。
Accelerated Mobile Pages (AMP) 是适用于移动网络的开放源代码网页格式，可让您的网页近乎即时地呈现在移动设备上。AMP 网页与 HTML 网页类似，可在任何浏览器中加载。

 

如何追蹤AMP網頁的客戶行爲？

由於AMP加速網頁是在你原有的網頁之外新增的頁面，所以也需要安裝Google Analytics追蹤碼，才能追蹤到這些網頁的客戶瀏覽情況。AMP網頁的Google Analytics追蹤和一般的網頁Google Analytics追蹤碼不同，因此，你必須採用專為AMP加速網頁特設的Google Analytics追蹤碼。詳情可以搜索”Google Analytics for AMP Page”參考Google提供的指引，安裝後你可以嘗試瀏覽你網站的AMP網頁，在你想檢視的網頁後端加上/amp/，然後在Google Analytics的實時瀏覽量監察報表，看看是否偵測到你正在瀏覽，如果看到就代表成功安裝。

 

 

AMP 网页与 HTML 网页类似，可在任何浏览器中加载。不过，由于您无法在 Accelerated Mobile Pages 上使用 analytics.js，因此我们专门针对 AMP 提供了一种不同的 Google Analytics（分析）代码。

https://developers.google.com/analytics/devguides/collection/amp-analytics?hl=zh_cn

基本的网页浏览量衡量设置

要在 AMP 网页上进行基本的 Google Analytics（分析）安装设置，请复制以下代码段并将 <GA_MEASUREMENT_ID> 替换为要使用的媒体资源 ID。（找到您的 Google Analytics（分析）ID。）

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "G-4R7N760VG9",
"config" : {
"G-4R7N760VG9": { "groups": "default" }
}
}
}
</script>
</amp-analytics>

插件

页面描述最前面有个闪电标记和AMP字样。用户点击后页面秒开，显示的是Google服务器上的缓存

外掛下載點

AMP

透過WordPress後台安裝AMP for WordPress外掛及設定
第一步：進入到WordPress後台，在側邊工具欄點選外掛>安裝外掛，右上角搜尋欄內輸入AMP for WordPress，點擊搜尋。

第二步：外掛圖示是藍底白字，標示Accelerated Mobie Page Project的文字，依序點選安裝、啟用。有關外掛的安裝，可以參考之前的文章：WordPress 教學 基礎介紹六（外掛）。

第三步：可以在後台的側邊工具欄找到AMP的選項，點擊進去後有一般以及分析兩個選項，點選一般，可以自定義想要製作成AMP的文章類型，可以按個人需求點選。

以網址及Google說明文件驗證AMP是否運行完成
第一步：由於外掛的設定相當的安靜整潔，因此安裝完成後無法得知是否已經在網站內裝好AMP，因此我們需要以其他方法來驗證，首先找到網站內一篇文章，在頁面上點擊滑鼠右鍵，在跳出的右鍵選單上選擇 “檢視網頁原始碼“，會進到網頁HTML的畫面。

第二步：在網頁HTML中啟動尋找功能(command或control+F)，輸入AMP，如果找到如下圖的LIMK字串，就表示AMP已加入網頁中。

第三步：如果想看網頁在使用AMP-HTML後的畫面，可以在網頁網址結尾處加上/amp。另外也可以在這裡檢查AMP建立的HTML是否正常載入，在網址列最後加上 #development=1，點擊右鍵，在選單上選擇檢查，進入Chrome開發人員工具，在頁籤上選擇console，如果有顯示第一行文字：Powered by AMP⚡ HTML…以及第二行文字: AMP validation successful.，就表示AMP HTML及JS沒有錯誤，如下圖所示。

第四步：在第二步驟確認過AMP已建立後，也可以使用由Google提供的AMP線上驗證工具，進入如下圖畫面，輸入想驗證的網頁網址，結尾加上/amp，在HTML Format選項的部分選擇AMP，按下VALIDATE(驗證)，如果有顯示下圖中最下方紅色框的PASS，就表示AMP HTML在網頁中是建立成功的。

第五步：另一個AMP測試網站，是驗證AMP網頁是否有效果。輸入要測試的網址，點擊下方執行測試按鈕，分析結束後，會顯示在分析的網站檢測到AMP連結，接著點擊測試連結的AMP，如果出現綠色的文字”有效的AMP網頁“，就表示網站的AMP是可用的。

第六步：我們也可以到Google Search Console網站管理工具中查看行動版網頁加速的分析情形，這裡跟大家解釋一下，AMP加速瀏覽優化的網頁必須要經過Google重新索引後，才會顯示在搜尋結果上，並不會即時顯示。在教學中一樣先跟同學說明可以在Google Search Console看到相關數據，在下圖中有Google對AMP的說明。

第七步：下圖中是AMP優化過的網站頁面在手機版網頁中搜尋結果所呈現的樣式，可以看到在網址的前方會呈現閃電的圖示，表示該網頁具有AMP快速載入內容的優化效果。

 

 

https://amp.dev/

https://search.google.com/search-console/amp

https://search.google.com/test/amp

 

不过因为AMP或MIP限制了很多东西，如CSS、JS、HTML代码等，也就限制了不少功能，

关于缓存
AMP是高度缓存的，好处是快，缺点是可能造成流量统计的误差，有的用户访问的是缓存，没有真的访问原服务器上的文件。分析流量时要注意这一点。

 

人們在手機上搜索，找到你的網頁，你的網址前會出現一個閃電的標誌。（為什麼用閃電標誌？就是意味著你的網頁可以如閃電一般，在瞬間下載打開。）

 

插件AMP for wordpress

AMP for wp