MENUMENU
  • Services
    • Services
      • Search Engine Optimization
      • Local SEO
      • Generative Engine Optimization
      • Digital PR
      • Content Marketing
      • Email Marketing Services
      • Lifecycle Marketing
      • Paid Media Advertising
      • Social Media Marketing
      • Creative Design Services
      • Conversion Rate Optimization
      • Website Design & Development
      • Amazon Marketing Services
      • Franchise Marketing
      • Franchise Development
      • National to Local Marketing
      • Reporting and Data Analytics
      • Digital Marketing Strategy
  • Who We Serve
    • Who We Serve
      • Franchise Marketing
      • B2B Marketing
      • Lead Generation
      • Ecommerce
      • We Build Custom Strategies
      • View Sample Industries
  • About Us
    • About Ignite Visibility
      • Our Story
      • Our Values
      • Our Team
      • Clients
      • Diversity & Inclusion
      • Our Blog
      • Marketing Resources
      • Franchise Marketing Resources
      • Careers
      • Hiring Notice
  • Case Studies
  • Awards
  • Contact
  • 619.752.1955
Home / AMP / Step-By-Step Guide to Implementing AMP on a Wordpress Site

Step-By-Step Guide to Implementing AMP on a WordPress Site

August 26, 2016 By John Lincoln

Step-By-Step Guide to Implementing AMP on a WordPress Site
Step-By-Step Guide to Implementing AMP on a WordPress Site

The Google Accelerated Mobile Pages (AMP) framework allows you to create a much faster mobile browsing experience right away without a complete mobile web overhaul and without losing your ad revenue. This is my step by step guide to implementing AMP on a WordPress site.

AMP basics

AMP pages are stripped down versions of the originals that omit a lot of fancier features in favor of speed and functionality. This is designed to provide a better mobile user experience since typical web pages often behave slowly and erratically on mobile devices. Typically this has to do with either third party interference in the form of ad trackers and content blockers or responsive design features that look great on a desktop or laptop, but overwhelm a mobile device (or both).

Watch a Video on AMP

Step-By-Step Guide to Implementing AMP on a WordPress Site
Step-By-Step Guide to Implementing AMP on a WordPress Site

AMP consists of AMP HTML, AMP JavaScript (AMP JS), and the AMP content delivery network (CDN). AMP HTML is similar to regular HTML but includes various restrictions and some properties and custom tags. AMP JS mostly focuses on asynchronous loading and resource handling; you cannot use any other JS with AMP. The AMP CDN isn’t mandatory but can automatically optimize your AMP-enabled pages in some ways.

Using AMP means maintaining at least two versions of each page—the AMP version and the original. Your AMP page will be simpler in many ways, in particular because you cannot use any third party JS for things like comments and lead forms. Your AMP pages will need to be worked into your sitemap, and the sitemap in turn may require some rewriting to accommodate all of the AMP restrictions.

Your multimedia will need some tweaking as you convert to AMP. Your still images must include both a set height and width and the custom amp-img element. Your animated images like GIFs must have the extended amp-anim element. Use the amp-video element to embed videos that you’ll host locally using HTML5, and the extended amp-youtube element for embedding YouTube videos. You can find other extended AMP elements for things like social media, lightboxes and slideshows on the AMP extended components page.

You’ll also need to help Google (and everyone else) find the AMP version of your page. You do this by tagging the original version like this:

<link rel=”amphtml” href=”https://www.example.com/blog-post/amp/”>

You should also use Schema.org meta data for your AMP pages so your page can appear in the Google Search news carousel. Check out the AMP Discovery page for more details on this. Read this for more on using Schema.org for SEO, and for more about why you should try AMP on your page see my post on why AMP will improve your SEO, UX and CRO.

Get AMPed in WordPress

AMP is easy to introduce to your WordPress site so this is a great place to start with AMP. Here’s how it works.

Install the official WordPress AMP plugin

Find the plugin here on the AMP/WP GitHub page. Install it as you would any other plugin for WordPress. Next, add “/amp/” to the page in question if you have permalinks; if you don’t, add “?amp=1”).

Step-By-Step Guide to Implementing AMP on a WordPress Site - Github
Step-By-Step Guide to Implementing AMP on a WordPress Site – Github

Validate and refine

Since you already added the <link rel=”amphtml” href=”https://www.example.com/blog-post/amp/”> tag to your original page in the section above, the Google Search Console should find the AMP version of your page. This will also enable you to ensure that lots of pages are validated; just check the console. Remember, it may take a few days to show up there after adding the tag or making alterations.

There is also a validation process through Chrome, and you can use both Chrome’s and the Google Search Console version. To use the Chrome validation process go to one of your new AMP pages using Chrome and add “#development=1” at the end of the URL. Next go to the Chrome Console by accessing Chrome Developer Tools. To do this click on control + shift + I. The Chrome Console will either list problems you need to fix or say, “AMP validation successful.” If you don’t see either message, refresh the page and check again.

Ideally you could just install the WP plugin and all of your pages would be AMPed and validated automatically, but this isn’t what happens in most cases. Instead, you may have to address certain formatting problems like changing old codes to the new AMP versions before the AMP versions of your pages can be validated.

Validate your Schema markup

Now you need to make sure your AMP pages have valid schema markup. Do this using Google’s Structured Data Testing Tool.

Step-By-Step Guide to Implementing AMP on a WordPress Site - Structured Data Testing Tool
Step-By-Step Guide to Implementing AMP on a WordPress Site – Structured Data Testing Tool

Now in your WordPress Dashboard under “Plugins” and then “Editor” choose “AMP” so you can edit your class-amp-post-template.php file. It should look like this before you change it:

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

You want to edit it so it looks like this instead:

$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘https://domain.com/wp-content/uploads/logo-60.png’,
‘height’ => 70,
‘width’ => 120,
);

Remember, the important changes here are to replace the URL with the route to your own publisher logo, and to provide specific width and height in pixels. You can find more information for Schema markup here, but keep in mind that your height should be at least 60 pixels and your width cannot exceed 600 pixels.

Step-By-Step Guide to Implementing AMP on a WordPress Site - Schema markup
Step-By-Step Guide to Implementing AMP on a WordPress Site – Schema markup

Enable Google Analytics

Obviously, you can’t do much without your analytics. The WP AMP plugin is simple to use but doesn’t enable your GA automatically, so don’t skip this step.

Use your WP dashboard to edit again; this time you’ll be making changes to your amp-post-template-actions.php file. Change the “UA-XXXXX-Y” so that it includes the GA property ID for your site. Now check to see that your tracking is enabled by re-validating your AMP pages as described above.

If you don’t want to use GA, at least use AMP analytics. Enable this in one of two ways. Use the amp-pixel element which tracks page views like a standard tracking pixel, or use the amp-analytics extended element which offers more individualized configuration. You’ll also need to add the right JS pieces and markup to use AMP analytics, so see their examples here.

Conclusion

Don’t pass up your opportunity to implement AMP pages and improve your speed for your mobile users significantly. Watch the AMP office hours on from the Google News Lab on YouTube here for additional tips and insight. How is your move to AMP pages working? Let me know in the comments.

Related Posts

  • Is WordPress or Blogger Better for SEO?

    What is better for search engine optimization? Wordpress or Blogger? Personally, I say Wordpress all…

  • 2021 Guide to the Best WordPress SEO Plugins

    Whether you have a niche blog or a budding e-commerce site, good SEO is a…

  • Google Offers Free One Page SEO Guide

    Although at times it does seem Google is against very advanced SEO companies, when it…

About John Lincoln

John Lincoln (MBA) is the CEO of Ignite Visibility, a top performance marketing agency backed by Mountaingate Capital. A digital marketing strategist and keynote speaker, Lincoln has managed over 1,000 marketing programs for brands like DoorDash, HBO, Tony Robbins, and Experian. Under his leadership, Ignite Visibility has been named a leading digital marketing agency in the U.S. and made the Inc. 5,000 list six times. Lincoln also spearheaded the development of CertaintyTech, a cutting-edge media mix modelling and forecasting platform. An award-winning marketer, Lincoln has authored three books, including Advolution (2022), and produced films such as SEO: The Movie. Recognized as a Top Business Leader, he has been featured in Forbes and The New York Times and spoken at global events like Web Summit and SMX. Lincoln's mission is to empower businesses through innovative digital strategies while reinvesting in clients, employees, and the community.

About Ignite

Ignite Visibility is a premier full-service digital marketing agency. We were founded in San Diego, CA but are now a 100% remote-first company with Igniters and clients around the globe.

Ignite Visibility is one of the highest awarded digital marketing agencies in the industry, works with some of the biggest brands in the world and is a 6x Inc. 5000 company.

noun-trading

Our Services

Ignite Visibility offers Award-Winning Services including comprehensive full-funnel digital marketing strategies. Learn more about our most popular service offerings below:

  • SEO Search Engine Optimization
  • PPC Pay Per Click
  • Email Marketing
  • Social Media
  • Creative
  • View All Services

Contact Us. Let’s Chat!

  • This field is hidden when viewing the form

Marketing Guides

SEO In 2020: How To Prepare For Major Disruption

"SEO: The Movie" - Have You Seen Our Film? Watch Now

"Social Media Marketing: The Movie" - Have You Seen Our Film? Watch Now

Amazon Seller Central vs Vendor Central

Listen To The Podcast Featuring The Best Minds In Marketing

John Lincoln Interviews Global Director of Digital Marketing & Strategy at Qualcomm, Jessica Jensen

Check Out 227 Free Online Marketing Classes

The 2020 Guide To Dominating SEO With Advanced Schema

Learn More About Our Digital Marketing Agency

Learn More About Our SEO Services

Learn More About Our Paid Media Services

SELECT CATEGORY

Become A Contributor

Interested in writing for Ignite Visibility?

APPLY NOW

noun-chat

Let's Chat

Ready to grow your online visibility and sales?

Request Your Free Proposal

Work With Us

NEWSLETTER // SIGN UP NOW










noun-strategy

Free Marketing Resources

  • Digital Marketing Resources
  • Marketing Strategy Videos
  • Weekly Marketing News Recaps
noun-strategy

Most Popular Blogs

  • How Long Does SEO Take?
  • Multi-Location SEO: Top Strategies
  • Google AI Overviews: Everything You Need to Know
  • Technical SEO 101
  • 18 Google Ad Extensions You Should Use
  • Complete Guide to Google Responsive Display Ads
  • Capitalizing on Local Service Ads
  • How SEO and PPC Work Together
  • Community Management Best Practices
  • B2B Social Media Marketing Guide
  • VIEW ALL BLOGS
noun-letter

Join Our Newsletter

CONNECT WITH US

  • facebook
  • twitter
  • instagram
  • youtube
  • linkedin

Services

  • Search Engine Optimization
  • Generative Engine Optimization
  • Pay Per Click Management
  • Social Media Marketing
  • Email Marketing
  • Conversion Rate Optimization
  • Website Design & Development
  • Creative Design
  • Content Marketing
  • Digital PR
  • Franchise Marketing
  • Digital Marketing Agency Services

About

  • Our Team
  • Our Values
  • Clients
  • Industry
  • Reviews
  • Careers
  • Marketing Resources
  • Privacy Policy & Service Terms
  • Advertising Disclosures
  • Sitemap

Contact

4370 La Jolla Village Drive
Suite 320
San Diego, California 92122

619.752.1955

Join The Newsletter

Sign up for our newsletter to get the latest from Ignite Visibility.











google parther logo

©2025 Ignite Visibility. All Rights Reserved. Privacy Policy and Terms of Service