What Is Google AMP
The full meaning of AMP is Accelerated Mobile Pages. This pages are viewed in the mobile phone view that speed up your website page loading speed by skipping some render blocking java and CSS files and is viewed under Google.It is a new project by Google to build mobile web pages for static content that render fast. AMP ( Accelerated Mobile Pages ) Pages use AMP HTML, AMP JS, and AMP CDN to process and deliver light web pages at lightning speed. The AMP compared to lightening speed because there is no loading after clicking a page that has implemented AMP. Its time to add AMP to Blogger.
Before we start implementing the ideas into blogger its good that you backup your template to avoid coding mistakes. If you are ready lets start the Blogger AMP setup.
How To Set Up Google AMP In Blogger
Follow The Bellow Steps To add Amp To Your Blogger Blog. Make an effort of saving your template in each and every step so you can know where you may make any mistake through blogger code error alerts.Step 1. Set Up AMP HTML
The AMP setup involves changing the HTML code on your template to the AMP code to enable AMP in your Full HTML code for more setup. How to add the AMP HTML Code.Step 1. Log in to Blogger and choose your specific website to add the HTML AMP code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for <html>
Step 6. Replace the above line with the following code
<html amp=’amp’>Thats all with adding the AMP to HTML before head section.
Step 2.Add Charset and Viewport Meta Tags
In this section of the AMP setup you have to look at your template code to figure out if it has the charset and viewport meta tags present before adding the code provided below. If they are not present, then you will paste the belw code below the <head> tag.<meta charset=”utf-8″>If you want to know if the charset and viewport code are present, search any of the two names and you will only find it in the head section of your blogger template.
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
Step 3. Blogger Setup AMP CDN:
The AMP CDN code is a code that instracts the phone browsers to use the AMP version by adding the script in the head section.How to add the AMP CDN in your blogger blog code is simple, just copy the BELOW code and paste just ABOVE the ending tag of head. </head>
<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>That`s all with adding the AMP CDN, save your template theme and lets go to the other step.
<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>
Step 4. Image AMP Setup.
The image used in the desktop responsive version is not the same resolution and dimensions that is used in AMP versions. In that case, we add the image AMP code to feature the image of your website post to show in AMP pages. Lets set it Up.Normally before we post and image the HTML part of the blogger post when you add an image has the image code, that's what we are going to twerk every time you upload a post image. Change the image code to :
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>The AmpImage jpg is an example of your image URL as indicated in the code after uploading, You will have to delete the Image src to amp image src code above but make sure you copy the image URL first before changing and then replace to the Ampimage jpg and that's all.
Step 5. Setup AMP Canonical Link
Its paramount to see that you are discoverable with the canonical tag used in your blogger template. The AMP version also uses canonical.
Add the below code to your blogger template below the charpset.
<link expr:href='data:blog.url' rel='canonical'/>By adding cornanical tags, you set them to point to the homepage and your website posts. Please change the URL seoblur to your domain name URL.
<link rel="canonical" href="https://www.seoblur.com" />
How To Check The Blogger AMP Validation
To know whether your blogger blog is now an AMP page, then you can check out some of the AMP validation check websites that are around.
1st Method
Open the website validator.ampproject.org.
The website will help you with all the problems you may need to solve for your blogger AMP versions by using the bellow idea.
Enter the url value to the URL field, for example –
https://www.seoblur.com/p/contact-us.html
2nd Method
Move to chrome.
Open your AMP page in Chrome browser, for example –
https://www.seoclive.com/p/contact-us.html
Add the ending “#development=1” to the URL, for example –
https://www.seoblur.com/p/contact-us.html#development=1.
After that , open the Crome validation tool to check whether your Blogger AMP pages have errors.
How To Add Style To Blogger AMP
Step 1. Log in to Blogger and choose your specific website to add the HTML AMP code.Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for <html>
Step 6. Replace the above line with the following code
Add below CSS media queries inside your <style amp-custom='amp-custom'> tag before the ending /*]]>*/</style> tag.
Any style codes you add in the above style AMP will be displayed in your AMP version. It may be share buttons or any other styles.
One AMP tip after adding.
All about the adding of Blogger AMP is covered and now your mobile page visitors will get to enjoy your speed of your website in lightening speeds. You can go ahead and customize the look of your mobile AMP pages by adding several elements to the AMP style code. Thanks for loving my tutorial and keep close for more Blogger website freebies.
Post a Comment