AMP is a Google-backed project, designed as an open standard for any publisher to have pages load quickly on mobile devices. It’s a framework to make quick webpages for mobile, which:
There are two ways to implement AMP for your website:
I would recommend you to have two versions of your article since AMP allows only limited HTML tags and all the CSS has to be inlined. While creating two different pages, you should link them to inform search engine crawlers about the existence of your AMP pages.
If you have a WordPress site, you should download the Automatic AMP plug-in, which Yoast recommends. After one enables the plugin, it adds a standard meta tag in the head of the webpage to help Google recognise that an AMP-enabled version exists. Check by adding the /amp/ suffix to the end of any URL.
One of the webpages of NearFox:
Here’s the same webpage on your desktop:
Without styling, AMP pages are very basic but, the good news is, we can style AMP pages.
AMP HTML pages can be styled using CSS but it restricts the utilization of CSS for better user experience. Add all CSS inside a <style amp-custom> tag in the head of the document. For example:
<!doctype html>
<head>
…
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
…
</head>
Like on an ordinary HTML page, AMP permits you to embed pictures, video and sound substance. AMP doesn’t support the default HTML counterparts to displaying media, like <img>.
<amp-img src=”example.jpg” width=”200″ height=”200″></amp-img>
Like images, there is a custom tag that must be used to embed locally hosted videos called amp-video. For embedding YouTube video, there is a different component, amp-youtube.
<amp-video width=”400″ height=”300″ src=”https://example.com/videos/example.mp4″
poster=”example-poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>
There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components. Here is a list of some of most useful built-in and extended components of AMP.
Built-In Components: They’re generally accessible in each AMP archive as they are constructed right into the AMP runtime.
Extended Components: You must explicitly include them into your AMP document. Many of them can be used to embed content from third-party services, such as from Twitter or Instagram. Some of them are:
Yoast has developed its own use plug-in, Glue, that adds styling options for the Automattic plug-in. Once you’ve enabled Glue, you can see the settings under SEO>AMP>Design. Here, you can set the colours and fonts to be closer to your original desktop page, as well as upload your own logo and add you own custom CSS.
An AMP webpage cannot incorporate any third-party or custom JavaScript; however, this doesn’t imply that Accelerated Mobile Pages don’t utilize JavaScript.
AMP’s JavaScript library (AMP runtime) is responsible for loading and rendering AMP pages quick by implementing best execution practices.
It fetches valid AMP documents, caches and loads them. AMP CDN likewise has an inherent validation framework.
The validation of the code is given inside Google Chrome’s DevTools. Exploring to your page with the hash #development=1 included toward the end of the URL empowers approval.
Trackers are executed through the amp-pixel component to number site visits. To utilize a Google Analytics tracker on an AMP page, you need to follow the Analytics Measurement Protocol :
<amp-pixel src=”https://ssl.google-analytics.com/collect?v=1
&tid=UA-12345678-1&t=pageview&cid=client_id
&dt=page_title&dl=page_url”>
</amp-pixel>
The client_id is generated on the server side. The page_title and the page_url should be URL-encoded.
United States
India
