Guys. Don't be scared. Javascript can be wonderful. Angular is a powerful framework. The devil is in the execution.

1. Jamie Alberico
Lead Technical SEO/Bot
Whisperer
https://www.slideshare.net/JamieAlberico

2. Render v Rank:
SEO for
Angular Sites
Everyone
@jammer_volts

3. @jammer_volts

4. Javascript!
Javascript Everywhere!

5. @jammer_volts

6. @jammer_volts

7. @jammer_volts

8. + =
@jammer_volts

9. {venue}
{name}
{status}
+
@jammer_volts
{ }

10. @jammer_volts
Congratulations,
Chelsea!

11. @jammer_volts

12. Browser Server
Request
@jammer_volts

13. @jammer_volts

14. {
"Dataset":
"Page2"
}
{
"Dataset":
"Page1"
}
@jammer_volts

15. @jammer_volts

16. 94.9%
of websites use JavaScript
https://w3techs.com/technologies/details/c
p-javascript/all/all @jammer_volts

17. 160,000,000
,000,000
@jammer_volts

18. JAVA$CRIPT
WEBPAGES
Googlebot
Resources
@jammer_volts

19. @jammer_volts

20. @jammer_volts

21. CRAWL RENDER
INDEX
Instantaneous!
@jammer_volts

22. JavaScript generated content is
discovered by Googlebot only
once the resources become available.
https://youtu.be/PFwUbgvpdaQ?t=13m54s @jammer_volts

23. 2nd wave
(JS rendered)
RENDER
INDEX
CRAWL
1st wave of
indexing
(HTML ONLY)
@jammer_volts

24. Download
HTML &
CSS
Execute
CSS
Render
@jammer_volts

25. Download
HTML
Download
CSS & JS
Execute
CSS
Execute
JS
Update
DOM
@jammer_volts

27. @jammer_volts

28. Which search engines
can render JavaScript?
Google ✓ AOL ✗
Bing ✗ DuckDuckGo ✗
Yahoo ✗ Yandex ✗
Ask ✓ Baidu ✗
https://moz.com/blog/search-engines-ready-for-javascript-crawlin

29. @jammer_volts

30. @jammer_volts

31. @jammer_volts

32. @jammer_volts

33. @jammer_volts

34. @jammer_volts

35. @jammer_volts

36. @jammer_volts

37. @jammer_volts

38. Browser
Request
Server
@jammer_volts

39. @jammer_volts

40. @jammer_volts

41. CSR
Angular
Pre-Render
Fully
Parsed
HTML
+ =
@jammer_volts

42. @jammer_volts

43. ● Puppeteer
● Rendertron
@jammer_volts

44. @jammer_volts

45. {
"Dataset":
"Product1"
}
{
"Dataset":
"Product2"
}
@jammer_volts

46. https://developer.mozilla.org/en-US/docs/Web/API/H
istory_API#Adding_and_modifying_history_entries @jammer_volts

47. @jammer_volts

48. https://developers.google.com/analytics/devguide
s/collection/analyticsjs/single-page-applications @jammer_volts

49. @jammer_volts

50. https://youtu.be/NO-sdBzb1Hc @jammer_volts

51. <a href="/good link">Will be crawled</a>
<span onclick="changePage('bad-link')">Not
crawled</span>
<a onclick="changePage('bad-link')">Not
crawled</a>
<a href="/good-link" onclick="changePage
('good-link')">Will be crawled</a>
@jammer_volts

52. @jammer_volts

53. https://youtu.be/NO-sdBzb1Hc @jammer_volts

54. @jammer_volts

55. https://groups.google.com/d/msg/js-sites-w
g/QJTEXXuGfeU/MW-yOObTCAAJ @jammer_volts

56. @jammer_volts

57. @jammer_volts

58. @jammer_volts