Using Google AMP with WordPress

Google AMP

As the most popular content management system, WordPress has with a large collection of themes and plugin you can use for your website or application that will let you do anything you want with the platform. Despite all these benefits, WordPress still has its limitations, including the lack of mobile support. Out of the box, you cannot use WordPress and have your content look great on mobile devices. Sure, you can use responsive themes, but that will give you a slow website, wasting your visitors’ time. 

Fortunately, you can use the Google’s Accelerated Mobile Pages (AMP) API framework. 

What is Google AMP?

Google’s Accelerated Mobile Pages (AMP) turns your content into mobile content, fixing one of the last remaining issues with mobile internet access. Despite everyone using it, mobile internet is surprising slow. To speed up your pages, AMP restricts certain page and layout features. 

AMP pages look like normal web pages with all but the content stripped away.

However, not every advertising or analytics suite with work with AMP. Therefore, you must prepare your WordPress site in advance before you apply AMP stylings to it.

How Does AMP work? 

AMP adds three new features to WordPress. 

  • AMP HTML – This subset of HTML adds some custom tags and properties with many restrictions. The plugin adds these new features to your pages automatically, but you can make your own AMP-specific templates if you need them. 
  • AMP JS – This JavaScript framework was made for mobile pages that manages the resource handling and asynchronous loading that make the AMP process work. Please note, you cannot use any third-party JavaScript with AMP. 
  • AMP CDN – AMP provides an optional content delivery network that can cache and optimize your AMP pages further.  

Installing AMP 

As with any addition to WordPress, you will need to install the plugin before you can use AMP on your WordPress site.  

The Official Plugin 

You can find the official AMP plugin in the WordPress plugin store, though you will only find the latest version at the project’s Github site. Thus, you have a choice to make.  

Installing the plugin through WordPress is the quickest. You just have to search for amp-wp in the “Add New” section of your Plugins WordPress admin panel. You then simply click install and then activate to start using AMP on your website. 

If you need the latest version for any reason, you will have to install the plugin manually. After downloading the Github package, you just have to click “Upload plugin” while in your “Add New”  Plugins panel. Just find the zip file containing the package, and let WordPress take things from there. Once upload finishes, you can just activate the plugin to begin using it.  

PageFrog and Other AMP Plugins 

The Github one comes directly from Google’s AMP project team, making it the most up to date version of the plugin. It creates an /amp/ version of every page and post you have. You just have to add /amp/ to the need of the URls to see them yourself. However, you cannot edit these AMP pages. If you need something more than what the base plugin gives you, you will need one of the other AMP plugins out there, such as PageFrog. 

PageFrog builds on the core AMP plugin by allowing you to edit some of the change it makes to your pages. It will even let you add some style and theming features to them. It can even handle Facebook’s Instant Articles, and you can find it on the WordPress plugin store.  

Configuring your WordPress site for AMP 

Once you activated the plugin, you are done. For most installations, you just have to create the content as you would normally do, and the plugin will take care of the rest. However, it will strip out things such as your Google Analytics code along with everything else.  

Adding Google Analytics to AMP 

If you need these features on your mobile pages as well, you have to manually add them to the plugin’s  single.php page template. To do this, you will have to click the edit option next to the AMP plugin’s name in your Plugins list. From there, you just click the single.php link to start editing it. Please note that you might have to redo this every time your update the plugin.  

SEO Plugins and AMP 

AMP will also remove all your SEO features,. If you do not care if search engines rank your mobile pages, you do not have to worry about this, but if you do, you are going to need a new SEO plugin. Fortunately, most SEO plugin developers, such as Yoast’s SEO plugin, have AMP extension you can use. You will have to install them separately, but you need them to ensure all your pages work towards improving your site’s SEO.  

Fixing Any Errors 

As with any addition to your website, you want to test your AMP pages for errors and inconsistencies, and correct them. AMP is still evolving, and many of the features may still have bugs. You will have to manually fix these errors in your template files before you make your AMP pages public. Just remember, that you might have to redo your edits each time you update the plugin in case anything changes.  

Monetizing Your AMP pages 

Since AMP removes your monetization as well, you going to have to re-add them too. All is not lost though, Google designed AMP to allow some types of advertising through. You just need the AMP-compatible version of your ad plugins. You can find a complete list of these compatible plugins on the AMP Github page. 

Take AMP for a Spin 

With the rise of mobile internet use, your website needs to handle mobile traffic along with its normal users. Google AMP takes the headaches out of the process, but automatically converting your pages into mobile-friendly ones on the fly. You just have to install the plugin and then just let it do its job. You may have to modify your templates and features to fix some rendering errors, but that is a small price to pay for the enormous potential you will receive from your mobile users. If you need help configuring any files, feel free to ask us any time. We ready to help you whenever you need us. Just give us a call, and we will get your AMP site up and running in no time.  

Leave a Reply

Your email address will not be published. Required fields are marked *