How to Get a Free AMP Blog with Blogger

How to get free AMP blog on Blogger



Google officially added AMP featured snippets to mobile search results in 2017. So now AMP pages can rank in position #0.

Want a free AMP blog or website?

Well then, you're in the right place.

Because today I’m going to show you exactly what you need to get started.

But first...

What is Google AMP?

Google AMP (Accelerated Mobile Pages) was launched in October 2015. The project relies on AMP HTML, a new open framework. It offers a way to serve faster, stripped down versions of your web pages.

Google AMP – How to Implement it in Blogger

There are five steps to starting a free AMP blog. If you follow this guide exactly, you’ll be all set!
  1. Create free Blogger blog
  2. Install a free AMP template 
  3. Copy/paste snippets of code
  4. Edit HTML on Google AMP Project 
  5. Copy/paste more code
Let's dive right in!

Step 1 - Create a free blog/site with Blogger.com

Let's walk-through how to create a free blog on Blogger:
  • Go to Blogger.com
  • Click on CREATE YOUR BLOG. Or on SIGN IN (upper-right corner of the window)
  • Login to your Gmail account. Or create a new Gmail account
  • Enter a Display Name and click Continue to Blogger
  • Click on Create New Blog>Choose a template>Then click on Create Blog
  • Type a title for your blog
  • Type a URL for your blog
  • Get your own domain (optional, but highly recommended)
  • Click OK
Congrats on your free Blogger blog!

In step 2 we will download a free AMP theme online that you will upload

Step 2 - Install a free AMP Template

  • Download the free SEO AMP theme from AMP Base. (You can use any free Blogger AMP template you find online).  
  • Upload the theme code to Blogger. Click here for instructions on how to do this.

Step 3 - Copy/paste snippets of code

  • Login To your Blogger Blog.
  • Navigate to Design and click on Edit Template.

Modify Code to Setup AMP in Blogger:

Replace the below code sample and you will be ready with AMP on Blogger. 

Important! backup your blog before you proceed.

Create AMP HTML:

Now Go to your Blogger Dashboard -> Template -> Edit Template.

Replace the <html> code with the following code:

<html amp=’amp’> 

Add Charset and Viewport Meta Tags:

Search and Check for the charset and viewport meta tags. If it is not present, copy and paste the following code after <head> tag:

<meta charset='utf-8'> 

If the below snippet is already in the template code, do not add it.

<meta name='viewport' content=width=device-width,minimum-scale=1,initial-scale=1'>

Add Canonical Tags:

Make your blog findable using canonical link tags. If it is not present, add the canonical link by copying and pasting the following code after the viewport tag:

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

*if the above code doesn't work, use the below code instead. Be sure to replace example.blogspot.in in the URL below with your blogspot URL:


<link rel='canonical' href='http://example.blogspot.in/article-metadata.html' />  

Setup AMP CDN:

Paste this code just above the </head> tag:

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


Setup AMP Image:

Change the image tags into amp-image tags like the following example code:

<amp-img src='ampImage.jpg' alt='amp-img' height='500' width='500'></amp-img>
  • Save the template.

Step 4 - Validate your AMP HTML on Google AMP Project

  • Go to Google's AMP Project Validator page
  • In the upper left hand corner, enter your URL (website address). Then click on the VALIDATE button on the upper right hand side of the screen.
  • Go to the validation status section of the page. Your VALIDATION STATUS will show as FAILED until you make the necessary edits. There are about 20 edits in total for this template (all are listed in the bottom half of the screen)
  • Make the edits to the HTML code in the top half of the screen. There are also yellow notes that AMP Project provides for each line of code that needs fixing (required markup).
  • Once you have finished making all of the changes required the page will change your VALIDATION STATUS to PASSED.
  • Copy/paste the validated HTML code from the top portion of the page. You will need to paste this code in Blogger.

Step 5 - Copy/paste validated AMP HTML code

  • Go back to your Blogger dashboard.
  • In the left hand menu, click on Theme
  • Make a backup of your theme before pasting the AMP HTML code. Click on the gray BACKUP/RESTORE button in the upper right hand corner of the dashboard. Then click on the orange Download theme button. Once your theme backup is downloaded to your computer, close the window.
  • Click on the gray EDIT HTML button under your blog preview images (desktop & mobile). Click on the gray Preview theme button to preview your site. Click on the gray Edit theme button. Delete all of the existing code and paste the validated AMP HTML code from the AMP Project validator website.
  • Click on the orange Save theme button.
  • You may see some errors in Blogger, but this doesn't affect your AMP PASSED status or website loading.
  • Go back to Google's AMP Test page and enter your URL to RUN TEST again.
Congrats on your new free AMP blog/website!

If you'd like to make changes to your template, you can do this in the Blogger HTML code. Just go back to Theme>Edit HTML.

Enjoy! ⚡


FAQ

Is AMP a Google ranking factor?

Google has stated that AMP is not a ranking factor. But AMP is rumored to be a ranking factor in Google's mobile first index. The mobile first index takes precedence over Google’s desktop index which serves the best results based on the type of device being searched on.