7 Tips To Get Started With AMP Stories For Your Business
We’ve all witnessed the boom of Snapchat stories. So much so that other popular social media applications were soon seen mimicking the feature. Although Snapchat was the first to introduce the feature to people and popularize it, it is actually Instagram that brings in the most users to the stories features. Now we’ve seen a lot of other applications try and attempt the stories feature to varying amounts of success such as Facebook which has seen the most disappointing turnout. Now the latest company to jump on the bandwagon is Google introducing the AMP stories.
As per Google AMP stories are an immersive visual content format that is fast and open, built specially for the users.
It’s a feature built by Google similar to Instagram stories that help content creators build short-term, visual content for their viewers. However, unlike stories features in other apps, Google AMP stories will be featured in Google’s search results.
If you take into consideration that more than 75% of all user time is spent on their mobile phone you can clearly see why Google is pushing for mobile first content. Since the whole concept of AMP was to push mobile first AMP will display an array of search results in the form of swipeable feeds. You can swipe right or left depending on whether you liked the story and would like to see more sources for the same information.
AMP stories also make it easier to share the information you’ve just received at lightning speeds. Google is hoping to capitalize on the format and draw users who are more accustomed to using other apps.
What Are The Components That Make AMP Stories?
Unlike traditional AMP content, you don’t have to rely merely on text anymore. You can include graphics, animation, videos and more. This is highly beneficial for content creators. AMP stories are made of 3 main components that you need to absolutely master if you want to rule the search engine game.
– The story itself
– The story page
– The story grid layer
The story is the main content itself while the story page is the location when your content is based on. The grid layer contains all the elements that make up the page and the story.
So you must now be wondering how to get started with AMP stories?
7 Steps To Use AMP Stories On Your Website
Code The Page
Now I’d like to say it’s easy for all companies to get started with posting AMP stories on their web pages but it isn’t as simple as that. Before you begin you need to code the regular pages of your website to AMP pages. Use the following canonical tag on the original story
<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>
If you want the entire AMP code set you can download it from the following link: https://github.com/Automattic/amp-wp
https://www.ampproject.org/docs/getting_started/create/basic_markup
Add the code to your WordPress page like you would for any other plug-in and you’re done with the first difficult step. In our opinion having a professional web design and development company in Pune to help you setup AMP pages will save you from a lot of future problems. You wouldn’t want the data on your website to suddenly disappear, do you?
Run A Sample
Before you get started with the main content you need to check if all your settings are in order. Running a test project goes a long way to check this. For this, you’ll need a test server.
To be on the safer side of things you should use a secure layer with the test server to protect yourself from any data breaches. Once your local server has been set up, try using the link https://localhost:8000/article.html
Check the layout the design and if everything looks spot on you can move on to step number 3
Create Cover Photos
Your stories can have multiple components but one single cover page. This cover photo should ideally represent what lies within the stories. To create a cover page, assign a unique ID for your cover to the first page:
<amp-story standalone>
<amp-story-page id=”cover”>
</amp-story-page>
</amp-story>
If you’ve worked with Photoshop at any point in your career you’ll know that cover photos need to be built using layers with each one built on top of the other.
The first layer will have <amp-story-grid-layer> element in the <amp-story-page>
There will be other attributes that you need to use to ensure conformity such as “fill”, “responsive”. Here is an example of what an ideal code will look like as provided by the AMP tutorials
<amp-story-page id=”cover”>
<amp-story-grid-layer template=”fill”>
<amp-img src=”cover.jpg”>
Width=”xx”, height=”xx”
Layout=”responsive”
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
You can use multiple layers by adding the “vertical template” rather than the “fill template” as mentioned above.
Additional Pages
Once you cover page is set up you can start to add other pages to your AMP stories. You can find the code you will need to enter (based on which template you choose to use) on the AMP site. There are several other resources available to help you better code for AMP stories.
Of course, if you think you need professional help you can always get in touch with the best web development company in Pune.
In this fast-paced world, your competitive advantage lasts only for a few months, maybe even less depending on the rate of technological innovation. If you want to get ahead of the competition you need to try and grab every advantage you can. Getting the best web development company in Pune, CodePlateau, to help you build and design attention-grabbing AMP stories and pages for your website is the right move to make right now. If you need more information about AMP stories or need some assistance in your web development needs, get in touch with us today.
Read all the details at: https://www.codeplateau.com/7-tips-to-get-started-with-amp-stories-for-your-business/