Google AMP - 概述

Google Accelerated Mobile Pages (Google-AMP) 是 Google 的一个新的开源项目，专门用于使用 amp html 构建轻量级网页。该项目的主要目标是确保 amp 代码在所有可能的设备（如智能手机和平板电脑等）上都能正常工作并快速加载。

什么是 AMP？

加速移动页面 (AMP) 是 Google 的一个开源项目，专门设计用于使网页对移动设备友好，方法是使其内容渲染更快、更流畅并在任何浏览器中都具有响应性。

Google amp 的官方网站是 - https://www.ampproject.org/

为什么选择 AMP？

任何用户都希望网站能够非常快速地加载内容。但是，当页面几乎充斥着图片、视频、动画、社交小部件时，情况可能并非如此，这使得页面变得非常沉重，从而增加了加载时间。这种情况可能导致长期用户流失。

Google AMP 旨在解决此问题。AMP 有一种特殊的方式来处理图片、iframes、javascripts、广告、视频、动画、css、字体加载等。AMP 页面的内容缓存在 Google 端，因此每次用户点击搜索结果时，内容都会从缓存中提供。缓存版本也会及时更新，以便用户始终获得最新的页面。

为什么要选择 AMP？

本节介绍您为什么必须为您的网站选择 AMP -

在 Google 搜索中优先显示

如今，当您在 Google 上搜索某些内容时，您会发现顶部显示了一个 Google 轮播图，其中包含页面，然后是作为搜索响应的页面列表。显示的新闻轮播都是有效的 AMP 网站。这意味着 Google 优先考虑 amp 页面并根据排名在新闻轮播中显示它们。

以下是使用关键字“最新印度新闻”在 Google 中进行搜索的示例 -

所有排名靠前的 AMP 页面都如上图所示在 Google 轮播图的开头显示。

当用户在 Google 搜索中搜索某些内容时，Google AMP 页面如下所示。请注意，AMP 页面上有一个 Google AMP 徽标。

更快的加载时间

当您的页面转换为 AMP 后，与非 amp 页面相比，加载时间将大大改善。更快的加载时间也是 Google 搜索中页面排名的重要因素。

没有弹出窗口

使用 Google AMP 提供愉悦的网页浏览体验，因为用户不会看到使用 Google AMP 设计的页面的任何不需要的弹出窗口。

生成流量

当页面的加载速度快时，它会自动增加观看者数量，从而增加页面流量。

AMP 如何工作？

用于构建网站的最重要组件是 javascript、图片、视频、字体、css 等。AMP 页面设计通过以独特的方式处理所有这些因素来完成。在本节中，让我们简要讨论 AMP 为使页面更快而执行的操作。

异步 JavaScript

Javascript 在页面上扮演着重要的角色，因为它有助于以动画、DOM 更改等形式为页面添加交互性。它还会降低页面速度，并可能阻止其他内容在页面上呈现。

AMP 如何处理 JavaScript？

AMP 异步加载 JavaScript。在 AMP 页面内严格不允许使用自定义 JavaScript。请注意，AMP 添加了许多组件，其中一些组件取代了现有的 html 标签；例如 amp-img、amp-iframe、amp-video、amp-lightbox、amp-animations 等。

对于每个组件，都有一个要加载的 JavaScript 文件，该文件已将 async 属性添加到 script 标签中。页面上仅允许与 amp-components 相关的 JavaScript 文件，并且不允许 AMP 页面内的任何其他 JavaScript 或第三方 javascript 文件。由于 AMP 使用 Google AMP 缓存，因此文件会从缓存中预加载，从而使其加载更快。

HTML 标签的大小

必须为图片、iframe、视频标签提供大小，以便 amp 页面可以在不加载资源的情况下找到页面上的空间。要加载的资源由 amp 页面优先级排序。内容比要加载的资源具有更高的优先级。

社交小部件/广告

Amp 提供了名为 amp-facebook、amp-twitter、amp-ad、amp-sticky 的特殊组件来处理要在页面上显示的社交小部件。AMP-ad 组件用于在页面上投放广告。AMP 在处理组件方面非常小心，并根据需求优先加载内容。

CSS

AMP 页面不允许使用外部 CSS。任何自定义 CSS 都可以在使用 amp-custom 属性的 style 标签内添加。内联 CSS 也允许。AMP 以所有可能的方式减少 http 请求。

字体

AMP 页面允许使用字体，并且字体加载的优先级由 AMP 决定。

动画

AMP 支持 amp-animation 组件并允许现代浏览器支持的过渡。

考虑到上面列出的所有要点，AMP 对为要提供的字体、图片、iframes、广告等发出的 HTTP 请求非常小心。页面折叠上方的资源首先呈现，然后优先考虑页面折叠下方的资源。

其他要点

Google AMP 缓存是另一个重要的因素，它有助于更快地呈现内容，因为内容是从缓存中获取的。

发布者必须维护两个站点，即 amp 和非 amp 页面。例如，假设该站点的地址为 - https://www.mypage.com。然后，要在桌面设备上提供的非 amp 页面的内部页面将是https://www.mypage.com/news。对于设备或 AMP，它将是https://www.mypage/com/news/amp/

Google 如何识别 AMP 和非 AMP 页面？

现在，让我们了解 Google 如何识别 AMP 和非 AMP 页面。

当 Google 搜索抓取页面时，如果它碰巧在 html 或 <html amp> 或 <html ⚡> 中获取 amp，它就知道这是一个 AMP 页面。
此外，如果 Google 遇到非 amp 页面，首先要了解 amp 页面，则必须在 amp 和非 amp 页面的 html 页面的 head 部分添加以下 link 标签。

非 amp 页面的页面 URL

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

这里为非 amp 页面指定了 rel = ”amphtml” 以指向 amp 版本，以便 Google 根据平台显示正确的版本。

amp 页面的页面 URL

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

这里在 amp 页面中指定了 rel = ”canonical” 以指向 html 的标准版本，以便 Google 根据平台显示正确的版本。

如果您的网站只有一个 amp 页面，您仍然不应忘记添加 rel = ”canonical”，它将指向自身 -

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

下图显示了指向 amp 页面的 rel=”amphtml” 和指向标准 html 页面的 rel = ”canonical” 的引用。

Google AMP 的功能

在本节中，让我们讨论 Google AMP 提供的重要功能 -

Amp 缓存

Google Amp 缓存是添加到 amp 的核心功能之一。它提供了一个基于代理的内容交付网络来提供纯 amp 页面。Amp 缓存默认提供给所有有效的 amp 页面。它有助于与非 amp 页面相比更快地呈现页面。目前有 2 个 amp 缓存提供商 Google AMP 缓存和 Cloudflare AMP 缓存。当用户点击并重定向到 amp 页面时，内容将从 Google 缓存中提供。

Amp 组件

Amp 有一长串为各种目的而设计的组件。其中一些列在下面 -

amp-img - 用于在 amp 页面上显示图片。
amp-iframe - 用于显示 iframe，其中包含要显示在页面上的外部内容。请注意，使用的 iframe 是沙盒化的，这意味着它需要权限才能在 amp 页面上显示数据。因此，必须为沙盒属性指定跨源详细信息。
amp-video - 用于在页面上显示视频。
amp-audio - 用于在页面上显示音频。
amp-datepicker - 用于在页面上显示日期小部件。您不必使用任何第三方日期选择器，因为 amp 中直接提供了相同的日期选择器。
amp-story - 用于在页面上显示您的故事的媒介。
amp-selector - 是一个 amp 组件，它显示选项菜单，用户可以在选项之间进行选择。显示的选项可以是文本、图片或任何其他 amp 组件。
amp-list - 是一个 amp 组件，它调用 CORS json 端点，并且 json 文件中的数据显示在模板内。

社交小部件

像Facebook、Twitter、Instagram这样的社交小部件已变得非常重要，需要显示在发布者的页面上，以便页面能够在社交媒体上共享。AMP通过开发AMP组件（如 amp-facebook、amp-twitter、amp-instagram、amp-pinterest 等）扩展了对所有重要社交媒体小部件的支持，以便在页面上使用。

AMP媒体

页面上的另一个重要组件是媒体，用于显示视频，并在视频之间投放中插广告。AMP通过使用 amp-jwplayer、amp-youtube 等提供了一种方法来实现这一点。您无需加载任何额外的第三方文件即可在您的页面上显示JW Player和YouTube。

AMP分析

AMP分析是一个用于跟踪给定页面上数据的AMP组件。可以记录页面上所有用户交互并保存以分析数据，以便进一步改进或用于商业目的。

AMP动画

amp-animation 是一个AMP组件，用于定义要在其他AMP组件上使用的动画。它支持与现代浏览器配合良好的动画和过渡效果。您无需使用任何外部CSS库即可执行动画，并且可以使用 amp-animation 组件。

AMP布局

AMP-Layout是Google AMP中一项重要的功能。AMP布局确保在页面加载时正确呈现AMP组件，而不会导致任何闪烁或滚动问题。

Google AMP确保在执行任何其他远程资源（如图像的HTTP请求、数据调用）之前完成页面上的布局渲染。可用于布局的属性包括所有AMP组件的宽度/高度、具有响应式、填充、固定等值的布局属性、资源加载时间过长或出现任何错误时显示的占位符属性、以及资源出现任何错误时显示的回退属性。

AMP显示布局

AMP支持许多用于在页面上显示内容的组件，而无需任何第三方库或在页面上进行任何繁重的CSS操作。列表包括：

手风琴 - amp-accordion 是一个AMP组件，用于以展开-折叠的格式显示内容。这使得用户在移动设备上更容易查看内容，他们可以根据自己的选择从手风琴中选择部分。
轮播 - amp-carousel 是一个AMP组件，用于在屏幕上显示一组类似的内容，并使用箭头在内容之间切换。
灯箱 - amp-lightbox 是一个AMP组件，它将占据整个视口并像覆盖层一样显示。
滑块 - amp-image-slider 是一个AMP组件，用于通过在图像上垂直移动滑块来比较两张图像。
侧边栏 - amp-sidebar 是一个AMP组件，用于显示在点击按钮时从窗口侧面滑出的内容。

AMP的优势

AMP页面轻量级且加载速度更快
Google在Google搜索中优先考虑AMP页面。AMP页面以轮播格式列在页面顶部。为了获得更高的排名，将您的页面转换为AMP是一个很好的优势。
AMP页面对移动设备友好，因为内容具有响应性，并且在所有浏览器中都能很好地调整，无需任何额外的样式。
AMP页面的用户满意度更高，因为与非AMP页面相比，页面加载速度更快，从而节省了用户的带宽和移动设备电量。

AMP的劣势

AMP具有以下缺点：

发布者必须为其页面维护两个版本：AMP和非AMP。
用户必须付出额外的努力将非AMP页面转换为AMP。由于AMP不支持自定义JavaScript或加载外部JavaScript，因此必须使用AMP提供的任何内容来实现相同的功能。

打印页面