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.

SEO for Angular - BrightonSEO 2018

2,534 views

Published on

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

Published in: Internet

SEO for Angular - BrightonSEO 2018

  1. 1. Jamie Alberico Lead Technical SEO/Bot Whisperer https://www.slideshare.net/JamieAlberico
  2. 2. Render v Rank: SEO for Angular Sites Everyone @jammer_volts
  3. 3. @jammer_volts
  4. 4. Javascript! Javascript Everywhere!
  5. 5. @jammer_volts
  6. 6. @jammer_volts
  7. 7. @jammer_volts
  8. 8. + = @jammer_volts
  9. 9. {venue} {name} {status} + @jammer_volts { }
  10. 10. @jammer_volts Congratulations, Chelsea!
  11. 11. @jammer_volts
  12. 12. Browser Server Request @jammer_volts
  13. 13. @jammer_volts
  14. 14. { "Dataset": "Page2" } { "Dataset": "Page1" } @jammer_volts
  15. 15. @jammer_volts
  16. 16. 94.9% of websites use JavaScript https://w3techs.com/technologies/details/c p-javascript/all/all @jammer_volts
  17. 17. 160,000,000 ,000,000 @jammer_volts
  18. 18. JAVA$CRIPT WEBPAGES Googlebot Resources @jammer_volts
  19. 19. @jammer_volts
  20. 20. @jammer_volts
  21. 21. CRAWL RENDER INDEX Instantaneous! @jammer_volts
  22. 22. JavaScript generated content is discovered by Googlebot only once the resources become available. https://youtu.be/PFwUbgvpdaQ?t=13m54s @jammer_volts
  23. 23. 2nd wave (JS rendered) RENDER INDEX CRAWL 1st wave of indexing (HTML ONLY) @jammer_volts
  24. 24. Download HTML & CSS Execute CSS Render @jammer_volts
  25. 25. Download HTML Download CSS & JS Execute CSS Execute JS Update DOM @jammer_volts
  26. 26. @jammer_volts
  27. 27. Which search engines can render JavaScript? Google ✓ AOL ✗ Bing ✗ DuckDuckGo ✗ Yahoo ✗ Yandex ✗ Ask ✓ Baidu ✗ https://moz.com/blog/search-engines-ready-for-javascript-crawlin
  28. 28. @jammer_volts
  29. 29. @jammer_volts
  30. 30. @jammer_volts
  31. 31. @jammer_volts
  32. 32. @jammer_volts
  33. 33. @jammer_volts
  34. 34. @jammer_volts
  35. 35. @jammer_volts
  36. 36. @jammer_volts
  37. 37. Browser Request Server @jammer_volts
  38. 38. @jammer_volts
  39. 39. @jammer_volts
  40. 40. CSR Angular Pre-Render Fully Parsed HTML + = @jammer_volts
  41. 41. @jammer_volts
  42. 42. ● Puppeteer ● Rendertron @jammer_volts
  43. 43. @jammer_volts
  44. 44. { "Dataset": "Product1" } { "Dataset": "Product2" } @jammer_volts
  45. 45. https://developer.mozilla.org/en-US/docs/Web/API/H istory_API#Adding_and_modifying_history_entries @jammer_volts
  46. 46. @jammer_volts
  47. 47. https://developers.google.com/analytics/devguide s/collection/analyticsjs/single-page-applications @jammer_volts
  48. 48. @jammer_volts
  49. 49. https://youtu.be/NO-sdBzb1Hc @jammer_volts
  50. 50. <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
  51. 51. @jammer_volts
  52. 52. https://youtu.be/NO-sdBzb1Hc @jammer_volts
  53. 53. @jammer_volts
  54. 54. https://groups.google.com/d/msg/js-sites-w g/QJTEXXuGfeU/MW-yOObTCAAJ @jammer_volts
  55. 55. @jammer_volts
  56. 56. @jammer_volts
  57. 57. @jammer_volts

×