Google
Marketing Website

Google AMP HTML: What It Is And How To Set Your Website Faster On Mobile Devices

blog-admin

Speed ​​improves the user experience and is one of Google’s ranking factors, in this sense setting up AMPs can be very beneficial for your site!

AMP, which stands for Accelerated Mobile Pages (accelerated pages for mobile devices, in Portuguese), are website pages optimized for a simplified and almost instantaneous loading when accessed via mobile devices. The project is an initiative of companies like Google, LinkedIn, Pinterest and Twitter.

“Today Apple is going to reinvent the phone”.

Using these words, more than 10 years ago, Steve Jobs introduced the iPhone to the world, which has never been the same. It wasn’t just an iPod and a phone with internet access, but the device that revolutionized the market, broke companies and created a new world, in the palm of your hand.

The following year Apple launched the App Store, revolutionizing again with all the possibilities that applications brought to the user. In 2008, Google also launched Android and its app store, which, by accepting different brands and models of devices, democratized access to technology. With this, the use of smartphones entered people’s daily lives, until they became indispensable – even the phrase that says that leaving home without a cell phone is like leaving without clothes.

In 2012, the share of Brazilians with smartphones was 14%, according to Google. In 2016, this number was 62%. The projection made in a survey by the Zenith media agency is that, by 2017, 75% of internet use worldwide will be through mobile devices.

The cell phone became our personal computer, where we update social networks, chat with friends, check email, play online and consume content. According to Google, 44% of smartphone users use search engines at least once a week, second only to social networks and online videos.

While the use of mobile devices to access the internet grew by leaps and bounds, the quality and speed of mobile internet often left something to be desired, whether due to the contracted data package, user region or network problems. This issue made the user experience slow and frustrating, including Google searches.

As it always raised the “mobile-first” banner, at the end of 2015 Google presented the AMP Project, together with other technology companies such as LinkedIn, Pinterest and Twitter.

What is AMP?

AMP stands for Accelerated Mobile Pages, which are website pages optimized for simplified and almost instantaneous loading when accessed via mobile devices.

The project is an open-source initiative by major content publishers and technology companies, aiming to improve the entire ecosystem of mobile content.

Basically, an AMP page has an architecture that prioritizes page load speed. This architecture is divided into 3 different configurations:

  • AMP HTML: Different HTML code, with restrictions and extensions, going beyond basic HTML. Most of your tags are normal HTML, but some are replaced with AMP-specific tags;
  • AMP JS: Responsible for ensuring fast rendering of AMP pages. Its main function is to make everything external asynchronous, so that no element on the page can block the rendering of another;
  • Google AMP Cache: This is optional, but caches all AMP HTML pages on Google’s servers and automatically improves its performance. Other companies may also develop their own AMP cache.

When performing a Google search using the cell phone, the pages with AMP configured are marked with your acronym. When you click on a result marked as AMP, the simplified version of the page loads almost instantly.

Also, very slow pages are getting an alert tag for this issue, showing more and more the importance of having a fast site (you can also check out and apply some tips to improve your site’s loading speed and avoid this negative alert on your website).

When configured, an AMP page ends up becoming a second version of the page, with the same content as the original version, usually identified with “/amp” at the end of the link, which makes it easier to identify its performance in isolation in web reports analytics. This also ends up raising another issue that can become a problem – duplicate content.

To avoid this, it is necessary to include a canonical tag in the version of the AMP page, indicating to Google which is the original version of the content. And, for Google to identify that a particular page has an AMP version, you must include a markup in the code of the original page, as in the example below:

<link rel=”amphtml” href=”http://www.example.com/post-example/amp/”>

What types of sites can use AMP?

The first sites to use this technology were major American news portals such as the Washington Post and Gizmodo. However, nowadays, several sites around the world have already implemented it, mainly in content pages such as blog posts, recipes and news. But it is possible to apply the technology even on ecommerce pages.

According to the project’s website, the technology is open to everyone involved in the ecosystem: publishers, consumer platforms and creators. The goal is for all published content (from news to videos to blogs, photos and GIFs) to work. As it is an open source initiative, anyone can access and apply the settings. It is even possible to be part of the project and promote improvements.

According to Google and the project’s documentation, it is possible to apply it on the home, product pages and even on search pages.

Blue World City tested some searches using mobile, and when searching for some eBay product on Google, the displayed pages used AMP. It’s the result? Ecommerce pages with extremely fast loading.

How to configure AMP on your website

Several Content Management System (CMS) platforms also already have plugins and integrations to facilitate configuration, including WordPress (you can check the complete and updated list here ). But sites that use platforms that do not yet have this integration or that do not use any type can also apply.

Check out the walkthrough to configure AMP on WordPress

1. Enter your site’s WordPress dashboard, access the plugins menu and click “add new”;

2. For more configuration options and improvements, such as tracking data in Google Analytics, inserting structured data and using Google Tag Manager, install and activate the AMP for WP – Accelerated Mobile Pages plugin

3. To configure Google Analytics, on the WordPress dashboard, go to AMP, click on Analytics and enter the tracking code for your Analytics account

4. To configure the look of your accelerated pages, inside the AMP area click on “Design” and on “Launch Post Builder”;

5. In the newly opened screen, click on “AMP”, “Appearance”, select the information you want to keep on the accelerated pages, edit the colors according to your brand identity and your website and save the changes;

6. Now that you already have the basics of AMP configured, we recommend going back to the WordPress dashboard, accessing the AMP menu, viewing each item available for configuration and editing according to your site and your needs;

7. You can see what the final AMP version of a publication looks like, even from the computer, by accessing it and adding “/amp” at the end of the URL (such as seusite.com.br/exemplo-de-publicacao/amp).

If you need to configure AMP HTML without using WordPress or another CMS, the project’s official website has a complete walkthrough with everything you need to apply successfully, which you can access here.

How to validate AMP HTML

After making all the configurations and creating the AMP versions of the pages, it is necessary to carry out the validation to see if the code is correct. For this, the project team provides a free validation tool.

To validate that the AMP HTML is correct, just access The AMP Validator tool, insert a link to an AMP page (adding “/amp” at the end of the URL) and click on “Validate”. If the Validation Status presented is PASS, the code settings are ok.

If the Validation Status displayed is FAIL, the AMP code has errors that need to be corrected for the page to run correctly and for its indexing in search engines. To facilitate the correction, the tool presents, right below the status, a listing with the errors found.

Did you manage to validate the page code? Now you need to track your Google indexing and measure its performance.

How to track indexing and access to AMP pages

After all the work to develop the AMP version of the pages, it’s time to track the indexing of the pages in Google’s search results and their results in Analytics.

To keep track of whether pages are being indexed, you need a Google Search Console account. If you are new to the tool or do not have an account set up for your site, read the article Google Search Console: The complete guide on how to use it in practice and learn more about it.

When accessing the account, simply select your website, click on “Search Aspect” and “Accelerated Pages for Mobile Devices” then. On this page you can frequently follow the evolution in the number of pages indexed on Google and if they have any errors (if they have errors, on the screen itself you will have more information about it).

If you have set up for tracking in Google Analytics, you can also track the performance of the pages there, as they have an /amp in the URL for you to differentiate.

The simplest way to assess the isolated performance of pages in the AMP version when accessing Analytics is in the menu with the behavior reports, clicking on “Site content” and on “All pages”. Then type “/amp” into the search field to display just that type of page, as shown in the image below. Select the desired period and compare the performance of each AMP page.

This way you can view data such as sessions, average time on page and bounce rate for each page, in addition to evaluating performance and promoting improvements.

Conclusion

Site loading speed is extremely important to your user experience and your SEO strategy.

Faster sites contribute to a quality experience and sell more. According to research conducted by Google, a page that takes up to 10 seconds to load can have an increase in bounce rate of up to 123%. By reducing the average page load time to 2.2 seconds, Firefox saw a 15.4% increase in downloads.

But is AMP a Google Ranking Factor? No. Despite its numerous advantages, currently AMP is not a ranking factor for mobile devices, according to Google webmaster trends analyst Gary Illyes when asked about it at an event. But remember that back then having a mobile or responsive site wasn’t a ranking factor either.

Now that you know what AMP is, how to install it and its advantages, just put it to run and then comment here about your experience!