Accelerated Mobile Pages (AMP) Project – A Beginners Guide

UPDATED 12/8/16 – SCROLL TO THE BOTTOM OF THIS POST FOR A STEP BY STEP INSTALLATION GUIDE:

What Is The Accelerated Mobile Pages Project?

The Accelerated Mobile Pages (AMP) Project is a new initiative backed by Google, Twitter and over 30 other web publishers that is focused on delivering web content on mobile devices as fast as possible.

Basically AMP takes your really pretty website and delivers a more bare bones experience that will result in much faster load times. Since mobile is such a large part of todays readership and searches – and many are accessing sites from a variety of services (2G, 3G etc), it is important to make sure as website owners we give them a great experience.

AMP focuses on content and speed – it strips out unnecessary code and elements to deliver your content in the fastest way possible.

Isn’t This The Same Thing As A Responsive Website?

Not really. Responsive websites take your existing website code and adjusts the content of your page to render properly for a specific device size.

AMP is actually unique website code that strips out all extraneous code that increases load times – and only renders the most needed code on mobile devices.

How Will It Show In The Search Results?

In the first image below you will see how websites that have created AMP pages are showing in the search results. We did a search for “2016 election” in Google from our cell phone and what popped up was 1 story – then below that a carousel of posts which has several AMP ready articles you can swipe through.

You will notice the “AMP” signal on the post which shows readers that your page will render fast for them, which of course will improve your chances of them clicking on it.

The 2nd image below shows how the page will look after you click on a link. You will see navigational dots that shows a reader where they are in the article carousel of news and they can swipe forward and backwards to read all the related news article.

So you will notice that the news is NOT pulling your whole website – it is taking related news articles that are also AMP friendly and putting them together for users to scroll through. But, if someone wanted to read more from your specific website, they could click on your logo and go directly to your website to read more from you if you set it up that way.

 

How Do I Create AMP Pages In WordPress?

For the sake of this article we are only going to cover WordPress since that is our specialty. Thankfully there were some developers that jumped on this AMP project and there are 2 plugins you can use that will easily create AMP pages for you.

PageFrog

AMP (this is the one we use on our own website)

AMP for WP

WP AMP

AMP PLUGIN
The AMP plugin is the one that makes the pages AMP friendly – it currently only works on standard WordPress posts – not pages or custom posts etc. This is a stripped plugin that will only deliver your site content – it will not add a logo or any customizations at all. There is a lot of custom code you can do to make it look a little better – or you can download the PageFrog plugin.

This plugin is a simple install and activate – that is all there is.

PAGEFROG PLUGIN
This is not a required plugin, but will allow you to do some minor modifications to your AMP pages so that you can add your logo and some ads and a few other customizations easily with no code. This plugin controls AMP page formatting as well as Facebook Instant Articles.

This plugin has a few more things to adjust before it does what is needed.

1. You will need to SETUP the plugin to activate with Google AMP HTML by going to MOBILE FORMATS > SETUP  after you have installed the plugin.
2. Go to the STYLING link and click the AMP HTML styling tab. Here you can add your logo and make customizations to your content – it also offers a preview for you so you can see what your page will look like with your adjustments.
3. Go to the ANALYTICS link to enable Google Analytics integration with your AMP pages
4. Go to ADS to enable ad settings for your AMP pages (there are many options for ads as well that require custom code, we won’t address those here though).
5. Go to SETTINGS to adjust what pages or content you want to make AMP enabled. For 2 Dogs Media we only decided to make our POSTS AMP enabled for now so we checked the POSTS box for the “settings for published posts” section and clicked ENABLE AMP. For NEW posts we also checked POSTS only and then enabled. We also checked the include featured image box to display the featured image on our posts.

That is all you need for a basic setup for AMP for WordPress.

Do I Really Need To Do This?

Of course that is totally up to you as a website owner. Right now, this is a brand new development – Google started this project back in October with testing and involvement by larger publishers, but only as late as the end of February 2016 has it started sending traffic to those AMP pages and begun indexing smaller publisher pages.

We actually just finished up an analysis of a website with only 6 days of AMP pages being live. See the traffic and results AMP pages are bringing for them.

AMP pages may also have a direct result on ranking as noted by an article on Search Engine Land.

What About My Ads?

If you are a blogger then you probably have ads on your site and within your posts. At this time there are several ad networks that are compatible with AMP.

Does AMP Really Make A Difference?

In one word – YES. In evaluating our own site after AMP implementation we found tremendous improvement in site speed. Look at the image below to see the results. On the left is our normal website – which is mobile responsive, but as you can see took 3.1 seconds to download because of 66 requests for files.

On the right is a stripped version of the content – 7 requests and a download time of 1.3 seconds.

Think about it – what experience would you prefer to enjoy?

To test your pages after you implement AMP you can go to GTmetrix – you will run the analysis on your normal web page, once that is complete you will see a COMPARE button on the right side of the page where you will enter your AMP ready page.

Remember, our AMP page should have the same URL but have /amp on the end.

So for our test we used: 2dogsdesign.com/analyzing-facebook-insights/ as the regular URL and then used 2dogsdesign.com/analyzing-facebook-insights/amp/ as the AMP version to get the results above.

When Will My News Show In AMP Carousels?

If we had that answer we would definitely share it! We are sure it will depend on competitiveness of your content and how quickly they roll this out among all content producers.

What About My Organic Listings?

If you are already ranking for some of your posts and content, that should not change. You should still have your content ranked in regular organic listings and when users click on those listings, they will go to your regular posts – not your AMP posts – but since AMP is still new, this could change!

We are not sure at this time if you do get moved to the AMP area if that will remove any organic listings that you may have on the first page – but we will keep an eye on that.

Can I See AMP In Action?

Why of course! AMP since it is still being rolled out and can sometimes be caught on a regular Google Search on your mobile. We happened to be on at the right time yesterday and when we searched “2016 election” it popped right up in regular search – but today we noticed it did not! So we are sure Google is testing and modifying things to improve it.

If you are interested in seeing it in action you can do the following:

1) On your mobile phone go to: https://g.co/ampsearch
2) Do a search for: 2016 election

Then you should see a top stories area that contains the AMP designated posts.

So that is your beginners guide to AMP! If you have questions or concerns – let us know, and we will be sure to update you on this as new news becomes available!

UPDATED INFORMATION – OCTOBER 17, 2016

So AMP is alive and well and we thought it would be helpful to follow up with what we are personally seeing with AMP in our own analytical data. We added the AMP plugin to our own website when we originally wrote this post back on March 7, 2016 – but kind of forgot about it because we assumed that Google would only return AMP pages for big publishers.

We now currently have traffic coming in to 11 of our AMP optimized pages.

We found this by accident when we were doing an analysis for our own website redesign. It looks like the traffic just started on September 22, 2016 as you can see in the image below.

What is interesting to see is the Average Time On Page – we are seeing some crazy times of 15 and 19 minutes which is a good sign. The bounce rates of course are also high, meaning they are not going other places, but that is OK. AMP is about serving articles – so for us we are happy that people find our content that great to stay that long.

Thoughts on what we can do better: we may try adding a link to the bottom of our posts now as a call to action link. We do have a form on our mobile and desktop, but that will not show on AMP since AMP only shows the content from that page – and nothing else. No menus, no call to actions – nothing. We will see if doing this impacts the bounce rate for these pages.

 

 

Here is an image of what our AMP result looks like in the search engines – right now we get an AMP listing for the term “website held hostage”

Put that term into your Google search on your phone for a real view and then click on the article so you can see how Google returns the page content for its readers.

The last thing we looked at for the pages we are ranking for in AMP results is the conversion rate and the keywords we were ranking for for these articles.

 

 

 

 

 

You can see in the below sample that the CTR’s on these 2 posts are awesome! We typically see rates of about 5-10% for most of our search result listings so to see a 33% and 24% is pretty mind-blowing!

How Can I Find Out If I Have AMP Pages That Are Bringing Me Traffic?

Remember, if you do not have AMP ready posts then you of course will not have any results. If you do have AMP ready pages – then you can use the Webmaster Tools Search Analytics area to find out if you are getting traffic from any AMP pages.

You can see the below image which will help you get to where you need to be. Just choose the same settings we have noted and be sure that under PAGES you filter by the term AMP, this will then show you all the amp pages on your website and then you can look to see if you have received any clicks from them.

 

==== AMP INSTALLATION GUIDE FOR WORDPRESS ====

This guide is a general overview of how to get started with AMP. Although in most cases everything will work fine – if there are issues with your website you may find troubles in getting it implemented or more technical assistance than this post provided. This is basically an easy way to get up and running with AMP!

1) Download the AMP plugin by Automattic – and be sure to activate it. This is the plugin that makes your pages AMP friendly.

2) Go to APPEARANCE > AMP and you can edit the color scheme that your pages are using so you are consistent with your branding. Below is a sample from a client that we just updated to AMP. It looks OK – it has the blog name and the author — if you use the scroll bar you can totally scroll down the post to see the rest of what is included in an AMP post. The bottom has the categories, tags, commenting and the annoying Powered by WordPress link. But if you want to stop here you can – this is all you need for a very basic AMP setup.

There is no logo or clear way to get back to your regular website if they wanted to – that is something that irked us a bit.

If you are daring and want to spice things up – then scroll on down brave one!

3) The above 2 steps are enough to get you going. If this enough for you then we do recommend heading on over to Google Search Console to resubmit a sitemap so Google comes a little quicker to find your AMP pages. But this step is optional.

4) If you care more about your look and feel then you can also download and activate the AMP for WP plugin which will allow you to further customize your AMP page look! To clarify – the AMP plugin in step 1 CREATES your AMP page – this one makes it pretty and more conforming to your brand.

5) Now you will see a new menu item called AMP in your WordPress admin – click on that.

You will see many options in this area. We will try to run through each of them.

GENERAL TAB
LOGO
We like to include a logo for branding purposes. Just make sure it is well optimized and fits within their 190×36 recommended size.

ANALYTICS
Choose your analytics type and enter your code – we do recommend this so you can see the traffic to these pages!

FRONT PAGE
You can keep this off for now – AMP for pages is not active – yet!

LINK TO NON-AMP PAGE
YES YES YES YES — this will allow a link in the AMP page so people can get to your website.

RTL SUPPORT
You should be able to leave this off — unless you are in a country that needs it.

HIDE AMP ON ARCHIVE PAGES
This is a personal choice – I usually leave this off

AMP ON PAGES
You can leave this off for now – again pages are not AMP ready yet.

DESIGN
You will see a “Quick Link” option with a link to AMP Page Builder & Color Settings. We suggest you do look at this and make adjustments based on your personal preferences. There is a visual area in there so you can see the changes as you make them.

We typically make sure the TITLE, CONTENT, SOCIAL ICONS area all checked.

In this section there is also a CSS styling option – but we only recommend that for advanced users.

SEO
This plugin does work with Yoast so you can include your meta tags and custom descriptions right from your Yoast plugin – you should have these set to ON. Additional tags for head block is for advanced users only.

MENUS
This will allow you to include a menu on your AMP pages. YEAH! You definitely want to do this. For some clients we just use the current menu that they have on their website – for others we will create a custom menu.

The link will take you to your menu area and you will see an AMP MENU theme location – from there you just pick the menu you would like to have appear on your AMP page.

ADVERTISEMENT

This is where you can add some ads to your AMP content. You will see 4 location options – just turn on the one you want to use and enter the code.

SINGLE
Some extra options to take advantage. Again these are some personal choices but we do not typically activate the Sticky Social Icons. We set the featured image to something like 300 x 150 or something in that range – a featured image will only appear if you are using the featured image functionality in your posts.

You will also notice a link for “Additional Options for Single” click here – you can skip that if you are following this because it is the options from the DESIGN area.

SOCIAL
This adds the social sharing icons to your post in AMP pages only. Just choose the ones you would like to activate.

GOOGLE STRUCTURED DATA
This is a whole other conversation, but we do recommend you set this area up. You can just leave the post image sizes set to the default but you should upload your logo and a default post image in case your post does not have one.

NOTIFICATIONS
We have not used this. But it can be used for those that need to let readers know that cookies are being used or if you have an age requirement and need authorization. It does require the visitor to click an acceptance button.

TRANSLATION PANEL
This is where you can customize all the text in your AMP page. One we always change is “View Non-Amp Version” = to “visit my website name here” – just to make it more personal.

The Navigate text is what goes on the menu — so we change that to read MENU so it is clear what it is.

You may not use all of the areas listed – so only change what you need to.

ADVANCED ADVERTISING
If you are a blogger and want more control than what is available in the above plugin for advertising – there is an add-on available called Advanced AMP Ads.

FINAL THOUGHTS
Have questions? Completely lost? Love this post? Love dogs?

let us know below! Happy AMP’ing!