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
[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.
- 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.
Source: searchengineland.comThese 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">
<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.
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.drop us an email or contact us directly.