How to Implement Google AMP & Best Practices (Updated Nov 2017)

by SIM - Expert Digital Marketers - 10/14/2016 16252 Views

This Article deals with AMP (Accelerated Mobile Pages), AMP implementation; best Practices, Case Study & latest Updates on AMP.

AMP Case Study & Trends Update – Nov 28, 2017

Google Organic Search Traffic from Mobile Search (AMP Pages only)

August 2017: 1520 Sessions
November 2017: 16676 Sessions
Increase: 15156 Sessions/Month compared to August 2017
Increase in %: 997%

This is an update on the case study of recycleinme.com for which we implemented Google AMP pages earlier. The initial analytics (Web) data indicated a 30% increase in mobile search. We then installed Google Analytics for AMP on all the AMP pages for accurate data. The organic search traffic from AMP pages was initially around 50-60 sessions a day which then increased quickly to 500-600 sessions a day with an increase of a whopping 997%. Recycleinme.com had all-time high revenue in October 2017, thanks to the team who implemented Google AMP Pages.

Best Practices & News on AMP

Identical Canonical Pages – Spammers have started using AMP pages as doorway pages and Google have now announced that the Canonical page should be identical to the standard page. The AMP pages and regular page should have closely identical content. If the pages are not identical Google will not show the AMP page on the mobile search results. This is to be implemented from February 2018. Google has planned to send notice to webmasters who are having different versions for AMP. So check your AMP pages and fix them before they get de-indexed.

Https:// - This is a must now, Secure your website with https:// protocol if you have not done already. This not only impact AMP pages but also have larger impact on Chrome and Search results. Garry Illyes of Google have confirmed this as a ranking signal. Learn more on https migration.

AMP Ad Unit – Creating an AMP Ad Unit is quintessential to match the ad serving speed with the AMP content. AMP ad units require special tags which are different from the regular ad-sense tags.

Pssst – An AMP Setback – From our experience and concerns of a few clients our ad revenues from AdSense channels are dropping as Ads Load Much Slower than AMP content. This has caused our Google Ad-sense Publisher earnings to nosedive. Google is working on the issue with a lot of improvements in Analytics for AMP Pages. This certainly helps reduce the loading time and we hope this issue will be fixed soon.

Google has updated and released a variety of guides, sample code and study material for AMP which you can get it here.

--- End of Update Nov 2017 ---

There is a lot of buzz going on in the mobile search world on AMP or Accelerated Mobile Pages. Google recently announced that AMP will be the major ranking signal in mobile search results.

Time and again we get enquiries from clients for AMP implementation but there was a lot of confusion on whether or not it is good, and will it be bug free? So our design & development team did an extensive research on the benefits of AMP, implementation of AMP and after effects. Thanks to Vinodh & Subash who had tested AMP successfully on websites small & big, CMS and other platforms. We realized that it’s an awesome new technology which is going to rock in both SEO and Web Development industry.

An update on #AMP Impact for the Year 2017 by Influencers

AMP Experts

SearchengineJournal’s Danny Goodwin did a study on the SEO trends for 2017 with Industry experts. Most of the digital marketing experts emphasized on the implementation of AMP and mobile-first as the future of SEO in 2017. Here are a few digital marketing expert views on the future of AMP. You can read the SEO Trends for 2017 at SEJ. This clearly indicates that implementing AMP is no more an option but is a bare necessity for any site. Along with Schema and Rich cards, AMP will play a major role in mobile search and drastically improve user experience.

Casey Markee, Founder, Media Wyse

”I believe you will see this most visibly in 2017 with AMP content. Google’s Maile Ohye presented some great data on AMP at State of Search last November and commented that in one study Google recorded a 23% increase in mobile users in the seven days following an initial AMP visit.”

Barry Adams, SEO Consultant, Polemic Digital

”Google was very smart to launch AMP and prevent a huge switch away from mobile web browsing towards native apps. AMP keeps users engaged with Google search on mobile devices.”

Jim Hedger, Creative Partner, Digital Always Media

“As things stand today, it is only logical to recommend using Accelerated Mobile Pages (AMP) for all publishers. AMP is a stripped down page that dispenses with a lot of .css and java commands. While this makes pages lightning fast, they tend to be rather plain looking.”

Cindy Krum, Founder & CEO, MobileMoxie

“I think the big new thing in the SEO world will be Progressive Web Apps (PWAs). They tend to load faster, like an AMP web page too. It brings a lot of good things together.”

Brock Murray, Co-founder & COO, seoplus+

“Thinking mobile-first means creating a mobile-friendly website that is lean, clean, and blazing fast while still containing all the core content you need to express your brand message to bots and users alike. Implement AMP and take advantage of Google’s prioritization of these pages.”

Aleyda Solis, Founder & International SEO Consultant, Orainti

“Companies should really prioritize mobile in case they haven’t yet done it: with the mobile-first Google index, AMP, app indexing, and increasing importance in the future of Progressive Web Apps.”

Kaspar Szymanski, SEO Consultant, SearchBrothers

“Whether AMP, the efficient yet very restrictive technology favored by Google will prevail remains to be seen. Having said that, making a website load faster already has a profound impact on its visibility in Google Search and there’s no doubt that this factor will only grow more important.”

Anne Ahola Ward, CEO, CircleClick

“This will be the biggest driver for 2017 SEO success. With projects like Google’s AMP and Facebook Instant Articles, we have to assume the users will get spoiled and expect better of us. Load fast or die.”

Rob Woods, SEO Consultant, Riseform Digital Marketing

“In my opinion, this will actually mean an increased emphasis on technical SEO. A multitude of sources claim that technical SEO is “dead” but it will become even more important in 2017 to focus on technical elements like page speed, mobile compatibility, AMP, and semantic markup.”

Here is a Tweet from SEMrush on how Speed affects performance and Conversions.

How speed affects your site’s performance [infographic] https://t.co/hrIJ3A8drg pic.twitter.com/ewcpeMvT9V
— SEMrush (@semrush) December 13, 2016

Here is what we learned for this AMP implementation and this article will provide you information on how to implement AMP for a website. Before we get into AMP Implementation let us see what is AMP.

How to implement AMP

What is AMP?

AMP is a project (of course a Google backed project) with the aim of speeding up content delivery with the use of stripped down code known as AMP HTML. In simple terms AMP is a way to build web pages for static content (i.e. the pages that don’t change based on user behavior), that allows the pages to load (and pre-render in Google search) much faster than regular HTML.

The AMP Project was available to public starting 7^th October 2015 with the help of Google, Twitter, WordPress and a significant number of content publishers.

Technically speaking AMP is almost an enhanced HTML code for the new generation mobile technology. This enhanced HTML called as AMP HTML is very similar to the regular HTML with specific tags for a set of elements. For example in regular HTML we use <img /> tag for integrating an image in a page, where as in AMP HTML images can be integrated by using the special tag <amp-img>

AMP Essentials

AMP HTML: This is the Markup similar to regular HTML but exclusive for AMP. AMP HTML will replace some elements of basic HTML
AMP JS: This is a Javascript framework for Mobile and will replace the Javascript for web
AMP CDN: This is a content delivery network which helps cache and optimize content for faster loading.
AMP Pixel (Analytics): This is a small pixel which will replace the Complex Analytics code and loads much faster.

AMP project uses an open-source framework, which means that it can be used by other companies apart from Google. Bing has recently joined the club. Platforms such as Twitter, Pinterest have jumped in which is big news for content publishers.

Implementation of AMP

While implementing AMP we need to know about the three major parts of AMP.

AMP HTML
AMP JS
Google AMP Cache

AMP HTML, JS is utilized while implementing AMP on a webpage. As mentioned earlier we have to enhance the HTML of the site by using the AMP specific tags, especially for images, video, multimedia, sliders, and forms. Unlike regular webpages we cannot use custom CSS files in AMP. We have to follow in page CSS style integration as mentioned below.

<style amp-custom>

/* custom styles goes here. */

</style>

Then the next part is the AMP JS. Since the main purpose of the AMP is performance custom jQuery or JavaScript files can’t be used. L Yeah the sad part is we will miss those spectacular jQuery, JavaScript effects. These external scripts are affecting the performances of the web pages and AMP is avoiding them and using its own set of js files called AMP JS

So these AMP HTML & AMP JS are the main players here in making the site to be amplified for the better and fast performance in mobile devices.

Types of AMP Implementation

There are two main categories of websites which needs AMP implementation.

CMS Websites
Custom Websites

1. CMS Websites:

If a website is developed using any of the CMS (Content Management System) we can do AMP implementation by using third party plugins readily available. For example if the site is developed in Wordpress we can use the following plugins to implement AMP.

https://wordpress.org/plugins/amp/

https://wordpress.org/plugins/accelerated-mobile-pages/

If the site is developed with some other CMS like Joomla, Drupal or any other CMS you have to look for the right plugin or extensions.

It is better to use the Custom AMP Implementation i.e. enhancing the HTML structure of the site using AMP HTML & AMP JS manually.

2. Custom Websites:

In this case of custom websites we have to enhance the HTML of the site with AMP HTML & AMP JS manually. We will have two versions of pages (AMP & non-AMP) with canonical tags pointing to each other.

Linking AMP to make it discoverable

Once we’ve done with the AMP implementation we need to link the AMP to make it discoverable in search engines. This will raise a duplicate issue as the content on both pages will be the same.

We should link the AMP pages and Non-AMP pages back to back using canonical tags.

This can be done by the following way

We’ve to add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>.

Adding the following to the non-AMP page:

And this to the AMP page:

How to validate an AMP page?

So now we did the AMP implementation and linked AMP. Now we need to validate whether we did it correctly or not.

You can use the standard validator to find out if the code is implemented right.

https://validator.ampproject.org/

This is how a bug free AMP page will display in the validator.

AMP implementation

You can check this result in the below URL

https://validator.ampproject.org/#url=http%3A%2F%2Fwww.isuites.net%2F%3Famp

Proof of Performance Improvement after AMP Implementation:

After implementation and validation of AMP in both types of websites, i.e. in CMS websites and in custom websites, we’ve checked the page speed performances in Google Page Speed Insights tool and seen drastic performance improvements in the AMP pages.

Please check the below screenshots for reference. Also you can check that using the Google Page Speed Insights tool itself in the below URLs

Performance Improvement after AMP

Website: www.isuites.net
Without AMP	With AMP
Mobile Page Speed - 64	Mobile Page Speed - 83
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.isuites.net%2F	https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.isuites.net%2F%3Famp

For this wordpress site (http://www.isuites.net/) we’ve implemented AMP using the recommended AMP plugins mentioned early and the mobile page speed hiked from 64 to 83

Website: www.recycleinme.com
Without AMP	With AMP
Mobile Page Speed - 63	Mobile Page Speed - 83
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.recycleinme.com%2F	https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.recycleinme.com%2Famp%2F

For this custom .NET site (http://www.recycleinme.com/) since the site is already developed and developed with complex functionalities, we’ve implemented AMP by having AMP version page and the mobile page speed hiked from 63 to 83

Seems like a miracle, isn’t it? For a long time we tried different ways to improve mobile page speed and no optimal solution was found, now finally found a solution for it ;)

Who can do AMP integration?

Anyone with a web development, design, onpage background can do the implementation. We have successfully completed the integration of AMP in a number of websites with a team of experts in these three areas.

Just like the Page Speed Optimization & HTML schema implementation in websites, AMP implementation needs experts who have knowledge and expertise in web technology as well as in AMP implementation.

We, at SIM have separate teams for both Page Speed Optimization & schema implementation services. Now we’ve formed a team for AMP implementation as we’ve started to provide AMP implementation service. If you wish to get your website AMP implemented (#AMPlify) just fill up the below form. We’re happy to help you and provide the better service that’ll make you satisfied.

Why AMP is needed for a website?

Assume that an user coming to your website primarily to read content from your blog / news section, then this is a clear opportunity for you to get a head start in Google’s mobile results by creating AMP versions of your content.

For example, let’s imagine there are 3 different sites serving 3 how to guides on the same topic, and only one of the sites is serving an AMP version of that content. It is most likely that AMP version would appear above the other results. Indeed, this explains well why AMP is needed for a website.

Get a No obligation consultation

Responsive Web Design & AMP

Some may ask since they already have the Mobile Responsive website why AMP is needed. Responsive Web Design works on the display of the site for all the device size. But it doesn’t help much in the performance of the website in mobile. So without performance just Responsive Web Design is not effective and won’t help us in long run.

So AMP quintessential for a Responsive Website too and that’s the reason we’re developing all the new websites with Responsive Web Design along with AMP i.e. great look with great performance.

Few Drawbacks of AMP

So far we saw the advantages of AMP, but it has some minor drawbacks too. AMP HTML is designed to improve both the speed and readability of content. So in order to do that the code used is heavily stripped-down. Because of that we will miss awesome JS effects, i.e. some visual limitations.

No JavaScript will be allowed other than an off-the-shelf AMP library
Images will only load when you scroll down to them (lazy load functionality)
A streamlined version of your CSS will be required

Particularly both the users and the AMP implementation experts will face some complications.

Users will miss some of the jQuery or JavaScript visual effects

AMP implementation experts have to struggle bit to implement AMP, but still it’s a fun for them to take the challenge ;)

References:

https://www.hallaminternet.com/what-is-amp-and-who-actually-needs-it/

https://www.madgex.com/blog/what-is-amp

http://www.cio.com/article/3091071/search/8-things-you-need-to-know-about-google-amp.html

http://searchengineland.com/get-started-accelerated-mobile-pages-amp-240688

https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/

https://www.searchenginejournal.com/seo-trends-2017/181003/?utm_source=share-back-traffic&utm_medium=mobile-share-button&utm_campaign=facebook

https://moz.com/blog/google-amp-search-results

Category :

SEO News

Tags :

AMP, Accelerated Mobile Pages, Implement AMP

About SIM - Expert Digital Marketers

Only when many experts blend into a team, it can pave way for a hard core team. And, we are SIM’s hard core Expert Digital Marketing Team, filled with Energy, Strategy, Creativity, Interactions, Reviews, Troubleshooting and thirst to learn, inspiring SIM to get better every day. We always focus on moving forward, keeping in mind our .... more info about the author