This post is a comprehensive guide to Accelerated Mobile Page from Google. AMP is a project google launched in an effort to make mobile websites load faster in mobile devices. It uses a different web code and framework than the typical web development environment (plain html, php and the like).
The advantage of using a AMP-mobile site is that Google is now taking this type of site format as a priority version ranks your site higher on Google mobiles searches, which is more than 70% of google searches now a days. Within a short time, most websites will have to comply with AMP standards in order to compete.
This Guide is broken down as follows:
- What is AMP?
- How to get started with Accelerated Mobile Pages
- How can Google Search Console help you AMPlify your site?
- How to best evaluate issues with your Accelerated Mobile Pages
- How to setup AMP on WordPress
What is AMP?
Users today expect mobile websites to load super fast. The reality is that it can often take several seconds. It is no surprise that 40% of people abandon a website that takes more than 3 seconds to load. To reduce the time content takes to get to a user’s mobile device we started working on the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.
Accelerated Mobile Pages are HTML pages that take advantage of various technical approaches to prioritize speed and a faster experience for users by loading content almost instantaneously.
Later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more. Visit the “Who” page on AMPProject.org for a flavour of some of the sites already creating AMP content and try the demo at (g.co/ampdemo) to see AMP versions of pages labeled with .
In advance of AMP expanding in Google Search, over the next few weeks we’ll be posting pointers to help you #AMPlify your site. Follow along with the #AMPlify hashtag on G+ and Twitter.
How to get started with Accelerated Mobile Pages
How can Google Search Console help you AMPlify your site?
If you have recently implemented Accelerated Mobile Pages on your site, it’s a great time to check which of your AMP pages Google has found and indexed by using Search Console.
Search Console is a free service that helps you monitor and maintain your site’s presence in Google Search, including any Accelerated Mobile Pages. You don’t have to sign up for Search Console for your AMP pages to be included in Google Search results, but doing so can help you understand which of your AMP pages are eligible to show in search results.
To get started with Search Console, create a free account or sign in here and validate the ownership of your sites.
Once you have your site set up on Search Console, open the Accelerated Mobile Pages report under Search Appearance > Accelerated Mobile Pages to see which AMP pages Google has found and indexed on your site, as shown here:
The report lists AMP-related issues for AMP pages that are not indexed, so that you can identify and address them.
Search Console also lets you monitor the performance of your AMP pages on Google Search in the Search Analytics report. This report tells you which queries show your AMP pages in Search results, lets you compare how their metrics stack against your other results and see how the visibility of your AMP pages has changed over time.
To view your AMP page metrics, such as clicks or impressions, select Search Appearance > Search Analytics > Filter by AMP.
(Note: if you’ve only just created your Search Console account or set up your AMP pages and they have not been detected yet, remember that Google crawls pages only periodically. You can wait for the scheduled regular recrawl, or you can request a recrawl.)
Have you been using Search Console to monitor your AMP pages? Give us feedback in the comments below or on our Google Webmasters Google+ page. Or as usual, if you have any questions or need help, feel free to post in our Webmasters Help Forum.
How to best evaluate issues with your Accelerated Mobile Pages
As you #AMPlify your site with Accelerated Mobile Pages, it’s important to keep an eye periodically on the validation status of your pages, as only valid AMP pages are eligible to show on Google Search.
When implementing AMP, sometimes pages will contain errors causing them to not be indexed by Google Search. Pages may also contain warnings that are elements that are not best practice or are going to become errors in the future.
Google Search Console is a free service that lets you check which of your AMP pages Google has identified as having errors. Once you know which URLs are running into issues, there are a few handy tools that can make checking the validation error details easier.
1. Browser Developer Tools
To use Developer Tools for validation:
- Open your AMP page in your browser
- Append “#development=1” to the URL, for example, http://localhost:8000/released.amp.html#development=1.
- Open the Chrome DevTools console and check for validation errors.
Developer Console errors will look similar to this:
2. AMP Browser Extensions
With the AMP Browser Extensions (available for Chrome and Opera), you can quickly identify and debug invalid AMP pages. As you browse your site, the extension will evaluate each AMP page visited and give an indication of the validity of the page.
When there are errors within an AMP page, the extension’s icon shows in a red color and displays the number of errors encountered. | |
When there are no errors within an AMP page, the icon shows in a green color and displays the number of warnings, if any exist. | |
When the page isn’t AMP but the page indicates that an AMP version is available, the icon shows in a blue color with a link icon, and clicking on the extension will redirect the browser to the AMP version. |
Using the extensions means you can see what errors or warnings the page has by clicking on the extension icon. Every issue will list the source line, source column, and a message indicating what is wrong. When a more detailed description of the issue exists, a “Learn more” link will take you to the relevant page on ampproject.org.
3. AMP Web Validator
The AMP Web Validator, available at validator.ampproject.org, provides a simple web UI to test the validity of your AMP pages.
To use the tool, you enter an AMP URL, or copy/paste your source code, and the web validator displays error messages between the lines. You can make edits directly in the web validator which will trigger revalidation, letting you know if your proposed tweaks will fix the problem.
What’s your favourite way to check the status of your AMP Pages? Share your feedback in the comments below or on our Google Webmasters Google+ page. Or as usual, if you have any questions or need help, feel free to post in our Webmasters Help Forum.
How to set up AMP on WordPress
You can use Pagefrog plugin with Yoast plugin, but the plugin comes with a couple of bugs. The plugin adds a preview on every post edit screen. This preview is unneeded, and there is no way to disable it, and it caused browser crashes in our back-end. Yoast recommends to Pagefrog users to add styling and tracking to your AMP pages. Additionally Yoast designed settings in our Yoast SEO AMP Glue plugin to fix the bugs. When you update to version 0.3 of that plugin, you can safely disable Pagefrog and configure the styling on the SEO → AMP design settings.
Read complete instructions on Yoast site:
Interested in Accelerated Mobile Pages but not sure how to get started? AMPlifying your site for lightning speed might be easier than you think.
If you use a Content Management System (CMS) like WordPress, Drupal, or Hatena, getting set up on AMP is as simple as installing and activating a plug-in. Each CMS has a slightly different approach to AMPlifying pages, so it’s worth checking with your provider on how to get started.
On the other hand, if your site uses custom HTML, or you want to learn how AMP works under the hood, then check out the AMP Codelab for a guided, hands-on coding experience designed to take you through the process of developing your first pages. The Codelab covers the fundamentals:
Once you are done with the basics, why not geek out with the Advanced Concepts Codelab?
Have you tried the Codelabs or added an AMP plugin to your site? Share your feedback in the comments below or on our Google Webmasters Google+ page. Or as usual, if you have any questions or need help, feel free to post in our Webmasters Help Forum.