{"id":4797,"date":"2016-09-13T22:37:15","date_gmt":"2016-09-14T03:37:15","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=4797"},"modified":"2016-09-13T22:37:15","modified_gmt":"2016-09-14T03:37:15","slug":"amp-pages-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/","title":{"rendered":"AMP Pages in WordPress – the Easy Way"},"content":{"rendered":"

It’s interesting to see Google really pushing AMP (Accelerated Mobile Pages) and featuring sites that are AMP-ready more prominently in its mobile search results.<\/p>\n

What’s AMP? Good question. It’s one I’m going to let my friend and colleague Jen Lombardi, owner of Kiwi Creative<\/a>, explain, as she did in this blog post<\/a> for the EdUI conference. She says:<\/p>\n

With faster cellular data networks and increased access to Wi-Fi, people have come to expect that websites will load quickly and be easy to explore. But what if pages didn\u2019t just load fast\u2026but instantaneously? That was the goal of a group of publishers and technology companies that started the open source initiative named The AMP (Accelerated Mobile Pages) Project.<\/p>\n

Introduced by Google on February 24, 2016, AMP pages now load 85% faster than standard mobile web pages\u2026and this speed matters. According to one study<\/a>, mobile pages that load one second faster experience up to a 27% increase in conversion rate.<\/p><\/blockquote>\n

Google says this:<\/p>\n

The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.<\/p><\/blockquote>\n

It’s interesting to watch Google reach into this space. Many of our sites today are responsive, but I find that even when responsive, the sites are huge, often unoptimized messes. This is especially prevalent in WordPress, where each plugin adds its own javascript and CSS files, and it doesn’t take long for a simple one page website to be well over 1MB in size. That’s crazy, especially on mobile.<\/p>\n

AMP is forcing developers to reconsider the information they’re presenting, but the reward is more visibility in Google.<\/p>\n

While AMP pages are getting pushed big time by Google, implementing this new technology can be tricky. For example, all your CSS must be inlined and not in external files. One more thing – that CSS has to be less than 50k. Search Engine Land has a deep dive into how to create these pages.<\/p>\n

Want to see an AMP page in action? Here’s a post I did about Instagram<\/a> a few months ago, but in AMP format. Have a look not only at the design but at the code inside it. You’ll get a taste for how much you have to shift, style wise, from external files into the actual HTML file.<\/p>\n

As this site is created in WordPress, I turned to an AMP plugin<\/a> created by Automattic.<\/p>\n

Spoilers: there’s no setup or config for this. You install it, turn it on, and that’s it. It does all the work in creating the correct template, inline CSS, and body copy in all the ways Google wants it to be. My pages are also passing the AMP Validator tests<\/a>. Yay.<\/p>\n

\"AMP<\/p>\n

This plugin also adds a meta tag to your regular WordPress theme, again with no added work on  your part, alerting Google that an AMP version of that page exists. It looks like this:<\/p>\n

<link rel="amphtml" href="https:\/\/www.highedwebtech.com\/2016\/06\/07\/instagram-breaketh-their-api\/amp\/" \/><\/pre>\n
That’s enough for Google to know there’s and AMP version and present it, if necessary, to site visitors via search.<\/p>\n
Now, if you’re like me, you’re mind is traveling down the rabbit hole of all sorts of web development issues – issues like SEO, analytics, design, and more.<\/p>\n
Read Jen’s post above as she covers SEO and design nicely, but AMP does allow developers to do analytics, ecommerce, and even advertising. This post from Google<\/a> talks about how to integrate Google Analytics into AMP pages. If you use Jetpack and WordPress stats, this is another thing that the AMP plugin sets up automatically for you.<\/p>\n
If you use WordPress, you should try this plugin. If you don’t use WordPress, the process to implement AMP can be more difficult and time-consuming, but if you rely heavily on Google, the reward may be worth the effort.<\/p>\n","protected":false},"excerpt":{"rendered":"
Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[1017,37,52],"tags":[1018,956,986],"yoast_head":"\nAMP Pages in WordPress - the Easy Way - HighEdWebTech<\/title>\n<meta name=\"description\" content=\"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AMP Pages in WordPress - the Easy Way - HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-14T03:37:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"AMP Pages in WordPress – the Easy Way\",\"datePublished\":\"2016-09-14T03:37:15+00:00\",\"dateModified\":\"2016-09-14T03:37:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\"},\"wordCount\":663,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png\",\"keywords\":[\"AMP\",\"Google\",\"wordpress\"],\"articleSection\":[\"AMP\",\"Google\",\"Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\",\"name\":\"AMP Pages in WordPress - the Easy Way - HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png\",\"datePublished\":\"2016-09-14T03:37:15+00:00\",\"dateModified\":\"2016-09-14T03:37:15+00:00\",\"description\":\"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54.png\",\"width\":1435,\"height\":630,\"caption\":\"AMP validation results for this site\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AMP Pages in WordPress – the Easy Way\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web & Marketing for Education & Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AMP Pages in WordPress - the Easy Way - HighEdWebTech","description":"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"AMP Pages in WordPress - the Easy Way - HighEdWebTech","og_description":"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?","og_url":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/","og_site_name":"HighEdWebTech","article_published_time":"2016-09-14T03:37:15+00:00","og_image":[{"url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png"}],"author":"Mike","twitter_card":"summary_large_image","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"AMP Pages in WordPress – the Easy Way","datePublished":"2016-09-14T03:37:15+00:00","dateModified":"2016-09-14T03:37:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/"},"wordCount":663,"commentCount":0,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png","keywords":["AMP","Google","wordpress"],"articleSection":["AMP","Google","Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/","url":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/","name":"AMP Pages in WordPress - the Easy Way - HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54-1024x450.png","datePublished":"2016-09-14T03:37:15+00:00","dateModified":"2016-09-14T03:37:15+00:00","description":"Google is pushing developers to implement AMP into their sites to provide very fast mobile loading. How hard is that to do if you use WordPress?","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#primaryimage","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2016\/09\/Screenshot-2016-09-13-23.17.54.png","width":1435,"height":630,"caption":"AMP validation results for this site"},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2016\/09\/13\/amp-pages-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"AMP Pages in WordPress – the Easy Way"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web & Marketing for Education & Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/4797"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=4797"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/4797\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=4797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=4797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=4797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}