How To Setup AMP In Blogger Blog - 5 Easy Steps(2023)
To set up AMP in Blogger Blogspot blogs, little coding is necessary.
What is AMP?
AMP simply means Accelerated Mobile Pages. Should I use AMP for my blog? The simple answer is YES! When you have AMP implemented on Blogger or Blogspot, it helps the mobile version of the blog to loads very fast, it enables your site users to load site contents almost instantaneously with great especially on low-end mobile devices.
Are AMP pages worth it?
It is important to know that fast-loading websites enhance user experience. This prioritized speed and faster experience for users can drive massive traffic and improve your site performance.
Do AMP pages rank higher?
AMP in another way can make your blog or website to display in AMP top stories and also Google Discover. Every bloggers dream is to have their blog show up those two platforms.
Hence, when you have AMP implemented on an already responsive Blogger AMP template is of great benefit. However, you should use Blogger template that already supports AMP by default.
So how do I use AMP on my website?
How To Easily Setup AMP In Blogger BlogSpot Blogs (5 Steps)
Can I use AMP in blogger blog?
Follow these easy steps to use AMP on a Blogger Blogspot blog:
1. Login to your blogger blog dashboard.
2. Locate and Click on Theme. This is to change the existing HTML code so as to correspond with the AMP formatted tags.
3. Then, you will create a valid AMP HTML.
4. Replace the existing HTML code with the given modified code.
5. Now, Save the modified settings to complete the AMP setup process on the Blogger blog.
That's all...
Now let's explain the steps to add AMP to blogger blog.
A. Create an AMP HTML
First, backup your existing Blogger Template as a precautionary measure.
Go To your Blogger Dashboard, Click Theme and then Click Edit Theme to open your HTML codes.
Locate and Replace <html> code with this : <html amp=’amp’>
B. Add Corresponding Charset and Viewport Meta Tags
Check for the charset and viewport meta tags in the template.
If you can't find it, copy and paste the code below 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 to it
Canonical Tags makes your blog discoverable.
Look 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 code below 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
How to setup AMP image. You need to modify and add the image tags into amp-image tags as clearly shown in the example below:
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
Congratulations, Google AMP is fully added, enabled, and ready to implement on your Blogger Blog.
How to Validate a Blogger page on Google AMP Validator?
It is important to validate your HTML on Google AMP Validator and to Validate your Google AMP Pages in Blogger, just do the following:
Launch your web browser, visit the official Google AMP Page.
Paste a URL in the designated field
Then Click on Validate to check whether your AMP page is valid.
){kind=link}
0 Comments
Leave a reply