您的位置：首页 > 运维架构 > 网站架构

谷歌amp 下拉_Google AMP是您网站的正确选择吗？

2020-08-20 17:55 806 查看

谷歌amp 下拉

Accelerated Mobile Pages, or AMP, is an open-source initiative by Google. In their words, it helps "make the web better for all".

加速移动页面(AMP)是Google的一项开源计划。用他们的话说，它有助于“使网络更好地为所有人服务”。

So is this true? Some critics (mostly publishers) say that it will help Google dominate the web. But we can't jump to any conclusions by just considering one perspective.

这是真的吗？一些批评家(大多数是出版商)说，它将帮助Google统治网络。但是，仅考虑一个观点就不能得出任何结论。

To help us out, I have divided this article into three sections, so we can consider AMP from three different perspectives.

为了帮助我们，我将本文分为三个部分，因此我们可以从三个不同的角度考虑AMP。

The first considers the perspective of publishing sites and the people who maintain them. The second considers the perspective of the user. And the final perspective considers Google's take on it, as a search engine.

第一个考虑发布站点和维护站点的人员的观点。第二个考虑用户的观点。最后的观点是考虑将Google作为搜索引擎。

If you think about AMP from all these angles, you will be able to make the right decision for your website.

如果您从所有这些角度考虑AMP，您将能够为您的网站做出正确的决定。

Because of this, this article doesn't have a straightforward conclusion as to whether you should or shouldn't use AMP. That's up to you, in the end. This article will just help you to move in the proper direction.

因此，对于您是否应该使用AMP，本文没有直接的结论。最终由您决定。本文将仅帮助您朝正确的方向发展。

Let's look at our first perspective.

让我们看看我们的第一个观点。

发布站点及其维护者 (Publishing sites and their maintainers)

AMP was launched in 2015, which means it's just 5 years old. So people and sites who have been publishing long before that time might worry that all their articles will suddenly become outdated. But that's not the case. Still, like big companies, they want to resist change.

AMP于2015年推出，这意味着它只有5年的历史。因此，早于此发布时间的人和网站可能会担心他们的所有文章会突然过时。但是事实并非如此。仍然像大公司一样，他们想抵制变革。

Their criticism is completely valid from their perspective, as Google AMP has some strict conditions that must be met. For example:

从他们的角度来看，他们的批评是完全正确的，因为Google AMP有一些必须满足的严格条件。例如：

Forget JavaScript (though there are some workarounds). Traditional use of JavaScript is not allowed at all.
忘记JavaScript(尽管有一些解决方法)。完全不允许使用JavaScript。
If you are creating an AMP version of a page, the AMP version and the canonical page (the original page) should have identical design and functionality.
如果要创建页面的AMP版本，则AMP版本和规范页面(原始页面)应具有相同的设计和功能。
You can't use external CSS, but instead you have to inline everything. Since that would be inefficient, a customized library is preferable.
您不能使用外部CSS，而必须内联所有内容。由于这样做效率低下，因此最好使用自定义的库。

This is a minimal AMP page from the Google AMP docs:

这是Google AMP文档中的最小AMP页面：

<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html" />
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<style amp-custom>
h1 {
color: red;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": ["thumbnail1.jpg"],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
<script
async
custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
></script>
<style amp-boilerplate>
/* AMP boilerplate CSS */
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src="sample.jpg" width="300" height="300"></amp-img>
</p>
<amp-ad
width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302"
>
</amp-ad>
</body>
</html>

Apart from the contents of the body tag, the rest is the minimal amount of code you need to be a valid AMP page.

除了body标签的内容之外，其余的是成为有效AMP页所需的最少代码量。

Anything that can slow down the webpage is either not allowed or has a different format. For example, images have to use the

<amp-img>

tag instead of just the

<img>

tag. Similarly iframe and video tags have a different format.

禁止放慢网页速度或使用其他格式的任何内容。例如，图像必须使用

<amp-img>

标签，而不仅仅是

<img>

标签。同样，iframe和视频代码的格式也不同。

You have complete freedom to use CSS inline the way you want to, except for some CSS animations (as it slows down the page).

除了某些CSS动画(因为它减慢了页面速度)之外，您完全可以自由使用CSS内联。

If your canonical page has lots of dynamic stuff, like signup forms and carousels, then you will have a hard time creating an identical AMP version.

如果您的规范页面包含很多动态内容，例如注册表单和轮播，那么创建相同的AMP版本将很困难。

If you want to avoid that trouble, you are left with two options: either make your canonical page super simple or discard the canonical page and use just an AMP page.

如果要避免这种麻烦，您将有两个选择：要么使您的规范页面超级简单，要么放弃规范页面，而仅使用AMP页面。

This is what bothers most publishing sites and the people who manage them: Google will have immense control over the internet, which goes against the concept of net neutrality.

这就是困扰大多数出版网站和管理它们的人的原因：Google将对互联网拥有巨大的控制权，这违背了网络中立性的概念。

Google says it does not favour AMP pages in search results. However, there are rich cards which are only possible via AMP. So, in a way, Google is indirectly forcing you to use AMP to survive.

谷歌表示，它不支持搜索结果中的AMP页面。但是，有些富卡只能通过AMP才能使用。因此，在某种程度上，Google间接迫使您使用AMP生存。

AMP also allows only one ad per page, which might affect ad revenue, considering that all your organic traffic will see the AMP version. There is limited support for other ad networks.

考虑到您所有的自然流量都会看到AMP版本，AMP每页只允许一个广告，这可能会影响广告收入。对其他广告网络的支持有限。

You also can't use other analytics providers other than the ones supported.

除支持的分析程序提供商外，您也不能使用其他分析程序提供商。

All these points need to be considered before you make a decision.

在做出决定之前，必须考虑所有这些要点。

But it's not all bad news. Now let's talk about the benefits publishers recieve:

但这不是坏消息。现在，让我们来谈谈发布者获得的好处：

Google shows AMP pages from an AMP cache, which drastically reduces bandwidth usage on the publisher's server. This may or may not be beneficial to you.
Google会显示AMP缓存中的AMP页面，从而大大减少了发布服务器上的带宽使用情况。这可能对您有好处，也可能没有好处。
Your website will load really fast, because of the severe limitations of AMP. So there is nothing to slow it down. Google also preloads webpages before someone clicks them, so the load time is negligible, apparently.
由于AMP的严格限制，您的网站将加载得非常快。因此，没有什么可以放慢速度的。 Google也会在有人点击之前预加载网页，因此加载时间可以忽略不计。
Your website can appear as rich cards, or carousels if properly configured, which increases the click through rate.
您的网站可以显示为富卡或轮播(如果配置正确)，可以提高点击率。

Now the most important thing: AMP implies that your website should be strictly mobile-friendly. And being mobile-friendly is such a necessity these days that websites can't ignore it, AMP or not.

现在最重要的是：AMP意味着您的网站应严格适合移动设备使用。如今，对移动设备友好是一种必不可少的事情，无论是AMP还是其他网站，网站都不能忽略它。

So we've looked at Google AMP from the perspective of publishers. In the end, if you have a web app with a lot of functionality, I wouldn't suggest that you go for AMP. Now, let's move on to the second perspective.

因此，我们从发布者的角度审视了Google AMP。最后，如果您的Web应用程序具有很多功能，那么我不建议您选择AMP。现在，让我们继续第二个角度。

用户数 (Users)

Publishers are the ones who might have trouble implementing AMP on their pages.

发布者是那些可能无法在其页面上实施AMP的人。

As a user, your primary motive is to surf the web. Not many mobile users have great internet speed and a non mobile-friendly and slow website with slow internet speed is the worst combination.

作为用户，您的主要动机是上网。并非有很多移动用户拥有出色的互联网速度，而互联网速度较慢的非移动友好且缓慢的网站是最糟糕的组合。

If you are searching for something online, your first priority is getting a result. Not all websites are fast, and even though they may have great content, they will likely suffer if they're slow to load. But Google AMP helps them to be fast and accessible.

如果您正在网上搜索商品，那么您的首要任务就是获得结果。并非所有网站都很快，即使它们的内容丰富，但如果加载速度慢，它们也可能会遭受损失。但是Google AMP可以帮助他们快速访问。

A significant portion of any audience these days is made up of mobile users. For example, check out the user distribution of freeCodeCamp based on operating system:

如今，所有受众中有很大一部分是由移动用户组成的。例如，检查基于操作系统的freeCodeCamp的用户分布：

So, the users are the ones who are and should be benefitting from AMP. Google is a user-centered company. Each and every decision it makes will benefit its users.

因此，用户是应该从AMP中受益的用户。 Google是一家以用户为中心的公司。它做出的每一个决定都会使用户受益。

As a user, if you are searching for something, you have a very little attention span. You have a whole list of results to go through. If a website doesn't load within 5 seconds, you will most likely move on to the next result.

作为用户，如果您正在搜索某些内容，则关注范围很小。您将要获得完整的结果列表。如果网站在5秒钟内未加载，则很可能会转到下一个结果。

Let's try to compare the performance difference between the AMP and non-AMP versions of one of my freeCodeCamp articles.

让我们尝试比较我的freeCodeCamp文章之一的AMP版本与非AMP版本之间的性能差异。

This is the non-AMP version on a mobile device:

这是移动设备上的非AMP版本：

The non-AMP version works fine on desktop (score of 94) but that's because desktops have faster load times compared to mobile devices. But the non-AMP version is pretty slow on mobile devices.

非AMP版本在台式机上可以正常工作(得分为94)，但这是因为台式机的加载时间比移动设备快。但是非AMP版本在移动设备上的运行速度很慢。

Now let's test the AMP version:

现在让我们测试AMP版本：

It's much better than the non-AMP version, especially on mobile. And the desktop score got boosted too (98 this time). This makes it clear that AMP is faster.

它比非AMP版本要好得多，尤其是在移动设备上。而且桌面得分也得到了提高(这次为98)。这清楚地表明AMP更快。

But the major performance boost is because Google preloads the results which makes the load time negligible. The load times for the AMP version and Non-AMP version were as follows:

但是主要的性能提升是因为Google预加载了结果，因此加载时间可以忽略不计。 AMP版本和非AMP版本的加载时间如下：

You can see the performance boost you get if you use AMP. And as a user, it's beneficial to you. You don't want to wait for results, you just want to get the answer real quick. And Google tries its best to find the answers for you so that you don't have to search manually.

如果使用AMP，则可以看到性能提升。作为用户，这对您有益。您不想等待结果，而只是想快速获得答案。 Google会尽力为您找到答案，这样您就不必手动搜索。

Google even shows featured snippets for most queries so that you don't even have to open the webpage. Here's an example:

Google甚至为大多数查询显示精选的片段，因此您甚至不必打开网页。这是一个例子：

As you can see, Google tries it's very best to answer questions and make your experience faster. AMP is just a way to make it even faster for users who just want to find an answer quickly.

如您所见，Google会尽力回答问题并让您的体验更快。 AMP只是为希望快速找到答案的用户提供更快的解决方案。

AMP also makes sure a page looks the same across platforms and browsers, thus removing many limitations of web design. So from a user's perspective, AMP is an absolute win.

AMP还确保页面在各种平台和浏览器上看起来都相同，从而消除了网页设计的许多限制。因此，从用户的角度来看，AMP是绝对的胜利。

Now let's move on to the third, and the most important perspective for our purposes.

现在，让我们继续讨论第三个也是最重要的角度。

Google，作为搜索引擎 (Google, as a search engine)

Before discussing this perspective, let's summarize what Google AMP really does:

在讨论这种观点之前，让我们总结一下Google AMP的真正作用：

Accelerated Mobile Pages or AMP as the name suggests is a way of designing web pages to improve user experience especially on mobile devices. These pages have workarounds for things that can possibly slow down a page.
顾名思义，加速移动页面或AMP是一种设计网页以改善用户体验的方法，尤其是在移动设备上。这些页面针对可能会减慢页面速度的问题提供了解决方法。

Accelerated Mobile Pages or AMP as the name suggests is a way of designing web pages to improve user experience especially on mobile devices. These pages have workarounds for things that can possibly slow down a page.
顾名思义，加速移动页面或AMP是一种设计网页以改善用户体验的方法，尤其是在移动设备上。这些页面针对可能会减慢页面速度的问题提供了解决方法。

There is no one guide for designing a webpage. You have HTML, CSS and your creativity and a blank canvas.

没有设计网页的指南。您拥有HTML，CSS和创造力，还有一块空白的画布。

That being said, there are some good artists and some bad artists. If there was a guide to how every page should be, there would be way less variation across pages.

话虽如此，有一些好艺术家和一些坏艺术家。如果有关于每个页面应该如何使用的指南，那么页面之间的差异将更少。

Still, there is the concept of Semantic HTML which helps us organize our web pages.

尽管如此，还是有语义HTML的概念，它可以帮助我们组织网页。

Semantic HTML is the practice of using meaningful tags for certain parts of a webpage instead of using general
<div>
and
<span>
tags for everything. For example, using
<h1>
for headings,
<nav>
for navigation,
<header>
and
<footer>
for headers and footers, respectively.
语义HTML是一种对网页的某些部分使用有意义的标记，而不是对所有内容使用常规的
<div>
和
<span>
标记的做法。例如，将
<h1>
用作标题，将
<nav>
用作导航，将
<header>
和
<footer>
分别用作页眉和页脚。

So, using

<header>

is much better than using something like

<div class="header">

因此，使用

<header>

比使用

<div class="header">

If every web page was forced to use such conventions, search engines would easily be able to identify what the main content was and display much better results. But, you can't force everyone to use such conventions.

如果每个网页都被迫使用此类约定，那么搜索引擎将能够轻松识别主要内容并显示出更好的结果。但是，您不能强迫所有人使用此类约定。

To simplify extracting information from webpages, Google encourages developers to use Structured Data. This is an organised form of what is present on the webpage. For example the structured data of this article is the following:

为了简化从网页中提取信息的过程，Google鼓励开发人员使用结构化数据。 这是网页上显示内容的有组织形式。例如，本文的结构化数据如下：

{
"@context": "https://schema.org",
"@type": "Article",
"publisher": {
"@type": "Organization",
"name": "freeCodeCamp.org",
"logo": {
"@type": "ImageObject",
"url": "https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg",
"width": 210,
"height": 24
}
},
"author": {
"@type": "Person",
"name": "Abhishek Chaudhary",
"image": {
"@type": "ImageObject",
"url": "https://www.freecodecamp.org/news/content/images/2020/08/image.jpg",
"width": 2000,
"height": 2000
},
"sameAs": [
"https://theabbie.github.io",
"https://www.facebook.com/abhishek.vice.versa",
"https://twitter.com/theabbiee"
]
},
"headline": "Is Google AMP the right choice for your website?",
"url": "https://www.freecodecamp.org/news/p/efcffd53-9fa2-49ba-a144-9c627fde4d86/",
"image": {
"@type": "ImageObject",
"url": "https://images.unsplash.com/photo-1533292362155-d79af6b08b77?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ",
"width": 2000,
"height": 1333
},
"description": "Accelerated Mobile Pages or AMP is an open-source initiative by google. In there words the motive is to &quot;make the web better for all&quot;. Whether it&#x27;s actually true or not is highly debatable, Some critics (mostly publishers) say that this will make Google dominate the web. But we can&#x27;t jump",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.freecodecamp.org/news/"
}
}

Google doesn't rely on this alone, as people might misuse it. But it helps Google understand what is present on the page. These can also help in displaying rich results, for example:

Google不会单独依赖它，因为人们可能会滥用它。但这可以帮助Google了解页面上显示的内容。这些也可以帮助显示丰富的结果，例如：

The good thing about AMP is that it encourages developers to use structured data. Also, due to the severe limitations, the page has a much cleaner design. This makes the task of search engines much easier.

AMP的优点在于，它鼓励开发人员使用结构化数据。同样，由于严格的限制，页面的设计更加简洁。这使搜索引擎的任务更加容易。

And almost everyone would agree that cleaner, faster webpages are also important in general.

几乎所有人都同意，更干净，更快的网页通常也很重要。

那么您如何决定？ (So how do you decide?)

In this article, we saw that AMP is beneficial to both users and Google, and can also be beneficial to publishers if they don't resist change. And everyone is a user at some point.

在本文中，我们看到AMP对用户和Google都有利，如果发布者不抗拒变革，也可能对发布者有利。在某些时候，每个人都是用户。

If you hate slow, non mobile-friendly websites, think about how other users feel, too. A cleaner internet is always better.

如果您讨厌速度缓慢且不适合移动设备的网站，请考虑其他用户的感受。清洁的互联网永远更好。

That being said, if your only motive is to create a clean and fast webpage, you can do so without AMP too. Just avoid unnecessary components and design efficiently.

话虽这么说，如果您的唯一动机是创建一个干净，快速的网页，那么您也可以不使用AMP。只是避免不必要的组件并有效地进行设计。

This article was an overview of AMP, and its pros and cons. Now you know why it may or may not be useful to you. And just a note - freeCodeCamp uses AMP, and it's great. I hope you make a good decision for your site.

本文是AMP及其优点和缺点的概述。现在您知道了为什么它可能对您没有用。请注意-freeCodeCamp使用AMP，这很棒。希望您为自己的网站做出明智的决定。

I hope you liked this article. You can find me at my internet home theabbie.github.io. Thank you for reading.

希望您喜欢这篇文章。您可以在我的互联网主页theabbie.github.io中找到我。感谢您的阅读。

翻译自: https://www.freecodecamp.org/news/is-google-amp-the-right-choice-for-your-website/

谷歌amp 下拉

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航