Setting up and trying out AMP for WordPress: A quick 7-step manual
2 months ago daali 0
Looking to get began with Accelerated Mobile Pages (AMP)? Columnist Stephanie LeVonne has prepared this accessible manual for WordPress users.
Stephanie LeVonne on June 15, 2017, at eleven:06 am
In these days’ cell-centric world, having pages that load quickly is vital for enjoyable the user. Not only that, however, the results of gradual web page space have been correlated to a decrease in ordinary sales and an increase in page abandonment.
Users have come to count on cell web sites to load simply as speedy as their computing device counterparts. In reality, Amazon, certainly one of the biggest online shops, concluded that even a one-second lag in page load pace accounted for a $1.6B lower in annual revenue.
Accelerated mobile pages (AMPs) are quickly turning into the same old for a way a quick-loading web page need to be constructed. Using a pre-render, AMPs are able to load 15-80 percentage quicker than preferred cell pages without compromising capability. While the ease of AMP implementation will vary depending to your CMS (content material control gadget), WordPress may be awesome test surroundings for previewing what your AMP web page might look like.
Follow this brief seven-step manual to enable AMP for WordPress.
Note: Parts of this manual assume which you have activated the Yoast search engine optimization plugin as a part of your WordPress setup. If you haven’t, you may absolutely bypass the elements that reference this plugin — you could nonetheless set off AMP capability without it — but I particularly recommend this plugin if you are extreme approximately search engine optimization in your WordPress web page.
Step 1: Install and set off your AMP plugin(s)
The AMP plugin with the aid of Automattic is needed to begin AMP implementation. This is the bottom plugin that you’ll need so as for AMP to work.
The AMP plugin will routinely generate AMP-well suited variations of all your posts, which you may view via appending /amp/ to the give up of your put up URLs. For example:
Note that only your posts — now not your pages — might be AMP-well suited with this base plugin. In order to make your pages AMP-like minded as well, you’ll want to install an extra plugin (certain beneath).
Once you have the AMP plugin installed, you can layer on extra plugins as a way to gain greater functionality. There are several unfastened alternatives you may choose from, however, the ones I use at some point of this guide are as follows:
AMP for WP — Accelerated Mobile Pages — Notable functions of this plugin consist of Google AdSense integration, rel=canonical tag aid, an AMP drag-and-drop page builder and the capability to create AMP content material that differs from the content on fashionable cellular pages.
Glue for Yoast search engine optimization & AMP — One of the advantages of the usage of this plugin is that it permits you to make pages, posts, and media AMP-compatible. The Glue for Yoast plugin also seamlessly ensures that the default AMP plugin is pulling in the suitable metadata. Similar to the AMP for WP plugin, it permits for custom styling of AMP pages, and you may even choose a custom icon and trade how your website’s brand appears on the AMP page. (Note: You must have the Yoast search engine optimization plugin installed and activated so as for this to plugin to work.)
Step 2: Set up Google Analytics
In order to set your pages up for Google Analytics tracking, you’ll first want to find your tracking ID. Log in to Google Analytics, then click the tools icon at the bottom left to carry up the Admin panel. Once you’ve decided on the ACCOUNT and PROPERTY from their respective drop-down menus, click on wherein is said “Tracking Info” within the PROPERTY column. From there, click on “Tracking Code” to peer your tracking ID — the ID has to begin with UA.
Copy your monitoring ID, then log in to WordPress. In the left-hand navigation, visit AMP > Analytics and paste your tracking ID in which it says “Google Analytics.” Then click Save Changes.
Step 3: Configure plugin settings
In this step, I’ll speak some basic configurations for the Glue for Yoast search engine marketing plugin noted in Step 1. You may additionally bypass this step when you have chosen now not to install this plugin.
The recommended configurations herein will permit you to personalize the appearance and sense of your multiplied mobile pages as well as allow AMP support for a couple of content material sorts.
To begin, go to Yoast search engine optimization > AMP > Post Types. Here you are capable of pick which submits types have to be AMP-compliant.
On the second tab, “Design,” you can personalize the appearance and feel of your AMP-enabled pages. Apply CSS styling, personalize content material and link colors, upload a custom AMP icon and set a default picture for pages that don’t have a photo associated with them.
Step 4: Test/validate your AMP setup
Now that we’ve got created our AMP URLs, it’s crucial to make sure that they’re running properly. If they’re no longer configured correctly, Google will not display them in seek effects. While this safeguards you towards displaying a semi-purposeful AMP web page, it may additionally be an ache factor for many site owners.
Fortunately, there are numerous solutions for testing your AMP URLs. Pick multiple key pages and take a look at the AMP versions using one of the techniques beneath. As mentioned in step 1, you could append /amp/ to the end of a well-known URL that allows you to view it.
Step Five: Submit your most critical AMP URLs for indexation
If the use of the AMP Test thru Google Search Console, you could click on the “publish to Google” button once you’ve run the check and established the page:
Alternatively, if you are logged in to your Google Search Console account, you can look for “put up to Google” and submit the URL immediately within Google search consequences:
While submitting your AMP page to Google is not a requirement, Google will best index your AMP page if it is internally related to or listed in the XML sitemap.
Step 6: View in Google Search Console to troubleshoot for mistakes
Google Search Console gives a manner to manage all your AMP pages in a single concise area.
Log in to Google Search Console.
Under Search Appearance, click Accelerated Mobile Pages.
Here you’ll be capable of seeing how a lot of your Accelerated Mobile Pages are being listed and which of them, if any, have essential problems. If you perceive pages with issues, you may troubleshoot shoot them the usage of the tools from the previous step.
Step 7: Test page space
Once you’ve finished the above, now it’s time to see the advantages of your efforts. Run your AMP and preferred cell pages through a page space device like WebPageTest and evaluate the results:
Get began with AMP!
As Google ramps up its efforts to unveil its cellular-first index and web page velocity inches towards becoming a cell ranking thing, it’s ever extra essential to take benefit of AMP earlier than your cellular site visitors takes successful. By following the stairs above, you have to be capable of fast and easily permit AMP pages for your WordPress web page.