Google’s AMP 101: A Content Publisher's Guide to Accelerated Mobile Pages

Smartphones have made it possible for everybody to browse, read, listen or consume media on the Internet with ease. Predictably, this has led to mobile searches surpassing desktop searches. But no matter how fascinating this data looks, page load time is one heck of a major problem when it comes to consuming web based content via mobile. Mobile devices aren’t nearly as powerful as their desktop counterparts, so it becomes critical to optimize load times on mobile devices. An incompletely loaded page and ads appearing before the page fully loads are some serious issues that can be a nightmare for users.

So, what’s the solution?

To make things easier for both publishers and mobile users, Google came up with an open source project and named it the Accelerated Mobile Pages project – or the AMP project for short. AMP pages are incredibly fast and load in less than a second. Here’s an image depicting an Accelerated Mobile Page in action [yes that is exactly how it loads]. Try for yourself. Type these URLs in your mobile browser and see AMP documents perform https://g.co/amp Or https://g.co/ampdemo To understand the concept of the Google's open source project to make the web faster for mobile users, we have created this table of content. Click on the topic you would like to read directly.

1. What are Google Accelerated Mobile Pages (AMP)?
2. Understanding the mechanism behind AMP pages
3. What constitutes an AMP page?
4. AMP your Website pages: Getting Started
5. Validating AMP pages
6. How would Google discover the AMP page version of my site?
7. Is it possible to collect data for AMP pages?
8. AMP Pages and Online Marketing: Advantages
9. AMP Pages Has Its Limits
10. Conclusion
11. Resources to Learn More About Accelerated Mobile Pages

What are Google Accelerated Mobile Pages (AMP)?

AMP is an open source project started by Google in collaboration with major publishers, including WordPress, Huffington Post, Buzzfeed and more. The project intends to make the mobile web browsing experience much faster by enabling speedy rendering of web content. In simple words, they are stripped down HTML page versions of your original website page. These alternate versions have little to no JavaScript and simply contain some basic images and text formatting. This is the reason it loads a lot faster on mobile devices than original web pages. Here are the publishers who have adapted this project As you know, page speed is one of the major factors Google considers when ranking a blog or a publication online and this project is here to make it easier for them.

Understanding the mechanism behind AMP pages

What differentiates a common web page from an AMP page is the elimination of large JavaScript codes [a big reason that web pages often render slow]. Also, AMP cache , one of the three most important parts of an AMP [discussed in detail below], is responsible for faster content delivery through Google servers themselves. You can host an AMP cache on your Content Delivery Networks as well [when someone is not searching from Google]. Creating an AMP page requires that you conform to the specifications provided by Google’s AMP project.

What constitutes an AMP page?

Every AMP webpage that you see on your mobile device has three elements responsible for rendering the static page. The three parts are: AMP HTML An AMP HTML is just like normal HTML, but has its own set of tags that you’ll use to create a static AMP html file. Some of the tags that’ll go into developing it are

• amp-embed
• amp-img
• Amp-pixel

AMP also bans use of certain other common HTML tags such as script, form, embed, object, etc. AMP JS The second most important element is the AMP JS file, which is responsible for managing external resources loading. This is the element that is responsible for optimization of the pages by keeping the entire external resource loading process in the background. This is the reason why AMP pages load so fast, because there is nothing that can hinder the process. AMP Cache AMP Cache works the same way a Content Delivery Network would work, but the former also works to optimize delivery for AMP web pages around the globe. For instance, if you are in Switzerland and browsing for topics there, the Google AMP cache will deliver them from a server in Switzerland or from the centroid around it.

AMP your Website pages: Getting Started

Now that you know the basics of the AMP project and what gives such pages a ridiculously faster rendering speed, you are ready to get started. Do remember this: you should have two versions of your website page, one should be the normal mobile-friendly page and the second an AMP version of the page. Here’s what a AMP markup looks like

[Source]

Every AMP page starts with <!doctype html> and is followed by antag. You can see that the page also contains the https://cdn.ampproject.org/v0.js library, which we had talked about earlier [the one that is responsible for asynchronous loading]. As aforementioned, an AMP page uses some of the HTML tags that are used in a basic HTML page. However, an AMP page also uses some custom tags like amp-img for, amp-video for video, amp-iframe for iframe and so on. See the list of tags used in the development of an AMP page for more information.

Validating AMP pages

Validating if your Accelerated Mobile Page is correctly implemented is easy to accomplish directly from your desktop.

• Open the demo URL in Chrome, unless you have an AMP page already built out
• Press F12 or click CTRL + SHIFT + I to open the Chrome Developer Tools
• Finally, click on Console to see if the AMP page is able to validate.

If you are seeing something like this

Source: searchengineland.com

These are validation errors and you need to fix them otherwise Google won’t show these in the AMP carousel within the search results. A valid page will look something like this

How would Google discover the AMP page version of my site?

This can be a common issue when you have two versions of your web page; one that is responsive and the other as an AMP version. To resolve this issue, Google suggests utilizing the <link> tag for both the versions. In the AMP page HTML, you should add this directly in the <head> element

<link rel="canonical" href="https://www.example.com/document.html">

To the non-AMP page, i.e. your mobile friendly web page, use this

<link rel="amphtml" href="https://www.example.com/amp/document.html">

Is it possible to collect data for AMP pages?

Yes, Google has provided analytics for your AMP pages that enable data collection. Though it has some limitations as of now, it will be enhanced over time. Similar to every other tag used in AMP, the analytics tag used here is amp-analytics. This tag can be used for tracking page-views, page events and social interactions. We’re not going into the technicals, so here’s a basic mockup for the element

<amp-analytics type="XYZ"> ........ </amp-analytics>

Type is the name of the analytics vendor, like Google analytics, so the type value will go “googleanalytics”. At present, Google has provided support for analytics vendors for your AMP pages, including:

• Adobe Analytics
• Chartbeat
• ComScore and more.

AMP Pages and Online Marketing: Advantages

1. Improved Rankings As mentioned above, a faster page loading speed is one essential ranking factor that Google takes into account. Currently, if you have opened the demo, you can see that AMP page results are usually placed above the fold. This applies to your site as well, given you publish great content written that keep your targeted audience in mind. 2. Improved CTRs Such results are placed above the fold and are likely to get more clicks and CTR when someone searches for a topic published on your website. Again, you need to publish regularly and update with great content. 3. Ad Blockers Since AMP pages require eliminating most JavaScript elements, these pages can block Ad Blockers as well. Also, since Google has announced advertising support for its AMP pages [which we will see in the coming days], it can be a sigh of relief for marketers who have faced the brunt of ad blockers. 4. Doesn’t require an App like Facebook Instant Articles or Apple News Google AMP is available for all publishers and the end users don’t need to download an app to see your content. It is available right there within Google. For that reason, you can say that AMP is Google’s answer to Facebook Instant Articles and Apple News.

AMP Pages Has Its Limits

Since an AMP web page is just a static HTML page, there are limitations to what does or doesn’t go with the HTML page while designing. First, as of now, the AMP project really only appliesy to content like news articles and blogs and Google intends to promote the AMP versions of those pages only. This certainly doesn’t mean that Google is not willing to extend the project to non-publisher sites. Also, it is an open source project so if Google wouldn’t do it, somebody else will certainly find a way to do it. In addition to this, forms of any kind are not allowed on these pages, so you won’t be able to get any email signups or app downloads directly from the AMP page. However, we don’t deny that the current modal of the AMP  won’t change or evolve with time to give publishers more flexibility. Jake Goldman, founder of 10up writes,

news outlets and publishers, particularly those seeing substantial inbound traffic from Google, should adopt AMP HTML as soon as possible, but use it as an entrypoint to push visitors to their “full” site. Others should wait and see how AMP—and Google’s use of AMP—evolves over time. Either way, web developers and designers will need time to understand and address the constraints of this nascent technology, so allocate budgets accordingly.

Conclusion

AMP pages are an effective way to make the web faster for online content readers. If you are a publisher and update your blog or website with great content regularly, you should go for Google AMP. Sure, there are some limitations as of now, but we are certain that Google will be bringing more updates to their project in the coming weeks. Leaving you with an excellent demo of Google's AMP, Facebook Instant Articles and Apple News. If you have any questions/queries on AMP or still not sure how to create one for your site, feel free to drop us an email or contact us directly.

Resources to learn more about AMP Project:

• https://www.ampproject.org
• https://www.ampproject.org/docs/get_started/create_page.html
• https://www.ampproject.org/docs/support/faqs.html