Setting up Google AMP with WordPress Tutorial

Recently we have been reading a lot about Google’s Accelerated Mobile Pages project.  Luckily, if you have WordPress installed this it is relatively easy to install Google AMP on your website with just a couple of plugins.  This tutorial will show you how to setup Google AMP (by Automattic) and GLUE plugin by Yoast to customize your AMP website design.

 

What Is Google AMP?

If you have not yet heard about the Google Accelerated Mobile Pages project, this is the time to familiarize yourself with it.  Google has been pushing hard for web developers and websites to use the AMP technologies.  The reason behind it is that most of the browsing from a mobile device is still relatively slow.  Those pages are usually served over speeds akin to 2G or 3G and Google’s initiative is to deliver content on mobile devices as quickly as possible.  Google has even admitted that they are ranking websites that use AMP higher than those that do not.  If you remember April of 2015, this was the time that Google’s Mobilegeddon happened and if you did not (or do not) have a mobile friendly website you were not ranking as high on mobile searches.  One can only imagine as time goes on that Google will continue to push the web toward using AMP technologies.  Now this leaves the question: how do we do it?  Luckily with WordPress, even a beginner can setup AMP on their website and start to get ahead of the game.  However, one should keep in mind that the AMP initiative does come with a cost to designers and developers.  Due to its nature, design and functionality is minimal at best but this tutorial will show you how to implement some personalized design and functionality.

 

Setting Up The Google AMP WordPress Plugin

Automattic AMP WordPress Plugin

Once you log in to the WordPress Dashboard head over to Plugins -> Add New and search for AMP.  Once the search results are returned, you should see AMP by Automattic among the top of the list.  Go ahead and install and activate the plugin.  By default, the Accelerated Mobile Pages plugin will only be active on your posts (more on that later). Since there is no settings panel, you can test to make sure it is active by going to one of your posts on your website and add /amp/ to the end of the url in your browser to see AMP in action.  Once completed, you should see a stripped down version of your post.  No need to worry, the next step we will go through is attaching Yoast’s SEO Meta Boxes to AMP and customizing the design as much as possible.

 

Customizing The Google AMP Design

Yoast GLUE for AMP

 

Now that we have AMP setup and running, let’s do some customization and decide which post types we want to enable AMP on.  Head back over to Plugins -> Add New and search for “GLUE for Yoast SEO & AMP” (this may eventually become part of the Yoast SEO core plugin). Once you locate it go ahead and install and activate the plugin.  Now you should see a new option in the left hand administrator menu under SEO > AMP.

 

Yoast AMP Settings

 

From the SEO > AMP settings panel you can choose which post types on which you would like to enable AMP.  For most cases this will only be Posts, but you can enable for all post types, just be aware of the AMP interface before committing to this decision.  Once you select the post types on which to enable Accelerated Mobile Pages, scroll down toward the bottom and click Save Changes. When the page refreshes, go ahead and take the time to go through the tabs at the top to see what each one does.

 

 

 

GLUE custom CSS

 

Now head over to the design tab and to see how we brand this to be more inline with our website’s general design.  Due to the plugin’s nature, you will only be able to add custom CSS and external libraries using the <link> attribute.  As demonstrated in the image to the right, you can use as much CSS as possible; virtually customizing the design of AMP to your preferences.  We also included a link to an external Google Font library we use from our branding guidelines.  After inspecting element in your browser you should be able to easily target the selectors needed to make your modifications. Once finished, click on the Save Changes button and visit the page in a new tab to preview your changes.

 

 

After a little Photoshop work to create some supporting images, you can see the before and after of what you are able to accomplish in AMP. Because we decided to keep our AMP design minimal for not only UI but for speed, we only added a few images in the CSS and changed some of the font-faces.  However, you can let your imagination run wild at this point, just be aware of page speed and remember AMP’s goal is to provide a faster UI so don’t get too carried away.

Before
DesignLoud AMP first Preview
After
DesignLoud AMP preview

DesignLoud

DesignLoud is a web development & digital marketing agency located in Wilmington, NC. Our team takes great pleasure in teaching others how to build and market their websites to see higher returns.

Leave a Comment