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.
- What are Google Accelerated Mobile Pages (AMP)?
- Understanding the mechanism behind AMP pages
- What constitutes an AMP page?
- AMP your Website pages: Getting Started
- Validating AMP pages
- How would Google discover the AMP page version of my site?
- Is it possible to collect data for AMP pages?
- AMP Pages and Online Marketing: Advantages
- AMP Pages Has Its Limits
- Resources to Learn More About Accelerated Mobile Pages
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 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.
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
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 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
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
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">
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
- ComScore and more.
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.
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.