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.
#SMX #XXA @McCieslak
What SEOs Need To Know
JavaScript &
PWAs
#SMX #XXA @McCieslak
Expectations
#SMX #XXA @McCieslak
Reality
#SMX #XXA @McCieslak
#SMX #XXA @McCieslak
Web development
HTML → HTML + CSS → HTML + a little JS → HTML + a lot of JS → JS
#SMX #XXA @McCieslak
#SMX #XXA @McCieslak
JavaScript is everywhere
back-end – node.js
front-end – JS
web apps
PWA SPA
#SMX #XXA @McCieslak
Will PWA kick off the native apps?
#SMX #XXA @McCieslak
SEO classics just got complicated
crawling
rendering
indexing
#SMX #XXA @McCieslak
Trap Number 1 - Crawling
#SMX #XXA @McCieslak
Trap Number 2 - Rendering
#SMX #XXA @McCieslak
Trap Number 3 - Indexing
#SMX #XXA @McCieslak
Trap Number 4 -The whole process is extremely SLOW
#SMX #XXA @McCieslak
Our new role
research experiments criticism
#SMX #XXA @McCieslak
Website is indexed - an SEO success? NO!
#SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript
#SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript
#SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript
#SMX #XXA @McCieslak
ctrl+c
site: ctrl+v
#SMX #XXA @McCieslak
Diagnosing JS websites in 5 steps
#SMX #XXA @McCieslak
1. The Source Code vs. DOM
#SMX #XXA @McCieslak
1. The Source Code vs. DOM
Source code DOM
#SMX #XXA @McCieslak
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
InlineInlineV2 Inline
2. Crawling - server log
#SMX #XXA @McCieslak
2. Crawling - server log (experiment)
#SMX #XXA @McCieslak
Chrome 41
3. Rendering
#SMX #XXA @McCieslak
#SMX #XXA @McCieslak
#SMX #XXA @McCieslak
4. Timeouts - the 5-second rule
#SMX #XXA @McCieslak
Site:domain “fragment of the content from the site”
GOOD
5. Indexing
#SMX #XXA @McCieslak
Too simple? Let’s complicate it!
PWA
#SMX #XXA @McCieslak
Too simple? Let’s complicate it!
PWA
#SMX #XXA @McCieslak
What makes PWA so unique?
no need to install from
the app store
notificationslike a native app
offlin...
#SMX #XXA @McCieslak
Must have for PWAs
Web App manifest responsiveness
website served over
HTTPS
service workers performa...
#SMX #XXA @McCieslak
Do my clients need a JS app to convert?
YES NO
#SMX #XXA @MariaCieślak
Before making a decision
#SMX #XXA @McCieslak
Am I OK with technical SEO?
YES NO
#SMX #XXA @MariaCieślak
Before making a decision
#SMX #XXA @McCieslak
How will I serve the content to Googlebot?
#SMX #XXA @MariaCieślak
Before making a decision
#SMX #XXA @McCieslak
Isomorphic
JavaScript
SSR
Prerender
#SMX #XXA @McCieslak
Isomorphic
JavaScript
Dynamic
Rendering
Prerender
#SMX #XXA @McCieslak
Hybrid
Rendering
Dynamic
Rendering
Prerender
#SMX #XXA @McCieslak
• clean URLs
• provide a unique URL for each page
• follow all the best technical SEO practices -
pro...
#SMX #XXA @McCieslak
#SMX #XXA @McCieslak
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
maria@elephate.com
Upcoming SlideShare
Loading in …5
×

What SEOs need to know about JavaScript and PWA

5,369 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

×