Amplifying Your Search Engine Rankings with Google’s Accelerated Mobile Pages

According to a survey conducted by Kissmetrics, 47 percent of mobile users expect a website to load in less than 2 seconds, and 40 percent of them leave the website if the loading process takes more than 3 seconds. As a result, users tend to rely more on the Facebook news feed to get the information they need rather than continuously tapping away those sites that take too long to load.

To counter this, Google took an initiative and, on October 7, 2015, announced Accelerated Mobile Pages (AMP), an architectural framework that allows publishers to deliver content at lightning speed through the mobile web. Four months later, on February 24, 2016, the AMP Project was officially launched, taking a big leap towards Google’s stated goal, i.e. to improve the performance of the mobile web while embracing a user-centric approach.

What Is Accelerated Mobile Pages Project?

• Accelerated Mobile Pages (AMP) is basically an open source project developed & sponsored by Google with the aim to improve the mobile web and enhance the distribution system.
• It consists of three basic parts – AMP HTML, AMP JS, and AMP Cache.
• AMP runs on a stripped-down version of HTML, known as AMP HTML, which strips out the elements that cause web pages to load at a very slow pace on mobile. These elements usually include JavaScript and other third party scripts.
• Built on existing web technologies, AMP HTML allows publishers to host their content, integrate their business models, and innovate on their user experiences.
• The loading time of these pages is around four times faster compared to regular pages. This is the reason the majority of advertisers and marketers these days are depending on AMP to deliver impactful brand messages to their users.

Here’s how an AMP page looks like in the mobile search results.

Why Use AMP for Your Website?

• Increased loading speed: The average AMP page loads 15-85% quicker than a regular web page, enabling users to take advantage of the lightning internet speed on their mobile devices. As a result, it helps businesses increase conversions and decrease mobile abandonment rates.
• Reduced bounce rate: High page load time tends to increase a website’s “bounce rate”, affecting the marketing efforts of both publishers and advertisers. By embedding the AMP HTML code within your existing code, you can lower your website’s bounce rate, increase its visibility, improve user experience, and increase ROMI.
• Improved conversion rate: Page loading time has a direct impact on sales. Pages that are just one second faster experience a 27% increased conversion rate. According to Kissmetrics, for every second’s delay in load time, a page experiences a 7% drop in conversion rate. These facts explain how important page speed is to increase conversion rates. Thus, AMP plays a significant role in increasing website conversion rates.
• Distributed content at a global scale: Distributing content uniformly is one of the important points highlighted in the official Google blog – “Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web”. AMP enables publishers to distribute their content across all kinds of devices and platforms.

Who’s Already Using AMP?

How Will Google AMP Impact the Mobile SERPs?

In Google’s Mobilegeddon update released on April 21, 2015, it’s made clear that mobile friendly websites will be promoted in Google’s mobile search results. As a result of this update, the websites that are not mobile friendly are likely to experience a colossal drop in traffic from mobile audience.

From Google’s official blog post confirming the introduction of AMP, it has been concluded that websites using AMP HTML will rank higher in SERPs on mobile devices. With AMP, publishers will have more control and focus on producing quality content for great user experience. The AMP module disrupts the search experience by appearing at the top of the SERP and pushing everything else down.

A few more insights on how AMP will impact the search engine rankings:

• AMP-enabled articles will rank higher in SERPs
• Websites with faster page loading time will rank higher
• Content distribution will be equal across all platforms and devices
• Paid search result item impressions can go down
• All AMP-enabled pages will appear in a carousel format
• It can’t solve the problem of page speed SEO for non-publisher sites
• Budgeting for content development will increase
• Paywalls will be supported
• AMP will possibly become a ranking factor in the future

How to AMP-lify Your Web Page?

Getting Started

If you’re a publisher and have not AMP-lified your page yet, here’s what you need to do – Create an AMP page and get it ready for publication and distribution.

Steps to create an AMP page

Step 1: Generate an HTML page with the AMP HTML tags

The code required to create a basic AMP page using AMP HTML tags looks like this:

When you’re done with the coding part, save the file with an .html extension. This is how you can create a basic AMP page, but there’s a lot more you can do with the body section, which includes adding basics like images, custom AMP elements, changing the page layout, etc.

Step 2: Include an image

Here’s the code demonstrating how to include an image in an AMP page:

There are a few HTML tags that cannot be used directly in AMP HTML. They are possibly replaced with enhanced custom AMP tags. For example, <img> tag is replaced by <amp-img>

Step 3: Modify presentation and layout

This is how you add style elements to an AMP page:

You can add style elements to your AMP page using element selectors in an inline stylesheet, i.e. <style amp-custom>, declared under the <head> section.

Step 4: Preview and validate

Preview the AMP page just like any other HMTL page by opening it directly in the browser from your system or by using a local web server like Apache 2/Nginx.

After previewing the AMP Page, pass it through a validation test so that third parties like Twitter, Instagram, and Google Search feel great about serving your AMP page to readers in an interesting way.

This can be done by:

• Opening the AMP page in your browser
• Adding “#development=1” to the URL, for example, https://www.grazitti.com/blog/optimize-your-adwords-account-using-smart-goals/#development=1
• Opening the Chrome DevTools console and checking for validation errors

Step 5: Prepare your page for discovery and distribution

It is very important to differentiate AMP pages from the Non-AMP pages. Suppose, you have both AMP and non-AMP versions of your page. What if Google finds the non-AMP version first? How will Google know that there’s also an AMP version of it?

To counter this, add <link> tags in the <head> section.

For Non-AMP page, use this link:

And for AMP page, use this link:

What if you don’t have a Non-AMP page?

If you have only one page, and that is an AMP page, you’ll still add a canonical link to it as done above for the AMP page.

Step 6: Final steps before publishing

When you have successfully completed all the above-written steps, tested your page locally and fixed all the validation errors – your first AMP page is all set to go live!

Interested in improving your website’s performance with AMP?

This blog was co-authored by Tushar Baran