Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What SEOs need to know about JavaScript and PWA

4,779 views

Published on

An insight into the issues with JavaScript and SEO.

Published in: Internet

What SEOs need to know about JavaScript and PWA

  1. 1. #SMX #XXA @McCieslak What SEOs Need To Know JavaScript & PWAs
  2. 2. #SMX #XXA @McCieslak Expectations
  3. 3. #SMX #XXA @McCieslak Reality
  4. 4. #SMX #XXA @McCieslak
  5. 5. #SMX #XXA @McCieslak Web development HTML → HTML + CSS → HTML + a little JS → HTML + a lot of JS → JS
  6. 6. #SMX #XXA @McCieslak
  7. 7. #SMX #XXA @McCieslak JavaScript is everywhere back-end – node.js front-end – JS web apps PWA SPA
  8. 8. #SMX #XXA @McCieslak Will PWA kick off the native apps?
  9. 9. #SMX #XXA @McCieslak SEO classics just got complicated crawling rendering indexing
  10. 10. #SMX #XXA @McCieslak Trap Number 1 - Crawling
  11. 11. #SMX #XXA @McCieslak Trap Number 2 - Rendering
  12. 12. #SMX #XXA @McCieslak Trap Number 3 - Indexing
  13. 13. #SMX #XXA @McCieslak Trap Number 4 -The whole process is extremely SLOW
  14. 14. #SMX #XXA @McCieslak Our new role research experiments criticism
  15. 15. #SMX #XXA @McCieslak Website is indexed - an SEO success? NO!
  16. 16. #SMX #XXA @McCieslak JS SEO Hack? Hmm... ONOFF JavaScript
  17. 17. #SMX #XXA @McCieslak JS SEO Hack? Hmm... ONOFF JavaScript
  18. 18. #SMX #XXA @McCieslak JS SEO Hack? Hmm... ONOFF JavaScript
  19. 19. #SMX #XXA @McCieslak ctrl+c site: ctrl+v
  20. 20. #SMX #XXA @McCieslak Diagnosing JS websites in 5 steps
  21. 21. #SMX #XXA @McCieslak 1. The Source Code vs. DOM
  22. 22. #SMX #XXA @McCieslak 1. The Source Code vs. DOM Source code DOM
  23. 23. #SMX #XXA @McCieslak GSC fetch URL Indexed? Content Indexed? Test URL InlineInlineV2 Inline 2. Crawling - server log
  24. 24. #SMX #XXA @McCieslak 2. Crawling - server log (experiment)
  25. 25. #SMX #XXA @McCieslak Chrome 41 3. Rendering
  26. 26. #SMX #XXA @McCieslak
  27. 27. #SMX #XXA @McCieslak
  28. 28. #SMX #XXA @McCieslak 4. Timeouts - the 5-second rule
  29. 29. #SMX #XXA @McCieslak Site:domain “fragment of the content from the site” GOOD 5. Indexing
  30. 30. #SMX #XXA @McCieslak Too simple? Let’s complicate it! PWA
  31. 31. #SMX #XXA @McCieslak Too simple? Let’s complicate it! PWA
  32. 32. #SMX #XXA @McCieslak What makes PWA so unique? no need to install from the app store notificationslike a native app offline fast less steps in maintenance and development
  33. 33. #SMX #XXA @McCieslak Must have for PWAs Web App manifest responsiveness website served over HTTPS service workers performance
  34. 34. #SMX #XXA @McCieslak Do my clients need a JS app to convert? YES NO #SMX #XXA @MariaCieślak Before making a decision
  35. 35. #SMX #XXA @McCieslak Am I OK with technical SEO? YES NO #SMX #XXA @MariaCieślak Before making a decision
  36. 36. #SMX #XXA @McCieslak How will I serve the content to Googlebot? #SMX #XXA @MariaCieślak Before making a decision
  37. 37. #SMX #XXA @McCieslak Isomorphic JavaScript SSR Prerender
  38. 38. #SMX #XXA @McCieslak Isomorphic JavaScript Dynamic Rendering Prerender
  39. 39. #SMX #XXA @McCieslak Hybrid Rendering Dynamic Rendering Prerender
  40. 40. #SMX #XXA @McCieslak • clean URLs • provide a unique URL for each page • follow all the best technical SEO practices - proper canonical tags, hreflang tags etc. • test and debug in Chrome 41 • care about the performance Universal tips for ALL JS websites
  41. 41. #SMX #XXA @McCieslak
  42. 42. #SMX #XXA @McCieslak LEARN MORE: UPCOMING @SMX EVENTS THANK YOU! SEE YOU AT THE NEXT #SMX maria@elephate.com

×