{"id":1697,"date":"2016-08-09T12:14:15","date_gmt":"2016-08-09T12:14:15","guid":{"rendered":"https:\/\/www.searchenginewatch.com\/2016\/08\/09\/how-to-implement-google-amp-on-your-wordpress-site-as-easily-as-possible\/"},"modified":"2020-02-25T17:32:30","modified_gmt":"2020-02-25T17:32:30","slug":"how-to-implement-google-amp-on-your-wordpress-site-as-easily-as-possible","status":"publish","type":"post","link":"https:\/\/searchenginewatch.com\/2016\/08\/09\/how-to-implement-google-amp-on-your-wordpress-site-as-easily-as-possible\/","title":{"rendered":"How to implement Google AMP on your WordPress site as easily as possible"},"content":{"rendered":"

With the news that Google will be rolling out its accelerated mobile pages (AMP) to all organic listings<\/a> beyond the \u2018Top Stories\u2019 you\u2019ll be forgiven for getting a little bit anxious.<\/strong><\/p>\n

Don\u2019t worry. There are five solid reasons why you don\u2019t need to panic\u2026<\/p>\n

    \n
  1. You\u2019ve got till the end of the year<\/li>\n
  2. Google AMP isn\u2019t technically a ranking signal<\/a><\/li>\n
  3. It\u2019s *fairly* easy to implement<\/li>\n
  4. The cynical among you will probably be proved correct that Google<\/a> will just jettison the whole thing after a year anyway (see: authorship<\/a>)<\/li>\n
  5. There are probably more important things<\/a> to worry about<\/li>\n<\/ol>\n

    Right now though we\u2019re going to concentrate on those top three points, because ultimately enabling AMP means providing a faster, more user friendly experience for mobile search visitors and it is, as I said, *fairly* easy to implement. So you may as well\u00a0give it a go.<\/p>\n

    Yes you should be providing the fastest, most user friendly mobile experience within your non-AMPed web pages anyway. And yes surely it would be better for Google<\/a> to promote education on how to provide better, faster mobile pages, rather than insisting that\u00a0webmasters implement what is essentially a quick fix.<\/p>\n

    But right now, Google<\/a> is pushing AMP, and this is how (after much frustration and banging my head against a laptop) I successfully implemented AMP for my own site.<\/p>\n

    1) First you\u2019ll need\u2026<\/h2>\n

    This is very specific to my own experience, and you may have a much easier, or much more difficult, route.<\/p>\n

    However if you have a WordPress site, all you\u2019ll need is to download a couple of plug-ins and have access to Search Console<\/a>. You may also need access to your web development<\/a> hosting platform if things don\u2019t run smoothly.<\/p>\n

    2) Download the Automattic AMP plug-in\u2026<\/h2>\n

    At first we used a plug-in from PageFrog that promised to deliver AMP content and Facebook Instant Articles in one handy tool. However this proved to be unworkable and glitchy.<\/p>\n

    Instead we downloaded the Automattic AMP plug-in<\/a> as recommended by Yoast<\/p>\n

    \"AMP<\/p>\n

    Once you\u2019ve enabled the plugin, it adds a standard meta tag in the head of your webpages to help Google recognise that AMP enabled versions of them exist.<\/p>\n

    You can check for yourself, by adding the \/amp\/ suffix to the end of any URL on your site.<\/p>\n

    Here\u2019s one of our normal webpages on your desktop:<\/p>\n

    \"methods<\/p>\n

    Here\u2019s the same webpage on your desktop with the AMP suffix:<\/p>\n

    \"methods<\/p>\n

    As you can see it\u2019s very basic stuff. But have no fear, we can style it out!<\/p>\n

    3) Download the Yoast Glue plug-in<\/h2>\n

    Yoast has developed its own simple to use plug-in called Glue<\/a> that adds styling options for the Automattic plug-in.<\/p>\n

    Once you\u2019ve enabled Glue, you can see the settings under SEO>AMP>Design<\/strong>. Here you can set the colours and fonts to be closer to your original desktop page, as well as uploading your own logo and adding you own custom CSS.<\/p>\n

    Here\u2019s a quick example of our AMP page after a couple of minutes spent in the settings\u2026<\/p>\n

    \"methods<\/p>\n

    It\u2019s not perfect yet, but it\u2019s getting there.<\/p>\n

    Next you\u2019ll need to check that Google is indexing your AMP pages properly…<\/p>\n

    4) Visit Search Console<\/a><\/h2>\n

    If you don\u2019t have Search Console<\/a>, then sign-up right now, or ask the webmaster for permission.<\/p>\n

    Once you\u2019re inside, select your site from the dashboard, then click on Search Appearance>Accelerated Mobile Pages.<\/strong><\/p>\n

    Upsettingly for us, and right up until just a few days ago, Google was reporting us having 258 AMP pages with errors, and this figure only increased the more we published.<\/p>\n

    \"Search-Console-Accelerated-Mobile-Pages-report\"<\/p>\n

    Luckily Google provides a handy tool to check exactly what may be the cause.<\/p>\n

    5) Run the AMP validator tool<\/h2>\n

    As you can see, we have a problem with \u2018user authored Java script\u2019 which can block Google indexing the AMP content.<\/p>\n

    Click on the specific issue you need to address\u2026<\/p>\n

    \"map<\/p>\n

    This will take you to a list of error-filled webpages. Click on the first page…<\/p>\n

    \"amop<\/p>\n

    You\u2019ll now see a two-step tool for discovering your errors.<\/p>\n

    \"validator<\/p>\n

    1)<\/strong> Will take you to a help page<\/a> featuring the HTML reference for AMP.<\/p>\n

    2)<\/strong> Will run the validation tool to test for errors.<\/p>\n

    Click on number 2. This will bring up the HTML for the webpage and pinpoint exactly where it\u2019s failing.<\/p>\n

    \"AMP<\/p>\n

    For us, it\u2019s that tricksy bit of Javascript flagged above.<\/p>\n

    Reading along the code revealed its origin. A reporting tool called New Relic, that we had enabled through our web development host Pantheon.<\/p>\n

    It was entirely our fault. We enabled it and we didn\u2019t realise the Javascript it placed within our HTML would block AMP.<\/p>\n

    All it took to fix the problem was logging into Pantheon and deactivating New Relic.<\/p>\n

    Within days we saw an improvement. And after around six days, we now have 328 successfully indexed AMP pages! Just look at the way those streams cross\u2026<\/p>\n

    \"amp<\/p>\n

    Also the 67 pages showing errors haven\u2019t been indexed yet. When I run the validation tool, they come up as clear.<\/p>\n

    So now all that\u2019s left to do is sit and wait for AMP pages to appear in organic results, and for our new mobile-first audience to come trickling in.<\/p>\n

    *sits twiddling thumbs, stares out of window, sighs*<\/p>\n","protected":false},"excerpt":{"rendered":"

    With the news that Google will be rolling out its accelerated mobile pages (AMP) to all organic listings beyond the \u2018Top Stories\u2019 you\u2019ll be forgiven for getting a little bit panicky.<\/p>\n","protected":false},"author":136,"featured_media":1318,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5],"tags":[88,319,275,1372,27],"content_type":[27095],"class_list":["post-1697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-seo","tag-accelerated-mobile-pages","tag-amp","tag-mobile-design","tag-mobile-friendliness","tag-wordpress","content_type-news"],"acf":{"tad_independentcommercial":false,"tad_content_format":false},"post_info":{"name":"Christopher Ratcliff","title":"","thumbnail_url":"https:\/\/searchenginewatch.com\/wp-content\/uploads\/2018\/10\/Screen-Shot-2016-08-02-at-20.56.02-120x90.png","category":"Mobile","timeago":"10y"},"_links":{"self":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":0,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/posts\/1697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media\/1318"}],"wp:attachment":[{"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/categories?post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/tags?post=1697"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/searchenginewatch.com\/wp-json\/wp\/v2\/content_type?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}