Is Your Website AMP Ready

Are you familiar with the term AMP?  If not, you need to know about it.here is what it means:

Here is the official definition:

AMP stands for Accelerated Mobile Pages, a Google-backed project intended as an open standard for any publisher to have pages load quickly on mobile devices. The AMP Project was formally announced on Oct. 7, 2015, with support from Google, Twitter, WordPress and several publishers and other companies.

AMP has been around for a while already and many companies have optimized their web pages for AMP. However, most recently both Google and Facebook announced changes to their algorithms which ultimately is going to penalize websites which are not AMP supported.

The simple reason why is that they both want to offer customers a better experience when they click on a web page. Your web pages need to load faster and be optimized for mobile viewing. This is exactly where Accelerated Mobile Pages come into play.

How Does AMP Work?

Essentially a framework for creating mobile web pages, AMP consists of three basic parts:

  1. AMP HTML: A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML. For more details on how it differs from basic HTML, check out AMP Project’s list of required markup that your AMP HTML page “must” have.
  2. AMP JS: A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
  3. AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

How Can You AMP Your Site?

First off you’ll need to create two version of your article pages because AMP does not support form elements and third-party JavaScript. Therefore you will not be able to lead forms, on-page comments and some other elements.

You will also need to rewrite your site template to include:

  • Your CSS in AMP must be in-line and be less than 50KB.
  • images need to utilize the custom amp-img element and must include an explicit width and height.
  • There is a custom tag that must be used to embed locally hosted videos via HTML5, called amp-video

In order for Google (and other technologies supporting the AMP Project) to detect the AMP version of your web pages you will need to include the tag:

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

Whilst also including the Schema.org meta data “is a requirement to make your content eligible to appear in the demo of the Google Search news carousel”.

If you’re using WordPress there is an official plug-in amp-wp GitHub page.

AMP improves the speed of your website loading time and will help your search engine ranking.

Do you need to get your website AMP ready? Contact Us.

How To Win Better Adwords Ad Placements<< >>How Much Does A Responsive Website Cost?

About the author : Carey Dodd

Carey Dodd
An experienced digital marketer with over 12 years of progressive experience in marketing, specializing in digital marketing concepts and strategy. Helping businesses to define their digital strategies and grow their customer base.