In this article, we explain why you should set up Accelerated Mobile Pages, how you can implement them, and how you can test them with different tools.
Accelerated Mobile Pages (AMP) were created in 2015 by Google and other companies such as Adobe and WordPress as a new standard for fast loading mobile websites. The importance of Mobile Friendliness for websites has been increasing in recent years, and AMPs play a particularly important role here – this is why we’ve created this step-by-step guide for setting up and testing Accelerated Mobile Pages.
As Google reports in its latest announcement in the Webmaster Central Blog, as of February 1, 2018, the content of the AMP page must be comparable with the original canonical page content. Google also reports:
“AMP was introduced to dramatically improve the performance of the web and deliver a fast, consistent content consumption experience. In keeping with this goal, we’ll be enforcing the requirement of close parity between AMP and canonical page, for pages that wish to be shown in Google Search as AMPs. […] Where we find that an AMP page doesn’t contain the same critical content as its non-AMP equivalent, we will direct our users to the non-AMP page. This does not affect Search ranking. However, these pages will not be considered for Search features that require AMP, such as the Top Stories carousel with AMP.”
Mobile internet usage has now become standard in many areas. Where a desktop PC may have been required in the past, now, a smartphone with an internet connection is often enough. However, the lower bandwidth of mobile internet connections and the hardware of smartphones and tablets often causes websites to slow down while on the go.
Particularly for mobile internet usage, the loading speed is a crucial factor for a user to be able to access content. If the page takes too long to load, the user will leave the page.
Fast mobile internet sites usually require a great deal of technical effort, and this is why the Accelerated Mobile Pages Project was started in 2015. A new mobile ecosystem was created that allows publishers to access standardized techniques, and be able to create quickly loading websites.
The technology itself is based on three components:
The greatest advantage of AMP is that websites based on AMP currently load the fastest, enabling a positive user experience. There are several examples in case studies how websites with AMP obtain significantly lower failure rates, and more conversions in online shops. Another advantage of AMP is that pages can be maintained relatively easily, particularly if plugins are used.
By reducing the content to what is most important, accelerated mobile pages do not usually have the complete functionality of conventional websites. This disadvantage applies above all to the e-commerce industry. However, there have not been enough tests or studies carried out here to deliver precise data.
The high speed is achieved through the AMP Content Delivery Network. The content from AMPs is saved locally at different server locations for this purpose. Those who insist upon a local location for data management will therefore see AMP as a disadvantage. The even higher dependency of Google is connected with this regarding technology.
Accelerated mobile pages can be developed from standard websites. Nevertheless, a few adjustments must be made:
Example:
<link rel=”canonical”
href=”https://www.meineseite.de/url/zur/original-version.html” />
The original URL is referred to here.
<link rel=”canonical”
href=”https://www.meineseite.de/url/zur/AMP-Seite.html” />
The canonical refers to the AMP page itself here.
<meta name=”viewport” content=”width=device-width,minimum-scale=1″>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
The advanced tag for the <head>-area must also be implemented:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;animation:-amp-start 8s
steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none
;-ms-animation:none;animation:none}</style></noscript>
You can also label your AMPs with mark-ups. It is therefore possible, for example, to perfectly display news or recipe pages on mobile devices in the SERPs. News, for example, can be displayed with a corresponding markup in the so-called “carousel” from Google.
A news AMP article may be marked in this way:
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Titel”,
“datePublished”: “2017-11-11T11:11:00Z”,
“image”:”logo.jpg”
}
You have to adjust the HTML code to correctly display images on AMPs. The references to images in the source code have to be adjusted – you replace <img src> with <amp-img src>.
An example:
<amp-img src=”tollegrafik.jpg” alt=”Image” height=”400″ width=”800″></amp-img>
In principle, AMP pages are very simple. If you would like to change the color of the background, you can adjust the following elements.
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Remember that to save time, AMP pages can only use one style sheet.
Your standard website should link to the AMP version: insert a rel-attribute into the <head>-area of your standard website, and this then links to the AMP version:
<link rel=”amphtml”
href=”https://www.meineseite.de/url/zur/AMP-Version.html” />
In principle, the same directives apply to AMPs as for all Google-friendly websites. In order for your page to appear in the Google SERPs, it must comply will all important AMP specifications, its content must be identical to the content of the standard page, and the URL schema should be understandable for users.
Furthermore, Google specifies that the page must be compatible with AMP. The compatibility applies also to inserted structured data.
To save time, you can implement AMPs with plugins which are often available from Content Management Systems:
| CMS Plugins | Cost | Comments |
| WordPress | free | After installation, all pages from your WordPress blog can be converted to AMPs. |
| Wix Blog | free | During conversion, it may be the case that declines in traffic are shown in Google Analytics, because a majority of the visitors access your offer through AMPs. |
| Typo3 | free | The developer is thankful for error reports via Github. |
| Joomla! 1 Joomla! 2 |
79 Dollar 69 Dollar for one year |
|
|
Magento Shop Blogs 1 Magento Shop Blogs 2 |
149 Dollar
99 Dollar |
|
| Shopware | 49 Dollar | The offer includes 12 months of support and free updates. |
Once you have set up your AMPs, they can be checked easily in the Google Search Console. The only requirement for this is that your website has to be saved in the Search Console.
Log in as normal and click on “Accelerated Mobile Pages” under the menu point “Search appearance” area. The number of indexed AMPs will then be displayed, and you will also receive all important error notifications.
When analyzing your data, remember that changes and adjustments are not always immediately shown in the Google Search Console. John Müller from Google pointed this out in the beginning of 2016 in a post on Google+.
If you would like to test the implementation of AMP HTML, the free Google AMP test tool is also available: https://search.google.com/test/amp.
Figure 1: Test Accelerated Mobile Pages with the Google AMP test tool
A third option for testing AMPs is with the developer console from Google Chrome – to test your AMP page, open the AMP page in the browser.
AMPs can also be controlled with the AMP-Validator from the AMP project. The complete AMP HTML code is entered here. The Validator can also be used to check AMP ads.
Figure 2: AMP Validator from the AMP Project
Ryte can also be used to test and check with just a few clicks. Individual elements can be monitored through the “Custom Snippets” in your project settings.
Figure 3: Test AMPs with Ryte
It is possible, for example, to use Ryte to test if your standard website links to your AMP page with rel=”amphtml”.
How to proceed:
Remember that a new crawl may be required for Ryte to track all your AMP links.
Just one year after implementing the AMP project, the possibility of using quickly loading websites for e-commerce was also pointed out. There are a few examples for product and category pages in the AMP Project blog.
Ebay implemented Accelerated Mobile Pages in July 2016. An example for the AMP version can be found here.
Visual Case Studies of AMP page are presented on the AMP project page.
AMP was largely created to allow publishers a means of creating fast loading websites in a standardized manner. It also took into account the display of advertisements. Since summer 2016, it has also been possible to create specialized AMP ads, which load very quickly and do not impair the performance of the page. However, there are a few requirements for creating ads. For installation, there are also special rules such as “Content first”, meaning that the content is always loaded before the adverts.
(Sources: ampproject.org, medium.com)
It would theoretically be possible to create duplicate content with AMP, but this won’t happen if AMPs are implemented correctly. When setting up AMP, Google recommends using a canonical tag from the AMP version referring to the standard version. If there is only one AMP version, the canonical will link to itself.
Furthermore, a regular HTML page links to an existing AMP page via rel=”amphtml”. Through this, Google will also send a signal that another version is available. By using a canonical tag on the AMP page, it is ensured that search engines will link to the original.
Yes, the project page from AMP recommends using schema.org to identify structured data. However, it is pointed out that you should only use properties that make sense. (Source: ampproject.org)
Accelerated mobile pages are a practical solution enabling a faster page speed for mobile websites. The technology can be implemented very quickly with the aid of plugins. The benefits for your target group could be particularly significant, because the pages load quickly even with a weak mobile internet connection.
Despite its introduction in 2015, the AMP project is still in a relatively early stage. In the third quarter of 2017, Google increased a new initiative with roadshows and comprehensive information on AMPs, which will significantly speed up distribution.
| Action | Done? |
| Is the document type <!doctype html> at the beginning of the HTML code? | |
| Have I used the <meta charset=”utf-8″> dataset? | |
| Is there an <html ↯> oder <html amp> AMP tag? | |
| Is there a <head> and <body>? | |
| Does the AMP link to the original page through Canonical? | |
| Has a view port been inserted? | |
| Is the script for CDN for AMP inserted? | |
| Was the advanced tag used in the <head>-area? |
Test your Accelerated Mobile Pages with Ryte for FREE
Published on 01/16/2018 by Eva Wagner.
Who writes here
Eva is an experienced content marketer. Until May 2018 she was a member of online marketing team at Ryte. Using her creativity and the knowledge of current topics, she was responsible for the German Ryte Magazine and the Ryte Wiki. She also organized Ryte’s presence at major trade fairs such as the dmexco in Cologne.
Become a guest author »
Get more traffic and customers by optimizing your website, content and search performance. What are you waiting for?
Register for free