Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amp for WordPress - Tech lunch Inspiration Marketing

562 views

Published on

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.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Amp for WordPress - Tech lunch Inspiration Marketing

  1. 1. AMP for WordPress Inspiration Marketing Tech Lunch Fellyph Cintra
  2. 2. Introduction https://www.youtube.com/watch?v=lBTCB7yLs8Y
  3. 3. AMP vs. Original Version
  4. 4. Example s
  5. 5. Pros Great for sites with high mobile traffic Help with rankings Improves user experience
  6. 6. Cons Less control over how the content is displayed Not support other analytics software
  7. 7. Requirements Use HTML5 Load the amp script Use specific tags Add the amp-boilerplate CSS Use structure data to show rich cards
  8. 8. Qualified Structured Data Content Articles - Top stories carousel (AMP-only) Local Businesses Music Recipes Reviews TV & Movies Videos
  9. 9. Articles
  10. 10. How to use it ? Include the new image tag Modify the presentation(CSS) Prepare Your Page for Discovery and Distribution
  11. 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. 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. 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. 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. 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. 16. AMP + WordPress https://wordpress.org/plugins/amp/
  17. 17. How the Plugin Works Creates two versions (original and amp) Enables the AMP page customization Add Rich snippet
  18. 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. 19. Change the Appearance
  20. 20. Yoast SEO + AMP https://wordpress.org/plugins/glue-for-yoast-seo-amp/
  21. 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. 22. Validating the content https://search.google.com/search-console/amp
  23. 23. Example https://search.google.com/search-console/amp?id=Tu5WMqEqN6g- ks2x7_YXSQ
  24. 24. Links https://inspiration.ie/amp-me-baby/ https://www.ampproject.org/
  25. 25. Thanks - Obrigado

×