To use AMP with WordPress, you will need to install and activate the AMP plugin. In your WordPress dashboard, under the Plugins menu, click on Add New. Search for the AMP plugin. Install and activate the plugin. This is the official plugin from the AMP development team. I do not recommend it. Go further down to see a better alternative.
Once activated, you can now go to Appearance >> AMP and use the mobile view to see how your website looks on mobile.
TIP: Unless you consider build your website with the Gutenberg builder, install the plugin "Classic Editor", which will deactivate the Gutenberg editor. The Gutenberg editor is the worst editor ever made.
You can easily customise the header background colour and text colour. The header background colour will also be used for internal and external links. If you have a log and a favicon, those will also be shown. When you are done customising the AMP view, you can then save your changes.
To preview a single post on your website simply add /amp/ at the end of the link. For example:
This will show a truncated version of the post. It will be automatically optimized for mobile view. The current version of the AMP plugin only supports posts and not pages.
When you view the source code of the post, you will find the following additional line in the HTML:
This line is meant to guide search engines on where to look for the AMP version of the page.
The official plugin has limited features. If you are looking for additional functionality, we recommend using the AMP for WP – Accelerated Mobile Pages Plugin. It’s a free plugin but has much more functionality than the official AMP plugin.
Once activated you will need to set up basic configurations as shown next. You will need to choose the website type, select where you want to use AMP, configure the design, analytics, privacy, advertisement, and 3rd party compatibility options.
You can then go ahead and configure other aspects of your AMP setup. Under the settings tab, you will find several options for configuring your AMP setup.
Under the general screen, you can upload a custom logo to use for AMP. You can also enable or disable AMP for pages, posts, homepage, categories, and tags. This will largely depend on the traffic you are receiving and the consumption of your consumers.
Under the Advertisement screen, you can toggle the ad sections for AMP.
Under the SEO screen, you can configure various settings related to search engine optimization. This is probably one of the most important sections. It is recommended to enable the Meta description option. You can also select integrations for popular SEO plugins such as YOAST.
Under the page builder tab, you can enable or disable the AMP page builder. There is a simple AMP builder that is very good for building AMP pages.
If you use DIVI or Elementor etc. you can purchase an addon there will adapt the pages to AMP.
Under the Performance tab, you can toggle some performance enhancement options such as minification and browser caching. While building the page I recommend disable these.
Under the Analytics tab, you can enable any analytics tools that you are using.
The structured data tab allows you to customise the default structured data. You can choose a default post image, custom log size and configure schema options.
Under the Notice Bar & GDPR tab, you can enable a GDPR compliance notice.
Under the Push Notifications tab, you can setup AMP with one signal.
Under the Contact form tab, you can enable support for contact form 7, gravity forms and Ninja forms.
The comments form section will allow you to display a comments form in AMP pages.
Under the Instant Article tab, you can enable support for Facebook instant articles.
Under the Tools tab, you can choose categories and tags to exclude from AMP.
The advanced section has several advanced configuration options.
Under the eCommerce tab, you can enable support for WooCommerce.
The other relevant tab is the Design tab. It allows you to modify the design of the pages easily. You can r choose a pre-made template or you can create one yourself.