How Accelerated Mobile Pages (AMP) Can Boost Your Mobile SEO and User Experience

Accelerated Mobile Pages & SEO
PLUG IN TO AMP

Founder & CEO @ UpBuild
MIKE ARNESEN

bit.ly/serious-ampage
GET THIS DECK!

@Mike_Arnesen upbuild.io
▸ AMP: Accelerated Mobile Pages
▸ UX: User Experience
▸ JS: JavaScript
▸ JSON: JavaScript Object Notation
▸ CSS: Cascading Style Sheets
▸ Cache: To store (a webpage) for future use
GLOSSARY

▸ Pre-render: To process (a webpage) in
advance
▸ Native Apps: Downloadable apps for iOS
and Android
▸ Progressive Web Apps: Browser-based app
experiences
▸ iFrame: A tag used to display another
page’s content on the page you’re on.
▸ SEO: Get on my level
GLOSSARY

MOBILE WEB USE
WILL ONLY CONTINUE  
TO GROW
There are more mobile devices than people
ind.pn/1xlKiif

MOBILE WEB USE
WILL ONLY CONTINUE  
TO GROW
60%+ searches are performed on mobile
selnd.com/2aJcPv1

SPEED REALLY
MATTERS TO
YOUR USERS
40% of users bail after 3+ seconds of load time
bit.ly/1Bt0Ojx

SPEED REALLY
MATTERS TO
YOUR USERS
Users expect sites to load in 2 seconds or less
bit.ly/1Bt0Ojx

▸ Webpage complexity
▸ Abundant HTTP requests
▸ Ads from 3rd parties
▸ Web host performance
▸ Analytics scripts & beacons
WHY SO SLOW?

▸ Webpage complexity
▸ Abundant HTTP requests
▸ Ads from 3rd parties
▸ Web host performance
▸ Analytics scripts and beacons
WHY SO SLOW?

“FAST IS BETTER
THAN SLOW”
From Google’s, “10 Truths”
bit.ly/1x24t2P

Success is giving
Google what it wants
SO WHAT’S
THE ANSWER?

▸ Mobile web reach is 2.5x  
the reach of native apps
▸ Mobile users spend 86%  
of their time in apps
▸ 80% of that pie is Facebook,
YouTube, and Facebook
Messenger.
NATIVE APPS

▸Progressive web apps are
the likely successor to
Native Apps.
WEB APPS

▸Progressive web apps are
the likely successor to
Native Apps.
WEB APPS
I’M EMBARRASSED
FOR YOU, YELP

▸Elegant and adaptable
but potentially slow.
RESPONSIVE

▸Elegant and adaptable
but potentially slow.
RESPONSIVE
LIKE, REALLY SLOW.

"AMP STANDS FOR ACCELERATED MOBILE
PAGES, WHICH IS KIND OF STUPID AND I’M
NEVER GOING TO SAY IT AGAIN.”
Malte Ubl  
AMP’s Tech Lead

“PAY ATTENTION TO AMP. IT’S
GOING TO BE REALLY BIG. FIGURE
OUT WITH YOUR DEVELOPERS HOW
TO IMPLEMENT IT.”
Gary Illyes 
Google Webmaster Trends Analyst

▸Speed will only become
more of a priority
▸Mobile web usage will
only grow
SO WHY AMP?

“AD BLOCKERS ARE A
SYMPTOM OF A
DEGRADED MOBILE
EXPERIENCE CAUSED
BY ADVERTISING”

“AD BLOCKERS ARE A
SYMPTOM OF SHITTY
ADVERTISING.”

Will AMP ever be a ranking signal?
HECK. YES.

“CONTENT IS KING  
AND UX IS QUEEN.  
NO COMPROMISES.”
Malte Ubl

There’s no going back
THE TWILIGHT
EFFECT

To reduce the time content
takes to get to a user's  
mobile device
THE MISSION

150 million pages indexed
from 650,000 domains.
ADOPTION

an HTML Speciﬁcation.
AMP IS

an Open Source Project.
AMP IS

Report Bugs & Contribute Code
Join the Slack Channel

awesomely fast.
AMP IS

awesomely fast.
AMP IS
Like,
711ms-fast!

faster than fast;
it’s instant.
AMP IS

News publishers only
Immediate ad support
Menus supported
Forms form supported
Product/recipe/review sites
Global rollout
New releases weekly
EVOLUTION
OF AMP

How do Accelerated Mobile Pages
WORK?

GOOGLE CACHED 
CDN.AMPPROJECT.ORG
AMP VIEWER 
GOOGLE.COM/AMP
HOSTED HTML
VERSION
ARE WE AWARE
OF AMP?
REL=AMPHTML/REL=CANONICAL FRAME TO
AMP HTML
VERSION
N Y

▸All AMP is HTML
▸Not all HTML is AMP
AMP HTML

▸No external stylesheets (i.e., CSS)
▸50kb limit on inline stylesheets
▸Width/height must be speciﬁed
▸AMP-speciﬁc tags keep you in the fast lane
▸No resizing above-the-fold (i.e., in-viewport)
A STRICTER HTML

▸<amp-img> (built-in)
▸<amp-video> (built-in)
▸<amp-anim> (requires amp-anim)
▸<form> (requires amp-form)
▸<amp-sidebar> (requires amp-sidebar)
▸<amp-accordion> (requires amp-accordion)
▸<amp-carousel> (requires amp-carousel)
AMP-SPECIFIC TAGS

via amp-ad/amp-embed
▸ AdSense (duh)
▸ Criteo
▸ Doubleclick
▸ Taboola
▸ Outbrain (not so much)
…and tons more: bit.ly/2e6q2Cl
ADS

▸amp-analytics
▸amp-pixel
ANALYTICS

via amp-analytics
▸ AMP can send data to  
almost any analytics platform.
▸ One measurement method  
to rule them all.
ANALYTICS

Create a new GA Property
for your AMP data.
ANALYTICS

Analytics tracking is
conﬁgured in JSON.
ANALYTICS

Analytics tracking is
conﬁgured in JSON.
ANALYTICS
IT’S TIME  
FOR MARKETERS  
TO LEARN TO CODE

Special scripts enable  
3rd-party content.
▸ amp-youtube
▸ amp-twitter
▸ amp-pinterest
▸ amp-instagram
▸ amp-social-share
▸ amp-lightbox
COMPONENTS

via <amp-iframe>
▸ Include the amp-iframe
component script
▸ Use for non-supported
content
▸ iframes must be at least
600px away from the top
AND THE REST

via <amp-iframe>
▸ Include the amp-iframe
component script
▸ Use for non-supported
content
▸ iframes must be at least
600px away from the top
AND THE REST
iframes
always suck.

Does AMP work on Bing, Yahoo,
Yandex, DuckDuckGo, etc.
NO

Does AMP work on Bing, Yahoo,
Yandex, DuckDuckGo, etc.
NO
WELL,
ACTUALLY…

Do we need AMP in order to
be Fast?
NO

Do you need to set up your
entire site with AMP?
NO

Can I use webpage elements
that don’t have supported
AMP extensions?
YES

Can my website be  
100% AMP?
YES

Does AMP need to live in a
special sub-folder?
NO

Can you use custom fonts?
YES
fast.fonts.net

fonts.googleapis.com

Things you may have heard
MISCONCEPTIONS

“Browser caching makes
AMP super fast!”
FALSE

“AMP delivers pages in a
matter of SECONDS!”
FAIL

Getting Started with AMP
RESOURCES

ampproject.org
VISIT THE SITE

WATCH SOME VIDEOS
youtu.be/lBTCB7yLs8Y
youtu.be/cfekj564rs0
youtu.be/WrpkFROqR0Q

▸ WordPress: wordpress.org/plugins/amp/ +
wordpress.org/plugins/glue-for-yoast-seo-amp/
▸ Drupal: www.drupal.org/project/amp
▸ Magento: magentocommerce.com/magento-connect/
accelerated-mobile-pages-amp.html
▸ Joomla: weeblr.com/joomla-accelerated-mobile-pages/
wbamp
GET YOUR HANDS DIRTY

Add #development=1 to AMP page URLs
VALIDATE & LEARN

VALIDATE & LEARN
Add #development=1 to AMP page URLs

Get the AMP Validator Chrome Extension: bit.ly/2dwTTyC
VALIDATE & LEARN

Head to validator.ampproject.org
VALIDATE & LEARN

YOUR MILEAGE MAY VARY
Standard HTML Version Hosted AMP Version Cached AMP Version

The rest is up to you
NEXT STEPS

THE PROS & CONS

▸ Mobile UX is only becoming more important
THE PROS

▸ Mobile UX is only becoming more important
THE PROS
MANY SEO
RANKING FACTORS
ARE STRAIGHT-UP UX
BEST PRACTICES

▸ Mobile UX (AKA, SEO) is only becoming more important
▸ AMP provides a fantastic experience to mobile users
THE PROS

▸ The AMP symbol will(has?) become the new “mobile-friendly” in
Google.
THE PROS

▸ The AMP symbol will(has?) become the new “mobile-friendly” in
Google.
▸ It’s your only way into Top Stories on mobile.
THE PROS

▸ The project is still evolving
THE CONS

THE CONS
THEY
DIDN’T EVEN
LAUNCH WITH
FORMS!

▸ Things break
THE CONS

▸ Things break
▸ Proprietary and homegrown CMSes are expensive to change
THE CONS

▸ Things break
THE CONS
#OPENSOURCE
4EVER

▸ Things break
▸ It’s Google-only
THE CONS

▸ Things break
▸ It’s Google-only
THE CONS
BUT, SPEED
IS SPEED

Be one of the ten blue links in
POSITION ZERO

CONTENT IS KING
& UX IS QUEEN.
NO COMPROMISES.

bit.ly/serious-ampage
GET THE DECK
THANK YOU!
Find us at upbuild.io

How Accelerated Mobile Pages (AMP) Can Boost Your Mobile SEO and User Experience

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a How Accelerated Mobile Pages (AMP) Can Boost Your Mobile SEO and User Experience

Similar a How Accelerated Mobile Pages (AMP) Can Boost Your Mobile SEO and User Experience (20)

Más de Mike Arnesen

Más de Mike Arnesen (13)

Último

Último (20)

How Accelerated Mobile Pages (AMP) Can Boost Your Mobile SEO and User Experience