Home / Google blogger / How to Enable Google AMP on blogspot

How to Enable Google AMP on blogspot

Do you want to Add / setup Google AMP in Blogger / Blogspot site? Accelerated mobile pages blogger or AMP for blogger is a way to make your Blogger site load faster on mobile devices. Fast loading websites offer better user experience and can improve your traffic. In this article, we will show you how to set up Google AMP in Blogger site.

I know you have come across that word often as there are many emphasis placed on it especially when you search for SEO tips online. On wordpress, enabling amp is easier but many are wondering if amp for blogger can be achieved.

lets start with whatAMP means

Meaning of AMP

Amp entails rendering faster static content for mobile pages. This is achieved with the JS library for Amp which enhances faster web page rendering. Amp was introduced by Google to help facilitate optimized web pages for users which can load faster even in slow networks.

Meaning of Google amp Cache

Proxy based, this content delivery network(CDN) renders all the valid amp pages by simply fetching all amp web pages on a website and caches it then improving the page performance generally. Maximum efficiency is attained because this caching process helps to load all images and JavaScript files from the same point.

How this works is that a webpage could be rendered in let’s say 543ms as opposed to the time it might take to load without the amp.

WordPress unlike blogger has different plugins that can be used to create amp pages. Now its really surprising that Google was the one to imitate this process but its own blogging platform, Blogger, does not currently support this amazing feature. Now we can’t wait for them to roll out this feature to blogger can we? We need to figure it out ourselves.

But the question remains, how do you go about enabling amp for blogger blogs?

This indepth guide will walk you through all the processes you need to follow to enable amp on blogger blog.

Implementation

Implementing amp on blogger is much easier than you think, especially when you are really good at editing blogger template. Now all you have to do is go to blogger, theme, and edit template. But first its important you download a backup of your theme in case you make mistakes.
All the steps you need to follow after that

Step one :

Search for the <html> tag on your template. You can do by using the CTRL + F on your desktop or download the template then use a code editor such as quickedit code editor if you use mobile.
Replace the <html> tag with the tag

<html amp=’amp’>

 

Step two:

We need to check if there is a charset tag and the viewport meta tags present in the HTML. Search for it and if not found place the below code after the <head> tag.

    <meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

Step three

If we are going to implement amp on blogger we want to make sure that our website is able to be discovered. How so? By using a canonical tag. First search for a canonical  tag but if not present write it in this format.

 <link rel=”canonical” href=”http://example.blogspot.in/article-metadata.html” /> which will simply point to itself.

Just after the viewport tag, make sure to copy and paste the code below

 <link expr:href=’data:blog.url’ rel=’canonical’/>

 

Step 4:

We add some JavaScript and CSS codes to the html. Search for the </head> tag then copy amd paste the following before it.

<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-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>

(Make sure to parse the script code above)

Step five:

Image tags are usually in this format <img src=”#.png” alt=”#” height=”650″ width=”300″>
To make the images load more faster we will enable amp img tags. Look for all image tags present in your HTML and edit it all so that it looks like this.

<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>

Congratulations on making it this far for the amp for blogger challenge. Now its time to test our amp pages to see if they are working. So far, there are two methods to check for validation errors. First method will require Google chrome console and the second will be done by passing the page through an amp validator. Either way is fine.

Amp for blogger Validity check – using Google chrome console

– go to chrome browser and open the web page in this format http://example.com/p/amp-page.html#development=1
– once it loads, right click and on the dialogue box click on inspect page. That will open the Google chrome console and you can check for errors.

Amp for blogger validity check – using amp validator

– go to the web page at validator.ampproject.org and on the URL field, enter your amp web page in the format http://example.com/p/amp-page.html
– Any changes to the html source made in this interactive editor result in interactive revalidation.

Bonus tip: search console can also be used to check for amp pages

Okay that is done with. Now time to enable amp ads for blogger

Implementing Amp Ads for blogger

Its not just enough to make a webpage amp enabled, we have to include our ads too. Ads are written originally in JavaScript and we will need to rewrite it to become amp ads so that the ads can load faster just like the page.
Unlike JavaScript based ads, Accelerated Mobile Pages (AMP) are written in AMP HTML similar to the standard HTML but not exactly alike. So our amp ad units will be different from the JS ad units you are probably used to.
We are going to be creating our very first amp ad unit here but first create an AdSense ad unit and save it on a note pad or code editor. We will be needing the following information from the code.

– Your ad unit’s ID / data-ad-slot which is in the format 3150846270
– your publisher ID / data-ad-client which is in the format ca-pub-9608360429799820

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-9608360429799820″
data-ad-slot=”3150846270″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

Create the AMP ad code

You can choose between two types of AMP ad code, depending on whether you’re going to place your AMP ad unit above or below the fold:

Above the fold

For ad placements that are above the fold, we recommend that you use a fixed height AMP ad unit. For best results, fix the height of the ad unit as 100px and leave the width as responsive so it fits naturally with the rest of your page layout.

To create a 100px fixed height AMP ad unit, replace the data-ad-client and data-ad-slot values in the following code with your own publisher ID and ad unit ID from step 1:

<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″>
</amp-ad>

Below the fold

For ad placements that are mostly below the fold, we recommend that you use a 300×250 responsive AMP ad unit. Using the AMP responsive layout option means your ad unit will automatically resize itself for the size of the device it’s being viewed on.

To create a 300×250 responsive AMP ad unit, replace the data-ad-client and data-ad-slot values in the following code with your own publisher ID and ad unit ID from step 1:

<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″>
</amp-ad>

Note that for more advanced use cases, you can style AMP ad elements like any other AMP element. You can read about different layouts here: https://www.ampproject.org/docs/guides/responsive/control_layout.
Place the AMP ad code on your mobile page
Copy and paste your AMP ad code into the HTML source code of the mobile page where you’d like the ads to appear. Don’t forget the AdSense program policies still apply to pages containing AMP ad units.

Once you’ve placed your AMP ad code, we recommend that you test your ads on different mobile devices to make sure that the responsive behavior is working correctly.
Add the AMP required script to your page
Copy and paste the following code between the <head></head> tags of your AMP HTML:

<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>

(Parse that first)

This script will load the relevant amp-ad libraries. You can read about the amp-ad component here:

That is all on implementing amp for blogger. I do hope you enjoyed the guide. Try to implement that on your website and if it works for you comment below. Sharing is caring so don’t forget to show this post with others.

About Ayorinde Ayodeji

Ayorinde Ayodeji is the CEO of caffinegeeks. When he’s not busy making Caffinegeeks Products better, you can find him Biking, Coding, and Making researchs.Web developer and SEO Expert by heart.

Check Also

How to Add Floating/Pop-up Adsense ads widget in Google Blogger

Do you know, Google is gonna banned you after showing adsense ads into a pop-up …

2 comments

  1. Do you mind iff I qote a few of your posts as lonbg
    as I provide credit and sources back to your site?

    My blog is iin the exact same niche as yours and my users
    would truly benefit from a lot of the information you present here.
    Please let mme know if this ok with you. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *