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:
- 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.
- 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?
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.