How to create AMP pages in wordpress
AMP pages are fast as it relies on inline CSS and an existing library of JavaScript files that are loaded asynchronously while AMP pages can be divided into three basic parts
- AMP HTML is HTML with some restrictions for reliable performance.
- AMP JS ensures the fast rendering of AMP HTML pages.
- AMP CDN used to serve cached AMP HTML pages.
AMP pages in Wordpress
Step 1: Install AMP Automattic wordpress plugin
Step 2: Validate & Tweak via google search console
Step 3: Get schema markup validated with structured data testing tool
Step 4: Track AMP enabled mobile pages with Google Analytics
The plugin only creates AMP content but does not automatically display it to users when they visit from a mobile device. Pages and archives are not currently supported. After installing plugin, append “/amp/” or alternatively append “?amp=1”
Best practices AMP pages
- Replace image references with images sized to the viewer’s viewport.
- Inline images that are visible above the fold.
- Inline CSS variables.
- Preload extended components.
- Minify HTML and CSS.
- Allows only asynchronous scripts
- External resources like images must state their size in HTML
- All Javascript must be out of critical path
- No user written Javascript is allowed, only AMP supported
- Fonts must be loaded with a link tag or a CSS @font-face rule
AMP pages Restrictions
For AMP websites have to maintain at least two versions of any article page: The original version of your article page that users will typically see, and the AMP version of that page.
Make AMP’s Inline CSS Easier
AMP optimizations
AMP doesn’t permit form elements and third-party JavaScript, we likely will not be able to have lead forms, on-page comments and some other elements you may be used to having on your page in a standard implementation.
Plugin links
https://wordpress.org/plugins/amp/
https://wordpress.org/plugins/glue-for-yoast-seo-amp/
