How to do you blogger website AMP

Tontuf Co.

How to make your Blogger website AMP (Accelerated Mobile Pages) 


Hello, welcome to our blog. In today's blog, we will learn how to convert any blogger website into an AMP website for free without changing any theme or layout. We just need to do some changes to our code in order to convert it into an AMP website.




AMP



First, Let's Learn what is AMP?

AMP is an open-source HTML framework developed by the AMP Open Source Project. It was originally created by Google as a competitor to Facebook Instant Articles and Apple News. AMP is optimized for mobile web browsing and intended to help web pages load faster.

AMP or Google AMP is Accelerated Mobile Pages. As the name suggests, it helps to accelerate the site loading on slower internet devices. It is an open-source initiative supported by technology companies like Google and Twitter. Although it decreases the site user experience. It filters out the heavy scripts data which makes the site load faster. If you are OK to compromise user experience you can try Google AMP. You can easily add Google AMP in Blogger. This way you will be able to set up Google AMP in Blogger.







Steps to add AMP to your Blogger/Blogspot Website:

  • First, Open your Blogger website dashboard where you want to make AMP

Open the dashboard of your blogger/Blogspot website in which you want to add AMP.


blogger-blogspot-dashboard-main-page


  • Open theme >Edit HTML 
Then, click on the theme option and select "Edit HTML" from the dropdown menu.


Official Blogger Blog: Improvements to the Blogger template HTML ...


  • Search  <head> in that HTML code 
Press anywhere in the code and click "Ctrl+F" and then type <head> in order to find the <head> tag in your Blogger website code. (It should be in the top section of your code)






How to Add HTML Meta Tags and Keywords to Blogger Blog's Template ...

  • Paste this code below <head> tag 


1:  <script async src="https://cdn.ampproject.org/v0.js"></script>  
2:    <script type="application/ld+json">  
3:     {  
4:      "@context": "http://schema.org",  
5:      "@type": "NewsArticle",  
6:      "headline": "Open-source framework for publishing content",  
7:      "datePublished": "2015-10-07T12:02:41Z",  
8:      "image": [  
9:       "logo.jpg"  
10:      ]  
11:     }  
12:    </script>  
Click Here To Join Bulletprofit Click Here To Join Bulletprofit



  • Click on save theme 
After pasting the above code in your blogger website with the given instruction, you can save them/changes yours have done in your Blogger code and visit your website once to check if everything works fine or not.



Monetize your website traffic with yX Media





How To Add Code to Blogger Head Section - YouTube



If you find everything "OK" on your site, then you can check that your website has been converted into AMP or not.

 



Checking website is AMP or not -

Now, let's learn how to check that your website is AMP or not. It's very simple to check, we just need an AMP checker tool.

There are mainly 2 tools available on the internet for AMP checking by the official developers of AMP 







Here, I have embedded the AMP Validator which is from AMP Dev.




Just put your website's URL in the "URL Box" and hit "Validate". It will show if your website is an AMP or not. It also shows the code errors which have occurred that are not AMP. 



Click Here To Join Adslop



Note: After using this code if your website is not converted into AMP then, its can be an error of your website theme/code which doesn't support AMP or have some problem with AMP. 

In this case, remove the code that is given above and leave it as it was before. 
Tags


Our website uses cookies to enhance your experience. Learn More
Accept !