Google AMP (Accelerated Mobile Pages) project is a framework based on open-source technology and enables faster loading of web pages on mobile devices. Although many site owners are not aware of the term, Google takes its AMP project very seriously and also includes it in the search engine ranking criteria. The project quickly grabbed the attention of thousands of active developers soon after its launch in February 2016. We now have a huge number of sites that also have AMP versions of the web pages. This makes it very important for all site owners to consider the technology for better search engine ranking and an enhanced user experience.

Google AMP

Since a vast majority of online users now use their mobile devices to access the internet, AMP has become more important than ever, especially for bigger companies and sites. The open-source and mobile-friendly technology enables developers and publishers to improve page loading speed on mobile browsers, ultimately resulting in a better user experience. The improvement in speed and efficiency does not come at the cost of decreased revenues as AMP has no effect on revenue generated by advertisements. Although this guide mostly covers AMP on WordPress, most things work similarly on other platforms and the objective remains the same i.e. to improve page loading time and enhance the user experience.

Why AMP?

An experienced developer can also optimize web pages for mobile browsers and achieve results similar to Google AMP. But it’s not an easy thing to do and can take a lot of effort and work hours. That’s where Google AMP comes handy as it makes it easier to execute page loading optimizations in less time. AMP can be very useful in enhancing SEO and rankings. That’s the reason so many enterprises have adopted the technology, while small and medium businesses are also quickly catching up.

Speed is considered an important factor in SEO as well as enhanced user experience. Although not much emphasis was put on AMP when it was initially launched, things have changed and now Google emphasizes more on AMP-enabled sites if other prerequisites are also met. AMPs use limited JavaScript and bare minimum HTML, allowing content hosting on Google AMP Cache and much faster page loading on mobile devices.

AMP Components

Google’s Accelerated Mobile Pages project consists of three core components i.e. AMP HTML, JavaScript and Cache. A subset of HTML, AMP HTML comes with custom tags, properties and a bundle of restrictions. Users familiar with HTML should not find it difficult dealing with AMP code. But even if they are not familiar with the basic web language, there is no shortage of comprehensive guides on creating AMP HTML pages.

Google AMP Cache is a Content Delivery Network of AMP pages and allows visitors to access a page from the nearest server. The AMP Cache distributes resource loading efficiently and aims to minimize the loading time and improve latency. AMP Cache is quite similar to Facebook Instant Articles, but its scope is much larger and can be used by other platforms such as Google, LinkedIn, Twitter and Reddit. When a user clicks an AMP-enabled page on their mobile browser, Google serves that page from the AMP Cache, resulting in much quicker page loading.

Why NOT AMP and its Limitations

Since Google AMP does not allow 3rd party JavaScript and uses limited HTML/CSS, the amount of JS available for mobile web pages is limited. Adding some other features such as certain widgets, smart email opt-in forms, dynamic scripts and Facebook-like boxes is also not possible (or very difficult). The technology supports Google Analytics, but most other analytics platforms won’t work, while you are also limited to just a few advertising platforms. In order to balance the limitations AMP imposes, Google has been aggressively pushing the technology by giving AMP-enabled sites extra weightage in search ranking.

Although AMP is a blessing for users with slow internet connections, marketers, bloggers and SEO experts face several challenges when deciding to opt for the technology. Limited customization options and support for analytics and advertisement platforms are at the top of the list. Some experts even believe that you’ll lose mobile traffic (instead of increase) after implementing AMP. Some also believe that Google handles the page redirects in a somewhat dishonest way, but as with most other technologies, everything has its pros and cons.

AMP makes it hard for users to reach the original site as instead of your own site, the page views are served through Google AMP Cache. Getting to the original source requires users to go through some additional steps, which isn’t something all visitors would do. This means that once a visitor is done reading your page served from the AMP Cache, he/she would most probably leave the page and not go through other content hosted on your own website. That’s why experts highly recommend the following:

  • Install the Analytics tracking code properly
  • A header that points back to the main site
  • Ensuring that the site menu (if available) is clearly visible in the AMP version
  • Adding a link at top of the AMP page makes it easier for visitors to reach the original source
  • Double check for proper integration of promotional material/ads into the AMP version

Switching Back from AMP to ‘Normal’

It’s highly recommended to consider all the pros and cons before switching to AMP. Many believe that it’s not easy to switch back to ‘normal’ once you enable AMP on your website. Since AMP pages are served from Google AMP cache, users may still see AMPs links even after you have removed the plugin and disabled AMP on your WordPress site. This can lead to error pages, and getting around these errors can be tricky. You can use ‘update-ping’ mechanism to remove content from AMP cache or use page redirects, but this could become a huge issue when dealing with thousands of pages. Just make sure to do ‘proper’ homework if you decide to go the AMP route.

Setting Up AMP in WordPress

Being one of the most flexible, extensible and widely used Content Management Systems, WordPress allows users to easily implement AMP on their websites. Instead of solely relying on experienced developers to optimize content delivery, WordPress allows ‘common’ users to get most of the things done with less effort.

The official AMP plugin is one of the easiest, fastest and simplest ways to implement AMP. Installing and activating the plugin is quite straightforward. Once you have activated the plugin, go to plugin’s appearance settings, click AMP and check how AMP-enabled pages look on different mobile devices. The appearance section allows configuring the text color and header background, which is also used for links. The AMP plugin uses site’s logo or icon by default (provided the theme also supports it).

Google AMP Plugin

Once you are done with the appearance section and saved changes, it’s time to view posts after adding /amp/ at the end of each URL. For example, in case of https://yourblog.com/aboutme/, enter https://yourblog.com/aboutme/amp/. This shows you the AMP version of a post on mobile devices. Many users have reported getting a 404 error when they try to view AMP version posts, but it can be fixed easily. Just go to WordPress admin area, Settings, Permalinks and click the Save Changes button without actually changing anything. Doing so would refresh the permalink structure and fix the 404 error in most cases.

Validating Schema Markup and Integrating Analytics

Valid Schema Markup is vital for AMPs and you can use a variety of tools to test pages. However, Google’s Structured Data Testing Tools is one of the most effective and easy-to-use tools. Integrating with AMP WP plugin allows you to track the stats as amp-analytics is not activated by default. To integrate Google Analytics with AMP, go to Plugins -> Editor and click AMP. Add the following code at the end:

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
}

“account”: “UA-XXXXX-Y” This is where you need to enter the Google Analytics Property ID. Revalidate the AMPs after making changes so they become trackable.

AMP WordPress Customizations

The ease-of-use and simplicity of the AMP plugin come at the cost of lack of customization options. There isn’t much you can change using the core plugin, but you can use other plugins to configure more settings. Glue add-on for Yoast SEO and AMP is one of them and you’d have to go to SEP -> AMP after installing and activating the plugin. There you can enable AMP for other post types as well or choose design and color options on the design tab.

The add-on allows uploading the default header image and a logo in case you are not already using a featured image. Adding the Google Analytics ID is easy by switching to the Analytics tab, but don’t forget to save changes as sometimes users overlook the last step. If you are looking for even more customization options, you can try different plugins that also allow adding footer widgets, related posts, social media icons and more. However, don’t expect a lot of customization options as AMP pages support very limited HTML and JavaScript. In any case, it’s highly recommended to validate the AMPs after installing or configuring any additional plugins. This helps ensure that any unwanted changes are dealt on time.

Google Search Console

After setting up and activating AMP in WordPress, you may also want to know how the AMP pages are performing. Google Search Console makes it very easy to analyze AMP performance. Just login into the console, click Search Appearance then AMPs. You may not see the results immediately as Google can take some time to index AMP pages and show them in the console.

Quick Facts and Summary

  • Detailed information about AMP tags and metadata (schema.org) is available at the official site. Users also need to get the schema right to be successful with AMP
  • Site owners and publishers have to maintain two versions of the content i.e. one for default users and another for mobile users
  • Let Google know after setting things up, add a tag on the main post page as well as the AMP page
  • 3rd party JS and form elements are not allowed
  • On-page comments or contact forms on AMPs are also restricted
  • You may have to re-write the entire site template in order to deal with AMP restrictions
  • Multimedia should be handled with even more care
  • Use precise image dimensions and separate components for gif images
  • Choose wisely between amp-video and amp-youtube
  • Amp-carousel can be used for embedding slideshows, while amp-image-lightbox is another option
  • Based on ‘measure once, report to many’ philosophy, Google Analytics works well on AMP, but most other platforms are not supported
  • Amp-pixel tag can be used to measure any AMP page activity and send the report using JSON config
  • Only a select few advertising platforms are supported
  • Switching back from AMP may not be as easy as its implementation

Should You Use AMP?

It depends on many things. If you have already optimized your site for faster page loading and performance, then you probably don’t need AMP. However, it does help in SEO and enhances search ranking provided other requirements are also fulfilled. If your website is not properly optimized for mobile devices and does not load fast, going the AMP route may give it a significant performance boost. AMP is not something entirely new as there were ways of optimizing pages long before its launch. But it makes things a lot easier by offering an all-in-one solution for users who don’t have time or resources to optimize their websites manually.

The biggest concerns experts have about Google AMP is the lack of control they get over the pages and the difficulty involved in switching back to ‘normal’. AMPs are also not magic bullets that can boost ranking overnight as you also need to meet other criteria. Deciding to implement AMP can be a tough decision to make, but with the right information and analyzing your own situation/requirements, the options become clearer. It’s more about offering visitors a better experience and if AMPs can help, why not give the technology a try?

About The Author

Oliver Dale is the founder of Kooc Media, an online company which has been working with WordPress since 2009. He has written hundreds of posts about WordPress in that time and founded two theme companies which provide free and paid themes to millions of users.

Google + / Twitter / Pinterest / Facebook

Disclosure: Some of the links in this post may be "affiliate links." This means if you click on the link and purchase an item, We will receive an affiliate commission