AMP, how can you use them for your web store?

Lees in het Nederlands - Lisez en français

In our previous article, we explained the importance of Accelerated Mobile Pages for Search Engine Optimization for news sites, as well as web stores. But what exactly is AMP and how can you get started?

How does AMP make your website load faster from the carrousel?

As a reminder, Google will use AMP (Accelerated Mobile Pages) to help mobile users surf the Internet faster. When a search is performed using a mobile device, you will now see (above the search results) a carrousel that shows only AMP pages, which are optimised for fast loading. Therefore, it is of paramount importance that you get your web store in that carrousel.

You should keep in mind that AMP cannot make your web store, with all its products, faster. For this, you need to use tools such as Varnish, which is provided with Combell’s Performance Hosting. However, AMP will make sure that Google picks your website faster, via the blog in which you provide news about your products, your business sector, etc. By using AMP, your website will be included in the new AMP carrousel and will load faster.

AMP is actually a framework used to create mobile web pages. AMP consists of three key elements:

• AMP HTML: a subset of HTML, with its own tags and attributes, extra features and restrictions. Those who are already familiar with regular HTML will have no difficulty at all getting started with AMP HTML. The “width” and “height” attributes, for instance, must be set for images in order for the page to load, with space reserved for images. Check out the full list of AMP HTML’s required markup.
• AMP JS: each AMP page must refer to a JavaScript Framework (via <script async src="https://cdn.ampproject.org/v0.js"></script>) that manages fast processing of images and asynchronous loading. Attention: third-party JavaScript will no longer be authorised!
• AMP CDN: if you want, you can also use AMP’s Content Delivery Network, which will take your AMP-enabled pages in its system, cache them, automatically optimise them and serve them faster.

These elements are used to load all the content “above the fold” right away. The content “below the fold”, which users do not immediately get to see on their device’s first screen, follows later. AMP also knows how big images and other rich content (like carrousels) are before they are fully loaded. The empty space is, so to speak, “reserved” and filled later on. No more page jumps while the content is loading; users can start reading immediately.

Loading faster also means reading faster: users get to see more content on your website – a win-win situation, for both users and your web store.

What exactly does AMP mean for your e-commerce site’s HTML code?

• In principle, you will need to have to different versions of a page: the original version, and the AMP version. The AMP version does not allow iFrames and other JavaScripts (although a hack is already available for those who really need to use iFrames).
• All CSS must be inline, and the page size must be limited to 50 KB. Special fonts, which often require longer loading times, will only be loaded via a special amp-font extension.
• Replace the <img> tag by the <amp-img> tag and use the “width” and “height” attributes.
• For animated GIFs, use the amp-anim component.
• For video content, use the amp-video tag (for YouTube videos, use the amp-youtube tag).

Accelerated Mobile Pages supports your web store’s Drupal or WordPress CMS

Do you use a content management system such as Drupal or WordPress for your website? In that case, you can very easily benefit from this boost for your page.

• If you use a blog hosted by WordPress.com, AMP will be activated automatically when users land on your blog after performing a search using their mobile devices. (also read: How can you link your domain name (registered with Combell) to your free WordPress.com blog?)
• If you host your WordPress blog yourself, you should install the AMP plugin
• If you use Drupal, you should use the new Drupal 8 module, which provides AMP support.

Check out our WordPress hosting & our Drupal hosting

Will ads on your website also work with Accelerated Mobile Pages?

One of AMP’s goals is to find the right balance between ads, which are vital for advertisers, and user-friendliness. After all, Internet users are not so crazy about ads. Ads in AMP pages will be handled in collaboration with several advertising networks. That being so, Google warned that ads should not be too intrusive. Advertisers can view examples of acceptable ads on this GitHub page.

As for publishers who use paywalls and subscriptions, they should read this information about the AMP Access extension.

Will AMP also allow you to access analytical data for your web store?

Yes! And better yet, analytical trackers, which often slow down the loading times of regular websites, are even limited to the minimum necessary. The Amp-Pixel element is a simple tag that allows you to monitor your page views, and the Amp-Analytics extended component allows for further analytics via Google Analytics. Read more about AMP Analytics.

Do you want to know more?

Feel free to see what our colleagues have to say: Practical ECommerce (about SEO for e-commerce via AMP), TechCrunch (about AMP pages in search results and WordPress support for AMP), WebProNews (about AMP and Drupal 8), SearchEngineLand (how to get started with AMP). And let us not forget the AMP project itself and the AMP HTML blog.