Friday, November 25, 2016

Google’s AMP: Designed for Speeding up the Web by Changing How It Works


Google's announcement at Oct 7, 2015 about the Accelerated Mobile Pages Project (AMP), which "aims to dramatically improve the performance of the mobile website" or, alternatively, fragments the Internet by not fully supporting the very standards the web is built upon - depending on your point of view. As well as that announcement they have launched the AMP Project Website (which I discuss in more detail below). So is it a good and necessary step forward or a massively step backwards?

In August 02, 2016, Google announced Accelerated Mobile Pages (AMP) would be moving beyond “Top Stories” into the main organic mobile search results. Today, AMP officially rolls out broadly in mobile search.

In this article I'll explain what is google AMP, How AMP Works, it's advantages & it's impact on google search results.

So, What's Google AMP?

Publishers are cooling on Facebook Instant Articles & Apple News, they’re becoming hot and heavy with Google AMP, the search engine giant’s answer to Instant Articles.

In February, 2016, Google rolled out AMP, which stands for Accelerated Mobile Pages, on mobile search results in Google News. Publishers scrambled to adopt Google’s open-source code on their pages because search still drives close to 40 percent of referral traffic overall, and they know that as their audiences shift to mobile, having fast mobile pages can only help them get surfaced by Google’s algorithm.

AMP's kind of  projects like the Facebook Instant Articles and Apple News.

So, let's talk about how this might actually show up in search results. So first of all, what we know at the moment AMP is  looking like it's mobile only. It's showing up as a carousel above the regular blue links, typically for news-related terms, because most of this is focused on obviously reading contents. The people who've rolled this out first have been mostly news & advertisement publishers Washington PostUSA Today NetworkGizmodoWIREDSlate MagazineplistaRelay Media, etc. So you search for a news-related term. You can see this carousel of swipe-able images above the blue links. Click on one of those, it opens super fast, that's the whole point, and then you can swipe to another AMP page across the way.

Benefits of Accelerated Mobile Pages?

Speed Matters Most and Instant Loading is the Ideal Expectation. Research has shown higher bounce rates associated with slower-loading web pages. Using the AMP format will make it far more compelling for people to consume and engage with much more content.

AMP HTML is a way to build web pages for static content that render with reliable, fast performance. It is Google and Twitter's attempt to make really fast mobile pages. At its essence, it's basically a stripped-down form of HTML, a diet HTML if you will.

How Does AMP HTML work?

The AMP format is supported by a wide variety of platforms, including Google Search. If a web page listed in Google's search results has a valid AMP version website, Search may direct mobile users to the cached AMP.

All of Google Webmaster guidelines for making a site Google-friendly also apply to AMP. This article covers additional recommendations to help you and your website users take advantage of AMP's benefits. Here's a the summary:

Design: Create web pages according to the AMP specification.
Discovery: Make your AMP discoverable.
Validation: Test that your page is written in valid AMP HTML.
Structured data: Mark up your content with structured data.
Status: Monitor your AMP report on Search Console for errors.

But What About Advertisements?

Although JavaScript is mostly forbidden on AMP sites, there are some loopholes that allow publishers to include advertise, analytics, and other pieces of JavaScript on an AMP page.

AMP includes a special analytics tag that allows publishers and advertisers to send data to pre-screened analytics providers such as Adobe, Chartbeat, and Parse.ly. This is handled by a single JavaScript file instead of a separate script for each analytics provider. That file is loaded from Google’s own servers, which can speed things up considerably for pages that use multiple analytics providers. Ads work in a similar way.

The AMP Project vets analytics servers based on performance, security, and privacy, so some of the worst offenders may be screened out. But those who want to use analytics code or other pieces of JavaScript library that haven’t been pre-approved can also use the <amp-iframeiframe> tag.

The <amp-iframeiframe> tag, similar to the traditional HTML version of the <iframe> tag, allows publishers and advertisers to add blurbs of JavaScript hosted on their own websites, but there are some restrictions too. Code inserted into iFrames won’t have access to all the data that a script inserted directly into a traditional page does. AMP always loading the page’s core content before any <amp-iframeiframe> content in order to keep <amp-iframeiframe>s from slowing down pages. And when AMP pages are hosted on Google’s servers, the pages are pre-rendered, so that they still load quickly.

These workarounds enable more freedom for publishers and advertisers, but it also means there’s still room for them to serve invasive scripts to readers. Improved performance won’t always mean improved security, and privacy. It also means more of the web will be shaped by Giant like Google & Twitter.

AMP Supported Browsers?

In general AMP supports the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. AMP support desktop, phone, tablet and the web view version of these respective browsers.

Beyond that, the core AMP library and built-in elements should aim for very wide browser support and accept fixes for all browsers with market share greater than 1 percent.

In particular, Google try to maintain "it might not be perfect but isn't broken"-support for the Android 4.0 system browser and Chrome 28+ on phones.

How AMP works in Mobile Device?

Google has published a great tutorial on how to create your first AMP page. We will go through a quick rundown on what is involved and what you need to know. It is important to know how AMP works in SERPs. In most cases, Google will only serve AMP pages to mobile devices. However, Google does not penalize users who have AMP-only pages (i.e. no additional HTML desktop version) such as the ampproject itself. Google has a preview up but you can emulate it from your desktop using Chrome DevTools.

AMP Page Specialty:

  • Allows only asynchronous scripts
  • All CSS must be inlined
  • Styles are limited to 50KB
  • External resources like images must state their size in HTML
  • All Javascript must be out of critical path
  • No user written Javascript is allowed, only AMP supported
  • Fonts must be loaded with a link tag or a CSS @font-face rule


AMP Impact on the Google SERPs

Simply put, AMP will affect huge in search engine optimization. After all, Google is committed to pushing mobile-first index in which mobile-friendly websites received a rankings boost. The difference here, however, is that AMP is not a ranking factor; at least it isn’t one as of now. This was confirmed in a Google+ Hangout with Google Webmaster trend analyst John Mueller.

AMP will affect in Google SEO in regards to impressions, clicks, user experience, and of course, website speed. Speed is a crucial factor to ranking well on Google and the company reported last year that, “29 percent of Smartphone users will immediately switch to another site or app if it doesn’t satisfy their needs,” and that “. . .of those who switch, 70 percent do so because of lagging load times.”

Yet no matter if AMP is a current organic ranking signal or not, the chances of it becoming one are relatively high as a Google's January 20, 2016 Announcement, which delved into the ad experience on AMP stated that, “We can’t emphasize enough that this is just the start,” and that Google is, “. . .invested for the long term.” With how heavily Google underlined the importance of mobile-friendliness with Mobilegeddon, it would come as no surprise if Google one day made AMP a ranking factor as well; possibly even as soon as its mobile update this May.

Do you think Google will make AMP compliance a ranking factor? I don’t know if Google will make AMP a ranking factor or not but AMP will be a real headache for publishers, that is certain. In order to keep up and not lose positions they will be forced to learn everything about Google AMP.

SEO Your AMP Pages?

By having an AMP version of your post or page you don’t want to get dinged for duplicate content, so Google requires that you use the canonical tag when linking to pages.

Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.

What Can You Do To Prepare?

There's two things. Firstly, you want to be able to start building AMP pages for your site, and you want to make sure that those pages are valid, because as we said, it's like a diet version of HTML, but it's very, very strict on how you build the HTML. The tags have to be in certain orders and certain places. You can't use certain things. And if you do any of that, your AMP page is invalid and they probably won't be using it.

There are several ways available to validate an AMP document. They will all produce the exact same result, so use whichever one suits your development style the most.

Chrome Developer Console:

To validate your AMP pages, you can use a tool that's built into Chrome. So if you open the developer tools in Chrome, there's a system there — and you can look it up on the AMP project website — where you can actually go to a page and you can ask it to validate, "Is this an AMP page," and it will tell you any problems with that page.

Web Interface:

There's also a Web Interface available at validator.ampproject.org. This interface shows errors displayed inline alongside the HTML source of the page. The interface is an interactive editor: changes to the html source result in interactive revalidation.

Chrome:Browser Extension:
The AMP Validator can be accessed directly from your browser's toolbar using a browser extension. As you browse, it will automatically validate each AMP page visited and gives a visual indication of the validity of the page as a colored icon.

Summery: Want to Convert your site to Google AMP? Contact Us Today & we'll get back to you.

Labels: , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home