amped seo with mike arnesen & sempdx

Accelerated Mobile Pages & SEO

PLUG IN TO AMP

Founder & CEO @ UpBuildMIKE ARNESEN

bit.ly/serious-ampageGET 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

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

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.

Google’s Answer is

"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?

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

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

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

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

▸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

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

NOWELL,

ACTUALLY…

Do we need AMP in order to be Fast?

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

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

Can my website be 100% AMP?

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

Can you use custom fonts?

YESfast.fonts.net

fonts.googleapis.com

Things you may have heard

MISCONCEPTIONS

“Browser caching makes AMP super fast!”

“AMP delivers pages in a matter of SECONDS!”

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 & LEARNAdd #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 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

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

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

amped seo with mike arnesen & sempdx

Technology

amped wireless -...

monitoring online reputation -sempdx searchfest 2010

how do you get amped - isa-lifestyle.com · ageless...

segmentation = happiness: sempdx presentation

sempdx: mobile state of the industry - reid spice -...

dag arnesen trio - losen records€¦ · dag arnesen trio...

amped-up cardio

arabic flyer - amped authenticate

amped five es

sempdx - keywordless sem

adwords account structure - sempdx 2013

amped asia february 2012

amped fm mood board

sempdx january 2013 ppc basics

petter arnesen

sempdx: seo 101

3 a heidi arnesen austlid

amped 425 - centerpoint archery

amped tri-release protein

amped magazine