Getting AMP’d: What You Need To Know About Accelerated Mobile Pages & Google #SMX

Moderator:

Danny Sullivan, Founding Editor, Search Engine Land (@dannysullivan)

Speakers:

• Dave Besbris, Vice President of Engineering, Google
• Paul Shapiro, Organic Search Director, Catalyst (@fighto)

The three are on stage, and Danny Sullivan introduces us to our presenters by telling us that Dave goes by Bes and that Paul wrote this SEL article: “How to Get Started with Accelerated Mobile Pages.”

Googler Dave Besbris on AMP

Dave “Bes” Besbris is our first speaker. Shapiro says Danny Sullivan told him there is a speaker dress code, so he wore his formal hoodie today. ;)

You may have noticed the change to a SERP where there’s an AMP carousel at the top of the page. The reading experience inside an AMP document is excellent. They didn’t want to reinvent something new, they wanted the experience to be the web.

How did Google do this?

The World Wide Web is about 20 years old. It’s a rich ecosystem with different media players, analytics systems, and ad platforms. The browser doesn’t know all that. It only knows that this is a script tag. There is a lot of redundant code, and we see this a lot with analytics and ads. Since the browser doesn’t understand this, the browser will jump around while uploading things. All of this is because the browser doesn’t understand the semantics of the page. So, AMP is to help the browser understand content in a content-forward way. AMP is implemented with straight-forward web technologies and the addition of a proxy cache.

How does publishing work?

The magic trick is the link tag. You can put a link tag on a document pointing to the AMP document alternate. In the context of a mobile phone, the AMP version is typically much higher performance.

Your website without AMP cache means your web server may serve from the other side of the world. With the AMP cache, a series of edge servers across the world will deliver the content to users that are closest to it:

How AMP Works

• Typically a separate companion file is referenced via a link tag on a site’s current article page.
• Open-source framework and common set of building blocks replace one-off JavaScript.
• All content including ads needs to be HTTPS hosted.

AMP Features

• Smart content prioritization
  • Prefetching the elements
  • No relayout
  • Asynchronous load
• Responsive design
  • Always get the best image for your screen (full srcset support)
• Limited by design
  • No custom JavaScript except in amp-iframe
  • No scrolling elements on the page
  • Max 50kB inline stylesheet

Join the AMP initiative!

1. Explore: Review the technical documentation. Connect with the AMP engineering community on GitHub and StackOverflow.
2. Develop and test: Start development your AMP files and validate them. They are integrated into the Search Console Tools.
3. Launch: And let Google know what you think!

Accelerated Mobile Pages: Faster Content + Open Distribution By Dave Besbris from Search Marketing Expo – SMX

Paul Shapiro on Getting Started with AMP

Paul Shapiro is our second presenter. Shapiro has been playing with AMP for a while now, even though AMP rolled out to the publisher community only a few weeks ago. He’s going to cover:

• About AMP components
• How to Add Analytics Tracking
• How to Include Advertisements
• How to Validate AMP
• Rolling AMP on WordPress
• amp-iframe, the magic extended component

About AMP Components

A lot of the HTML components you’re used to won’t work in AMP. This comes in the form of built-in components that come in the JavaScript library that you download for AMP, and extended components.

How to Add Analytics Tracking

AMP analytics is an awesome solution. When you go to your typical recipes site, you’ve probably waited around as 75 trackers load. With AMP, all these tags filter through a single analytics funnel.

He puts up a list of tags and what they can be used for. This is the point where Shapiro explains that his SMX presentation will be available on SlideShare, so don’t worry too much about copying all this code down. (We’ll embed it below, too.)

How to Include Advertisements

A big part of this is not losing monetization from ad revenue. There are a number of ad partners already working with AMP.

NYT showed how long it took for many top new publishers to load ads and content:

There are 20+ ad tech partners including AdSense, DoubleClick, A9.

How to Validate AMP

If you don’t validate the AMP document then you won’t get the benefit.

1. Navigate to your AMP page. Make sure it’s discoverable via the link rel=”amphtml” tag.
2. Open up Developer Tools in Chrome.
3. Navigate to Console tab.
4. Append the following to the URL and reload the page: #development=1
5. Look for the console to indicate successful validation or show errors.
6. Validate Schema markup using Google’s Rich Snippet Testing Tool. This is what Google is using to show results in the carousel.

Multi-page AMP Validator Tool: technicalseo.com/tools/amp/

The easiest way to start with AMP is to roll it out on a WordPress site. It’s very easy to use the official WordPress AMP plugin. That generates the AMP pages.

To easily add Google Analytics, add support for “pages,” and tweak design a bit, add the PageFrog plugin on top of the WordPress AMP plugin.

The Magic Extended Component: amp-iframe

He calls iframes “the holy grail of unsupported functionality.” Use iframes for:

• Forms, for lead generation or other purposes
• Third-party JavaScript
• Embedded comment systems
• Some unsupported ad formats
• Videos via players not supported by AMP currently
• Interactive visualizations/charts (Google Maps, D3 visualizations, Tableau, etc.)
• Unverified: Pop-ups, using sandbox=”allow-popups allow-popups-to-escape-sandbox”

This is how you can use third-party JavaScript and get other workarounds not supported by AMP. The rules for iframes:

• Amp-iframe is an extended component. You must include the additional JS library in the <head> of your document.
• Resource loaded must be https and from another domain/subdomain.
• Must be at least 600px or 75 percent of the first viewport away from the top, unless you are specifying a placeholder.

You can mess with the positioning of iframes if you add a placeholder image, and that will allow you to place it anywhere on the page. He puts up a slide about the Sandbox Attribute that gives descriptions of each Sandbox Value:

• allow-forms – Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
• allow-modals – Allows the embedded browsing context to open modal windows.
• allow-popups – Allows popups (like from window.open, target=”_blank”, showModalDialog).
• allow-popups-to-escape-sandbox (Chrome/Opera only) – Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them.
• allow-same-origin – Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
• allow-scripts – Allows the embedded browsing context to run scripts (but not create pop-up windows).

This will let you get more out of your AMP setup.

Summary of AMP Implementation

You’ll have to make changes to how your pages are set up. Some tags will be switched out for built-in or extended components.

Use the amp-pixel component for tracking pixels. Use amp-analytics for Google Analytics and other analytics.

AMP supports many ads. Use the amp-ad component to implement them easily. (Check the markdown files on GitHub for your ad platform.)

You must validate your AMP pages for valid amp-html and for Schema. Validate and then tweak.

WordPress is an easy way to get familiar with AMP. Some easy plugins are available that work well with minor changes.

When something isn’t compatible with AMP, you can usually use amp-iframe.

Get AMPed Now! By Paul Shapiro from Search Marketing Expo – SMX

Q&A

Question: When will AMP carousels be rolled out for content types other than publisher content?

Besbris: We’re going to be rolling out AMP elsewhere including in search and apps, and an example is music lyrics.

Question: What’s the SEO impact of AMP?

Sullivan: Google has said that they reward fast sites. Just having AMP doesn’t give you an AMP boost, FYI, which Besbris confirms, saying that AMP pages are very mobile friendly.

Besbris: There’s other kinds of experiences that you can leverage, like instant loading articles and carousel experiences across properties which you will see expanding in time.

Question: Is it worth implementing AMP for a retail site?

Besbris: It depends. It’s an important time to get your feet wet. If you’re interested in making a really fast site, AMP would produce a really great web page. There are other people besides Google using AMP; anyone can embed these documents that you create, and these documents might be pinned inside Pinterest or embedded in Nuzzel feeds.

Question: Progressive web apps and AMP are trying to solve the same problem, so which is recommended?

Besbris: They’re different problems actually, but they’re very complementary.

Question: Does AMP support Google Tag Manager?

Besbris: No.

Question: Will A/B testing be included?

Besbris: Google would like to include A/B testing functionality.

Question: Will my website be penalized if I don’t use AMP?

Besbris: “We don’t penalize websites.” Google and search depend on a healthy experience of the web which is why we’re very invested in making this work.

Virginia Nussey is the director of content marketing at MobileMonkey. Prior to joining this startup in 2018, Virginia was the operations and content manager at Bruce Clay Inc., having joined the company in 2008 as a writer and blogger.

See Virginia's author page for links to connect on social media.