🛤️ 🎭 ✋🏻 现代SEO：AMP故事 🍘 🌛 🐉

是的，这是俄英混合的标题...所以让我们立即澄清一下。因此，如果SEO是一个众所周知的词（用小圆圈表示），则AMP并非如此。Google于2015 年宣布了“ 加速的移动页面”（请参阅Wikipedia文章），该工具可以快速浏览手机上的网页。随着时间的流逝，AMP变成了一个框架，使您可以为任何网站（不仅是移动设备）创建页面，并扩展其“术语”：实际网站（AMP网站），故事（AMP故事；本文的主题），广告单元（AMP广告））和电子邮件（AMP电子邮件）。如上所述，这一切的背后是Google，如果您有兴趣在此搜索引擎中推广网站- 适当关注AMP主题将非常有用。但是首先，让我们看一下这些非常AMP的故事（AMP Stories ; 更新：从2020年5月1日起更名为Web Stories），然后我们决定是否需要它们，如果事实证明我们需要它们，我们将考虑如何做。

AMP故事示例

单击QR码以查看台式机或笔记本电脑在实际站点上的AMP故事，或扫描以从移动设备（智能手机和/或平板电脑）查看同一页面：

这不是广告。

. AMP- «» . , , — , — , .

在计算机或笔记本电脑上，您应该看到此“故事”：

电脑历史

在平板电脑和智能手机上，这是：

移动设备上的历史记录

是给谁的

使用AMP故事很不错，其中一些框架（建议从7到20，但这不是严格的规则）可以传达服务或产品的含义和美感。例如，同一个旅游和旅行，酒店（展示厅，娱乐区，SPA），时装（展示衣服的集合），餐厅和咖啡馆（展示内饰和菜肴），美容院（展示……美容）。通常，含义应该很清楚，每个企业主都比我更清楚他应该显示的内容。

它如何影响搜索引擎优化（SEO）

我今天认为搜索算法的趋势是，网站排名越来越不受其他网站链接的影响（尽管是的，它仍然会影响），并且以下因素（不一定按列出的顺序）越来越多：

页面下载速度
适应移动设备
结构化数据可用性
内容丰富
该网站的悠久历史

此列表中的前三项可用于快速优化，因此让我们仔细看一下。

页面下载速度

请看一下Google文档中的屏幕截图，并阅读带下划线的图片（或单击图像转到该文档）：AMP 技术从一开始就是专门为提高移动设备上的页面加载速度而设计的。为此，Google并非将AMP页从服务器而是从其缓存（Google AMP Cache）下载到移动设备。也就是说，Google首先将您的AMP页面（在本例中为AMP历史记录）保存在家里，然后使用其强大的全球服务器网络（即所谓的服务器网络）快速将其提供给移动设备用户光盘

- 内容交付网络。

是的，这仅适用于在移动设备上打开的页面（从计算机打开的页面仍会从您的服务器加载），但是我们知道适应移动设备非常重要，因为今天用户从移动设备访问网站比传统的计算机和笔记本电脑更常见。因此，借助AMP技术，我们解决了页面加载速度问题（至少在移动设备上），该问题可以满足Google的严格要求。这还不够！但是该文档还提到：“ Google搜索结果中的插图文章 ”，这些AMP故事显然被称为（请看屏幕快照中的第一句话，或单击图像转到该文档）：在这种情况下，我们可以得出结论，谷歌在其搜索中将它们（即“ 插图文章 ”）在搜索结果中置于特殊位置！那么，为什么不选择这个地方和您的故事呢？但是AMP故事的技术仍是相当新的技术，Google反复宣布将其搜索结果逐步实施-按世界各地和故事本身的主题。但是，我知道您知道何时最好准备一个雪橇……此外，您网站上的内容还包含AMP故事的内容

Google的算法不会轻易忽视结构化数据（如果我们做的一切正确；请阅读更多信息），这很有可能会有益地影响整个网站在其搜索结果中的位置。

同时，让我们检查一下Google的AMP页面验证程序，从Google本身的角度来看，我们的故事是否可以视为有效的AMP页面：是的，一切正常。请注意，在此屏幕截图的底部，据说“ 在页面上找到了有效的结构化数据 ”。我们将再次与他们联系，但首先，让我们检查一下我们的AMP故事是否适合移动设备。

AMP验证器

适应移动设备

Google 提供了另一项工具进行此测试- 移动设备的优化检查。检查：

移动网站验证器

一切正常。老实说，出于某种原因，我事先知道这一点。

结构化数据可用性

如果您查看Google文档，则可以找到有关结构化数据的相当大的部分（单击图像可转到该文档）：显然，Google非常重视它们。由于我们对Google的兴趣不亚于他对我们的兴趣，所以我们不要拒绝他这样的琐事，我们会按照他的意愿去做。如果您看一下我们AMP故事的代码，那么在开头部分，您可以找到以下片段：如您所见-没什么复杂的。Google文档说，首选JSON-LD格式很好，我们可以。

type="application/ld+json"

此外，文档说首选标准http://schema.org是可接受的。

然后，一切都是显而易见且直观的。我将解释：
-可以在相对和绝对位置指定到文件的路径；
- datePublished和dateModified重合在第一出版物，和在改变的内容的情况下-我们只改变的值dateModified字段;
-所述的格式datePublished和dateModified字段被精确地，如图所示，3是在时间与格林威治小时偏移标准时间（GMT -格林威治标准时间），在此情况下莫斯科时间是指;
-作为图片（此处是poster.jpg文件），建议使用长宽比（宽度/长度）为3：4的图片，尺寸至少为696 x 928像素，建议：960 x 1200或1200 x 1600；
-作为徽标（这里是thumb.png文件），建议不断使用相同的（针对特定网站或品牌）正方形图像，并且尺寸至少为112 x 112像素（我认为200 x 200或256 x 256可以）

在检查AMP的有效性时，我们已经看到：“ 在页面上找到了有效的结构化数据 ”，但是让我们使用Google 提供的特殊工具检查结构化数据：

结构化数据验证器

如您所见，在大写字母的右上角显示：没有错误，没有警告 -看起来Google很高兴。因此，我们也这样做。

可选：社交网络数据

尽管这与搜索技术无关，但是由于我们非常了解社交网络的作用，因此我们也对它们进行一些有用的操作（但我们知道最终一切都会对我们有利）。因此，在AMP历史记录的开头部分（但是，与网站上的任何其他页面一样），您也可以放置标记来通知社交网络，例如Facebook，Twitter，Pinterest和VKontakte有关AMP历史记录的其他信息。现在，如果其中一个社交网络的用户共享了指向我们页面的链接，则另一个图片和标题（有时还有说明）会“拉起” ，如此屏幕快照中VKontakte的示例所示：

与...联系

这是此标记在页面代码中的显示方式：

社交网络标记

我认为，这里的一切也很直观。但我将解释以下内容。

空行中的标记分为三个部分。

Facebook（使用og命名空间-Open Graph），Twitter（使用twitter命名空间）和VKontakte（使用vk命名空间）。

我必须说Open Graph实际上是这种标记的标准，其他社交网络也使用它。此外，如果您没有为Twitter和VKontakte分别指定，它们还将尝试使用Open Graph。但是我们已经表明了可控的结果。

还应注意，此处的资源路径必须注册为绝对路径，但VKontakte除外-在此处，图像的路径可以同时注册为绝对路径和相对路径（在上面的示例-relative：中）content="./hero_vk.jpg"。

此外，Facebook要求创建所谓的网络应用程序，并使用其标识符（property="fb:app_id"请参见第一行），以控制通过其网络分发第三方内容（并可以在他不喜欢的情况下随时关闭这家商店）。

要创建这样的应用程序，请转到开发人员帐户的应用程序页面（如果尚未创建，则必须创建该页面）Facebook for Developers，然后单击磁贴：“ 添加新的应用程序“。给您的应用程序起任何名字（我叫我的“ Visual Stories”），创建后您将立即看到应用程序的标识符，如下面的屏幕快照所示：

Facebook Web应用程序

进一步的设置很容易理解，对于我们的目的不是必需的。

不要使用此处显示的标识符

, Facebook-, — ! , .

现在让我们检查一下社交网络标记的有效性。

Facebook的转贴调试：一切都

Facebook验证器

似乎是确定与Facebook的。
现在，Twitter Card验证程序：

Twitter验证器

有了它，一切似乎都很好。

现在检查Pinterest，即所谓的Rich Pins Validator：

丰富的引脚验证器

除了漂亮的绿色勾号外，它还写在下面：AMP有效吗？是的。但最重要的是，请注意此处的规范URL是AMP故事本身的地址。这对于在Google上建立索引至关重要，我们将在本文结尾处返回。

关于VKontakte据我所知，他们没有这样的验证器（或者说：我不知道VKontakte有这样的验证器），但是我们在实践的一开始就对它们进行了检查-一切都在那里工作。

怎么做

可以手动创建AMP故事。尽管某些CMS具有创建AMP页面的扩展，但据我所知，正是这些AMP故事尚不被支持。还有一些用于创建AMP故事的在线服务，例如MakeStories，但我尚未对其进行测试，因为我不喜欢第三方的此类依赖关系，包括代码清洁度，功能完整性和更新及时性。因此，这是指向我的GitHub存储库中的模板的链接，该模板包含基本功能（图像，视频，动画-一切都像夏日AMP的低星故事）），在大多数情况下已经足够，但是可以使用官方的组件目录轻松进行扩展。也可以克隆模板：但是，如果直接从文件系统运行代码，则代码将无法正常工作。为了进行开发和测试，必须首先启动本地服务器。如果您没有自己经过验证的，可靠的和熟悉的工具，并且拥有Chrome浏览器 -我可以推荐适用于Chrome的Web服务器。刚开始时，选择包含文件的文件夹（amp-story-template-ru）并打开本地地址-屏幕快照中显示的所有内容：由于我们已经在谈论Chrome浏览器，因此我也可以向开发人员推荐扩展名

git clone https://github.com/stmike/amp-story-template-ru.git
cd amp-story-template-ru

AMP - AMP验证器。使用它非常简单：如果您在有效的AMP页面上，则Chrome面板中的绿色图标会亮起；如果不是，则为红色，单击时将显示带有错误的行号。
Chrome AMP验证程序的扩展

模板代码的注释很好-因此您可以像Andersen的故事一样阅读它，但是我仍然要注意一些细微差别。

1.仅当使用安全协议HTTPS（非HTTP）访问AMP历史记录时，Google搜索引擎才会认为AMP历史记录（与任何AMP-page一样）有效。2.在GitHub存储库中

与熟悉的index.html文件一起，您将找到bookend.json文件。在AMP故事中，他负责故事的优美结局：重复，通过社交网络分享，有用的链接。一切如截图所示：bookend.json

故事完成

文件中的资源路径可以是绝对路径，也可以是相对路径。3.标签中的AMP故事必须参考自己。该网站的其他页面不应指向它们。这将它们（就SEO而言）与常规AMP页区分开来。这是Google的写法：在为您网站上的至少一个AMP页面编制索引之后

<link rel="canonical"...

指定规范页面