Understanding the structure of an AMP Story

[muniyaakter]

Time on site increased from 20 seconds with blog posts to almost 4 minutes with AMP Stories . And 87% of their readers make it to the last slide of the story. The effect of AMP Stories (Check out their presentation at the AMP 2019 Conference for more details.) How to Create and Publish Your First AMP Story To create your first story , you will need a basic knowledge of HTML and CSS . Google also recommends having an understanding of the basic concepts of the AMP framework. However, you can achieve good results without knowing all the details of AMP technology. Follow this guide, and you will have a great story to tell. First, let's try to understand the structure of an AMP Story and its main elements. An AMP Story is composed of: Multiple pages Each page uses layers to organize content (for example, vertically, horizontally, or in columns). A layer contains HTML elements and other AMP components The last page is called " bookend " and allows you to display credits and associated content. Understanding the elements of an AMP story HTML and CSS code must follow the AMP framework convention.

And the elements must nest in the following way. AMP HTML taiwan b2b leads Structure Google has a step-by-step tutorial that will help you create your first story in an hour. See what I achieved on my very first try . I highly recommend you to try the tutorial. Even if you later need to use a Stories editor, it is still useful to understand the fundamental concepts of AMP Stories. Additionally, when creating your first stories, keep the following best practices in mind: Best practices to follow Here is a non-exhaustive list of best practices to follow when creating AMP Stories: Provide a background color that matches the dominant color of your story. Choose a font color with enough contrast Don't put too much text - keep it concise The ratio for vertical images is 9/16 and the recommended image sizes are 720 x 1280 540 x 960 360 x 480 Video size must be less than 4MB and in MP4 format. If your video is too long, cut it into smaller pieces and display one piece per page. Advanced Tips for AMP Stories Video: Automatically go to the next page If you have decided to use a video in your Story, it is recommended that it automatically advance to the next page and not play it in a loop (unless you want to create a " boomerang " type effect).