Two days ago I started developing my first AMP project for a mobile web site.
Obviously I’m still a beginner, but I thought it would be helpful for other people if I document some of my experience from a developer’s perspective.
AMP is simplified, but highly regulated HTML
One such example is CSS. You can only use one internal stylesheet in the header:
External CSS files are not allowed, neither are Inline style attributes in tags.
<link href="css/bootstrap.min.css" rel="stylesheet"> (Not allowed)
<div style="margin-left:30px;"> (Not allowed)
Validation is easy, but the error messages aren’t
You can append
#development=1 to your URL, and then go to Chrome DevTools console to see the validation results. As simple as that.
However, the error messsages can be very confusing. Some examples are:
If you have
<amp-img src="/logo.png" />, you will get
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
where the actual cause is the missing height attribute, which is mandatory for the
<amp-img> tag. (You use
<amp-img> instead of
<img>, by the way.)
If you mistakenly added an external stylesheet file as in
<link href="css/bootstrap.min.css" rel="stylesheet">, you will be presented with a mysterious
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'css/bootstrap.min.css'.
<link ref> can only be used for fonts.
How do I see AMP in Google search results
It’s not live in regular Google search yet. Currently you can view the demo at http://g.co/ampdemo
Search for some popular keywords, such as one of my favourite, “Electric car”.