How to Use AMP with WordPress

Share this article

AMP Logo
To learn more about developing for mobile and other device sizes, take a look at the SitePoint Premium course Responsive Tips and Tricks
AMP with WordPress

Google’s Accelerated Mobile Pages (AMP) project has been launched on 24 February 2016. With this launch, thousands of developers became active participants in the project. Countless websites now have AMP versions of pages, and many developers are learning to use AMP – in this case, learning to use AMP with WordPress.

Google takes AMP very seriously. It is one of their search engine ranking criteria as well. In that way, Google is making AMP almost a necessity for many sites. In this article, I am going to give you detailed information about Google’s Accelerated Mobile Pages project. This includes the steps for invoking it in your WordPress site.

What is AMP?

Some developers might not be all that familiar with AMP yet. It is a mobile-friendly framework that enables fast loading of your web page on mobile browsers. It is an open source technology designed to empower website publishers to efficiently improve the speed and user experience of loading content pages on mobile devices. And all of this enhancement occurs with zero effect on advertisement revenue.

If you’re an experienced developer, you can achieve a similar kind of enhancement through comprehensive page loading optimizations. However, Accelerated Mobile Pages make these optimizations very easy to execute without spending as much time and energy on mobile layout.

For websites who are already working double time for their SEO rankings, this just adds more tasks to their to-do list, of course, because AMP pages can also enhance the SEO ranking of your website. That is, perhaps, the main reason big enterprises are also adopting AMP.

AMP Project

AMP consists of three major components:

  • AMP HTML
  • AMP JS
  • AMP Cache

AMP HTML

It is a subset of HTML with many restrictions, custom tags, and custom properties. Adapting to this is not complicated if you have a pre-existing familiarity with HTML. Yet if you find that you have any difficulty, I suggest you visit this link to learn more about how to create your AMP HTML page.

AMP JS

AMP provides a limited amount of JavaScript for mobile web pages. Now an important thing to bear in mind about JS in AMP is that third party JavaScript is not allowed with AMP.

AMP Cache

The Google AMP Cache is a CDN for delivery of AMP pages. You all know the core function of Content Delivery Networks – they distribute resource loading to servers nearer to your website’s viewers. For an AMP page, this CDN will allow for the minimum loading time due to distance latency that is possible.

The Relevance of the AMP Sign for SEO

Back in 2016, when Google was launching AMP, AdAge.com published an interview with Google’s senior director of news and social products, Richard Gingras. In that interview, he said that AMP usage would not directly correlate to your search ranking, as it is not a direct factor. He then added, “All of the other (search engine ranking) signals need to be satisfied as well.”

However, after this clarification, everything becomes more clear. He said, “If we had two articles that from a signaling perspective scored the same in all other characteristics but for speed, then yes, we will give an emphasis to the one with speed because that is what users find compelling.”

Even Google doesn’t deny the relevance of AMP website for SEO. Speed is always an influencing factor when it comes to search engine optimization. If an AMP page gets more clicks and less bounce rate due to faster loading, Google will definitely rank the website higher because of the better user experience.

How Can One AMP Their Website?

You have to maintain two versions of an article page on a website. The original article page, for default web user, and an AMP version for potential mobile users.

Also note that AMP doesn’t allow form elements and third party JavaScript. This means you cannot put a contact form or on-page comments in a standard implementation, as AMP is primarily for the delivery of content.

  • I recommend rewriting the entire website template to cope with the restrictions. For instance, the CSS of an AMP page must be in line and the page size less than 50 kb. Also, due to the fast loading of fonts, they should be loaded with the help of the amp-font extension in order to efficiently load the page.
  • It is advised that multimedia must be handled with special care. For images, you need to utilize the element and precise width and height. Also, if your images are GIFs, then you will need to use the separate amp-anim extended component.
  • For videos, there are two choices. There is a custom tag for embedded videos called amp-video. However, if you want to embed a YouTube video, there is a specific tag for that called amp-youtube.
  • For embedding slideshows, you can use amp-carousel. In addition to that if you want to add an image lightbox you can use amp-image-lightbox.
  • For embedding social media platforms such as Twitter, Facebook, Instagram, Pinterest, and Vine, you can use each respective component.
  • This point is very important. Now, once everything is set and you’re ready to go with your AMP page, you have to let Google know about your AMP website. You will have to add a tag on your main post page with information about your AMP page <link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/"> as well as a canonical tag on the AMP page with information about the main page <link rel="canonical" href="http://www.yourblog.com/blog-post/">.

You can learn more about AMP tags and Schema.org metadata for AMP here. Schema.org metadata “is a requirement to make your content eligible to appear in the demo of the Google Search News carousel”. So, if you wish to achieve success through Google AMP, you have to get your schema right.

Does Google Analytics work on AMP?

Yes, of course, Analytics works on AMP. In fact, Analytics on AMP is quite smart as well. In order to prevent a website to slow down due to multiple analytics trackers, they work on the core philosophy of, “Measure Once, Report to Many”. Generally, there are two paths to enable Analytics with AMP for your website.

  • The amp-pixel element: It is a simple tag to count a number of page views (similarly to a tracking pixel) by using a GET request.
  • The amp-anayltics extended component: This component is more advanced than the amp-pixel. You can use it to measure any activity on an AMP page. It enables you to specify JSON config which provides details for what to measure and where to send the report.

How to Use AMP with WordPress Websites

One of the simplest ways to use AMP, in fact, is to implement it on your WordPress website. You can use the official plugin developed by Automattic/WordPress.

Step One: Install the WordPress Plugin

Let’s begin the installation! download the plugin from the above link and nstall the plugin on your WordPress site. After the installation, you just need to append “/amp/” to an article page. If you don’t have pretty permalinks enabled, you can try ?amp=1.

Step Two: Validate & Tweak

Google search console picks up the AMP version of your article page from the metatag which will be appended by the plugin. However, the problem arises because it usually takes days to detect these kinds of changes.

So, now what to do? To handle these tricky situations, I recommend using a combination of the Chrome validation process and the search console. In order to use the Chrome validation process, visit any of your AMP pages in Chrome. Then at the end of the URL append #development=1. Now hit Control+Shift+I to open the Chrome developer tools.

Refresh the page, and either it will say, “AMP Validation Successful” or give you a detailed list of issues to be fixed.

You can see that installing a plugin is not enough alone. You have to validate every data by visiting the page and repeating the above steps in order to be benefiting from the Accelerated Mobile Pages.

Step Three: Validate Schema Markup

You’ve already learned that validating Schema Markup is very crucial for your AMP pages. I recommend Google’s Structured Data Testing Tool to test your pages for valid schema markup. However, I found some problems with WordPress over the display of logo. So, I made some modifications in order to overcome this issue.

Go to the Plugins, click on “Editor” and then select “AMP”. Change these lines in the editor to modify the plugin.

if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}

to:

$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);

Please make sure that in the URL, you specify the location where your logo is and specify the height and width accordingly.

Step Four: Integrate Google Analytics with the AMP WordPress Plugin.

Now, you are almost done. However, I prefer to use Google Analytics to track the stats. The AMP WordPress plugin did not proactively activate amp-analytics, however, it is quite easy to execute.

In order to enable the AMP WordPress plugin to work in collaboration with Google Analytics, go to the Plugins -> Editor -> select “AMP” and add the following code to the end of it.

add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  (YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    <?php
}

Make sure that you change the value UA-XXXXX-Y to your own Google Analytics Property ID!

After making this change, re-validate your AMP pages, and then your AMP pages will be trackable.

A Verdict on Google’s AMP Project

Google wants the AMP project to be a good experience for the users. Still, the question is whether or not AMP can make everything super fast. The answer to this question is pretty open-ended. If you optimize your website poorly, then AMP will result in some significant boost-ups.

However, Accelerated Mobile Pages are not magic bullets. Techniques to improve website’s speed have been available from the start. AMP is just an attempt to combine and eliminate all the major slow-loading factors and offer a better solution for the users.

What do you think of the AMP Project? Please share your views in the comments section below!

Frequently Asked Questions (FAQs) about Using AMP with WordPress

What is the main benefit of using AMP with WordPress?

The main benefit of using AMP (Accelerated Mobile Pages) with WordPress is to enhance the mobile browsing experience. AMP is a Google-backed project designed to make web pages load faster on mobile devices. It achieves this by stripping down the HTML and using a streamlined version of CSS. This results in a significant improvement in page loading speed, which can lead to better user engagement, retention, and improved mobile SEO.

How does AMP affect SEO?

AMP can significantly improve your SEO because page load speed is a ranking factor in Google’s algorithm. By making your web pages load faster, AMP can help improve your visibility in search engine results, especially for mobile users. Additionally, Google often highlights AMP pages in prominent carousels in the search results, providing further visibility.

Can I use AMP on my existing WordPress site?

Yes, you can use AMP on your existing WordPress site. There are several plugins available that can help you implement AMP on your WordPress site. These plugins help convert your existing posts and pages into AMP-compatible versions.

Does AMP affect the functionality of my WordPress site?

AMP restricts certain HTML, CSS, and JavaScript elements to ensure fast page load times. This means that some features of your WordPress site may not work as expected on the AMP version of your site. However, most AMP plugins offer options to add functionality back in a way that still complies with AMP standards.

How can I customize the appearance of my AMP pages?

The appearance of your AMP pages can be customized using CSS. However, because AMP restricts the use of certain CSS properties to ensure fast page load times, you may need to use a more streamlined approach to styling. Some AMP plugins for WordPress offer built-in customization options.

How can I check if my AMP implementation is successful?

You can check if your AMP implementation is successful by using the AMP Test tool provided by Google. This tool will analyze your AMP page and report any errors that might prevent it from being served as an AMP page in Google search results.

Can I use AMP without a plugin in WordPress?

Yes, you can implement AMP without a plugin in WordPress, but it requires a good understanding of web development and AMP standards. You would need to create separate AMP-compatible versions of your posts and pages, and add the necessary AMP HTML tags manually.

Does AMP support ads and analytics?

Yes, AMP supports both ads and analytics. However, because AMP restricts certain HTML, CSS, and JavaScript elements, you may need to use AMP-specific tags and scripts for ads and analytics.

Can I disable AMP for specific posts or pages?

Yes, most AMP plugins for WordPress offer the option to disable AMP for specific posts or pages. This can be useful if you have certain content that doesn’t work well with AMP restrictions.

Is AMP a replacement for responsive design?

No, AMP is not a replacement for responsive design. While AMP can enhance the mobile browsing experience by making pages load faster, it doesn’t replace the need for a website design that adapts to different screen sizes. It’s best to use AMP in conjunction with responsive design for the best mobile user experience.

Jason DaszkewiczJason Daszkewicz
View Author

Jason is a renowned WordPress development professional who works with WordSuccor Ltd. He is a passionate blogger who loves to write and share everything about WordPress and new web design technologies.

accelerated mobile pagesampJeffSWordPress
Share this article
Read Next
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
Aurelio De RosaMaria Antonietta Perna
Quick Tip: How to Align Column Rows with CSS Subgrid
Quick Tip: How to Align Column Rows with CSS Subgrid
Ralph Mason
15 Top Web Design Tools & Resources To Try in 2024
15 Top Web Design Tools & Resources To Try in 2024
SitePoint Sponsors
7 Simple Rules for Better Data Visualization
7 Simple Rules for Better Data Visualization
Mariia Merkulova
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
SitePoint Team
Best Programming Language for AI
Best Programming Language for AI
Lucero del Alba
Quick Tip: How to Add Gradient Effects and Patterns to Text
Quick Tip: How to Add Gradient Effects and Patterns to Text
Ralph Mason
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Vultr
How to Optimize Website Content for Featured Snippets
How to Optimize Website Content for Featured Snippets
Dipen Visavadiya
Psychology and UX: Decoding the Science Behind User Clicks
Psychology and UX: Decoding the Science Behind User Clicks
Tanya Kumari
Build a Full-stack App with Node.js and htmx
Build a Full-stack App with Node.js and htmx
James Hibbard
Digital Transformation with AI: The Benefits and Challenges
Digital Transformation with AI: The Benefits and Challenges
Priyanka Prajapat
Quick Tip: Creating a Date Picker in React
Quick Tip: Creating a Date Picker in React
Dianne Pena
How to Create Interactive Animations Using React Spring
How to Create Interactive Animations Using React Spring
Yemi Ojedapo
10 Reasons to Love Google Docs
10 Reasons to Love Google Docs
Joshua KrausZain Zaidi
How to Use Magento 2 for International Ecommerce Success
How to Use Magento 2 for International Ecommerce Success
Mitul Patel
5 Exciting New JavaScript Features in 2024
5 Exciting New JavaScript Features in 2024
Olivia GibsonDarren Jones
Tools and Strategies for Efficient Web Project Management
Tools and Strategies for Efficient Web Project Management
Juliet Ofoegbu
Choosing the Best WordPress CRM Plugin for Your Business
Choosing the Best WordPress CRM Plugin for Your Business
Neve Wilkinson
ChatGPT Plugins for Marketing Success
ChatGPT Plugins for Marketing Success
Neil Jordan
Managing Static Files in Django: A Comprehensive Guide
Managing Static Files in Django: A Comprehensive Guide
Kabaki Antony
The Ultimate Guide to Choosing the Best React Website Builder
The Ultimate Guide to Choosing the Best React Website Builder
Dianne Pena
Exploring the Creative Power of CSS Filters and Blending
Exploring the Creative Power of CSS Filters and Blending
Joan Ayebola
How to Use WebSockets in Node.js to Create Real-time Apps
How to Use WebSockets in Node.js to Create Real-time Apps
Craig Buckler
Best Node.js Framework Choices for Modern App Development
Best Node.js Framework Choices for Modern App Development
Dianne Pena
SaaS Boilerplates: What They Are, And 10 of the Best
SaaS Boilerplates: What They Are, And 10 of the Best
Zain Zaidi
Understanding Cookies and Sessions in React
Understanding Cookies and Sessions in React
Blessing Ene Anyebe
Enhanced Internationalization (i18n) in Next.js 14
Enhanced Internationalization (i18n) in Next.js 14
Emmanuel Onyeyaforo
Essential React Native Performance Tips and Tricks
Essential React Native Performance Tips and Tricks
Shaik Mukthahar
How to Use Server-sent Events in Node.js
How to Use Server-sent Events in Node.js
Craig Buckler
Five Simple Ways to Boost a WooCommerce Site’s Performance
Five Simple Ways to Boost a WooCommerce Site’s Performance
Palash Ghosh
Elevate Your Online Store with Top WooCommerce Plugins
Elevate Your Online Store with Top WooCommerce Plugins
Dianne Pena
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Dianne Pena
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
Vultr
Enhance Your React Apps with ShadCn Utilities and Components
Enhance Your React Apps with ShadCn Utilities and Components
David Jaja
10 Best Create React App Alternatives for Different Use Cases
10 Best Create React App Alternatives for Different Use Cases
Zain Zaidi
Control Lazy Load, Infinite Scroll and Animations in React
Control Lazy Load, Infinite Scroll and Animations in React
Blessing Ene Anyebe
Building a Research Assistant Tool with AI and JavaScript
Building a Research Assistant Tool with AI and JavaScript
Mahmud Adeleye
Understanding React useEffect
Understanding React useEffect
Dianne Pena
Web Design Trends to Watch in 2024
Web Design Trends to Watch in 2024
Juliet Ofoegbu
Building a 3D Card Flip Animation with CSS Houdini
Building a 3D Card Flip Animation with CSS Houdini
Fred Zugs
How to Use ChatGPT in an Unavailable Country
How to Use ChatGPT in an Unavailable Country
Dianne Pena
An Introduction to Node.js Multithreading
An Introduction to Node.js Multithreading
Craig Buckler
How to Boost WordPress Security and Protect Your SEO Ranking
How to Boost WordPress Security and Protect Your SEO Ranking
Jaya Iyer
Understanding How ChatGPT Maintains Context
Understanding How ChatGPT Maintains Context
Dianne Pena
Building Interactive Data Visualizations with D3.js and React
Building Interactive Data Visualizations with D3.js and React
Oluwabusayo Jacobs
JavaScript vs Python: Which One Should You Learn First?
JavaScript vs Python: Which One Should You Learn First?
Olivia GibsonDarren Jones
13 Best Books, Courses and Communities for Learning React
13 Best Books, Courses and Communities for Learning React
Zain Zaidi
5 jQuery.each() Function Examples
5 jQuery.each() Function Examples
Florian RapplJames Hibbard
Implementing User Authentication in React Apps with Appwrite
Implementing User Authentication in React Apps with Appwrite
Yemi Ojedapo
AI-Powered Search Engine With Milvus Vector Database on Vultr
AI-Powered Search Engine With Milvus Vector Database on Vultr
Vultr
Understanding Signals in Django
Understanding Signals in Django
Kabaki Antony
Why React Icons May Be the Only Icon Library You Need
Why React Icons May Be the Only Icon Library You Need
Zain Zaidi
View Transitions in Astro
View Transitions in Astro
Tamas Piros
Getting Started with Content Collections in Astro
Getting Started with Content Collections in Astro
Tamas Piros
What Does the Java Virtual Machine Do All Day?
What Does the Java Virtual Machine Do All Day?
Peter Kessler
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Mayank Singh
Layouts in Astro
Layouts in Astro
Tamas Piros
.NET 8: Blazor Render Modes Explained
.NET 8: Blazor Render Modes Explained
Peter De Tender
Mastering Node CSV
Mastering Node CSV
Dianne Pena
A Beginner’s Guide to SvelteKit
A Beginner’s Guide to SvelteKit
Erik KückelheimSimon Holthausen
Brighten Up Your Astro Site with KwesForms and Rive
Brighten Up Your Astro Site with KwesForms and Rive
Paul Scanlon
Which Programming Language Should I Learn First in 2024?
Which Programming Language Should I Learn First in 2024?
Joel Falconer
Managing PHP Versions with Laravel Herd
Managing PHP Versions with Laravel Herd
Dianne Pena
Accelerating the Cloud: The Final Steps
Accelerating the Cloud: The Final Steps
Dave Neary
An Alphebetized List of MIME Types
An Alphebetized List of MIME Types
Dianne Pena
The Best PHP Frameworks for 2024
The Best PHP Frameworks for 2024
Claudio Ribeiro
11 Best WordPress Themes for Developers & Designers in 2024
11 Best WordPress Themes for Developers & Designers in 2024
SitePoint Sponsors
Top 9 Best WordPress AI Plugins of 2024
Top 9 Best WordPress AI Plugins of 2024
Dianne Pena
20+ Tools for Node.js Development in 2024
20+ Tools for Node.js Development in 2024
Dianne Pena
The Best Figma Plugins to Enhance Your Design Workflow in 2024
The Best Figma Plugins to Enhance Your Design Workflow in 2024
Dianne Pena
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Christopher Collins
Build Your Own AI Tools in Python Using the OpenAI API
Build Your Own AI Tools in Python Using the OpenAI API
Zain Zaidi
The Best React Chart Libraries for Data Visualization in 2024
The Best React Chart Libraries for Data Visualization in 2024
Dianne Pena
7 Free AI Logo Generators to Get Started
7 Free AI Logo Generators to Get Started
Zain Zaidi
Turn Your Vue App into an Offline-ready Progressive Web App
Turn Your Vue App into an Offline-ready Progressive Web App
Imran Alam
Clean Architecture: Theming with Tailwind and CSS Variables
Clean Architecture: Theming with Tailwind and CSS Variables
Emmanuel Onyeyaforo
How to Analyze Large Text Datasets with LangChain and Python
How to Analyze Large Text Datasets with LangChain and Python
Matt Nikonorov
6 Techniques for Conditional Rendering in React, with Examples
6 Techniques for Conditional Rendering in React, with Examples
Yemi Ojedapo
Introducing STRICH: Barcode Scanning for Web Apps
Introducing STRICH: Barcode Scanning for Web Apps
Alex Suzuki
Using Nodemon and Watch in Node.js for Live Restarts
Using Nodemon and Watch in Node.js for Live Restarts
Craig Buckler
Task Automation and Debugging with AI-Powered Tools
Task Automation and Debugging with AI-Powered Tools
Timi Omoyeni
Quick Tip: Understanding React Tooltip
Quick Tip: Understanding React Tooltip
Dianne Pena
12 Outstanding AI Tools that Enhance Efficiency & Productivity
12 Outstanding AI Tools that Enhance Efficiency & Productivity
Ilija Sekulov
React Performance Optimization
React Performance Optimization
Blessing Ene Anyebe
Introducing Chatbots and Large Language Models (LLMs)
Introducing Chatbots and Large Language Models (LLMs)
Timi Omoyeni
Migrate to Ampere on OCI with Heterogeneous Kubernetes Clusters
Migrate to Ampere on OCI with Heterogeneous Kubernetes Clusters
Ampere Computing
Scale Your React App with Storybook and Chromatic
Scale Your React App with Storybook and Chromatic
Daine Mawer
10 Tips for Implementing Webflow On-page SEO
10 Tips for Implementing Webflow On-page SEO
Milan Vracar
Create Dynamic Web Experiences with Interactive SVG Animations
Create Dynamic Web Experiences with Interactive SVG Animations
Patricia Egyed
5 React Architecture Best Practices for 2024
5 React Architecture Best Practices for 2024
Sebastian Deutsch
How to Create Animated GIFs from GSAP Animations
How to Create Animated GIFs from GSAP Animations
Paul Scanlon
Aligning Teams for Effective User Onboarding Success
Aligning Teams for Effective User Onboarding Success
Himanshu Sharma
How to use the File System in Node.js
How to use the File System in Node.js
Craig Buckler
Laravel vs CodeIgniter: A Comprehensive Comparison
Laravel vs CodeIgniter: A Comprehensive Comparison
Dianne Pena
Essential Tips and Tricks for Coding HTML Emails
Essential Tips and Tricks for Coding HTML Emails
Rémi Parmentier
How to Create a Sortable and Filterable Table in React
How to Create a Sortable and Filterable Table in React
Ferenc Almasi
WooCommerce vs Wix: Which Is Best for Your Next Online Store
WooCommerce vs Wix: Which Is Best for Your Next Online Store
Priyanka Prajapati
GCC Guide for Ampere Processors
GCC Guide for Ampere Processors
John O’Neill
Navigating Data Management: Warehouses, Lakes and Lakehouses
Navigating Data Management: Warehouses, Lakes and Lakehouses
Leonid Chashnikov
Get the freshest news and resources for developers, designers and digital creators in your inbox each week