This presentation is about the benefits of using AMP in a Website and how to use AMP in a WordPress website. The plugins necessary to use AMP and how to test your website.

1. AMP
for WordPress
Inspiration Marketing
Tech Lunch
Fellyph Cintra

2. Introduction
https://www.youtube.com/watch?v=lBTCB7yLs8Y

3. AMP vs. Original Version

4. Example
s

5. Pros
Great for sites with high mobile traffic
Help with rankings
Improves user experience

6. Cons
Less control over how the content is displayed
Not support other analytics software

7. Requirements
Use HTML5
Load the amp script
Use specific tags
Add the amp-boilerplate CSS
Use structure data to show rich cards

8. Qualified
Structured
Data Content
Articles - Top stories carousel (AMP-only)
Local Businesses
Music
Recipes
Reviews
TV & Movies
Videos

9. Articles

10. How to use it
?
Include the new image tag
Modify the
presentation(CSS)
Prepare Your Page for
Discovery and
Distribution

11. Add Image
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Or :
<amp-img src="fixed.jpg" width="264" height="96">
<noscript>
<img src="fixed.jpg" width="264" height="96" />
</noscript>
</amp-img>

12. Add Videos
<amp-video width="400" height="300" src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg">
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>

13. Add Audio
<amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type="audio/mpeg" src="foo.mp3">
<source type="audio/ogg" src="foo.ogg">
</amp-audio>

14. Modify the Layout
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

15. Prepare Your Page for Discovery and Distribution
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
And this to the AMP page:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

16. AMP + WordPress
https://wordpress.org/plugins/amp/

17. How the Plugin Works
Creates two versions (original and amp)
Enables the AMP page customization
Add Rich snippet

18. AMP Version
http://inspiration.ie/web-design-hate-you-site-6-signs-
website-needs-makeover/amp/
Original:
http://inspiration.ie/web-design-hate-you-site-6-signs-
website-needs-makeover/

19. Change the Appearance

20. Yoast SEO + AMP
https://wordpress.org/plugins/glue-for-yoast-seo-amp/

21. Yoast SEO + AMP
The Yoast SEO: AMP Glue plugin integrates Yoast SEO into
your AMP pages.
This makes sure your meta-data is implemented correctly.
Enable to select the post types that have AMP support
Add more Design options

22. Validating the content
https://search.google.com/search-console/amp

23. Example
https://search.google.com/search-console/amp?id=Tu5WMqEqN6g-
ks2x7_YXSQ

24. Links
https://inspiration.ie/amp-me-baby/
https://www.ampproject.org/

25. Thanks - Obrigado