Google AMP: What to Know and How to Get it

May 5, 2016

Google ,

SEO , Technical ,

0

Similar to the way the RSS technology was developed back in the day, the AMP project is not an end-to-end (publisher-to-reader) solution. It’s more of a standardised code for lighter devices.

Firstly, what is Google AMP ?

AMP stands for Accelerated Mobile Pages, a Google-backed project intended as an open standard for any publisher to have pages load quickly on mobile. The goal of AMP is to speed up news content on the mobile Web by caching the webpage before the user clicks.

[Tweet “AMP stands for Accelerated Mobile Pages, a Google-backed project made for publishers to post content onto the mobile Web by caching the webpage before the user clicks.”]

Google AMP is more a collection of ingredients, rather than a fully baked cake. AMP is a set of specifications, conventions, and technologies to get the same code to work across multiple platforms and devices.

An average web page takes about 8 seconds to load on mobile. AMP, meanwhile aims to reduce that rendering speed by 4. Although Facebook and Apple have a significant head start on Google, we believe there’s every reason to believe that AMP will catch up quickly.

Mobile Page initiative allows any participating publisher to deliver content at lightning-quick speed through the mobile web. As of today, AMP articles are accessible from Google Search, Twitter Moments, LinkedIn Pulse and should potentially appear anywhere online as long as the content is newsworthy.

In Google, it takes the form of a news box carousel that triggers specific search queries like ‘trump’ or ‘AMA awards’. In Twitter or LinkedIn, AMP articles sit respectively into Twitter Moments and LinkedIn Pulse, which already represent their official newsstands.

In Google search results, AMP articles take the form of Top Stories carousel:

google-amp-live

In Twitter, it takes the form of vertical news feed sitting in their own news curation service called ‘Moments’:

twitter

 

No Official Launch Date

News outlets officially reported AMP listings showing in mobile search results on February 23, 2016. Although Google hasn’t officially confirmed any launch date, Ad Age learned that launch date was planned for February 24.  This came after nine months of collaborative efforts between technology companies and publishers.

Why Google?

Google is already one of the most powerful companies in the publishing space. The mobile Web is still a huge traffic source for publishers, but more users are choosing apps like Apple News, Flipboard, and Twitter to get their news. Google wants to make the mobile web fast enough to feature all types of multimedia but doesn’t want to compromise on simplicity.

Google doesn’t force publishers to present their news using a pre-made template. At some points, it wasn’t the medium itself, but the content it carries that really motivated Google Teams in that project.

AMP is actually the only mobile syndicating solution without a dedicated client (other than the browser).

Who Else Supports AMP HTML?

amp

It’s all about Ads

Google has already brought a vast selection of publishers on board, including Vox Media, Conde Nast, BuzzFeed, and The New York Times. It is to their advantage to fasten their pages and display more ads.

Beyond contents, Google’s AMP project also impact mobile advertising. Google want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously.

“The average mobile user starts scrolling on a website 13 seconds after content begins loading. Desktop readers instead, scroll down after 24 seconds.” Source: Adweek

For the digital content industry, the rampant mediocrity of mobile ads has become an embarrassment; heavy banners that fail to load properly leaves a pretty bad user experience with blank space in the scroll. Publishers and technology companies had to react fast and come up with a made-to-measure solution adapted to lighter devices and their user behaviours.

Requirements

The complete list below shows the official set of elements which are necessary for building and running an AMP HTML page.

a) HTTPS Mobile Page

All fonts must be served over HTTPS. Furthermore, Google took security very seriously in the past years and wants here to protect users that worry about malware tucked away inside adverts.

b) Mobile & Desktop Cross-annotations

It is required to add canonical tag pointing to Desktop pages and rel=alternate tag pointing to Mobile pages so that search engines don’t get confused with duplicate content. That task may require to do a bit of homework first before implementing AMP. We’ve noticed that many sites today don’t bother about this aspect and just serve search engines with both forms of content, without distinction.

c) Refrain your CSS appetite

CSS Shouldn’t exceed more than 50 KB worth.

d) Only use JSON-LD

JSON-LD is the form of script tag allowed on AMP documents. Gmail supports JSON-based linked data embedded in HTML documents with the @context of schema.org. AMP project teams have anticipated most of the needs for JavaScript and provided compatible alternatives through AMP runtimes.

e) Use inline styling

Externally linked style sheets tend to delay page loading times, so this practice is banned straight away.

f) Add details on external resource calls

Must add width, height and layout properties to all externally loaded resources – that minimise DOM layout recalculation.

g) Two font providers only

Font providers must be whitelisted as it is an important to source of malware. For the moment, there are only 2 whitelisted providers which are fonts.googleapis.com and fast.fonts.net.

h) Turn Responsive

AMP articles should be responsive; not responsive to desktop screens – since the only intent of AMP is to accelerate mobile pages – but rather responsive for all mobile devices. Be prepared to tweak your mobile pages to all scenarios of standard media queries. From the iPhone 3S relics to the relatively giant iPad Pro offering a resolution of 2732×2048 at 264 pixels per inch (ppi).

i) Use specific AMP mark-ups:

* Use an emoji as an attribute like <html ::zap::> but can be substitute by <html amp>.

* Use the charset=”utf-8″

* Use a meta viewport tag – Containing width=device-width and minimum-scale=1.0.

* Use a page rendering failsafe – CSS to keep the opacity at 0 (invisible) until the page has been properly styled.

* Use specific AMP JavaScript runtime(s) – Must load Runtimes in an asynchronous way. E.g. – <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

* Replace some existing classes – most popular banned components in AMP are: script, base, frame, frameset, object, param, applet, embed, form and input.

J) Have Clean Code

The code should validate and be free from any error. Developers have the choice between using the simple browser command “#development=1” or using the Google Search Console.  Read the AMP Validation Errors guide further below.

Optional (Yet Recommended)

  • Schema mark-up

Structured data is apparently compulsory for Google, not Twitter or LinkedIn. Because your AMP documents will appear in Google search – and more precisely on the Top Stories carousel – Google recommends to mark-up your content with Schema.org vocabulary first.

Google states that in order to get accepted in Top Stories carousel, AMP pages should validate and get structured data mark-up added into the article or video.

  • Caching Solution

Because the whole point of AMP is to accelerate the page loading time, caching is the core element of this project, and as of today still, represent one of the most important performance factors to reduce client-side overhead.

AMP technology accepts all forms of caching and almost anything that can save additional HTTP requests. However, even though a developer doesn’t have any caching solution in place Google will offer its caching service for free – considering the code pass the validation.

  • Either use a private CDN network, like Akamai.
  • Either use Google’s service for free. They know their stuff about scalability since they’ve been offering Google Page Speed Service in the past.
  • Alternatively, use the HTML tag called amp-install-service worker which loads and installs a service worker but relying only on that new AMP HTML tag may provide different results depending on the web browser.

The choice of cache is a decision of the platform that is sending the user (Twitter or Google Search) so if code validates, then it should get cached by the platform. Whether the publisher decides to use a CDN for delivery is independent of that. Once Twitter and Google integrate AMP pages directly into their cache they don’t necessarily need to request pages directly from the publisher’s server.

The great news with Google AMP cache is that it will make pages available ‘semi-instantly’ from multiple Google data centres around the world. And we believe this is one of the main reasons that project should get successful.

Can I style AMP HTML tags?

Designers who are conscious about look and feel may wonder whether styles can be injected over the AMP tags in a very similar way than classic HTML tags. The answer is yes, and we haven’t found any limitation on this matter.

E.g. – .amp-img {border: 3px;}

How can I measure AMP HTML pages?

A handy AMP HTML tag has come to live while the open-source community was developing this project, this one is called AMP Analytics.

AMP Analytics capture analytics data from an AMP document and offer built-in support for Google Analytics. It comes with two core components that tend to improves performance by reducing duplication of effort.

  • amp-pixel provides page view tracking, similar to the classic tracking pixel.

<amp-pixel src=”https://foo.com/pixel?RANDOM”></amp-pixel>

  • amp-analytics is a powerful solution that supports many types of event triggers to help publishers better understand their audiences. This allows to configure multiple endpoints and data sets and shares it with all (any) analytics providers. The amp-analytics element is configured to send a request to https://example.com/analytics when the document is first loaded, and each time an <a> tag is clicked.

The details concerning what is measured and how that data is sent to an analytics server are specified in the JSON configuration object. Needless to say that JSON is the only piece of JavaScript allowed and that comes by default in AMP documents.

This allows a publisher to specify the vendor they wish to use and do not have to worry about including the boilerplate configuration that would be specific to that vendor. No matter how many analytics providers are configured, the AMP runtime will only ever do a single measurement to come up with a value. E.g. – <amp-analytics type=”adobeanalytics”> … </amp-analytics>

So, who is it for?

google amp_1

We can figure out what all SEOs think when reading those articles about AMP HTML. It is only foR major publishers? Can I implement it for my small-medium clients?

There’s no need to be a publisher to turn your mobile pages into AMP HTML. Due to its open-source approach, anyone with lot of patience and methodology could turn to their mobile pages into AMP HTML. Most CMS today have this template or plugin service available that may facilitate greatly the deployment of AMP HTML. WordPress, the famously effective CMS and industry leader, already has launched its plugin and plans on supporting AMP for all publishers.

Also, you can redirect your own mobile traffic from responsive versions of articles to your AMP counterparts without transgressing any sort of Google guidelines.

Yet, no matter how quickly your pages load, you still need to give the user a reason to stick around. If for some reason your content is not fresh or enough quality, it won’t have any chance to appear in Google Top Stories carousel.

A Godsend for SEO

In the long run, Google would favour AMP sites in search results over others with otherwise identical scores. In other terms, Google will simply continue to favour faster sites as it’s an important – if not the main – element of user satisfaction today. Google said: “If we had two articles that from a signalling perspective scored the same in all other characteristics but for speed, then yes we will give an emphasis to the one with speed”.

It is that kind of technology that sits on top of others recently developed, yet require them to work properly. Because it’s not a client but just a set of specifications and conventions, Google seems here to encapsulate whole loads of interactive functionalities for the good of the digital landscape.

Looking at the list of requirements and site changes before turning AMP HML, it is not surprising that Google has put all efforts supporting this project. Not only publishers’ AMP documents should be HTTPS, but also resolve any duplicate content issues between Mobile vs. Desktop, and finally implement Structured Data (Schema.org) to get one chance to appear in Google’s Top Stories carousel.

Staying Consistent with Mobile Configurations

What Google hasn’t shout loud and clear is that over the past years they’ve been gently promoting Responsive Design over Adaptive Design and Separate Mobile Site. Perhaps a reason why they never officially confirmed proper launch date but rather let Ad Age know of a launch date for the 24th of February.

So, for those who just switched to one platform fits all – in Responsive Design – this new technology should require to revert this set up and host again mobile pages separately so it makes it possible to tag them with AMP HTML Tags. Eventually, redirect the mobile traffic from Responsive Design to a Separate Mobile Site.

Conclusion

The look and layout has a long way to go for publishers, especially when they can opt for other proprietary syndicating formats like Facebook Instant Articles or Apple News that allow the publisher to freely use their own typeface and layouts. As opposed to AMP, those other syndicating clients are more focused on the look and feel, then on content loading performance.

On the other side, it is fair to believe that publishers will try everything to turn AMP friendly, Google rules. Well, even though they may not be totally happy about it, due to additional costs for syndicating content or mobile hosting, they will certainly try it anyway since they don’t want to miss the train as it’s leaving the station this spring.

Really, really, really useful resources:

 

Want to stay up to date with this and other digital updates? Sign up for our newsletter below! 

Comments are closed.