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 with WordPress by Pradeep Sonawane @ Google AMP Roadshow Mumbai 2018

392 views

Published on

AMP WordPress plugin is heading towards v1.0 release. It has many new features, including something called the “Native AMP” mode. Native AMP enables a WordPress site to be served entirely as a valid AMP without any coding efforts.

Pradeep Sonawane, VP Engineering @rtCamp covered AMP Native and other aspects of AMP which benefits WordPress users in this talk.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

AMP with WordPress by Pradeep Sonawane @ Google AMP Roadshow Mumbai 2018

  1. 1. AMP with W rdPress Pradeep Sonawane VP Engineering
  2. 2. AMP Basics
  3. 3. AMP Page Structure ● AMP HTML ● AMP JS ● AMP Cache
  4. 4. AMP Components Regular HTML Tag AMP Component/Tag <img> <amp-img> <iframe> <amp-iframe> <video> <amp-video> <h1>,<h2>,<h3>, and so on.. No change <div>,<span>,<p>,<a> No change For More info - https://www.ampproject.org/docs/reference/components
  5. 5. WordPress AMP Plugin
  6. 6. Officially Supported https://github.com/Automattic/amp-wp https://wordpress.org/plugins/amp Open source project developed collaboratively by Google, Automattic and XWP.
  7. 7. Three Template Modes
  8. 8. #1 Classic Mode Supported Pages ● Post URLs - /post-name/amp ● Page URLs - /page-name/amp ● Media URLs - /attachment/amp Conflicting page slugs like /amp in classic mode will use /amp/?amp to prevent conflicts. <link rel="amphtml" href="your-amp-url">
  9. 9. AMPNon-AMP
  10. 10. What about my responsive site?
  11. 11. #2 Paired Mode Supported Pages: ● Post URL - /post-name/?amp ● Page URL - /page-name/?amp ● Homepage - /?amp ● Blog - /blog/?amp Possibly all site pages!
  12. 12. Supported Pages: ● Post URL - /post-name/ ● Page URL - /page-name/ ● Homepage URL - / ● Blog - /blog/ Possibly all site pages! #3 Native Mode
  13. 13. What’s happening behind the scene?
  14. 14. Customizing AMP Pages
  15. 15. Customizing AMP Pages
  16. 16. WordPress Case Studies
  17. 17. Sites using AMP plugin Classic mode Paired mode Native mode IndianExpress - indianexpress.com Vanguard - vanguardngr.com RTB - realtimeboard.com/blog Make XWP - make.xwp.co/ rtCamp - rtcamp.com XWP - xwp.co Wine Folly - winefolly.com Felix - felix-arntz.me
  18. 18. Thank you! :) pradeep@rtcamp.com

×