How To Make Use Of AMP With WordPress

Samiksha Sanghi Pixelmattic Blog 1 Comment

What is Accelerated Mobile Pages (AMP)? And how can you make use of AMP with WordPress?

Mobile phones and tablets have changed greatly the way we gain access to information, and today people read plenty of information on their phones. Writers around the world make use of the mobile web to reach these readers, however, the experience can often leave a great deal to be desired. Every time a web page takes too long to load, you lose a reader—and the possibility to earn revenue through advertising or subscriptions. Patchy mobile bandwidth, older and slower phones can all affect the page load times on a mobile. AMP comes to the rescue for the website developers and the website owners. If you’re running a WordPress website, we’ll tell you how to integrate AMP with WordPress, so read on.

 

Here is a video on Accelerated Mobile Pages project launched by Google that explain how it works:

 

After discussions with publishers and technology companies around the world, Google recently announced a new open source initiative called Accelerated Mobile Pages (AMP), which aims to dramatically improve the performance of the mobile web. Google want web pages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work on multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.

After integrating AMP this is how fast you can browse through your website on mobile phones:

 

Typically the Accelerated Mobile Pages job aims to make webpages load immediately on cellular. The web is slow for lots and lots of people, inside fact, the majority of the persons using the particular internet do so more than a cellular phone, often upon a 2G or occasionally 3G connection. For making web pages load instantly, it restricts what you can carry out in HTML pages. The fancy design is removed out in favor associated with speed.

AMP pages look like a stripped down version of normal net pages but do contain all the important articles. Not all advertisings will work on this, not all analytics works with AMPLIFIER. All the “fluff” of your pages is stripped in AMP, including typically the reading more links you may have built into your own theme etc.

AMP gives happiness use AMP with WordPress

Source: Outbrain.com

AMP with WordPress – How to install and configure it

There is a good plugin by Automattic that enables AMP for your site:

AMP Projects, AMP with WordPress plugin by Automattic

When you enable this plugin, all the post URLs on your site will have a/amp/ version. So you can go to any post, add /amp/ to the end of the URL and you’ll see the AMP version. It uses the site’s logo that you can set in the WordPress Theme Customizer, but other than that doesn’t add any styling. If you’re going for the bare minimum, install and activate this plugin and you’re done. The plugin has no settings, whatsoever. Yoast found that slightly too bare bones to their liking. They wanted to change the styling of our AMP pages somewhat and want to make sure there is Google Analytics tracking on those pages too. Luckily, there’s a second plugin which builds on top of the plugin, that handles all that, it’s called  PageFrog:

pagefrog, AMP with WordPress plugin by pagefrog

This plugin allows you to change the styling of the AMP pages, for instance by choosing the color of the top bar, changing the logo and a few more simple tricks like that. The plugin also handles Facebook Instant Articles, a topic we will be writing about more soon. The plugin adds a preview to the post editor which we found to be slightly too intrusive and most of all: unnecessary.

How does AMP with WordPress using the Automattic plugin work with Yoast SEO?

Yoast SEO is one of the most useful plugins on SEO that we recommend every WordPress website owner to have. So with the new technology of AMP with WordPress in place, we need to ensure that SEO is not affected on these new AMP pages that are being created.

The AMP plugin by Automattic uses a default set of metadata, which is sometimes if you’re using Yoast SEO, not the most optimal metadata. Yoast has created a small plugin which bridges the two and it’s aptly called Glue for Yoast SEO and AMP. We expect Yoast SEO to eventually incorporate this feature into its SEO plugin, but for now, we will have to install this add-on.

This plugin makes sure the default WordPress AMP plugin uses the proper Yoast SEO metadata. Without this glue plugin things like canonical might go wrong.

This replaces the following values with Yoast SEO data, all in the JSON+LD data on posts:

  • Organization name (uses the blog name by default, now replaced by the Company name from the SEO General settings, Your info tab)
  • Organization logo (uses the blog icon by default, now replaced by the Company logo from the SEO General settings, Your info tab)
  • Post canonical (replaced by the Yoast SEO canonical, usually the same but makes sure it is consistent when changed through Yoast SEO)
  • Post image (uses the featured image by default, replaced by the Facebook image if one is set)
  • Post description (added from the meta description, if set, by default the WordPress AMP plugin doesn’t add one)

glue yoast, AMP with WordPress Yoast SEO glue AMP

 

This article highlights why AMP with WordPress can help you take advantage of the latest technology.

Contact us if you need help to integrate AMP with WordPress.

[recaptcha id:25 size:normal]