What Are Accelerated Mobile Pages (AMPs)?

18

Transcript of What Are Accelerated Mobile Pages (AMPs)?

Page 1: What Are Accelerated Mobile Pages (AMPs)?
Page 2: What Are Accelerated Mobile Pages (AMPs)?

matchcraft //

AMP, OR ACCELERATED MOBILE PAGES, IS GOOGLE’S FRAMEWORK FOR FAST-LOADING MOBILE PAGES. THIS ENABLES PUBLISHERS TO HIT TWO BIRDS WITH ONE STONE: INCREASE PAGE LOAD TIMES AND IMPROVE USER EXPERIENCE. AND WE’RE NOT JUST TALKING ABOUT GOOGLE’S “TOP SEARCH” RESULTS; GOOGLE WILL DISPLAY AMP’S ANYTIME IT’S DETECTED.

2

Page 3: What Are Accelerated Mobile Pages (AMPs)?

matchcraft //

OF COURSE, THERE ARE MANY WAYS TO ADVANCE PAGE LOADS, AND EXPERIENCED DEVELOPERS CAN LEVERAGE A MYRIAD OF STRATEGIES TO GET IT DONE. BUT MOBILE PAGES ARE A BIT DIFFERENT.

PUBLISHERS MOVE FAST AND MANY LACK THE DEV RESOURCES REQUIRED FOR AN OPTIMAL MOBILE EXPERIENCE, WHICH IS WHY THESE PAGES WILL DELIVER HUGE BENEFITS.

3

Page 4: What Are Accelerated Mobile Pages (AMPs)?

Three Basic Parts to AMP

Page 5: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 5

• AMP HTML: AMP HTML includes custom tags and a few unique restrictions. You can start here, or edit your regular ‘ole HTML to AMP markup. But take note: there are several required markups that you can’t miss.

• AMP JavaScript (JS): Unfortunately, no third party JS is allowed for AMP.

• AMP CDN: This one’s optional. It caches your AMP-designed pages for a layer of additional optimization.

Page 6: What Are Accelerated Mobile Pages (AMPs)?

The Major Benefits

Page 7: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 7

Readers are glued to their mobile phones and tablets. Publishers try to target them there, but that experience often leads a lot to be desired: painfully slow load times; lost readers; lost revenue.

This is the experience Google is seeking to improve with AMP.

Page 8: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 8

Page 9: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 9

AMP provides:

• Mobile web pages that work: Content-rich pages, packed with images and video, will load beautifully

• Content that works across platforms: It doesn’t matter what kind of phone; pages will load instantly.

• Buy-in from more than 30 publishers around the globe: It’s expected that other Google products, like Google News, will eventually adopt AMP. It’s already in use by big name brands like Pinterest, LinkedIn, and WordPress.com.

Page 10: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 10

• An open-source framework: Shared components and shared input came together to create a great mobile experience. You can see it all on GitHub.

• Free cache servers: Readers experience a seamless mobile delivery, from anywhere, with Google’s free, worldwide content delivery network (CDN).

Page 11: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 11

• Support for ads: Sites can stay true to their choice of ad networks. AMP supports many ad formats and technologies, without compromising speed.

• A/B testing functionality: What would digital marketing be without testing and iterating? As of two weeks ago, AMP now allows for experimentation, including specifying the flow of traffic and the ability to review analytics reporting.

Page 12: What Are Accelerated Mobile Pages (AMPs)?

Tips on Using Accelerated Mobile Pages

Page 13: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 13

A few other points of interest with implementations:

• Images must adhere to the amp-img. You’ll need to note an exact height and width. Slideshows, image lightboxes and social media embeds have their own extended components. For videos that are hosted locally, use the amp-video custom tag. But, for YouTube, use the amp-youtube extended component.

Page 14: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 14

• CSS must be in-line, less than 50KB. Check your site template – does it need rewriting?

• No form elements and third-party JS are allowed.

• Your original blog articles will need modifications. Each version must include this tag: <link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

Page 15: What Are Accelerated Mobile Pages (AMPs)?

Don’t forget about Google’s AMP Viewer

Page 16: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 16

One final tip. When Google links to an AMP page, readers will see it in a Google-hosted viewer. This preview tool shows anyone how the pages will look. The experience on Google is that it opens in a new page, with a blue bar across the top. In fact, you can try it on your phone now.

Notice how you can swipe through AMP content galleries, or return back to your original search results. For viewers, this gives them the benefit of seeing a preview before making a commitment to going to the full web page. This certainly puts more pressure on publishers to create a compelling AMP, but it’s hard to argue that it’s not a great experience for viewers.

Page 17: What Are Accelerated Mobile Pages (AMPs)?

matchcraft // 17

Are you using Accelerated Mobile Pages?

We’d love to hear what your experience has been like so far. Let us know what you think on Twitter or Facebook.

Page 18: What Are Accelerated Mobile Pages (AMPs)?

matchcraft //

ABOUT MATCHCRAFT

18

A pioneer in the marketing and technology space, MatchCraft provides a best-in-class technology platform that enables companies to successfully sell and manage search campaigns for their clients.

Unlike other marketing technology platforms, MatchCraft helps organizations efficiently manage even the smallest campaigns, enabling our clients to provide spectacular service to all of their customers.

SCHEDULE A DEMO TODAY!