AMP- (stands for Accelerated Mobile Pages ) was introduced by Google in October of 2015. AMP is an open-source custom web development framework created to speed up the loading time of web pages on mobile devices.
While the idea of having a faster mobile internet with content that loads instantly sounds like a great idea, there is a lot of concern among web developers when it comes to AMP. And these concerns should have publishers equally worried. AMP has many pro’s and con’s which I will discussed later.
Here I am going to tell you that how to implement AMP in to your website or blog.
Implementing AMP is very easy but it definitely creates confusions for newer publishers. They don’t know how to convert normal website in to AMP which boost their website.
To implement AMP, first of all you need to go to your website templet editor and them go to Themes à Edit Theme afterward just follow these simple steps:
STEP 1:
|
To make your blog faster by implementing AMP, here you need to “Change HTML” tag to do this find the <html> tag and replace it with following code.
<html amp=’amp’> . |
STEP 2:
|
Now find <head> tag (by pressing Ctrl+F to open search box) and then copy and paste the following code below the <head> tag. It is to inform you that following meta tag is called View Port and Char Tag.
|
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
STEP 3:
|
Make sure that your blog or website is discoverable. You can make it discoverable by using canonical tag. By implementing this tag Now, Google uses the AMP web version as signal for SEO Ranking. If a Canonical tag is not present in your tag then just copy and also paste the following code below the <head> tag after Viewport tag which already mentioned in Step2.
|
<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />
<link expr:href='data:blog.url' rel='canonical'/>
STEP 4:
|
Now find </head> tag and Copy and Paste following code above the </head> tag to make your blog or website mobile friendly with AMP.
|
<style
amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
Important Information:
YOU MUST NEED TO CHANGE IMAGE TAG INTO amp-img
|
Normally, we use <img> tag for image but in AMP we have to use amp-img instead of only<img>. Therefore, change the img tags into amp-img tags like the following example:
<amp-img src="infopalacess.com.jpg alt="infopalacess" height="500" width="500"></amp-img>
If you will not change this <img> tag into <amp-img> then your website or blog would show pictures.
|
0 Comments