Marketing

How to Implement AMP on Your WordPress/Non-WordPress Site

  1. By Pritesh Mittal

08 Apr

Google has rolled out Accelerated Mobile Pages (AMP) in India and it is likely to complete the rollout by the end of the year. If you want to implement these lightning fast pages on your website (WordPress or not), here is what you need to do.

But What is AMP?

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:

  1. Lazy-loads all of its components
  2. Does asynchronous processing
  3. Doesn’t repaint while stacking the page
  4. Doesn’t flash unstyled content
  5. Provides inline efficient CSS
  6. Does not burden CPU and GPU
  7. Restricts JavaScript usage

Parts of AMP

  1. AMP HTML: Modified HTML with the restriction of certain regular HTML/CSS features and the introduction of new custom tags.
  2. AMP JS: Enforces best practices in order to decrease page load time
  3. AMP CDN: A cache with a built-in validation system that further optimizes your site.

How to Implement AMP

There are two ways to implement AMP for your website:

  1. For the same article, you can keep up to two variants. Apart from the existing page which you have right now, create another AMP version of your article.
  2. Or you can have one single page – the AMP page – and utilize it everywhere.

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.

  • Add the following code to the head section of the non-AMP page
    <link rel=”amphtml” href=”amp_page.html”>
  • Use canonical tag by adding following line to the <head> section of your AMP page. This will avoid internal duplicity and search engines will pass all SEO benefit of your AMP page to the non-AMP page.
    <link rel=”canonical” href=”non_amp_page.html”>
  • If you only have one AMP page, you should link it to itself:
    <link rel=”canonical” href=”universal_page.html”>

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:

amp1

Here’s the same webpage on your desktop:

amp2

Styling of AMP pages

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>

How to Include Images & Video

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

  • Include an image in your page using the amp-img element:

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

  • Include a video in your page using the amp-video element.

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

  • <amp-ad> for showing ads
  • <amp-img> for images
  • <amp-pixel> for tracking pixels
  • <amp-video> for video file embeds
  • <amp-embed> for embedded elements

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:

  • <amp-anim>: runtime-managed animated image, most typically a GIF
  • <amp-youtube>: displays a YouTube video
  • <amp-instagram>: displays an Instagram embed
  • <amp-iframe>: displays an iframe element
  • <amp-carousel>: generic carousel for displaying multiple similar pieces of content along a horizontal axis

For a WordPress site, Download the Yoast Glue plug-in

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.

AMP and JS

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.

AMP with CDN

It fetches valid AMP documents, caches and loads them. AMP CDN likewise has an inherent validation framework.

How can I validate my AMP HTML code?

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.

How do I track my visitors with Google Analytics?

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.

TAGS :

Related Post

03 Oct

Google Penguin 4.0 Algorithm is now real time

15 Jan

Title Tags – 11 Effective Tips to Increase Your

25 Aug

How to Ace Q4 Festival Season on Amazon?
How to Ace Q4 Festival Season on Amazon?

3352 Comments