An insight into the issues with JavaScript and SEO.

1. #SMX #XXA @McCieslak
What SEOs Need To Know
JavaScript &
PWAs

2. #SMX #XXA @McCieslak
Expectations

3. #SMX #XXA @McCieslak
Reality

4. #SMX #XXA @McCieslak

5. #SMX #XXA @McCieslak
Web development
HTML → HTML + CSS → HTML + a little JS → HTML + a lot of JS → JS

6. #SMX #XXA @McCieslak

7. #SMX #XXA @McCieslak
JavaScript is everywhere
back-end – node.js
front-end – JS
web apps
PWA SPA

8. #SMX #XXA @McCieslak
Will PWA kick off the native apps?

9. #SMX #XXA @McCieslak
SEO classics just got complicated
crawling
rendering
indexing

10. #SMX #XXA @McCieslak
Trap Number 1 - Crawling

11. #SMX #XXA @McCieslak
Trap Number 2 - Rendering

12. #SMX #XXA @McCieslak
Trap Number 3 - Indexing

13. #SMX #XXA @McCieslak
Trap Number 4 -The whole process is extremely SLOW

14. #SMX #XXA @McCieslak
Our new role
research experiments criticism

15. #SMX #XXA @McCieslak
Website is indexed - an SEO success? NO!

16. #SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript

17. #SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript

18. #SMX #XXA @McCieslak
JS SEO Hack? Hmm... ONOFF
JavaScript

19. #SMX #XXA @McCieslak
ctrl+c
site: ctrl+v

20. #SMX #XXA @McCieslak
Diagnosing JS websites in 5 steps

21. #SMX #XXA @McCieslak
1. The Source Code vs. DOM

22. #SMX #XXA @McCieslak
1. The Source Code vs. DOM
Source code DOM

23. #SMX #XXA @McCieslak
GSC
fetch
URL
Indexed?
Content
Indexed?
Test
URL
InlineInlineV2 Inline
2. Crawling - server log

24. #SMX #XXA @McCieslak
2. Crawling - server log (experiment)

25. #SMX #XXA @McCieslak
Chrome 41
3. Rendering

26. #SMX #XXA @McCieslak

27. #SMX #XXA @McCieslak

28. #SMX #XXA @McCieslak
4. Timeouts - the 5-second rule

29. #SMX #XXA @McCieslak
Site:domain “fragment of the content from the site”
GOOD
5. Indexing

30. #SMX #XXA @McCieslak
Too simple? Let’s complicate it!
PWA

31. #SMX #XXA @McCieslak
Too simple? Let’s complicate it!
PWA

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. #SMX #XXA @McCieslak
Must have for PWAs
Web App manifest responsiveness
website served over
HTTPS
service workers performance

34. #SMX #XXA @McCieslak
Do my clients need a JS app to convert?
YES NO
#SMX #XXA @MariaCieślak
Before making a decision

35. #SMX #XXA @McCieslak
Am I OK with technical SEO?
YES NO
#SMX #XXA @MariaCieślak
Before making a decision

36. #SMX #XXA @McCieslak
How will I serve the content to Googlebot?
#SMX #XXA @MariaCieślak
Before making a decision

37. #SMX #XXA @McCieslak
Isomorphic
JavaScript
SSR
Prerender

38. #SMX #XXA @McCieslak
Isomorphic
JavaScript
Dynamic
Rendering
Prerender

39. #SMX #XXA @McCieslak
Hybrid
Rendering
Dynamic
Rendering
Prerender

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. #SMX #XXA @McCieslak

42. #SMX #XXA @McCieslak
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
maria@elephate.com