网页之家制作你的第一个AMP故事:谷歌对Snapchat和Instagram的回应

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

不像Snapchat和Instagram的故事,都是在各自的平台上的功能,AMP的故事将被发现在手机谷歌搜索引擎结果页面(SERP)。与AMP项目的其余部分一样,其他平台也将利用这种格式。它们为用户提供了一种高度吸引人的幻灯片体验,具有丰富的媒体特性,如视频、音频、图片和文本,其格式为移动用户所喜爱的格式。

这里有一个一分钟的视频介绍加速移动页面(AMP)故事格式:

兴奋了吗?是的,但是可惜的是,在我写这篇文章的时候,它还没有向公众推出。AMP故事组件仍处于“实验”和开发模式,必须在AMP开发频道中为用户启用才能开始。

包括微软、有线电视和CNN在内的一些预先批准的出版商已经开始试验这种格式,你可以在谷歌中找到这种格式,只要点击g.co/ampstories,然后搜索各自出版商的名字就可以了。

例如,搜索“连线”将会出现一系列的AMP故事,这是《连线》杂志为他们的网站设计的。

如果你有兴趣在自己的网站上试用AMP故事,你可以在这里申请加入origin试用。

我们期待AMP故事在不久的将来向公众推出,为用户提供一种真正独特的方式与谷歌搜索和你的内容互动。

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

AMP故事的优势

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

它将与谷歌搜索一起工作,并且可能会反映基于关键字的意图,而不是依赖于社交发现。

它是独立于平台的,可能是Twitter或Pinterest决定在自己的平台上使用的格式。

对于完全或半自动化的故事创作来说,它已经具备了编写脚本的能力。

让我们一起探索如何编写我们的第一个AMP故事。

你的第一个安培故事

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

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

(注意:当你把脚本放在一起的时候,你在这一栏剩下的标签中看到的空格不应该被包括在内——它们需要被删除。使用较长的脚本示例作为适当语法的模型。)

由于AMP -story是AMP的一个扩展组件,您将需要添加一个额外的< script >标签到您的< head >:

在这一点上,我们准备开始实际建设AMP的故事。

制作一个AMP故事三明治

安培的故事有三个主要的标签,你可以把它们夹在一起来创造整体的体验:

< amp-story >

< amp-story-page >

< amp-story-grid >

你以< amp-story >标签作为你的面包。剩下的是你的冷盘。< amp-story-page >封装在< amp-story >内,< amp-story-grid >封装在< amp-story-page >内。

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

如您所料,< AMP – Story -page >表示一个AMP故事中的一个“幻灯片”。因为你可能会有多个幻灯片在你的AMP故事-这是某种意义上-你将有几个标签< AMP故事>。

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

这是建立你的第一个AMP故事背后的基本概念。现在让我们更深入地研究一些可用的附加配置和选项。

< amp-story >

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

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

bookend-config-src。我们可以使用它来指定一个javascript对象符号(JSON)端点,提供有关社交分享选项和相关链接的信息,这些信息将会在你的AMP故事的最后屏幕上找到。(我们会回到这个话题。)

background-audio。我们可以指定一个将在整个故事体验中播放的音频文件。例如,这可能是一个MP3文件。

最后,您的< amp-story >标签可能看起来像这样:

< amp-story page >

我们需要一个< AMP故事页>为我们的每一张幻灯片的AMP故事。每个元素都有一个必需的id属性,该属性对于每个页面都应该有一个惟一的值。

然后