Why Companies Can not Ignore Google AMP Stories

The Accelerated Mobile Pages (AMP) project was launched by Google in February 2016 with the goal of putting mobile performance above anything on the web.

And Google has certainly achieved its goal.

AMP manages more than two billion mobile pages and 900,000 different domains. Pages with AMP now load twice as fast as pages without added AMPs.

If you think you can ignore AMP, you are wrong. AMP has impressive features and benefits that can move your content creation efforts to the next level.

If you do not take the time to understand or use AMP stories, you miss something.

Here's why businesses can not afford to ignore them.

But first, let's analyze what AMP stories really are.

What is AMP Stories?

Google's AMP story features allow publishers to create content that is very similar to Instagram stories designed for mobile websites.

But content created with AMP is not added to an application. Instead, it is placed directly in the search results pages.

AMP is an open-source project created in response to the fact that mobile users now spend more time on applications than on websites.

77% of their time, to be exact, according to Statista data.

With AMP, the content is extremely fast, which helps mobile users stay on these pages and off their apps.

Instead of the usual search engine results, users get an easy-to-read drag-and-drop story. The UX is a bit similar to the popular dating app, Tinder.

AMP partners include CNN, Mic, Wired, The Washington Post, Mashable and People.

Beyond loading at lightning speed, AMP Stories can also be shared in the same way as shared news articles.

Here is a breakdown of their operation.

Operation of accelerated mobile pages

Today, JavaScript can be used on almost any web page to edit any part of it.

But it also slows the loading and rendering of pages. And since the speed of the page is so important (we'll talk about it later), it's something you want to avoid.

AMP only allows JavaScript to run asynchronously on pages, which means that JavaScript will not block any other code on your site.

JavaScript written by the webmaster is forbidden on AMP articles, and interactive pages must contain only custom AMP elements.

Custom items may consist of JavaScript, but they must be specially designed to ensure that they do not result in any restriction on the overall performance of a page.

The third-party JavaScript language is also allowed with AMP, but it can not block rendering of the page.

AMP does not allow any extension mechanism to block page rendering, but it can be used for Instagram integrations, tweets, or viewers.

For this reason, users can browse mobile-optimized content on AMP pages without all the unnecessary distractions.

As you can already tell, there are many reasons why AMP stories grow quickly.

Why should you use AMP stories?

Some of your competitors probably use the AMP systematically.

If you are not, you might as well accept defeat.

On the other hand, if you start using AMP protocols before your competitors, you differentiate yourself as a favorite in your industry.

Why? AMP features can help you tell stories and the narration is powerful.

The narration is powerful

Everyone loves a good story.

At least 100,500 digital words are consumed by the average US citizen in a day, while 92% of consumers want to see and read advertisements that look like stories.

There is evidence that suggests that people see AMP stories much longer than traditional alternatives.

This may be due to the fact that shorter loading times make it easier to display more content over a longer period of time.

AMP allows you to tell stories in a powerful, fast and unique way. And when you tell a good story, you can reach your audience effectively.

Respond to the needs of your readers, give each piece an interesting arc, and do not forget to add all the necessary data to prove your point of view.

The speed of the page also plays a big role in the success of MPAs.

Page speed is important

The speed of the site is important. Pages that take a long time to load can kill your conversions. If your site takes a long time to load, you'll see fewer and fewer conversions.

Fortunately, AMP pages load about twice as fast as ordinary mobile pages.

With such fast loading times, customers will be able to access your content faster than ever before.

This is great news because the probability of a rebound increases by 32% if a mobile page takes three seconds to load.

If it takes five seconds, the probability of a rebound increases by 90%.

Due to the fast loading times provided by AMP, users will be more likely to go ahead and buy from you.

When they know that they can interact with your brand without any friction or waiting time, they will be ready to trust you with their money.

To make the case of AMP even stronger, Google tends to speed up the loading of mobile pages by treating them in a special way and ranking them better.

[youtube https://www.youtube.com/watch?v=-H1DnE6rhJY?feature=oembed&w=700&h=394]

Take advantage of AMP's creative design features to keep viewers captivated and intrigued.

Enjoy creative design

In case you did not already know, design is important. AMP pages allow you to add creative elements that take your content to the next level.

Do not be afraid to add forms, buttons, videos, images, shopping options or links to your AMP stories.

Your site will be much more stylish and functional, offering you many opportunities to attract, attract and retain the attention of your viewers.

AMP can give your site the SEO boost it needs.

The AMP helps SEO

MPAs give your site enormous visibility.

Right now, a page with AMP protocols will not increase the page authority or domain authority of your site.

That being said, this gives the page a chance to appear in the AMP carousel that appears above traditional Google search results.

This means that if your site appears in the carousel, it will appear before placement number one.

It's no better than standing before number one, is not it?

This can give you a big boost in the natural search results you need, bringing more traffic to your site than ever before.

Next, let's break down all the moving parts that make MPAs so beautiful.

AMP History Features Overview

Traditional AMP content is text-only, but the new and improved format includes videos, animations, and images to provide users with a complete experience.

For publishers you can:

Embed your stories through apps and websites
Accessing stories via the desktop and mobile
Telling Stories Without Having to Have a Tonne of Technical Knowledge

The best part? MPAs are free for everyone.

Let's examine all the parties involved in carrying out an AMP story.

Parts of an AMP history

Before you can create your first AMP story, you must master all of its components.

Each story is structured with individual pages. Each page consists of individual layers consisting of a combination of HTML code and AMP elements.

Here's what the components will look like when they are added to your code:

History = history of amp
Page = page-history
Layers = layer-story-grid

When it is added to a page, the code may look like this:

The story component contains your entire AMP story, while the page component contains each specific page in your story.

The layers component contains all the elements present on a page.

Here are some examples of some AMP stories.

Examples of Google AMP Stories

It's no secret that Google will link AMP versions of web pages to traditional versions at any time because Google prefers them.

For this reason, each AMP partner used the service feature based on its strengths.

The most popular AMP adapters were news organizations because they could use SAPs to transmit information quickly and efficiently to researchers.

Here are examples of how CNN used AMP stories to share and amplify the latest news:

Some publishers have even written AMP stories on the same type of content (with the same cover photo):

But MPAs are not limited to information sites. You can turn your detailed content into AMP if you wish. And you should.

What do people say about AMP, globally?

What people say

Rudy Galfi, the AMP Product Manager, recently told AdWeek that "AMP" articles should be a really attractive ad format.

But what does everyone seem to think about publishing content with AMP?

Stuart Shaw, editor of the Econsultancy, says that while AMP pages require some maintenance, the benefits they provide are worth it.

In April 2018 he wrote:

"Of course, all you have done is improve things for your mobile users – and only on the few pages on which you have implemented AMP … But optimization does not consist not to make things perfect in an instant.This must adapt to the ever-changing "techscape" that's research. "

In general, reactions to AMP on sites like Twitter are rather positive. Some people call AMP one of the most important trends of 2018.

Others really love the recent changes and updates from AMP, like Gumpo, who says, "We like this as a way to deliver interactive content with rich visuals."

In September 2017, SEO company Optimizing had this to say about AMPs on Facebook:

"We love accelerated mobile pages (AMP) here at optimization."

The Search Engine Journal's experts have some impressive tips on how implementing AMPs for ecommerce sites can help improve user experience and increase conversions. "

Overall, it looks like AMP is here to stay.

Here's how you can start creating your own AMP stories.

How to get started with Google AMP Stories

Now that you know what AMP stories are, how they work, why you should use them, and what people are saying about them, you can get into creating your own.

To get started, download the code.

1. Download the code

In order for Google to become aware of the AMP version of your articles, you must edit the code of the article page.

The original article must have the following tag, which is a canonical AMP tag:

If you want all the AMP code you need from a page, click on the GitHub page of the wp-amp and select the "Download ZIP File" button.

Then install this code on your WordPress site as any WordPress plugin.

You can also directly download the following code from AMP and save it to a file with the .html extension.

Once your code has been downloaded and added, you can run the example page.

2. Run the example page

To test your example page, you must access your files from a server.

There are several ways to create a temporary local Web server to help you test it:

AMP recommends using HTTPS, here, for added security.

After setting up a local web server, you can access your sample article by accessing this URL:
http: // localhost: 8000 / article.html.

If everything looks good, go ahead and create the cover page.

3. Creating the cover page

Your cover page is represented with the tag .

You may have more than one component in a story, which contains each of the individual screens for that story.

But the first page you specify will serve as the cover page.

To create a cover page, assign a unique identifier for your cover on the first page:

This code acts as a shell for your cover page. But you must specify at least one layer to make it valid.

Layers in AMP work in the same way as layers in graphics: they consist of different elements stacked on top of each other.

In the example above, the first layer contains the image that serves as a cover photo, while the second contains the title and line of the story.

To create the first layer, add the element to .

If you want the image to fill the screen, add the template = "fill" attribute to the amp-story-grid-layer tag.

In the layer, add the item to a cover.jpg file and make sure it is responsive by adding the layout = "responsive" tag.

This is what the code of the first layer should look like when all is said and done:

Check how the page displays before proceeding.

To add a second layer, use the "vertical model" instead of the "fill pattern" found here.

Once your cover page is complete, you can add more pages.

4. Add more pages to

The addition of multiple pages is similar to adding your example page and cover page.

The code you use will depend on which model you choose.

To add text to a layer with the vertical model, add something similar to the following:

An element

containing the title
A sensitive amp-img
An element that contains all your text

Your new page should release something like this:

You can also add animated elements to enhance your story.

5. Adding elements of animation

If you want to take your story to the next level, you can drop your title on a page, fade, whirl, and so on.

The AMP frame currently includes the following predefined animation elements:

If you want to add an animation to an element, add animate-in = "animationpresetcodehere".

For example, to use pulse animation, your code might look like this:

Preamble this text in the page

Once you've added animated items, you're ready to create the bookends.

6. Create the bookend

The bookend is the last screen that summarizes your story.

You can also use it to add related links or social sharing links.

In your amp story elements, add the bookend-config-src attribute. Then point it to the bookend.json file.

Your bookends should look like this when you're done:

Finally, you are ready to validate your HTML HTML.

7. Validate your HTML HTML

There are several ways to validate your AMP pages.

For example, you can use the Chrome DevTools console:

Open Your Page In A Browser
Add "#development = 1" to your URL
Open the Chrome DevTools console and look for validation errors.

You can also use the AMP Validator browser extension.

Both tools will show you problems with your AMP code and describe ways to repair them.

Here are three quick tips to keep in mind when creating AMP stories.

3 quick tips

To create a great AMP story, you need to add videos, text, pictures, or anything above.

Here are some quick and easy ways to save yourself time in the process.

for videos

It is not uncommon to add a click-to-play overlay on videos on the web. You can use it to add a custom play icon that matches the style of your page with the title of your video.

AMP stories do not come with this feature added automatically.

However, you can easily add that with a tag like:

For text, you may want to manage size or adjustment for the text to fit a specific area.

For the text

The amp-fit-text component allows you to manage the size or fit of text in a specified area, which is perfect if you do not want to play with font sizes all day.

The component automatically finds the best font size to fit the content of the available space, so you do not have to do it.

Some HTML image tags can become problematic with respect to AMP.

For the photos

Most HTML tags can be added directly to AMP HTML.

That being said, some tags (such as tag ) are sometimes replaced by enhanced AMP AMP tags. Some problematic HTML tags are completely banned.

Instead of the tag be sure to use which has an end tag.

You can see the full list of AMP tag conversions here.

Conclusion

AMP was created by Google to place mobile in the foreground in search engine results and on the web.

AMP stories resemble Instagram stories, and tons of well-known companies dominate the Internet with them. If you think you can ignore them, you are wrong.

Billions of mobile pages are powered by SAPs. These pages load twice as fast because the JavaScript code is not allowed to slow them down.

There are many reasons to use AMP stories. They can help you improve your storytelling efforts, increase page speed, improve the creative design of your site, and help SEO efforts.

There are three parts to an AMP story: the story, the page (s) and the layer (s).

Huge media sites like CNN use SAPs to share breaking news, while other sites use them to share their video content or long form.

And the reactions to AMP are generally positive. Most people call it the next big thing from 2018. Publishers love it.

To start creating AMP stories, download the code, run a sample page, create your cover page, add other pages and animate items, create the bookends and validate your HTML.

If problems are discovered while validating your AMP code, correct them immediately.

Pour gagner du temps, voici quelques conseils et astuces que vous pouvez utiliser lorsque vous ajoutez des vidéos, du texte et des images à vos histoires.

Ajoutez une incrustation click-to-play personnalisée pour les vidéos, utilisez le composant amp-fit-text pour dimensionner automatiquement votre texte et n'essayez jamais d'utiliser les tags . Au lieu de cela, utilisez .

Maintenant, allez de l'avant et mettez les utilisateurs mobiles d'abord sur votre site.

Quel morceau de contenu allez-vous transformer en une histoire AMP en premier?

http://platform.twitter.com/widgets.js

Facebook pages will get new video measurements and a commitment to follow graphics throughout the vi...

Is Twitter worth your time? Here's What New 2018 Data says from Twitter for Marketing

Parallel Tracking Improves Page Speed for AdWords Advertisers

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.