Amp for WordPress - Tech lunch Inspiration Marketing
Download as PPTX, PDF1 like653 views
The document discusses AMP (Accelerated Mobile Pages) implementation for WordPress, highlighting its advantages like improved mobile traffic and user experience, alongside drawbacks such as limited content display control. It provides detailed instructions on embedding AMP components like images, videos, and audio, as well as integration with Yoast SEO for effective metadata management. Additional resources and links for validation and examples are also included.
Amp for WordPress - Tech lunch Inspiration Marketing
- 1. AMP for WordPress Inspiration Marketing Tech Lunch Fellyph Cintra
- 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">
- 17. How the Plugin Works Creates two versions (original and amp) Enables the AMP page customization Add Rich snippet
- 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