Wednesday, December 6, 2017

How to Fix Warning JavaScript in AMP Blogger Template

    How to Fix Warning JS AMP Blogger.  amp-* extension .js script was found on this page but is unused


    Blogger AMP HTML integrated Blogspot templates are caught off guard with "warnings  amp-* extension .js script was found on this page" or "This may become an error in the future" when checking their AMP blog posts/pages using AMP Project validator tool.

    As we know that if we store AMP elements like amp-youtube, amp-audio, and others (except amp-img because it's built-in) then we have to keep the corresponding js in order for the element to appear.

    And if we put a js but there are no elements corresponding to the js, it will appear warning on AMP.


    As with amp-youtube, if amp-youtube is not displayed on all pages, then for pages that do not display amp-youtube AMP warning will appear for amp-youtube.js.

    Actually this could use conditional tags for certain pages so that amp-youtube.js only appears on certain pages that use the amp-youtube element.

    But of course it would be inconvenient to use the amp-youtube element on a new page, we would have to add the new page url into the conditional tag for amp-youtube.js in the edit HTML to allow the amp-youtube element to show.

    Well so as not to bother, we can use the following trick:

    Please save amp-youtube.js above the code </ head> then please save the following code under <body> code.
    
    <amp-youtube
         data-videoid="sY524jY1tBQ"
         height="270"
         layout="nodisplay"
         width="480"></amp-youtube>


    With layout="nodisplay" then the element will not appear but will be detected on all pages. Next we are free to save the amp-youtube element in any post page with the following code:
    
    <amp-youtube
         data-videoid="VIDEOID"
         height="270"
         layout="responsive"
         width="480"></amp-youtube>


    It's easy, right? Of course this can be used also for other elements such as amp-audio, amp-facebook, amp-image-lightbox, and others.