33
Ric Rodriguez CROUD The SEO’s Guide To JavaScript @ricrodriguez_uk https://www.slideshare.net/RicRodriguez1

The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

Embed Size (px)

Citation preview

Page 1: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

Ric RodriguezCROUD

The SEO’s Guide To JavaScript

@ricrodriguez_ukhttps://www.slideshare.net/RicRodriguez1

Page 2: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

THE SEO’S GUIDE

TO JAVASCRIPT

Page 3: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

Ric RodriguezSNR SEO MANAGER @ CROUD

Page 4: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

JAVASCRIPT IS A

PROGRAMMING LANGUAGE

Page 5: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

WHY IS IT A PROBLEM?

Page 6: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

ASYNCHRONICITY

Page 7: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

GOOGLEBOT

REQUEST

MADE

DOM

CSSDOM

RENDER

TREE

PAGE IS

RENDERED

Page 8: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

GOOGLEBOT

REQUEST

MADE

DOM

CSSDOM

RENDER

TREE

PAGE IS

RENDERED

JAVASCRIPT

IS

EXECUTED

Page 9: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

IF GOOGLE ISN’T THERE TO SEE IT

IT CAN’T KNOW WHAT HAS HAPPENED

Page 10: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

WHY IS JAVASCRIPT USED?

Page 11: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

IT’S FAST

Page 12: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

IT’S UBIQUTOUS

Page 13: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

IT’S ENGAGING

Page 14: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

IT’S HERE TO STAY

Page 15: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

AND WE NEED TO KNOW IT

Page 16: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

LINK - SEO ROUNDTABLE

Page 17: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

HOW IS IT USED?

Page 18: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

TO ENHANCE PARTS OF A PAGE

Page 19: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

TO BUILD THE WHOLE PAGE(THE JS STACK)

Page 20: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

VIEWMODEL

CONTROLLER

Page 21: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

FRAMEWORKS ARE DIFFERENT WAYS

TO APPLY COMMON JS PRINCIPLES

Page 22: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

SERVER-SIDE CLIENT-SIDE

Express(Controller)

Node(Router)

React(View)

Angular(Framework)

Page 23: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

NO MATTER THE FORMAT THE

FUNDAMENTALS STAY THE SAME

Page 24: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

HOW TO GET STARTED

Page 25: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

1. AUDIT USING INSPECT ELEMENT(TO SEE WHAT IS IN THE CODE ONCE LOADED)

Page 26: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

2. USE SERVER-SIDE RENDERINGTO MAKE SURE KEY ELEMENTS AREN’T MISSED

Page 27: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

3. CLEARLY DEFINE EACH PAGEAND TIE THEM TO NORMAL, UNCOMPLICATED URLS

Page 28: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

4. CHECK YOUR ANALYTICSTO MAKE SURE PAGES VIEWS ARE CAPTURED

Page 29: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

5. USE JS WHEN IT IS NEEDEDTO MAKE THE EXPERIENCE BETTER FOR USERS

Page 30: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

FINAL THOUGHTS

Page 31: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

EMBRACE JAVASCRIPTIT’S FASTER, IT’S BETTER AND IT’S HERE TO STAY

Page 32: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

STICK TO THE FUNDAMENTALSMAKE SURE CRAWLERS CAN SEE THE PARTS THAT MATTER

Page 33: The SEO's Guide To JavaScript - Ric Rodriguez, Brighton SEO 2017

@RICRODRIGUEZ_UK WWW.CROUD.COM

THANK YOUTWEET ME - @RICRODRIGUEZ_UK