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.
What Are AMP Stories?
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.
- Glitz it Up with Animation
There are multiple animation elements you can use on your AMP stories to get the Wow! Factor. However, unlike social media apps, you can’t just drag and drop the elements in your AMP stories. You will need to code them in. There are plenty of animation presets already available like “fade-in” “fly-in-right”, “pulse”
- Close Out Story
You’ll need to effectively close out your story and provide your consumers with additional links from your content or related content. This last screen is known as the “bookend”.
- Validate Your AMP File
Before you upload the pages you will need to validate them using the Chrome Devtools Console. Remember if AMP pages are not validated they are not considered as AMP and do not give you any advantages. There are 2 methods of validating AMP files the other being using the AMP validator browser extension.
Why Should Businesses Use AMP Stories?
The golden rule of any business is to stay ahead of the competition. AMP stories are the next big wave to give you an edge over the competition. Also, it is now known that users are more accustomed to seeing short-form visual content which can be seen by how much more popular online streaming platforms have become. Good storytelling leads to better attention-grabbing of the users.
Using Stories To Push Products:
Who says that traditional marketing metric cannot follow good storytelling guidelines? In fact, 92% of consumers surveyed by the SEO-Journal responded that they wanted their advertisement to tell a story rather than just hit them with facts.
Reducing Page Load Times
Speed is good. The faster you are able to deliver the right content to your consumers the better. They’ll be invested in the conversation and look forward to it more. This undoubtedly leads to a lower bounce rate, higher conversion rates and not to mention you’ll also receive a slight boost in rankings courtesy Google. But that’s only if you work with the right web development companies in Pune like CodePlateau who are accustomed to delivering AMP pages to their customer.
Getting More Creative
Because of the way AMP pages are built you have more opportunities to experiment with creative styles. The design is an important element when it comes to potential customers picking your product or service over the competition.
With AMP pages you can add a whole lot of features and that can add a certain oomph to your content. While you’re at it you should also push your viewers to your AMP content until they become more accustomed to it. Links, buttons to promote your AMP stories in your content won’t hurt.
Better Rankings
As I’ve mentioned before AMP pages help with search engine optimization. If your website ranks well on all parameters important to Google it’s obvious they’ll be willing to give you a push up the results.
Conclusion
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.