1.
AMP with W rdPress
Pradeep Sonawane
VP Engineering

2.
AMP Basics

3.
AMP Page Structure
● AMP HTML
● AMP JS
● AMP Cache

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.
WordPress AMP Plugin

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.
Three Template Modes

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.
AMPNon-AMP

10.
What about my responsive site?

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.
Supported Pages:
● Post URL - /post-name/
● Page URL - /page-name/
● Homepage URL - /
● Blog - /blog/
Possibly all site pages!
#3 Native Mode

13.
What’s happening behind the
scene?

14.
Customizing AMP Pages

15.
Customizing AMP Pages

16.
WordPress Case Studies

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.
Thank you! :)
pradeep@rtcamp.com