What tutorial do you want for the next article! Request Here!
الصفحة الرئيسية
Blogger
How-to

How to Implement Google AMP to Blogger

Guide to Implement or add correct images, Youtube video, Adsense ad on AMP pages to pass validation.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Guide to Implement Google AMP to Blogger

AMP or Accelerated Mobile Pages is an open source project used to provide web pages that load faster on mobile devices, released in October 2015 with aim of improving user experience, especially publishers, in better optimization of mobile pages.

AMP HTML is built with existing web structures but limits CSS, HTML and Javascript so that websites can be accessed faster.

How does AMP HTML work?

AMP HTML works by adding AMP JavaScript library and not changing main structure of a web. The web structure as usual, only adds AMP JS library so that it's sufficient for the AMP HTML spec. Simple code from a web with AMP HTML like this:

<!doctype html>
<html amp='amp' dir='ltr' lang='id'>
  <head>
    <meta charset='utf-8'/>
    <link rel='canonical' href='hello-world.html'/>
    <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1'/>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async='async' src='https://cdn.ampproject.org/v0.js'></script>
  </head>
  <body>Hello World!</body>
</html>

Adding the AMP JS Library will include:

  1. AMP JS Library, which manages loading external resources to ensure pages render faster.
  2. AMP validator that provides a way for web developers to easily validate that their code meets the AMP HTML specification.
  3. Several custom elements, called AMP HTML components, which make common patterns easy to implement.

AMP JS library includes built-in components (amp-video, amp-img) so no additional scripts are needed, to speed up rendering.

AMP Validator

AMP Validator allows web developers to easily identify if a web page doesn't meet the AMP HTML specification.
Visit AMP Validator page.

AMP HTML Components

AMP HTML Components are set of additional custom elements or replace the functionality of HTML5 elements.

  1. Overrides spec disallowed HTML5 elements such as amp-img and amp-video.
  2. Implement third-party content such as amp-youtube, amp-ad, dan amp-twitter.
  3. Added other designs, such as amp-lightbox and amp-carousel
  4. Simplifies web creation techniques, such as amp-anim, which allows web developers to display animated images, either images (GIF) or video files (WebM or MP4) based on browser compatibility.

How to add correct images on AMP pages to pass validation

The most basic difference between AMP and non-AMP versions is the writing of image code that uses <amp-img> tag.

To pass validation, make sure all <img> image tags in your posts have been replaced with <amp-img>. Example of correct image writing in AMP:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>

The width and height attributes is mandatory so that the aspect ratio is known without changing the original image size.

Several layout options are supported, including: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, and responsive. The most commonly used layouts are responsive and intrinsic, besides being easier, the images displayed also adjust to the screen size.

Read the complete reference of amp-img.

The Importance of Using <noscript> Tags

The basic usage of this tag is to display content when javascript is disabled in the user's browser.

In the Blogger case, this tag is required to display thumbnail of articles on home page or in other widgets such as PopularPosts or FeaturedPost, for example:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
  <noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>

How to add Youtube video in AMP

The first preparation before displaying Youtube videos on AMP pages is that you must add amp-youtube JS library on your blog. To make it neater we collected all the JS libraries in <!-- Google AMP JavaScript --> group, find the code in <head> tag of your blog.

<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>

Adding Youtube Videos to AMP Pages

Copy the ID video you want to display. To get it, check url of the video:

youtube.com/watch?v=xxxxxxxxxxx

Paste the ID video you got in the tag below:

<amp-youtube data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>

The supported layouts for this tag are: fill, fixed, fixed-height, nodisplay and responsive. With the responsive layout, width and height in the example above will result in a properly layout video with an aspect ratio of 16:9.

Auto Play Feature

The autoplay setting will automatically play/pause video when the page is scrolled in/out on certain browser screens, the video will be automatically muted when autoplay starts and sound will appears when user clicks/taps on the video.

This feature may not be supported on older browsers, but if you want to try it add autoplay='autoplay' attribute to the <amp-youtube> tag, for example:

<amp-youtube autoplay='autoplay' data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>

You can read on the official website to find out more about amp-youtube.

How to write the correct Adsense ad code in AMP version

First make sure that the below JS library is installed in your template, if not then add it in the <head> section:

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>

This script also supports several other ad provider sites. In the latest update, this script has been added in the template so you don't need to do anything with this script.

Google Adsense Already Supports AMP

The good news is that now Google Adsense fully supports AMP, you can immediately get the <amp-ad> code when creating a new ad unit, this is an example the ad code you will get:

<amp-ad width='100vw' height='320'
  type='adsense'
  data-ad-client='ca-pub-000000000000000'
  data-ad-slot='0000000000'
  data-auto-format='rspv'
  data-full-width=''>
  <div overflow=''></div>
</amp-ad>

Setting up Auto Ads on AMP

  1. Login to your Adsense account
  2. click Ads > Overview
  3. click Already have an AMP site?
  4. on the 'Get Adsense code for AMP site' page, enable Allow Google to place display ads on your AMP site,
  5. copy the amp-auto-ads-0.1.js script or find and enable code like this inside your blog's <head> tag: 
    <!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
  6. Copy <amp-auto-ads> code or find the code below (right after the <body> tag) and replace the Adsense ID listed with yours. 
    <!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

    Instruction: Remove the opening and closing comment tags <!-- --> to activate.

  7. Click done, it will take at least 1 hour to show ads on your blog page.
You May Like These Posts:
Go to Link
#Blogger #How-to #Tutorial

تعليق واحد

  1. more easy? just use theme62 template for blogger.. no need setup again, just post article and then, auto amp :)
To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.