amped seo with mike arnesen & sempdx

Download AMPed SEO with Mike Arnesen & SEMpdx

Post on 15-Apr-2017

354 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

  • 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

  • @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 pages content on the page youre 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

  • @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 Googles, 10 Truthsbit.ly/1x24t2P

    http://bit.ly/1x24t2P

  • Success is giving Google what it wants

    SO WHATS 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

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

  • Googles Answer is

    AMP

  • @Mike_Arnesen upbuild.io

    "AMP STANDS FOR ACCELERATED MOBILE

    PAGES, WHICH IS KIND OF STUPID AND IM

    NEVER GOING TO SAY IT AGAIN.

    Malte Ubl AMPs Tech Lead

  • @Mike_Arnesen upbuild.io

    PAY ATTENTION TO AMP. ITS 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

  • Theres no going back

    THE TWILIGHT EFFECT

  • Theres 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; its 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

    (built-in) (built-in) (requires amp-anim) (requires amp-form) (requires amp-sidebar) (requires amp-accordion) (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

    http://bit.ly/2e6q2Cl

  • @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

    ITS 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

    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

    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 dont 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

    ampproject.org

    VISIT THE SITE

    http://www.ampproject.org

  • @Mike_Arnesen upbuild.io

    WATCH SOME VIDEOS

    youtu.be/lBTCB7yLs8Y

    youtu.be/cfekj564rs0

    youtu.be/WrpkFROqR0Q

    https://youtu.be/lBTCB7yLs8Yhttps://youtu.be/cfekj564rs0https://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

    https://wordpress.org/plugins/amp/https://wordpress.org/plugins/glue-for-yoast-seo-amp/https://www.drupal.org/project/amphttps://www.magentocommerce.com/magento-connect/accelerated-mobile-pages-amp.htmlhttps://weeblr.com/joomla-accelerated-mobile-pages/wbamp

  • @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

    http://bit.ly/2dwTTyC

  • @Mike_Arnesen upbuild.io

    Head to validator.ampproject.org

    VALIDATE & LEARN

    http://validator.ampproject.org

  • @Mike_Arnesen upbuild.io

    YOUR MILEAGE MAY VARYStandard HTML Version Hosted AMP Version Cached AMP Version

  • The rest is up to you

    NEXT STEPS