Loading ...

How To Setup AMP In Blogger Blogspot Blogs 2023

How To Set Up AMP In Blogger Blogspot Blogs (5 Steps) How to add, enable and validate AMP page on Blogger. Best responsive AMP Blogger template
To set up AMP in Blogger Blogspot blogs, little coding is necessary.

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:

  1. Navigate to the dashboard of your Blogger Blog.
  2. Click Theme and modify the existing HTML code to match the AMP formatted tags.
  3. Next, create a valid AMP HTML.
  4. Replace the existing code with the provided modified code.
  5. 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:

  1. Using your web browser, go to the official Google AMP Page.
  2. Paste a URL in the designated field.
  3. Click on validate to check if your AMP page is valid.

Home >> Blogging >> How-To >> SEO >> How To Setup AMP In Blogger Blogspot Blogs 2023



Temo Group: How To Setup AMP In Blogger Blogspot Blogs 2023
How To Setup AMP In Blogger Blogspot Blogs 2023
How To Set Up AMP In Blogger Blogspot Blogs (5 Steps) How to add, enable and validate AMP page on Blogger. Best responsive AMP Blogger template
Temo Group
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content