View
379
Download
1
Category
Preview:
Citation preview
Accelerated Mobile Pages & SEO
PLUG IN TO AMP
Founder & CEO @ UpBuildMIKE ARNESEN
@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
@Mike_Arnesen upbuild.io
▸ 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
@Mike_Arnesen upbuild.io
▸Webpage complexity
▸Abundant HTTP requests
▸Ads from 3rd parties
▸Web host performance
▸Analytics scripts & beacons
WHY SO SLOW?
@Mike_Arnesen upbuild.io
▸ Webpage complexity
▸ Abundant HTTP requests
▸ Ads from 3rd parties
▸ Web host performance
▸ Analytics scripts and beacons
WHY SO SLOW?
@Mike_Arnesen upbuild.io
“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?
@Mike_Arnesen upbuild.io
▸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
@Mike_Arnesen upbuild.io
▸Progressive web apps are the likely successor to Native Apps.
WEB APPS
@Mike_Arnesen upbuild.io
▸Progressive web apps are the likely successor to Native Apps.
WEB APPS
I’M EMBARRASSED FOR YOU, YELP
@Mike_Arnesen upbuild.io
▸Elegant and adaptable but potentially slow.
RESPONSIVE
@Mike_Arnesen upbuild.io
▸Elegant and adaptable but potentially slow.
RESPONSIVE
LIKE, REALLY SLOW.
Google’s Answer is
AMP
@Mike_Arnesen upbuild.io
"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
@Mike_Arnesen upbuild.io
“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
@Mike_Arnesen upbuild.io
▸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.
@Mike_Arnesen upbuild.io
“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
@Mike_Arnesen upbuild.io
To reduce the time content takes to get to a user's mobile device
THE MISSION
@Mike_Arnesen upbuild.io
150 million pages indexed from 650,000 domains.
ADOPTION
What IS Amp?
UNDER THE HOOD
@Mike_Arnesen upbuild.io
an HTML Specification. AMP IS
@Mike_Arnesen upbuild.io
@Mike_Arnesen upbuild.io
an Open Source Project.AMP IS
@Mike_Arnesen upbuild.io
Report Bugs & Contribute Code
Join the Slack Channel
@Mike_Arnesen upbuild.io
awesomely fast.AMP IS
@Mike_Arnesen upbuild.io
awesomely fast.AMP IS
Like, 711ms-fast!
@Mike_Arnesen upbuild.io
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
@Mike_Arnesen upbuild.io
▸All AMP is HTML ▸Not all HTML is AMP
AMP HTML
@Mike_Arnesen upbuild.io
@Mike_Arnesen upbuild.io
▸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
@Mike_Arnesen upbuild.io
▸<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
@Mike_Arnesen upbuild.io
via amp-ad/amp-embed ▸ AdSense (duh) ▸ Criteo ▸ Doubleclick ▸ Taboola ▸Outbrain (not so much) …and tons more: bit.ly/2e6q2Cl
ADS
@Mike_Arnesen upbuild.io
▸amp-analytics
▸amp-pixel
ANALYTICS
@Mike_Arnesen upbuild.io
via amp-analytics
▸AMP can send data to almost any analytics platform.
▸One measurement method to rule them all.
ANALYTICS
@Mike_Arnesen upbuild.io
Create a new GA Property for your AMP data.
ANALYTICS
@Mike_Arnesen upbuild.io
Analytics tracking is configured in JSON.
ANALYTICS
@Mike_Arnesen upbuild.io
Analytics tracking is configured in JSON.
ANALYTICS
IT’S TIME FOR MARKETERS
TO LEARN TO CODE
@Mike_Arnesen upbuild.io
Special scripts enable 3rd-party content. ▸ amp-youtube ▸ amp-twitter ▸ amp-pinterest ▸ amp-instagram ▸ amp-social-share ▸ amp-lightbox
COMPONENTS
@Mike_Arnesen upbuild.io
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
@Mike_Arnesen upbuild.io
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
@Mike_Arnesen upbuild.io
WATCH SOME VIDEOS
youtu.be/lBTCB7yLs8Y
youtu.be/cfekj564rs0
youtu.be/WrpkFROqR0Q
@Mike_Arnesen upbuild.io
▸ 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
@Mike_Arnesen upbuild.io
Add #development=1 to AMP page URLs
VALIDATE & LEARN
@Mike_Arnesen upbuild.io
VALIDATE & LEARNAdd #development=1 to AMP page URLs
@Mike_Arnesen upbuild.io
Get the AMP Validator Chrome Extension: bit.ly/2dwTTyC
VALIDATE & LEARN
@Mike_Arnesen upbuild.io
Head to validator.ampproject.org
VALIDATE & LEARN
@Mike_Arnesen upbuild.io
YOUR MILEAGE MAY VARYStandard HTML Version Hosted AMP Version Cached AMP Version
The rest is up to you
NEXT STEPS
@Mike_Arnesen upbuild.io
THE PROS & CONS
@Mike_Arnesen upbuild.io
▸ Mobile UX is only becoming more important
THE PROS
@Mike_Arnesen upbuild.io
▸ Mobile UX is only becoming more important
THE PROS
@Mike_Arnesen upbuild.io
▸ Mobile UX is only becoming more important
THE PROS
MANY SEO RANKING FACTORS
ARE STRAIGHT-UP UX BEST PRACTICES
@Mike_Arnesen upbuild.io
▸ Mobile UX (AKA, SEO) is only becoming more important
▸ AMP provides a fantastic experience to mobile users
THE PROS
@Mike_Arnesen upbuild.io
▸ Mobile UX (AKA, SEO) is only becoming more important
▸ AMP provides a fantastic experience to mobile users
▸ The AMP symbol will(has?) become the new “mobile-friendly” in Google.
THE PROS
@Mike_Arnesen upbuild.io
▸ Mobile UX (AKA, SEO) is only becoming more important
▸ AMP provides a fantastic experience to mobile users
▸ The AMP symbol will(has?) become the new “mobile-friendly” in Google.
▸ It’s your only way into Top Stories on mobile.
THE PROS
@Mike_Arnesen upbuild.io
▸ The project is still evolving
THE CONS
@Mike_Arnesen upbuild.io
▸ The project is still evolving
THE CONS
THEY DIDN’T EVEN LAUNCH WITH
FORMS!
@Mike_Arnesen upbuild.io
▸ The project is still evolving
▸ Things break
THE CONS
@Mike_Arnesen upbuild.io
▸ The project is still evolving
▸ Things break
▸ Proprietary and homegrown CMSes are expensive to change
THE CONS
@Mike_Arnesen upbuild.io
▸ The project is still evolving
▸ Things break
▸ Proprietary and homegrown CMSes are expensive to change
THE CONS
#OPENSOURCE4EVER
@Mike_Arnesen upbuild.io
▸ The project is still evolving
▸ Things break
▸ Proprietary and homegrown CMSes are expensive to change
▸ It’s Google-only
THE CONS
@Mike_Arnesen upbuild.io
▸ The project is still evolving
▸ Things break
▸ Proprietary and homegrown CMSes are expensive to change
▸ 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
Recommended