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/