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

by Jun 1, 2017

700,000—that’s the amount of publish­ers using AMP, and with good reason. Sites using AMP see faster load times and increased site visi­tors (Gizmodo saw a 50% increase in impres­sions and 100k AMP visits daily!). The follow­ing blog post will help you to discern whether or not accel­er­ated mobile pages could benefit 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 created to yield mobile pages with ground­break­ing speeds. While all websites can benefit from faster load times, the technology’s limi­ta­tions mean that not every site may find AMP advan­ta­geous to utilize.

The driving philos­o­phy behind AMP is that the page should load only the most neces­sary compo­nents. As a result, AMP dramat­i­cally limits what type of HTML elements and JavaScript can be featured. While such stream­lin­ing efforts mini­mally impact copy-heavy expe­ri­ences (like those provided by news sites or certain blogs), such changes would impair user expe­ri­ences that rely upon visual elements. What’s more, forms are prohib­ited from living on AMP pages, which could disrupt certain conver­sion processes.

Keep these limi­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 plenty of perks to accel­er­ated mobile pages.

AMP Can Positively Influence Organic Visibility, But With a Catch

As of March 2017, AMP is not a factor within Google’s ranking algo­rithm that deter­mines URLs’ posi­tions amongst the search results. However, AMP can improve other rank­ings factors, includ­ing:

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

Addi­tion­ally, Google now heavily prefers to feature AMP-friendly resources within News results, a trend that will only continue. As noted by Search Engine Land in January 2017, Google increased the amount of news results that feature AMP from 30% to 70%.

However, for AMP results within the News section, there is a caveat every digital marketer should be aware of: the link readers visit and share lives on Google, not your own website. If driving traffic directly 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 example, websites that utilize Word­Press can install a plug-in that auto­mat­i­cally renders AMP pages. However, for other webmas­ters, the process will be more involved.

Create AMP-specific URLs

Main­tain an alter­na­tive, desktop-friendly version of each page you want to make AMP-friendly. To ensure that search engines under­stand the asso­ci­a­tion between the two URLs and compound any accrued SEO value, include rel=“canonical” and rel=“alternate” tags within the HTML. You can learn more here.

Modify pages to follow AMP guidelines

As previ­ously mentioned, AMP has very strict require­ments for how a page can be built. Most likely, your site currently does not meet these stip­u­la­tions. While a full list of guide­lines can be found here, below are major hurdles your pages will need to clear in order to become AMP-friendly.

Only utilize asyn­chro­nous scripts: AMP-friendly builds prohibit many forms of JavaScript, as it often blocks render­ing. Excep­tions include JavaScript that is asyn­chro­nous, meaning that it does not need to be loaded in a specific sequence that may block render­ing. For an exten­sive list of AMP-friendly custom tags specif­i­cally designed to not hinder the site from speed­ily render­ing, visit the AMP JS library.

Imple­ment required HTML tags: The AMP Project states that all sites attempt­ing to become AMP-friendly must include the follow­ing:

  • The doctype <!doctype html>
  • A top-level <html > tag (<html amp> is accepted as well)
  • <head> and <body> tags (They are optional in HTML)
  • A <link rel=“canonical” href=”$SOME_URL” /> tag inside their head that points to the regular HTML version of the AMP HTML docu­ment or to itself if no such HTML version 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 recom­mended 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-specific tags for images and down­loaded resources and state their size within the HTML: Images, iframes, ads, and similar page elements must state their dimen­sions within the HTML. This enables AMP pages to render the layout of the page prior to down­load­ing the resources. Through this tactic, AMP can render the layout and copy with a single 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 refer­enced within the <head> of the page using a <style amp-custom> tag.

Remove all forms from the page: As mentioned above, AMP-friendly 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 vali­dated in order to have your site recog­nized as being AMP-friendly by search engines and certain social sites. There are multi­ple ways to accom­plish this, includ­ing visit­ing https://validator.ampproject.org/ and enter the URL to deter­mine which elements prevent the page from being fully AMP compat­i­ble. Google Search Console offers a similar 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­tially provides a free CDN to further accel­er­ate site speeds. However, webmas­ters can choose to continue to use exist­ing Content Deliv­ery Networks like Cloud­flare, if preferred.  

In Conclusion

Many indus­try experts cele­brate AMP as the tech­nol­ogy to rede­fine indus­try stan­dards, while others dislike how it dramat­i­cally limits design. However, there’s no denying 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 crite­ria, AMP will posi­tion your site to provide a fast expe­ri­ence.

Need more advice on AMP or other SEO initia­tives? Contact us.