BusinessWebsite Success

AMP Guide – How to Set up and Test Accelerated Mobile Pages

Want create site? Find Free WordPress Themes and plugins.

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.

GIF Mobile

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.”

Why Do You Need 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:

  • AMP HTML: This is a small piece of HTML code that promises low file sizes and can therefore be loaded quickly. If an AMP page is called up, there will only be one request, which additionally speeds up the loading time.
  • AMP JavaScript: Accelerated Mobile Pages are based on asynchronous JavaScript, which allows for immediate rendering without scripts blocking the loading. Scripts are integrated as iframes for advertisements or codes from third party providers, and load the content after being established according to the “content first approach”.
  • AMP Cache: AMP HTML can be loaded immediately with the aid of caches. An independent Content Delivery Network (CDN) is available for this, which quickly makes content available worldwide through proxy servers. All documents required to load a site are loaded from one source. Another highlight: When being called up, the CDN checks if the AMP page works and the AMP requirements are fulfilled. It is therefore guaranteed that Accelerated Mobile Pages work reliably.

Advantages and Disadvantages of AMP

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.

Gif scales

Setting up Accelerated Mobile Pages

Accelerated mobile pages can be developed from standard websites. Nevertheless, a few adjustments must be made:

  • Document type (Doctype): At the beginning of each AMP HTML document, you will find the document type:  <!doctype html>.
  • Use the <meta charset=”utf-8″> character set.
  • This AMP page must have a corresponding html tag. You can use <html ↯> or <html amp>.
  • Each AMP HTML page must contain <head> and <body>.
  • You should insert a canonical tag on your AMP page which refers to the original page. If there is a standard URL, the tag should link to it.

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.

  • For the AMP page to be perfectly adjusted to the respective output screen, it should contain a view port.

<meta name=”viewport” content=”width=device-width,minimum-scale=1″>

  • This line must be inserted in the header to load the content through the AMP CDN.

<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>

Transferring Structured Data with AMP

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”
}

Inserting logos on AMPs:

  • Only the image file formats .jpg, .png or .gif should be used.
  • Animated logos are not supported.
  • Do not use an icon, but either word mark or the complete logo.
  • Place the logo on a white or transparent background so that it can be displayed in the SERPs.
  • Create your logo in exactly 60×600 pixels in landscape.

Inserting Images on AMPs:

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>

Adjust the background color of your AMPs

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.

Why the rel-attribute on your standard page is so important

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.

Implementing Accelerated Mobile Pages with Plugins

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.

Testing Accelerated Mobile Pages with the Google Search Console

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.

Test Accelerated Mobile Pages with Google's AMP test tool

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.

AMP Validator from AMP Project

Figure 2: AMP Validator from the AMP Project

Test Accelerated Mobile Pages with Ryte

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.

Test Accelerated Mobile Pages with Ryte

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:

  • In the “Project Settings”, go to “Custom Snippets”, and “test selector”.
  • Enter //link[@rel=’amphtml’][1]/@href as a selector, and XPath: Get text only as the mode.
  • Then click on “test” to see if your page links to an AMP page.

Remember that a new crawl may be required for Ryte to track all your AMP links.

Frequently asked questions regarding AMP

  • Can I use AMP for online shops as well?

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.

gif einkaufswagen

  • Does AMP also work with ads?

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)

  • Is AMP duplicate content?

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.

Duplicate Content

  • Can AMP be combined with Markup similar to schema.org?

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)

Conclusion

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.

Other resources about AMP:

gif fazit

Checklist for Your AMP Implementation

Test your Accelerated Mobile Pages with Ryte for FREE

Start now!

Did you find apk for android? You can find new Free Android Games and apps.
Advertisements
Show More

Related Articles

Close
Close