Before we go into the details, we first need to understand what AMP stories are. AMP or Accelerated Mobile Pages is a Google-backed project which was designed as an open standard for any publisher to make pages load faster on mobile devices. In February 2016, Google integrated AMP listings into its mobile search results. Pages with AMP coding appear in special places in the search results or appear with a special AMP designation. AMP sites are normal HTML5 with a set of regulations and restrictions to make the webpage lightweight and quick loading. An AMP is not the same as a mobile site. A particular website can have a desktop site which is the preferred version, a mobile site and an AMP version which are each designated separately as alternate versions.

AMP stories are similar to those Instagram stories that people publish, designed with mobile websites in consideration. The content created with AMP does not get added to an app, though. It appears directly among search results. The AMP is an open-source project that was designed to make mobile searches more convenient and quick. Since people spend more time on apps than on websites these days, AMP stories can take advantage of this to push viewership of webpages. With AMP, the content of webpages loads extremely fast making it more convenient than apps. Also, the users can go through swipe-able stories that are easy to navigate, instead of regular search results.

With a little research, we have come up with some AMP stories tips for you. Here are five best practices you can implement to meet the AMP stories requirements for your website.

  1. Complete and engaging stories

    As the name of this feature itself is “stories,” it is clear that its purpose is to convey a message in the form of a story. It is essential to make your AMP stories engaging and complete by themselves. The story should be able to keep the reader engaged in it without having to click on other links to get more information. The stories may contain visual aids and audio as well, but they should be accompanied with relevant text that conveys the message precisely and clearly. Even if audio is associated with the story, it is best to have text captions to the audio, in case the user is viewing the story on mute. An AMP story that is only images or only text fails to hold the viewer’s attention. It is best to have an optimum combination of different media to deliver information.

  1. Asset quality

    The importance of asset quality and formatting cannot be overlooked when creating an AMP story. The quality of the pictures and videos added to the story must be high but also quick to load. Low-resolution assets make viewers lose interest. The formatting of these assets is also equally important. Landscape orientation of pictures usually does not work well on the mobile screen. The story gives a more immersive experience when the images are properly cropped, in portrait mode and full-bleed. Also, any assets used must be relevant to the story and should not look out of place. Using subtle animation styles in the text or images can also enhance the story’s look but making sure not to overdo the animation is also crucial.

  1. Video and poster attribute

    Using short videos to aid the story, instead of just still images, can make it all the more engaging. The best format for a video would be to use 720p, with an aspect ratio of 16:9 or 3:4. Using high-resolution videos beyond this unnecessarily delays the loading time of the story without much improvement in video quality. Videos that have attached audio should be captioned so that they make sense even when the user is viewing it on mute. Another important factor in video stories is to specify a poster attribute. A poster is an image that appears on the user interface while the video is loading. This is usually the first frame of the video, but you can choose any other image that is relevant and representative of the upcoming video. The transition from the poster to the video should be smooth.

  1. Text usage and placement

    The text used in an AMP story is one of the most important elements of the story. Although it is true that you should use as little text as possible to ensure that the user can read it at a normal pace, yet whatever text you use should be properly formatted. Before all else, the text should be such that it can convey the message in as little words as possible. Next, the text style that you use should be legible. The font size and color should make the text stand out against the background. Highlighting the text with a contrasting color can also make the text easily readable.

  1. Using links thoughtfully

    You can embed your story with other relevant content as an attachment as well. Or you can add links to webpages that contain more information on the topic. But embedding these attachments and adding links must be done in a way that they merge with the entire story and don’t become an eyesore. The embedded attachments should blend well with the theme of the entire AMP story. Also, when links are added, they should be added in a way that the slide with the links looks like a continuation of the story, surrounded by related content.

Following these AMP stories, best practices will take you a step further in making your website more mobile friendly.


While we’re on the subject of AMP world, don’t forget to see the Top 5 Reasons Your eCommerce Website Will Need AMP in 2019!

Leave a Comment