15 Questions You Need To Answer Before Transitioning to AMP Pages

16 Questions You Need To Answer Before Transitioning to AMP

15 Questions You Need To Answer Before Transitioning to AMP Pages

Accelerated Mobile Pages, or AMP for short, is growing in popularity. Google is beginning to reward AMP-verified pages with placements on the first page search engine results page (or SERP for short). After reading this guide, you’ll know the key tenants of AMP pages and whether your website should transition to AMP pages.

The initial focus of AMP is on static content, so if you have a webpage that has video or animations, those pages will not qualify for AMP for now. Before we dive in on the how-to, here are some other reasons why you wouldn’t need AMP:

  • If your site has many that are not articles
  • If your site depends on third-party tools for lead capture or third-party tools for audience tracking
  • If your site monetizes using an ad engine that isn’t one of the 70+ ad engines supported by AMP

Change to AMP HTML & CSS

First, you’ll need to duplicate the pages you want to make AMP compatible and add the AMP HTML to your AMP pages. If you’d like to keep HTML and AMP HTML versions of a webpage, be sure to follow these instructions that are covered later in the article. Follow this 7-step guide to make your static pages compatible with AMP.

In addition, you’ll need to make the following changes to your CSS stylesheets to make your webpage AMP compatible:

  1. Does your site refer to several CSS stylesheets?
    • If so, consolidate the stylesheets into one master resource
    • Use a tool like CSS Minify to consolidate the stylesheet further before hosting on your CDN
  2. Does your site use CSS styles that are not allowed on AMP pages?
    • Check this list of CSS styles that are not allowed on AMP pages
    • @import is not allowed in style sheets
  3. Do you use a custom font?
    • You’ll need to use <amp-font> to give AMP a heads up that you’re using a custom font
    • will enable a loading timeout on custom fonts, and specify fallback fonts should your custom fonts not load within the allotted time
  4. Do you link to a CSS stylesheet?
    • Remove stylesheet and inline all CSS using the <style amp-custom> tag

Remove or Replace Javascript

AMP HTML documents do not include any author-written JavaScript, nor any third-party scripts. Instead, AMP has a JavaScript library, so your favorite JS libraries like jQuery, Bootstrap, Angular, React are not compatible with AMP pages… for now. In general, scripts are prohibited unless the type is application/ld+json.

Other questions to consider:

  1. Are you using retargeting pixels on your site?
    • Wrap the retargeting pixel around a <amp-pixel> tag
    • If you are having technical difficulties, reach out to your retargeting vendor
  2. Are you using an A/B testing tool?
    • AMP does not allow third-party JS libraries like jQuery, so you won’t be able to use Optimizely
    • The AMP Project team created an AMP HTML element in order to “Conduct user experience experiments on an AMP document and collect corresponding data with amp-pixel or amp-analytics.”
    • More information can be found here
  3. Are you using other marketing/ad tech (eg: crazyegg, hotjar, etc)?
  4. Are you using an Analytics tool?
    • Check this list to see if your analytics tool is supported by AMP
    • If your analytics tool is not on the supported list, consider migrating to one of the supported analytics tools if you want to move forward with AMP
    • Adobe Analytics worked with the AMP Project team to come up with two options to implement Adobe’s Analytics script
    • TL;DR: you can use either the <amp-analytics> or the <amp-iframe> tag, but each option has benefits and drawbacks

Change How Ads Are Served

While AMP pages are getting handsomely rewarded with search traffic, AMP requirements may impact ad yield for publishers. Answer these questions to determine whether transitioning to AMP is worth it for your site.

  1. Does your site have custom ad units?
    • Google’s AMP pages rely on standard IAB banner sizes in order to keep page load time low
    • Ad units that AMP doesn’t support might make it easier for publishers to maximize their revenue, but some of them, (particularly pop-ups) are the very ad units that degrade user experience
  2. Does your ad server load ads before your site content?
    • Ads in AMP load after the primary content of the site
    • The AMP Project team recommends placing the first ad below the first viewpoint to optimize for viewability and user experience
  3. Does your site have video ads?
    • Transition to one of the 13 supported video players
    • If your site uses a different video player to serve video ads, it will not validate as an AMP page
  4. Does your site have multiple ad size units?
    • To capture more advertiser demand, use YieldMo or DoubleClick to serve multiple ad size units within an AMP page without impacting the user’s experience
  5. Do your ads pass additional parameters for advertiser reporting?
    • Make sure you include the following elements in your AMP ad:
    • Include the <amp-ad> tag and specify the dimensions of the ad
    • Within the tag, include the name of the ad network that is supported by AMP in-line “type”
    • Include additional parameters that you want to pass to your ad network in-line as “data-{parameter}”
      • Example:
      • <amp-ad width=”300” height=”250” type=”a9″
        data-aax_size=”300×250″
        data-aax_pubname=”publisher-name-x”
        data-aax_src=”302″>
        </amp-ad>

Make Your AMP Pages Discoverable

Once you have AMP landing pages, you’ll want to inform the search crawlers which pages are AMP compatible and which are not. In addition, you’ll want to inform which page should be the page of record, or in other words which page has the rel=”canonical” tag.

  1. Do you want AMP and non-AMP versions of a webpage?
    • On any non-AMP page, reference the AMP version of the page to let Google and other platforms know about it:
      • <link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />
    • On the AMP page, add the following text to reference its non-AMP canonical version:
      • <link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html” />
  2. Do you want only an AMP version of a webpage?
    • If you only have an AMP version of a webpage, include the rel=“canonical” tag

The AMP Project team also suggests that standalone AMP pages should be linked to other indexed pages or are listed in your sitemap so that they can be discovered.

Validate your AMP Pages

If you’ve decided to implement AMP pages on your website, make sure to validate your AMP pages so that your pages get submitted to Google’s AMP cache. Here’s how to test to find out whether your AMP page is setup correctly. There are four ways to validate your newly set up AMP pages: