如何创建你的第一个谷歌网络故事

2013年10月，Snapchat在其应用程序上推出了一项名为Stories的新功能，允许用户创建短的可消费内容，并在24小时内显示。

从那时起，这项功能在Snapchat用户中获得了普及，并导致它被其他社交应用如Instagram、Facebook、YouTube、WhatsApp和Twitter采用。

2018年推出的AMP（加速移动页面）故事，谷歌网络故事由谷歌拥有，由AMP技术驱动。AMP（加速移动页面）是一个开源的HTML平台，为移动网络浏览器设计，以加快网页加载速度。

什么是网络故事？

这是一种基于网络的流行的 "故事 "格式，使用图像、音频、视频、文本和动画来创造一个引人入胜的简短的消费体验。

web 前缀标志着该内容对互联网上的每个人都是可见的，它也是短暂的或永远存在的，取决于所有者希望它如何持续。

前提条件

要开始使用网络故事，你需要一些HTML、CSS和JavaScript的基本知识，需要一个代码编辑器来编写代码，还需要一个网络浏览器来预览代码。

网络故事的区别是什么？

与传统的社交应用故事相比，网络故事在整体一致的用户体验方面是相似的，即来回点击查看上一个和下一个故事。但是，网络故事与社交应用故事的一些不同之处包括。

控制

与社交应用相反，网络故事让你更能控制故事在网络上的时间，不必担心你精心制作的故事会在24小时后过期。

出版商主持网络故事，这意味着内容、版权和规则取决于出版商的选择条款。

挣钱

在几乎所有的社交应用故事中，当故事有广告时，创作者是不赚钱的，但这对网络故事是不同的。创作者可以通过故事页面上的广告，以及品牌交易、原生广告等赚钱。

可访问性

由于网络故事生活在网络上，它们不只是生活在一个单一的应用程序中，而是可以在任何地方访问。从技术上讲，网络故事在引擎下是网页，这使它们被搜索引擎收录。

创建网络故事

创建一个网络故事是很灵活的，这取决于你的需求和专业知识。要创建一个具有自定义功能的故事，开发人员可以使用代码，而没有编码经验的人可以使用NoCode拖放工具来创建网络故事。

使用NoCode

有一些拖放工具，如MakeStories、Web Stories for WordPress、Newsroom AI等，用于创建一个故事，然后可以将其嵌入网站。

在这篇文章中，将使用MakeStories editor 。

在这里登录或注册MakeStories。

登录或注册后，通过点击CREATE NEW STORY ，创建一个故事。

填写将要创建的故事的细节。

工作室应该看起来像这样。

挑选其中任何一项。颜色、梯度、纹理、图像、视频、GIF、叠加、动画，并将其添加到幻灯片中。

通过点击 "T "图标并拖动任何排版或字体组合来向幻灯片添加文本。

接下来，通过点击幻灯片下方的加号+ 图标，添加一个新的幻灯片。然后添加一个background image ，以填充幻灯片。

编辑完故事后，再通过点击PUBLISH 按钮和publish it as a Web Story ，发布它。

使用代码

开发人员可以根据自己的需要创建定制的网络故事。用代码创建网络故事需要使用AMP HTML库。

让我们使用amp-story 扩展创建一个Hello World AMP Story应用程序。

打开你选择的代码编辑器，创建一个index.html 文件

在文件头中导入amp-story 脚本。

<!-- amp-story script tag --> 
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

为了让AMP故事利用视频，需要将amp-video 扩展添加到页眉中。

<!-- amp-video script tag --> 
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

通过CSS，我们可以使用style amp-custom 组件对故事进行造型。

/* styling for amp-story and amp-story-page component */
<style amp-custom>
  amp-story {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
  [template=thirds] {
    padding: 0;
  }
</style>

amp-story 标签包含amp-story-page 标签，这些标签显示故事。故事层还包含重要的元数据，如title 、publisher 、publisher-logo 、publisher-portrait ，以及它们的corresponding attributes 。

<!-- amp-story metadata --> 
<amp-story standalone
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg">

<!-- story first page with an image and text --> 
<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog2.jpg"
             width="720" height="1280"
             layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>

这段代码包含了故事的第一页，其中有2个网格层的图像和文本。

<!-- story second page with a video --> 
<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay loop
          width="720"
          height="960"
          poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
          layout="responsive">
          <source src="https://amp.dev/static/samples/video/story_video_dog.mp4" type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

这段代码包含了故事的第二页，有一个视频的网格层。

<!-- story third page with an animation --> 
<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog4.jpg"
             animate-in="fly-in-top"
             width="720" height="1280"
             layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
        grid-area="lower-third"
        animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>

这是故事的第三页，有2个网格层的视频和动画文本。

<!-- story fourth page with an image grid --> 
<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
             src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
             width="560" height="420"
                         layout="responsive">
    </amp-img>
    <amp-img grid-area="middle-third"
             src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
             width="560" height="420"
                         layout="responsive">
    </amp-img>
    <amp-img grid-area="lower-third"
             src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
             width="560"
             height="420"
             layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

故事的最后一页包含2个垂直排列的图像网格区。

<!-- amp-story bookend --> 
<amp-story-bookend src="https://amp.dev/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>

书尾包含故事的其他资源的链接，如社交媒体链接、新闻帖子或联盟链接。

如何使你的网络故事在网上可见

当网络故事发布后，它以下列格式出现在整个谷歌上；在Google discover ，作为carousel ；在grid view ，作为Google Search ；在image card ，作为Google images 。

如果你希望你的故事被搜索引擎收录，你需要在你的故事的SEO （搜索引擎优化）上下功夫。

然而，为了提高你的故事的流量质量和数量，你将需要考虑以下几点。

元数据

确保以下元数据非常重要；publisher 、publisher logo 、portrait poster 、title ，以便搜索引擎能够对其进行索引，从而在Google Discover ，显示故事。

链接到故事

建议将故事整合到你的网站中，通过将它们链接到你网站的其他页面。

URL格式

在为你的故事设置URL时，没有必要指定它是一个故事，例如，website.com/stories/story.html 。相反，考虑为你的故事使用与你的网站相同的目录结构和URL格式。像这样website.com/article/new-article.html 。

图片和视频描述

最好的做法是，建议添加有意义的alt text ，在适当的情况下，优化你的内容的可访问性和可索引性，由于videos 不支持alt text ，使用title 属性来描述视频是不错的。

视频字幕

在视频中使用字幕是很重要的，因为它们会自动显示在网络故事中，使它们即使在声音关闭的情况下也能使用。它们还可以使那些听不到视频中的口语的人能够理解故事，并有助于搜索引擎的索引。

内容

在创建网络故事时，重要的是提供非常优质的内容，这些内容对你的用户来说是重要的和有趣的。

总结

综上所述，我们已经了解了什么是网络故事，以及它与社会媒体故事的不同之处。你还创建了你的第一个网络故事，并学会了如何使你的网络故事在网上可见。