Migrating Mobile Pages to Accelerated Mobile Pages (AMP): Benefits and Next Steps

by | Jun 1, 2017

700,000—that’s the amount of pub­lish­ers using AMP, and with good rea­son. Sites using AMP see faster load times and increased site vis­i­tors (Giz­mo­do saw a 50% increase in impres­sions and 100k AMP vis­its dai­ly!). The fol­low­ing blog post will help you to dis­cern whether or not accel­er­at­ed mobile pages could ben­e­fit your site, as well as next steps for imple­men­ta­tion.

Who Benefits From AMP

In short, AMP is a page struc­ture that Google and part­ners cre­at­ed to yield mobile pages with ground­break­ing speeds. While all web­sites can ben­e­fit from faster load times, the technology’s lim­i­ta­tions mean that not every site may find AMP advan­ta­geous to uti­lize.

The dri­ving phi­los­o­phy behind AMP is that the page should load only the most nec­es­sary com­po­nents. As a result, AMP dra­mat­i­cal­ly lim­its what type of HTML ele­ments and JavaScript can be fea­tured. While such stream­lin­ing efforts min­i­mal­ly impact copy-heavy expe­ri­ences (like those pro­vid­ed by news sites or cer­tain blogs), such changes would impair user expe­ri­ences that rely upon visu­al ele­ments. What’s more, forms are pro­hib­it­ed from liv­ing on AMP pages, which could dis­rupt cer­tain con­ver­sion process­es.

Keep these lim­i­ta­tions in mind when deter­min­ing whether or not AMP is right for your site. If it’s a good fit, there’s plen­ty of perks to accel­er­at­ed mobile pages.

AMP Can Positively Influence Organic Visibility, But With a Catch

As of March 2017, AMP is not a fac­tor with­in Google’s rank­ing algo­rithm that deter­mines URLs’ posi­tions amongst the search results. How­ev­er, AMP can improve oth­er rank­ings fac­tors, includ­ing:

  • Mobile-friend­li­ness
  • Mobile site speed
  • Engage­ment met­rics, includ­ing click through rate, time on site, and bounce rate

Addi­tion­al­ly, Google now heav­i­ly prefers to fea­ture AMP-friend­ly resources with­in News results, a trend that will only con­tin­ue. As not­ed by Search Engine Land in Jan­u­ary 2017, Google increased the amount of news results that fea­ture AMP from 30% to 70%.

How­ev­er, for AMP results with­in the News sec­tion, there is a caveat every dig­i­tal mar­keter should be aware of: the link read­ers vis­it and share lives on Google, not your own web­site. If dri­ving traf­fic direct­ly to your site is impor­tant, AMP may not be the best option.

How to Implement AMP

Some sites may have short­cuts avail­able to them. For exam­ple, web­sites that uti­lize Word­Press can install a plug-in that auto­mat­i­cal­ly ren­ders AMP pages. How­ev­er, for oth­er web­mas­ters, the process will be more involved.

Create AMP-specific URLs

Main­tain an alter­na­tive, desk­top-friend­ly ver­sion of each page you want to make AMP-friend­ly. To ensure that search engines under­stand the asso­ci­a­tion between the two URLs and com­pound any accrued SEO val­ue, include rel=“canonical” and rel=“alternate” tags with­in the HTML. You can learn more here.

Modify pages to follow AMP guidelines

As pre­vi­ous­ly men­tioned, AMP has very strict require­ments for how a page can be built. Most like­ly, your site cur­rent­ly does not meet these stip­u­la­tions. While a full list of guide­lines can be found here, below are major hur­dles your pages will need to clear in order to become AMP-friend­ly.

Only uti­lize asyn­chro­nous scripts: AMP-friend­ly builds pro­hib­it many forms of JavaScript, as it often blocks ren­der­ing. Excep­tions include JavaScript that is asyn­chro­nous, mean­ing that it does not need to be loaded in a spe­cif­ic sequence that may block ren­der­ing. For an exten­sive list of AMP-friend­ly cus­tom tags specif­i­cal­ly designed to not hin­der the site from speed­i­ly ren­der­ing, vis­it the AMP JS library.

Imple­ment required HTML tags: The AMP Project states that all sites attempt­ing to become AMP-friend­ly must include the fol­low­ing:

  • The doc­type <!doc­type html>
  • A top-lev­el <html > tag (<html amp> is accept­ed as well)
  • <head> and <body> tags (They are option­al in HTML)
  • A <link rel=“canonical” href=”$SOME_URL” /> tag inside their head that points to the reg­u­lar HTML ver­sion of the AMP HTML doc­u­ment or to itself if no such HTML ver­sion exists
  • A <meta charset=“utf-8”> tag as the first child of their head tag
  • A <meta name=“viewport” content=“width=device-width,minimum-scale=1”> tag inside their head tag. It’s also rec­om­mend­ed to include initial-scale=1
  • A <script async src=“https://cdn.ampproject.org/v0.js”></script> tag inside their head tag
  • The AMP boil­er­plate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag.

Use AMP-spe­cif­ic tags for images and down­loaded resources and state their size with­in the HTML: Images, iframes, ads, and sim­i­lar page ele­ments must state their dimen­sions with­in the HTML. This enables AMP pages to ren­der the lay­out of the page pri­or to down­load­ing the resources. Through this tac­tic, AMP can ren­der the lay­out and copy with a sin­gle HTTP:// request. What’s more, such resources must use the appro­pri­ate AMP tag, such as “amp-img” or “amp-video.”

Ensure that CSS does not hail from exter­nal style sheets: All styles must be ref­er­enced with­in the <head> of the page using a <style amp-cus­tom> tag.

Remove all forms from the page: As men­tioned above, AMP-friend­ly pages do not allow forms.

Validate that the pages are AMP-friendly

It’s impor­tant to have your site’s AMP-friend­li­ness val­i­dat­ed in order to have your site rec­og­nized as being AMP-friend­ly by search engines and cer­tain social sites. There are mul­ti­ple ways to accom­plish this, includ­ing vis­it­ing https://validator.ampproject.org/ and enter the URL to deter­mine which ele­ments pre­vent the page from being ful­ly AMP com­pat­i­ble. Google Search Con­sole offers a sim­i­lar tool found at https://search.google.com/search-console/amp.  

Decide whether to leverage the Optional CMS of Google AMP Cache

Google AMP Cache essen­tial­ly pro­vides a free CDN to fur­ther accel­er­ate site speeds. How­ev­er, web­mas­ters can choose to con­tin­ue to use exist­ing Con­tent Deliv­ery Net­works like Cloud­flare, if pre­ferred.  

In Conclusion

Many indus­try experts cel­e­brate AMP as the tech­nol­o­gy to rede­fine indus­try stan­dards, while oth­ers dis­like how it dra­mat­i­cal­ly lim­its design. How­ev­er, there’s no deny­ing that both mobile-friend­li­ness and site speed will become more influ­en­tial to both web users and search engines. If your site meets the right cri­te­ria, AMP will posi­tion your site to pro­vide a fast expe­ri­ence.

Need more advice on AMP or oth­er SEO ini­tia­tives? Con­tact us.