Post by Jane Kolacki, Content Analyst
Google has recently announced the release of AMP Story, an addition to the AMP Project. This addition is a new, mobile-focused content format to deliver content as visual, tap-through stories. Furthering the push for a mobile-first Web, Google created AMP Stories to give content publishers a visual form of storytelling. This AMP Story addition follows the current “stories” trend, such as what Snapchat and Yahoo News Digest platforms provide. It will provide users with a more immersive search experience by allowing them to view content by tapping through images, videos, and graphics.
HOW DOES IT WORK?
“An AMP Story is a complete AMP HTML document that includes pages, but within the pages are layers, and then within the layers are AMP & HTML elements such as media, analytics, and text.”
Although AMP Stories are part of the AMP Project to provide a seamless mobile experience, Stories are not intended to be visual versions of existing AMP page content. Google suggests that content should be created exclusively for AMP Stories and should be fulfilling enough to exist on its own. AMP page and AMP Story content could be related, but an AMP Story should be able to standalone in the mobile SERP. Google further describes the difference between publishing an AMP Story versus and AMP page:
“Say a publisher has a long-form analysis article about college admissions data. Then, say they have a companion piece that’s an interactive experience letting people play with the data through charts and other visualizations. It would be incorrect to call the long-form piece the canonical for the interactive. They each stand on their own, although being related.”
AMP Story content should consist of topics that users can easily understand by clicking through images, descriptions, short videos, and lists of quick content that flows well as short storyline. Here are a few examples of AMP Stories, from various publishers:
AMP Stories exist as their own URLs, and although Google does not explicitly require HTTPS URLs, it is best practice to use the HTTPS protocol to ensure AMP pages take full advantage of all AMP features. Some AMP elements only load correctly using HTTPS, such as videos and iframes. Due to the nature of AMP Story content, most likely containing elements such as video clips, Performics strongly recommends implementing AMP content using the HTTPS protocol.
AMP Stories are comprised of individual pages, which are composed of individual layers that contain basic HTML and AMP elements (such as media, text, and data), like shown below:
The entire story is represented by the amp-story component, which serves as a container for all the pages in a story. The amp-story component is also responsible for creating the UI shell, including the handling gestures and navigation.
AMP Stories are created by adhering to the following steps:
- Add the amp-story in the head since the entire story is represented in this component
- Add the amp-story element to the body of the page and specify the mandatory standalone attribute
- Create a cover page that has layers; layer 1 is the image that serves as the background, layer 2 is the title and byline of the story’s content, and so on
- Repeat the process for each page within the AMP story
- Add animation elements
- Create a bookend with the specific bookend-config
Specify the document is an AMP Story
Like all custom components, you must add the associated script for the component to the AMP document.
The associated AMP Stories script is required in the <head> section to specify the document is an AMP story, and the <body> element must have only one child, the <amp-story> element. This means that there can be only one AMP Story per URL.
Creating pages for the AMP Story
In order for an AMP Story to be valid, at least one page needs to exist. A page within an AMP Story is represented by the <amp-story-page> component. One or more page components can exist, each containing the individual screens of a story. The first page you specify in the document order is the first page that displays in the story. To create a page, add the <amp-story-page> element as a child of amp-story, and assign a unique “id” to the page.
Within the page, there needs to be at least one layer. Layers are stacked on top of another, with the first layer being the bottom layer, and the next layer on top of that. To create a layer, add the <amp-story-grid-layer> element as a child of the <amp-story-page>. If the image should fill the screen, specify this with the template=”fill” attribute for the amp-story-grid-layer. Inside the layer, add an <amp-image> element for a .jpg file, and make sure it’s responsive (i.e., layout=”responsive”) with the image’s dimensions.
Types of Template Attributes
Although this example includes the “fill” and “vertical” templates, a variety of template attributes exist that indicate how the elements will be arranged in the AMP Story:
- Fill template: fills the entire screen; best used for backgrounds, including images and videos
- Vertical template: laid vertically across the screen; can have multiple layers from the top to bottom of the screen
- Horizontal template: elements are laid out horizontally; can be used to stack multiple layers horizontally
- Thirds template: divides the screen into equal rows by thirds, allowing you to place content in each area
Content Element Options
Layers can contain a variety of media and text content elements, such as:
- Header (<h1>): A heading usually that exists at the top of the grid.
- Text (<p>): Bylines are strings of texts that can occupy in one, or all, of the thirds of the grid.
- Quotation (<q>): Quotation elements, which can also exist at the top, middle, or bottom of the grid (if specified).
- Image: Images should be responsive and contain the size specifications.
- Audio: Audio can play for the entire duration of an AMP Story, or for a single page. To play audio, add the background-audio attribute to the <amp-story-page>
- Video: To add a video element, add the required script for the amp-video component within the <head> section. Use the template= “fill” attribute and specify the responsive dimensions. Specifying a poster image (a preview image to appear before the video starts) and setting the video to auto play are both required steps for videos within AMP Stories.
- Animations: Enhance an AMP story by applying animation entrances to elements inside a page. For example, you can make your title fly in from the left, or drop into the page, or fade in, and so on.
Creating a Bookend
This last “bookend” screen wraps up the story, and provides social sharing and related links to the story, so users can share the story or dive further into other content on the site. The information on the bookend screen comes from a JSON file specified by the bookend-config-src attribute in the <amp-story> component. To create the bookend, add the bookend-config-src attribute pointing to the associated .json file in the amp-story-element.
- Always specify a background color for each page, even those with background images; if for some reason the image or video doesn’t load, a background will still appear
- It should allow a smooth transition to the image or page
- Make sure text is always readable over the background by choosing a contrasting color
- Add a bit gradient overlay between the image and text to contrast the text and image
- Limit text to no more than 1-2 sentences
- Always specify a poster image that displays until your video loads
- Recommended poster dimensions are 720w x 1280h
- Videos should be no larger than 4MB; consider splitting longer ones over multiple pages
- Each segment should be no more than 10 seconds
- If possible, use HLS video, with MP4 as a backup (note: HLS is not supported by Chrome for desktop, so use MP4 backup for desktop traffic)
- Videos are always vertical, with an expected aspect ratio of 16:9
The first question on many marketers’ minds is how Google will treat AMP Stories, compared to traditional HTML pages in its mobile search results. So far, Google has made no explicit indication of how it will rank AMP Stories. Although Google continues to push prioritizing site speed as a ranking factor, and adding special markup to search results to increase mobile friendliness, the performance improvements that come with AMP are bound to confer some amount of organic search benefit. So far, though, there is no evidence that Google will give AMP Stories preferential treatment. Although search engines do not explicitly state that they rank AMP Pages and Stories higher than other pages for the sole reason it that it’s “AMP” content, if a brand’s mobile experience isn’t as fast and seamless as AMP content, users will most likely migrate to competitors’ sites that offer superior performance.
Content should be created exclusively for AMP Stories, and it should be able to standalone. If publishers simply repurpose existing content to use in AMP Story format, there could potentially be canonical and content-consistency issues. Content that is “a highly compelling and visual story that you can tell in a few slides”, will gain higher engagement if formatted as an AMP Story. For example, if information can be communicated to an audience better through images than text, it would reap more benefits as an AMP Story. Users would be able to absorb content more quickly and efficiently, improving user experience.
Visuals catch an audience’s attention more easily, and AMP Stories within the SERP would be no exception. Users would more likely click through to visual content in the SERP, increasing CTR. Other performance metrics such as Time Spent on Site and Bounce Rate would also improve, both being factors that Google takes into consideration when deciphering a page’s rank.
AMP STORY TEMPLATE
The following markup is a decent starting point or boilerplate. The content in the body creates a story with two pages. In this example, each page has a full bleed background image, with a simple string of text on top of it
IMPLICATIONS FOR BRANDS
Since the AMP Project is designed to push for a mobile-first Web, Google will only continue to create more additions to this project. Now with AMP Story, it is more important than ever for brands to implement a mobile-first strategy.
Should brands be using AMP Stories?
Brands should only use the AMP Story content format if the content being published aligns with the format of visual storytelling. The risk of duplicate content and canonicalization issues can occur if AMP Story content isn’t independent of AMP page or HTML page content. If brands have content that would provide a better user experience in a quick, visual format, then the AMP Story format would be beneficial to utilize. Fitting text-heavy, long-form content into a tap-through content format would actually cause user frustration, and lead to negative impacts for the page.
BENEFITS OF AMP IMPLEMENTATION
The benefits of using AMP Project content formats are explicitly for mobile rendering speed. The wider adoption of AMP will likely create user demand for AMP frameworks when selecting results in the search engine results pages (SERP) knowing that their usage will be a more enjoyable experience. It’s possible too that Google and other search engines will begin to favor these faster-rendering pages for the exact same reason in the near future.
- Faster mobile pages
- Mobile-specific framework
- Possible positive mobile ranking signal
- Increased user experience
Google’s AMP Story addition to its AMP Project initiative shows that the push for a mobile-first web is stronger than ever. This update allows brands to share content in a new, visual way in the mobile SERP, while providing users with a better user experience if the content correctly aligns to the visual format. In order for brands to gain success with AMP Stories, the content should naturally communicate easily through images, and be independent of existing content. Performics recommends creating AMP Stories using HTTPS URLs, and to follow the best practices when creating the content.
For more information on the implications of AMP Story, contact Performics today.