Online Tutorials & Training Materials | STechies.com
Register Login

What is AMP? & How Will You AMP Your Site?

|| 0

What is AMP? & How Will You AMP Your Site?
Stechies

Google AMP Accelerated Mobile Pages

Google AMP is a fremework for creating mobile web pages, AMP consists of three basic parts.

  • AMP HTML
  • AMP JS
  • AMP CDN

AMP for WordPress?

Install The Official WordPress Plugin
https://github.com/Automattic/amp-wp

Validate & Tweak AMP

in Google Search Console their is a new tab Accelerated Mobile Pages

Google Chrome

Append "#development=1" to the end of the URL. Hit Control + Shift + I to open Chrome Developer Tools and head over to Console.

Example: http://www.xyz.com#development=1

You may need to refresh the page, but once you do, it will either say “AMP validation successful” or give you a list of issues to fix.

Google Analytics for AMP

add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );
function xyz_amp_add_analytics( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<?php
}

List of google AMP TAGS & Procedure that need to change in your website.

1. HTML tag : <html amp lang="en">

2. Contain a <script async src="https://cdn.ampproject.org/v0.js"> </script> tag as the last element in their head (this includes and loads the AMP JS library).

3. Head tag Contain the following in their <head> tag:

<style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

4. Style: Any other style will be in the following tag: <style amp-custom> </style>

6. Image tag: <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive"></amp-img>. NOTE: height and width is mandatory.

7. External Scripts powered by AMP can be called like below: <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

8. Script type has to be: type="application/ld+json"

9. Accordian: <amp-accordion>

10. AD:
<link rel="canonical" href="https://ampbyexample.com/components/amp-ad/">

AND

<amp-ad width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>

11. Analytics: <amp-analytics>

12. AUDIO:
<link rel="canonical" href="https://ampbyexample.com/components/amp-audio/">
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

<amp-audio width="auto"
height="50"
src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
</amp-audio>

13 Canonical:
<link rel="canonical" href="https://ampbyexample.com/components/amp-carousel/">
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">

<amp-carousel height="300"
layout="fixed-height"
type="carousel">
<amp-img src="/img/image1.jpg"
width="400"
height="300"></amp-img>
<amp-img src="/img/image2.jpg"
width="400"
height="300"></amp-img>
<amp-img src="/img/image3.jpg"
width="400"
height="300"></amp-img>
</amp-carousel>

14. Facebook Post embed:

<link rel="canonical" href="https://ampbyexample.com/components/amp-facebook/">
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

<amp-facebook width="552"
height="303"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

15. IFRAME:
<link rel="canonical" href="https://ampbyexample.com/components/amp-iframe/">
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">

<amp-iframe width="500"
height="281"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://player.vimeo.com/video/140261016">
</amp-iframe>

16. LIGHTBOX:
<link rel="canonical" href="https://ampbyexample.com/components/amp-image-lightbox/">

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

<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive"
src="/img/Border_Collie.jpg"
width="300"
height="246"></amp-img>

17. List tags:
<link rel="canonical" href="https://ampbyexample.com/components/amp-list/">
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

<ul>
<amp-list width=auto
height=100
layout=fixed-height
src="https://ampbyexample.com/json/examples.json">
<template type="amp-mustache"
id="amp-template-id">


  • <a href={{url}}>{{title}}</a>
    </li>
    </template>
    </amp-list>
    </ul>

    18. Social Share:
    <link rel="canonical" href="https://ampbyexample.com/components/amp-social-share/">

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

    <amp-social-share type="twitter"
    width="60"
    height="44"> </amp-social-share>
    <amp-social-share type="gplus"
    width="60"
    height="44"></amp-social-share>
    <amp-social-share type="email"
    width="60"
    height="44"></amp-social-share>
    <amp-social-share type="pinterest"
    width="60"
    height="44"></amp-social-share>
    <amp-social-share type="linkedin"
    width="60"
    height="44"></amp-social-share>
    <amp-social-share type="facebook"
    width="60"
    height="44"
    data-param-app_id="254325784911610"></amp-social-share>

    19. Video Embed:

    <link rel="canonical" href="https://ampbyexample.com/components/amp-video/">

    <amp-video width=480
    height=270
    src="/video/tokyo.mp4"
    poster="/img/tokyo.jpg"
    layout="responsive"
    controls>
    <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
    </div>
    <source type="video/mp4"
    src="/video/tokyo.mp4">
    <source type="video/webm"
    src="/video/tokyo.webm">
    </amp-video>

    20.Youtube Video:
    <link rel="canonical" href="https://ampbyexample.com/components/amp-youtube/">

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

    <amp-youtube width="480"
    height="270"
    layout=responsive
    data-videoid="lBTCB7yLs8Y">
    </amp-youtube>

    21. AMP basic templates available on:
    https://amptemplates.com/