Download - AMPed SEO with Mike Arnesen & SEMpdx

Accelerated Mobile Pages & SEO

PLUG IN TO AMP

Founder & CEO @ UpBuildMIKE ARNESEN

bit.ly/serious-ampageGET THIS DECK!

http://bit.ly/serious-ampage

@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

Take it from the top

WHY AMP?

MOBILE WEB USE WILL ONLY CONTINUE TO GROW

There are more mobile devices than people

ind.pn/1xlKiif

http://ind.pn/1xlKiif

MOBILE WEB USE WILL ONLY CONTINUE TO GROW

60%+ searches are performed on mobile

selnd.com/2aJcPv1

http://selnd.com/2aJcPv1

SPEED REALLY MATTERS TO YOUR USERS

40% of users bail after 3+ seconds of load time

bit.ly/1Bt0Ojx

http://bit.ly/1Bt0Ojx

SPEED REALLY MATTERS TO YOUR USERS

Users expect sites to load in 2 seconds or less

bit.ly/1Bt0Ojx

http://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

http://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.

Google’s Answer is

AMP


"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 IllyesGoogle Webmaster Trends Analyst


▸Speed will only become more of a priority

▸Mobile web usage will only grow

SO WHY AMP?

Also,

AD MONEY

“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

What IS Amp?

UNDER THE HOOD


an HTML Specification. 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 CACHEDCDN.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 specified ▸AMP-specific 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

http://bit.ly/2e6q2Cl


▸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 configured in JSON.

ANALYTICS


Analytics tracking is configured 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.

But what if…?

AMP FAQS

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

NO

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

NOWELL,

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

Can you use custom fonts?

YESfast.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

http://www.ampproject.org


WATCH SOME VIDEOS

youtu.be/lBTCB7yLs8Y

youtu.be/cfekj564rs0

youtu.be/WrpkFROqR0Q

https://youtu.be/lBTCB7yLs8Y

https://youtu.be/cfekj564rs0

https://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

https://wordpress.org/plugins/amp/

https://wordpress.org/plugins/glue-for-yoast-seo-amp/

https://www.drupal.org/project/amp

https://www.magentocommerce.com/magento-connect/accelerated-mobile-pages-amp.html

https://weeblr.com/joomla-accelerated-mobile-pages/wbamp


Add #development=1 to AMP page URLs

VALIDATE & LEARN


VALIDATE & LEARNAdd #development=1 to AMP page URLs


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

VALIDATE & LEARN

http://bit.ly/2dwTTyC


Head to validator.ampproject.org

VALIDATE & LEARN

http://validator.ampproject.org


YOUR MILEAGE MAY VARYStandard 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

#OPENSOURCE4EVER



▸ Things break


▸ It’s Google-only

THE CONS



▸ Things break


▸ It’s Google-only

THE CONS

BUT, SPEED IS SPEED

CLOSING THOUGHTS

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

http://bit.ly/serious-ampage

http://upbuild.io

Download - AMPed SEO with Mike Arnesen & SEMpdx

Top Related