回到主页

google搜索引擎优化-制作你的第一个AMP故事:Google对Snapchat和Instagram的回答

AMP Conf 2018在阿姆斯特丹举行的众多激动人心的公告中引入了AMP Stories,这是一种类似Snapchat和Instagram Stories的新格式,通过新的加速移动页面(AMP)组件实现。

与Snapchat和Instagram Stories不同,它们是各自平台中的功能,AMP Stories将出现在移动Google搜索引擎优化结果页面(SERP)中。与AMP项目的其他部分一样,其他平台也将利用该格式。这些为用户提供了极具吸引力的幻灯片体验,其中包含视频,音频,图片和文本等丰富的媒体功能,其格式已为移动用户所熟知。

兴奋了吗?我是,但是,在撰写本文时,它尚未向公众推出。amp-story组件仍处于“实验”和开发模式,必须为AMP Dev Channel中的用户启用才能开始使用。

一组精选的预先批准的发布商(包括Microsoft,Wired和CNN)已经在尝试使用该格式,可以在Google体验中找到导航到g.co/ampstories并开始搜索相应发布者的名称。

例如,搜索“连线”将播出连线杂志为其网站设计的一系列AMP故事。

如果您有兴趣在自己的网站设计上试用AMP Stories,可以在这里申请加入原始试验。

我们应该期待AMP Stories在不久的将来向公众推出,为用户提供一种真正独特的方式来与Google搜索和您的内容进行互动。

值得为这些变化提前做好准备。为了帮助您的内容管理系统(CMS)做好准备,我已经创建了一个您可以使用的教程。

AMP故事的优势
与Instagram和Snapchat的产品相比,AMP Stories有几个优点:

它适用于Google搜索,可能会反映基于关键字的意图,而不是依赖于社交发现。
它独立于平台,可能是Twitter或Pinterest决定在自己的平台中使用的格式。
它可编写脚本,适用于完整或半自动化的故事创建。
让我们来探索如何将我们的第一个AMP故事编成脚本。

你的第一个AMP故事
正如您所料,AMP Story的基础是AMPHTML页面。

您可以使用上面的样板模板作为起点。

(注意:当您实际将脚本放在一起时,不应包括在本专利的其余部分中在标签中看到的空格 - 需要将它们删除。使用较长的脚本示例作为正确语法的模型。)

由于amp-story是AMP的扩展组件,因此您需要在<head>中添加一个额外的<script>标记:

此时,我们已准备好开始实际构建AMP故事。

创建AMP Story三明治

有三个主要标签组成AMP故事,你可以将它们夹在一起以创造整体体验:

  1. <amp-story>
  2. <amp-story-page>
  3. <amp-story-grid>

您首先将<amp-story>标签作为面包。剩下的就是你的冷盘。<amp-story -page >封装在<amp-story>中,然后<amp-story -grid >封装在<amp-story -page >中

在给定的超文本标记语言(HTML)页面上只有一个<amp-story>标记。

正如您所料,<amp-story-page>代表AMP Story中的单个“幻灯片”。由于您的AMP故事中可能有多个幻灯片 - 这就是重点 - 您将在<amp-story>中拥有多个这些标签。

最后,在每个<amp-story-page>中,您将拥有一个或多个<amp-story-grid>标签,一个基于CSS Grid布局的标签,用于在每个单独的幻灯片中排列各种元素。

这是构建您的第一个AMP故事背后的基本概念。现在让我们更深入地了解一些可用的其他配置和选项。

<amp-story>

我们从<amp-story>元素及其结束</ amp-story>标签开始。这将是我们HTML页面的<body>中允许的唯一元素。

我们需要添加独立属性 <amp-story>的要求,然后还有几个可以附加的可选属性:

  • 书夹,配置-SRC。我们可以使用它来指定一个javascript对象表示法(JSON)端点,提供有关社交共享选项和相关链接的信息,这些信息将在AMP Story的结束屏幕上找到。(我们将回到这一点。)
  • 背景音。 我们可以指定一个将在整个故事体验中播放的音频文件。例如,这可能是MP3文件。

最后,您的<amp-story>标签可能如下所示:

amp-story page>

我们的AMP故事的每张幻灯片都需要一个< amp-story-page>。每个元素都有一个必需的id属性,每个页面都应该有一个唯一的值。

然后我们可以选择包含两个可选属性:

  • 自动提前了。 我们设置了一个时间单位,迫使单个幻灯片自动前进。例如,如果我们设置 auto-advance-after =“5s”,经过五秒钟后,AMP Story将前进到下一张幻灯片。
  • 背景音。我们可以在查看特定幻灯片时设置要播放的音频文件,这与 <amp-story>级别使用的属性不同,该属性将在整个AMP Story体验中播放。

例如,可能如下所示:

现在我们有一个或多个<amp-story-page>元素,我们可以开始指定它们的内容。我们可以使用<amp-story-page>中的其他元素,如<h2><p>和特殊的<amp-story-grid>元素。这些元素从下到上分层,文档对象模型(DOM)中的第一层位于底部,最后一层位于顶部。

<amp-story-page>中的每个元素都能够使用以下几个动画属性之一将自己独特的动画应用于它:

  • 动画项。 如果您要为元素设置动画,则这是必需的,因为它表示入口动画。以指定为值,如淡入和左飞。有关完整列表,请参阅文档有预定义的动画可。
  • 动画式持续时间。如果要缩短或延长所述动画,可以表示时间单位并指定动画持续时间的长度。
  • 动画式延迟。您可以通过指定时间单位来延迟动画的开始。
  • 动画功能于后。 您可以使用它来表示给定 <amp-story-page>中序列中动画的顺序。给出各种动画元素id属性,然后将所述id指定为animate-in-after的值

例如,这看起来像这样:

现在,让我们在<amp-story-page>中探索一些更高级的元素分层,并查看<amp-story-grid>。

<amp-story-grid>
在我们可以包含在<amp-story-page>中的许多标准HTML或加速移动页面HTML(AMPHTML)元素中,有一个特殊的<amp-story-grid>元素可以帮助构建类似于CSS网格的图层,一些易于使用的预先设计的模板。

我们可以使用<amp-story-grid>的四个预定义模板:

填。显示第一个孩子出血。这对于使用图像非常好。
垂直。从上到下垂直分层元素。
水平。这会从左到右分层元素水平,并可占据 <amp-story-page>的所有垂直空间。
三分之二。此模板将您的屏幕划分为三行相同的大小。您可以在每行中放置不同的内容。行被表示为上三分之一,中三分之一和下三分之一。
与往常一样,关于此的AMP文档是一股清新的空气,如果您需要帮助,它可以很好地直观地表示这些模板。

例如:

在上面的示例中,我们使用了两个<amp-story-grid>元素。第一个是使用填充模板将全屏图像显示为背景。

第二种是使用垂直模板在该图像的顶部堆叠标题和子标题。

这是一个简单的例子,但你绝对可以使用<amp-story-grid>做一些更有趣的分层。

书挡JSON文件端点
值得一提的是,我们可以创建一个名为bookend的JSON端点,它允许我们指定要在最后一张幻灯片上显示的内容。

它还可用于指定AMP Story可用的社交共享选项。如果您熟悉JSON,则配置非常简单。

对于社交共享功能,我们可以指定共享提供者的JSON对象,我们在其中指定我们将启用哪些提供者为true:

我们还可以在相关文章对象中指定要显示的链接数组,每个链接都带有标题,URL和缩略图:

我们将它们放在一个JSON文件中,并在<amp-story>bookend-config-src属性中调用它。

把它们放在一起的一个例子

此时,您应该掌握创建自己的AMP故事所需的所有知识。作为一个例子,我创建了一个演示,将Barry Schwartz的搜索引擎圆桌会议的每日搜索论坛重点转换为格式。

所有文章
×

还剩一步!

确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

好的