What is AMP?
AMP stands for Accelerated Mobile Pages. When AMP is implemented on Blogger or Blogspot, the mobile version of the site loads pretty fast, especially on low-end mobile devices.
Bear in mind that fast-loading websites offer a better user experience. This experience can drive and improve your web traffic.
AMP can make your blog or website appear in AMP top stories and Google Discover. These two platforms are every blogger’s dream.
Hence, implementing AMP on an already responsive Blogger AMP template is a big plus. Ideally, you should use a Blogger template that supports AMP by default.
Suggested: MagOne Responsive Premium Magazine AMP Blogger Template
How To Setup AMP In Blogger BlogSpot Blogs (5 Steps)
Follow these easy steps to set up AMP on a Blogger Blogspot blog:
- Navigate to the dashboard of your Blogger Blog.
- Click Theme and modify the existing HTML code to match the AMP formatted tags.
- Next, create a valid AMP HTML.
- Replace the existing code with the provided modified code.
- Save the configuration to complete the AMP setup process on the Blogger blog.
A. Create an AMP HTML
First, backup your Blogger Template as a precautionary motive.
GoTo your Blogger Dashboard -> Template -> Edit Template.
Replace <html> code with the following : <html amp=’amp’>
B. Add Corresponding Charset and Viewport Meta Tags
Search the template to check for the charset and viewport meta tags.
If absent, copy and paste the following code immediately after the <head> t ag:
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
C. Add Canonical Tags
Make your blog discoverable using a canonical tag.
Search and check for the canonical link tags.
If absent, add the canonical link: <link rel=” canonical” href=” http://example.blogspot.in/article-metadata.html”/> which will simply point to itself.
Copy and paste the following code after the viewport tag:
<link expr:href=’data:blog.URL rel=’canonical’/>
D. Setup an AMP Content Delivery Network (CDN)
Paste the code below just above the </head> tag:
Click here to download the script.
E. Setup AMP Image
- Modify and add the image tags into amp-image tags as shown in the example below:
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
Now everything is done. AMP is fully set up, enabled, and ready to use on your Blogger Blog.
Read Also:
How to Validate a Blogger page or HTML on Google AMP Validator?
To Validate your Google AMP Pages in Blogger, do the following:
- Using your web browser, go to the official Google AMP Page.
- Paste a URL in the designated field.
- Click on validate to check if your AMP page is valid.
