Publishers

How to Implement AMP on WordPress (& How We Did It)

Ilan Berko
Ilan Berko
|  

Tl;dr

  1. Choose the right WP plugin
  2. Replace HTML tags with AMP tags
  3. Balance functionality and performance
  4. Customize the plugin to fit your needs
  5. Create a (local?) development environment
  6. Adopt design to fit AMP
  7. Add subscribe functionality
  8. Implement GDPR and CCPA
  9. Validate your AMP pages

What is AMP?

AMP is the Accelerated Mobile Pages (AMP) project. It arose out of a need to make the mobile content ecosystem more effective and enjoyable for everyone. That includes publishers, advertisers, users, and everyone in between.

AMP is an open-source project, meaning that anyone can contribute and claim a stake in making the mobile web faster and easier to navigate. The purpose of AMP is to speed up load times of mobile web pages to almost instantaneous, and that means reduced bounce rates and less page abandonment. And that’s good news for mobile website owners, content creators and advertisers.

Why We Went All-Out AMP

At Outbrain, we knew that creating AMP pages was an inevitable part of keeping us relevant on the web, and that it was going to be critical for our SEO initiatives. So, as a Dev specialist in the Growth Marketing team, I set out to investigate what AMP means, how we could use it to our benefit, and the steps it takes to implement AMP on our site. I ran into some challenges along the way, but all were overcome. Here’s the story of how I managed AMP implementation. Hope you enjoy!

How to Implement AMP on WordPress

1. Choose the right WP plugin

The power of WordPress comes from its plugins. There is a plugin for almost everything you can think of. The AMP Project provides a basic plugin with some configurations, but I needed more flexibility.

💡 My tip: I found the flexibility I needed in another plugin called AMP for WP – Accelerated Mobile Pages.

2. Replace HTML tags with AMP tags

Every page we wanted to “AMP” needed to have another version of the HTML page, with the “<amp-…>” elements replacing some of the current HTML elements. For example <img> would be replaced with <amp-img>.

This Documentation contains every component, tag, and functionality that is required.

💡 My tip: For best performance (low weight & loading time), avoid JS as much as possible and keep it simple with HTML and CSS.

3. Balance functionality and performance

The toughest part, in my opinion, is understanding that an AMP page might not include all the great stuff we have on our regular page, like complex animations that we built from scratch – although the documentation presents some cool alternatives like <amp-accordion> and <amp-lightbox>.

💡 My tip: Actually, I was pleasantly surprised by the wide variety of components presented by AMP,  and I’m sure that the Framework will grow in the near future.

4. Customize the plugin to fit your needs

When I began working with the plugin, things weren’t so clear. The API had missing information, which either I found online or by deep diving into their code to understand how some of the functions work.

💡 My tip: Overall, you can use functions that the plugin provides alongside basic AMP functionalities from the original AMP Project. You can read more about these plugins here:

AMP Project and AMP for WP.

5. Create a local development environment

As with most development projects, we used a separate environment for the AMP project, mostly a local one.

Web applications, like websites, get a default URL, which is http://127.0.0.1:80 (if we didn’t state otherwise). No matter how we manipulate the URL on a  local device, it is still local and not on the world wide web.

💡 My tip: When I finished working on the AMP pages, the first thing I wanted to do is validate the pages (more about that in step 9). However, the validating tool can’t crawl local pages so I needed to push my pages to a test server environment. The test server isn’t editable, meaning I write code locally only.

6. Adopt design to fit AMP

Since we are building the AMP pages almost from scratch, and changing the HTML, another challenge was adapting the CSS styles so they would match the regular, “non-AMP” pages’ design.

💡 My tip: Yes, as you can imagine, this process might include tradeoffs…and that’s ok.

7. Add subscribe functionality

The subscription flow for our website includes a form that lets you enter your email, and once you submit, you receive either a “Success!” or “Error” message. This is mostly done with Javascript, yet won’t work with AMP. Luckily, AMP has alternatives.

💡 My tip: We used ‘amp-form’ for presenting a form and ‘post submit’ messages like success and error. The submit process must include Recaptcha v3, which we implemented on our side, though there is an ‘amp-Recaptcha’ option.

8. Implement GDPR and CCPA

Another challenge was data privacy laws in Europe and California. We needed to provide a consent popup that explains what our tracking pixels will do if they consent to them, and our tracking pixels can only be allowed to fire for users who provide consent.

💡 My tip: We use OneTrust to manage our consent procedures. However, it doesn’t support AMP, and JS is not a good option, so we were in a bind. The good news is that AMP has a solution. The “less-good” news is that it needs to be created from scratch, including controlling each pixel separately.

9. Validate your AMP pages

Congratulations! Development is done, everyone is happy with the look and function, so it’s time to push to production, right?

Not really! While everything seems great, we want to make sure we’ve met AMP standards and we do this by validating our pages.

💡 My tip: A tool I recommended for validating pages is  https://validator.ampproject.org/ It lets you enter a URL or copy & paste your HTML code. Ninety-nine percent of the time, you’ll get errors and warnings, but don’t panic! Once you take a closer look, you’ll see that they are really understandable and most of them are relatively easy to fix.

Another way to validate pages is by using the search console. On the left menu, you will find the “AMP” tab. There you can see the errors just like in the validator mentioned above, and you can also send for validation after your fixes.

Now, it’s really time for congratulations! You’ve successfully implemented AMP pages for WordPress and can expect amazing performance of your mobile web pages from now on.

Publishers

P.S. We've got tons of great ideas for growth!

Stay ahead of your game with the latest digital marketing trends,
tips, hacks and more! Straight to your inbox, twice a month

Subscribe here
Ilan Berko

Ilan Berko

A member of Outbrain's Growth Marketing team, Ilan has over 10 years of experience with front-end web development. When he's not programming, he's enjoying family time with his wife and son. He's also into CrossFit, which has played an important role in his life for more than 6.5 years.

Agencies

Add A Comment

* Your email address will not be published. All fields are required.