Follow Us
Get Admission Iqra AI

AMP: Mobile Accelerated Page Tutorial

AMP: Mobile Accelerated Page Tutorial

Accelerated Mobile Pages

There was time when if you hear about accessing internet by anyone, your mind instantly flashes with big screen computer. Accessing web pages on internet was far from thinking that time. Even there were few devices of Nokia in which you could access internet, but it was so hard.
There was big limitation with that because it was not possible to carry the bulky computer whenever you go.
With the arrival of smart phones, this concept of accessing internet got totally changed. Accessing internet is now on your finger-tips. Internet users spend much time on their phone for reading news, connecting with social media and even chatting with friends and family members.
From small business to large, around the world mobile device is used  to reach their potential customers.
But biggest hindrance in accessing the pages into mobile device is, slow loading of web pages. When it takes more time than normal to load the pages , its most likely that the user lose patience and leaves the page and try some other and this way publishers lose potential visitors and ultimately  the  business  revenue.
In February 2016, Google introduced a new way of rendering the web pages called Accelerated Mobile Pages or popularly known as AMP.
The prime purpose of this is to improve the speed of the mobile web. In this, the developer of the web pages can integrate rich content like video, animations and graphics to work alongside smart ads, and to load fast.
Not only that, this code also runs across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device one is  using.
AMP is nothing but an Open source project which is based on AMP HTML, a new open source framework which is not new but based on existing web technologies, which helps developers to build light-weight WebPages.

Here is sample Page

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First AMP Page</title>
    <link rel="canonical" href="http://www.acesoftech.com/regular-version" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Learning AMP Features",
        "datePublished": "2016-10-12",
        "image": [
          "thumbnail.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  
  <body>
    <h1>Welcome to my First AMP Pgae</h1>
  </body>
  
</html>

Here is anatomy of the code

  1. AMP Document must with the doctype <!doctype html>. Same like HTML5.
  2. And then <html amp lang=”en”>. Where it says en, you can place any language.
  3. Must have <head> and <body> tags (They are not compulsory  in HTML).
  4. Inside head section you must place canonical attribute. <link rel=”canonical” href=”regular-html-version.html” /> . If there is no regular version of HTML, then you can place same AMP page.
  5. Mus place a <meta charset=”utf-8″> tag as the first child of their head tag.
  6. And to make it all device friendly viewing (Particularly,IOS device ) must add
    <meta name=”viewport” content=”width=device-width,minimum-scale=1″> inside head tag. And remember, initial scale must be 1.
  7. Also must have a <script async src=”https://cdn.ampproject.org/v0.js”></script> tag as the last element in their head.
  8. Must contain the following in their <head> tag: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

How to insert Image in  AMP

As you know without image  our web pages are nothing, along with text, we need to express  our  thoughts and opinions with images also. In Accelerated Mobile Pages  there is separate tag for image.

Below is the example of how to insert Image in our  AMP web pages.

<amp-img src="cricket.jpg" alt="cricket image" height="400" width="800"></amp-img>

Adding custom CSS in AMP

Like normal HTML page,AMP pages also can be styled-up and can be made retina friendly.You can also add CSS in your AMP page.
Below is the sample code :

<style amp-custom>
 
  h1{
    background-color: white;
  }
  amp-img {
    background-color: yellow;
    border: 1px solid blue;
  }
</style>

How can I embed video in AMP

You can embed youtube video in your AMP page. Not only that, you can also

<amp-youtube
  data-videoid="SqT0glwuYYo"
  layout="responsive"
  width="480" height="270">
</amp-youtube>

 

AMP FAQs

What is the validation process of AMP html code?

You can validate your AMP web page to know if its compatible with the rule of AMP or not.

To do so, follow these steps

1. Open your page in your browser and add “#development=1” to the URL,

for example http://localhost/first.amp.html#development=1.

Now, to check open Chrome DevTools console and check for validation errors.

You will see something like this.

validator errors

How can we call AMP html pages in normal HTML page?

There are few websites which if you open it redirects to mobile page. AMP pages are something like that. You can refer your AMP HTML pages in normal HTML pages.

Using link rel tag we can call any AMP HTML pages.

Example :

<link rel=”amphtml” href=”http://www.acesoftech.com/amp-web-design”>

How we can tell browser if regular version of AMP HTML exists

As you know if there is any duplicate content inside your website then it
penalizes your website for duplicate content.To avoid duplicate content penalty, you can use ‘canonical’ to tell Search Engine that the full-fledged HTML page is different.
<link rel=”canonical” href=”my-regular-page”>

What is the SEO advantage of AMP HTML

SEO IconSince arrival of Google’s much hyped ‘Mobilegeddon’ algorithm in February 2015. According to that, if your web page is not mobile friendly then google would down in the ranking of the web page in Mobile search. Since then Google is constantly working on different mobile rendering technique services.

And the advent of this AMP or Accelerated mobile page is a part of that effort.
As per google, if your web page is AMP friendly, your website will load 85% faster than normal HTML page.
Second advantage is in mobile search, if your website is AMP friendly, your website is highlighted with green AMP text.
The main advantage of AMP is that, your website loads with lighting speed.
And as you know, Google has always rewarded the website which loads faster as compared to those websites which loads very slow.
How can I add Adsense code in AMP HTML pages ?
If you run a news website or any other portal then most likely you might be running Adsense ad. There is AMP HTML code for adsense code.

Example:

 

<amp-ad width="300" height="200" type="adsense"
  data-ad-client="ca-pub-1234560123456"
  data-ad-slot="1234567890">
</amp-ad>

 

How can we insert Analytics code as per AMP code ?

Almost every website owners add analytic s code for visitor’s tracking. If you want to integrate analytic’s code as per AMP , below is the sample code

Example:

<amp-ad width="300" height="200" type="adsense"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="1234567890">
</amp-ad>

 

Apply Now