We’ve all heard about how Google wants to make mobile pages faster. The Accelerated Mobile Pages (AMP) Project is there to deliver and process a pared down version of a webpage, prioritizing speed. Since speed is important to your SEO, and I’m on a bit of an SEO kick, you bet it was next on my to-do list.
I admit, Joost talked about this at his WordCamp US talk this year, and among my notes was this:
Add AMP – not set it and forget it
This is so, so true.
The AMP Plugin
First its like all things WordPress, you install the plugin AMP by Automattic and activate it. That does the easy work. Of course then you have to customize the hell out of it to make it look right. Still, out of the box the plugin adds a /amp/ so if you go to https://halfelf.org/2016/amp-it-up/amp/ then you’ll see my AMPlified pages. If you’re using Multisite, you may need to re-save your permalinks for the URL to work.
There are some big warnings about this though.
1) No analytics tracking
2) You don’t get to design your AMP page
3) It doesn’t work on the front page or pages or cpts
Don’t worry! We can fix all that!
Analytics
If you’re using Monster Insights for Analytics, supposedly they added in some code to make tracking work, but I was unable to find it in the code or documentation. More than likely it’s in their Pro version. I don’t use that plugin simply because I found it easier to use a 28 line mu-plugin for my network and I don’t need to see my stats all the time. I used the AMP WP recommended method and put it in the same mu-plugin as I have my regular analytics.
Design
This is a little messy. Design is a very complicated word. If you just want to change the colors, you can do this via Appearance > AMP. Whaaaat!? That’s right, it lets you change the header color and font color right there. Super simple. If, though, you want to make your CSS tweaks directly to change that light blue header to navy, perhaps, you can follow the AMP WP directions for CSS additions and have this:
add_action( 'amp_post_template_css', 'halfelf_amp_css' );
function halfelf_amp_css( $amp_template ) {
?>
.amp-wp-header {
background-color: #013659;
}
<?php
}
I strongly recommend making few changes. Oh, color of course, but don’t go and make a 1 meg CSS file. The point of AMP is to load faster, after all!
There’s a whole second level of design that I’ll get into later. It needs its own post.
AMP your CPTS
Right now you can only do it via code. The AMP WP directions for CPTs state they may come up with a better way, but for now you do this:
add_action( 'amp_init', 'my_amp_add_this_cpt' );
function my_amp_add_chars_cpt() {
add_post_type_support( 'post_type_this', AMP_QUERY_VAR );
}
It’s pretty direct, and I added this in the bottom of my existing CPT code.
