How To Implement Google AMP On Your Website
Accelerated Mobile Pages is an initiative from Google to improve your user's mobile browser experience. Google wants to make pages easy for developers to implement, enable monetization and embrace the open web. AMP HTML is a lot like your regular HTML, but with a few rules and restrictions to facilitate a good user experience.
How does AMP work?
AMP is a framework for creating mobile web pages, comprising three parts.
1. AMP JS
2. AMP HTML
AMP HTML is standard HTML with a bunch of custom AMP properties. In other words, it’s a “diet” version of HTML with some restrictions allowing reliable performance and a few extensions to help put together rich content. The AMP JS library helps you quickly render AMP HTML pages.
3. AMP Cache
This is an optional proxy-based, content delivery network (CDN) used to distribute valid AMP documents. The CDN takes your AMP HTML pages, caches them, and automatically optimizes your page performance. A validation system comes with the AMP cache system to confirm whether a page will work independently of external resources.
Things to keep in mind:
You might have to rewrite your site template to make room for restrictions. For instance, custom fonts tend to be load intensive, but all CSS in AMP must be in-line and less than 50KB. This means you’ll have to load them using a particular amp-font extension.
Custom tags are painstaking to implement for multimedia. For example, images need to incorporate the custom elements and be of a specified width and height. Additionally, if you are using GIFs or locally embedded videos, you need to use the appropriate AMP extended component. These tags and extended components aren’t difficult to use, but they need to be considered before planning your site design.
How to implement AMP?
It’s time to speed up your mobile browser pages.
For starters, it’s advisable to maintain at least two versions of your page. Your original content page will be the mobile browser friendly version users see. You’ll also have the AMP version of this page to speed things up.
For WordPress users, you need to download and install the WordPress plugin at GitHub. Like with any other plugin, you can also install the AMP plugin through your WordPress dashboard. Once you’re done installing and activating the plugin, append “/amp/” to your pages. Append this “?amp=1” instead, if you don’t have a friendly permalink.
Don’t forget to tweak the Google search console, to help Google pick up the AMP versions of your article faster.
Moreover, the AMP Discovery page mentions some platforms will require Schema.org metadata to make your content eligible to appear in the demo of the Google Search news carousel. Make sure you get your schema right.
AMP is a relatively easy way to improve the speed of mobile websites for publishers. In the future, Accelerated Mobile Pages is going to influence a lot of social media mobile interactions. While implementing AMP, don’t forget to incorporate other proven mobile marketing strategies. It’ll prove crucial in bringing relevant customers to your site.
Our product development experts are eager to learn more about your project and deliver an experience your customers and stakeholders love.