I Gave it a try, but AMP is not the way to go
Read about my journey trying AMP Pages
Date Published: Sunday,
On October 7, 2015, Google announced a new open source initiative called Accelerated Mobile Pages, to improve the performance of the mobile web. AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics.
AMP enables content to load near-instantaneously by removing third-party JavaScript from the page. It prioritizes text-based content, then loads additional content after the remainder of the page has rendered.
Google's decision to launch this open-source initiative was rooted in the importance of improving the user experience (UX) for the millions of mobile searchers worldwide — 95% of the internet is access on a mobile device.
Google partnered with several different publishers and platforms to start using AMP on its content — Twitter, Vox, BuzzFeed, and the Washington Post, to name a few.
I remember after reading the announcement by Google, I did some research and learned that not many people were using it, nor were they thrilled, or cared, about Accelerated Mobile Pages. There were a few questions about its staying power, usability, and complication in incorporating it into an already existing html markup, because you cannot just take an html document and add a a line of code to make it AMP compliant.
The complaint was that it takes more time creating a slimmed down version of an html document which takes away many of the elements that designers use to style a page just to increase the speed that the document loads onto the client's device. And since it was brand new, there was no real proof that it was worth doing, and since Google Search was not optimized for it yet, most people would not notice the difference.
My First Accelerated Mobile Page
Although the page does not exist anymore, that I remember, I do remember that creating that Accelerated Mobile Page from scratch was not difficult to do. Not many restrictions or added rules to apply other than image tags were different and javascript was not allowed.
There was no real way to see if it was working, validated, or made any difference other than checking the download speed, so I did not update any of my, or my clients, sites to include any AMP code.
Keeping an eye on AMP
The concept intrigued me about making clean, simple, and low bandwidth pages, but will Google really reward pages with this simplistic code as they say they do? There a very few things that I need to jump on the bandwagon right out of the gate, and AMP was not one of them, mostly because the architecture and execution were new and not solid in the documentation (or the reviews). But I knew it was just a matter of time before they worked out the bugs, so I kept my eyes on the development and buzz by reading posts created by HostGator Blog, the Google Analytics Blog — follow the parent — as well as a few others like MOZ, Search Engine Land, and Smashing Magazine blog's. There had not been much positive chatter until February 2017. I noticed many bloggers were using it including many of the major contributors to news. It was time I looked at it one more time.
Creating an Accelerated Mobile Page for your website or Blog.
1. Start from scratch!
Yes, you can take your html page and tweak it for AMP code, but as I learned, it was trial and error checking after each line, word, or letter, depending on the errors the page had, so your best bet is to start from scratch with a blank php or html file.
Non-AMP HTML markup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello, Non-AMP</title> <link rel="canonical" href="http://www.SOME_DOMAIN.com/ARTICLE_LINK.html"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <link rel="stylesheet" href="link_to_stylesheet.css"> <link rel="stylesheet" href="link_to_another_stylesheet.css"> <script> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2017-01-06T06:00:00Z", "image": [ "http://www.SOME_DOMAIN.com/IMAGE_LINK.jpg" ] } </script> <script type="text/javascript" (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'XX-XXXXXXX-XX', 'auto'); ga('send', 'pageview'); </script> <script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script> </head> <body> <h1>Welcome to the non-AMP web</h1> <img src="http://www.SOME_DOMAIN.com/IMAGE_LINK.jpg" alt="Some Domain Image Link." width="300" height="100"> <footer> <p>© 2017 Davenport Website Designs</p> </footer> </body> </html>
AMP HTML markup
<!DOCTYPE html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="http://www.SOME_DOMAIN.com/ARTICLE_LINK.html"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <style amp-custom> body { background-color: rgb(255,255,255); } amp-img { border: 5px solid rgb(0,0,0); } </style> <script> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2017-01-06T06:00:00Z", "image": [ "http://www.SOME_DOMAIN.com/IMAGE_LINK.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>Welcome to the mobile web</h1> <amp-img src="http://www.SOME_DOMAIN.com/IMAGE_LINK.jpg" width="300" height="100" layout="responsive" alt="Some Domain Some Image Link"></amp-img> <footer> <p>© 2017 Davenport Website Designs</p> </footer> <amp-analytics type="googleanalytics"> <script { "vars": { "account": "XX-xxxxxxx-XX" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp/analytics> </body> </html>
2. Use the proper markup!
The differences to make AMP HTML work are:
- Change <html lang="en"> to
<html âš¡ lang="en">or<html amp lang="en">. - Add
<script async src="https://cdn.ampproject.org/v0.js"></script>as the second child of the <head> (this includes and loads the AMP JS library). - Contain the following in the <head> tag:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>. - CSS stylesheets have a few requirements and limitations:
- External stylesheets are not allowed.
- Inline style attributes are not allowed.
- Certain styles are disallowed due to performance implications.
- The Google fonts styles are allowed — why would they not be, right?
- All styles must be embedded in a single stylesheet in the <head> of the document titled
<style amp-custom>.
- AMP follows stricter rules when laying out elements on the page. On a normal HTML page, you almost exclusively use CSS to lay out elements. But for performance reasons, AMP requires all elements to have an explicit size set from the get-go. Learn all about how AMP renders and layouts a page and how you can modify the layout in How to Control Layout.
- The markup used for images:
<amp-img src="http://www.SOME_DOMAIN.com/IMAGE_LINK.jpg" width="300" height="100" layout="responsive" alt="Some Domain Some Image Link"></amp-img>. Need to include more images, video, or audio? - Analytics, Google or others, took awhile to understand the requirements and how to implement them as they are different from the javascript markup that is normally used. They begin with
<amp-analytics type="googleanalytics">followed by<script type="application/json">. I then added{ "vars": { "account": "XX-xxxxxxx-XX" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp/analytics> - Fontawesome was a work-around, and not sure how long that back-door will last, and besides, not using my personal id does not generate stats for any of my pages, but at least they work, for now.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
3. TEST · FIX · RETEST · PUBLISH
Many Marketing, SEO, and Webdesign companies insist on having a hidden staging directory while creating and testing a new website so search engines cannot index a “Work-In-Progress” before it is ready, and I agree; I do that will all my clients, yet, I have the staging area on my own domain before putting it on theirs. The same thing should be done with all blog articles including Accelerated Mobile Pages. But how do you do that?
How to check if a page is valid AMP?
The AMP Project has three options to check AMP markup validity that should produce the exact same result, but I have not had that experience except when it passes. I use all three depending on the mood I am in, or how I want the feedback and a way to find fixes for the errors, but as it is now, my errors are few, if any, as I created an AMP markup template that I use and just change the data.
KEEP IN MIND: I am hand-coding these AMP pages for my own use; My blogs that use Wordpress have AMP plugins; and they are NOT perfect, but they are getting better. There are still some errors that come up, and the developers of the plugins are working to fix them, but the AMP project is, and will always, change. My thought is it will eventually become a markup language all to itself, or all markup languages will fuse into one language for all platforms — AMP2, HTML6, CSS4 — or SUWML: Simplified Universal Web Markup Language. Whatever.
If you are using Wordpress, look for the Accelerated Mobile Pages .org plugin, since that seems to be the one with the most updated development, so far.
4. Read, research, and expand on my simple Accelerated Mobile Pages
There are so many other things that can be done with your AMP content; I am using the basics on my Accelerated Mobile Pages. Remember: this is suppose to speed the web up for mobile devices by eliminating the unneeded overhead that slows down loading of the most important thing that the viewer is looking for…THE CONTENT.
This was my main focus when I taught web-design at the local high school. Your visitors are looking for the content other wise they will leave and not come back. The main reason you are creating a website is to have people see it and then react with either sharing it, learning it, purchasing something, or some other purposeful action. If they cannot find it (SEO), read it (DESIGN & LAYOUT), or even view it (SPEED) in a timely manner, they will not stick around for more — think about your internet travels and you impatients when a site takes too long to load. Do not make the time and money you spend creating your site, a waste of time!
Do everything you can to make your webpage better
A successful website is predicated on the popularity if the offerings that the site has to share, along with proper SEO, great Design & Layout, plus speed. If there is any opportunity to make a webpage better in any of those categories, it would behoove us to taker advantage of it and put it into play.
The web-design company you choose should be verse in SEO, Design & Layout, as well as the Speed of your site on mobile devices.