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.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 62

The New Renaissance of JavaScript

15

Share

Download to read offline

I talked about catching SEO errors during development using automated testing among other topics.

Related Books

Free with a 30 day trial from Scribd

See all

The New Renaissance of JavaScript

  1. 1. @HamletBatista
  2. 2. @HamletBatista https://en.wikipedia.org/wiki/Coco_(folklore)
  3. 3. @HamletBatista JavaScript El Coco≠
  4. 4. @HamletBatista https://github.com/ranksense/gtrends-watch
  5. 5. @HamletBatista
  6. 6. @HamletBatista
  7. 7. @HamletBatista
  8. 8. @HamletBatista Rendering by JavaScript execution target: • Client side rendering • Hybrid rendering (Client and server) • Dynamic rendering (Client and Server only for bots) TERMINOLOGY Rendering by execution time: • Pre-rendering (at build time) • Server side rendering (on demand)
  9. 9. @HamletBatista Use automated tests to stop JavaScript related SEO errors before it's too late! Scan and tweet #SMXInsights
  10. 10. @HamletBatista Common SEO errors can be avoided by including automated checks in the codebase USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://jasmine.github.io/
  11. 11. @HamletBatista Unit tests help check every component individually performs as expected USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS
  12. 12. @HamletBatista Not every component is in scope of SEO (might be invisible to bots) USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://angular.io/guide/architecture-components
  13. 13. @HamletBatista
  14. 14. @HamletBatista SEO Developer/QA • Define which components are in SEO scope • Define reasonable checks (missing tags, incomplete, etc) UNIT TESTING RESPONSIBILITIES • Write unit tests • Fix code when tests fail
  15. 15. @HamletBatista End to end/integration tests help check overall operation USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://www.protractortest.org/
  16. 16. @HamletBatista Many user actions are not in scope of SEO (clicking/saving) USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS
  17. 17. @HamletBatista End to end tests are ideal to check for rendering problems USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS
  18. 18. @HamletBatista
  19. 19. @HamletBatista SEO Developer/QA • Define which actions are in SEO scope (reasonable by search engines) • Define reasonable checks (consistent content server vs client, consistent tagging server vs client) END TO END TESTING RESPONSIBILITIES • Write e2e tests and add to codebase • Continuous integration leverages automated tests to release quality code fast
  20. 20. @HamletBatista • AngularJS • https://angular.io/guide/testing • https://docs.angularjs.org/guide/e2e-testing • ReactJS • https://reactjs.org/community/testing.html • https://www.cypress.io/ • VueJS • https://vuejs.org/v2/guide/unit-testing.html • https://vuejs-templates.github.io/webpack/e2e.html RESOURCES TO LEARN MORE ABOUT AUTOMATED TESTING
  21. 21. @HamletBatista Don't pre-render dynamic JavaScript content (changes often), use server side rendering instead Scan and tweet #SMXInsights
  22. 22. @HamletBatista • For new sites (use universal JavaScript) • For existing sites (dynamic rendering good temporary solution) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE
  23. 23. @HamletBatista Server side render (on demand) if it changes in less than 24 hours PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE
  24. 24. @HamletBatista Pre-rendering is expensive (time and cost) if you have too many pages (slows down build/deploy) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE
  25. 25. @HamletBatista For Hybrid rendering Rendering means executing JS server side in Node PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE For Dynamic rendering Rendering means launching browser instances to render pages (this is more expensive in time and cost as it needs to fetch images, etc.)
  26. 26. @HamletBatista For Dynamic rendering • Caching is essential • Caching dynamic content is tricky and can cause problems (PLA invalidations, accidental cloaking, can't fix mistakes quickly) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE https://www.netlify.com/blog/2016/11/22/prerendering-explained/
  27. 27. @HamletBatista Background execution with workers to get important content rendered PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution
  28. 28. @HamletBatista • Dynamic rendering https://developers.google.com/search/docs/guides/dynamic-rendering • AngularJs Universal https://angular.io/guide/universal • ReactJs Universal https://github.com/faceyspacey/react-universal-component • VueJs Universal https://ssr.vuejs.org/guide/universal.html RESOURCES TO LEARN MORE ABOUT RENDERING OPTIONS
  29. 29. @HamletBatista You need to hack the latest AngularJs framework to place basic tags like canonical and hreflang! Scan and tweet #SMXInsights
  30. 30. @HamletBatista The good • No hash fragment URLs (history API paths by default) • Painless universal JavaScript set up and excellent documentation • Same codebase (client and server) prevents cloaking or compliance problems • Basic support for titles and meta tags like description and robots • Supports SSR and prerendering THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  31. 31. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  32. 32. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  33. 33. @HamletBatista The bad • No built-in support for structured data/JSON-LD • Absolute (server) and relative (client) URLs can introduce errors THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  34. 34. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  35. 35. @HamletBatista The ugly • No built-in support for link tags like canonicals • No built-in support for link tags like hreflang tags THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  36. 36. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  37. 37. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING
  38. 38. @HamletBatista RESOURCES TO LEARN MORE ABOUT SEO TAGGING • AngularJs https://angular.io/api/platform-browser/Meta • ReactJs https://alligator.io/react/react-helmet/ • VueJs https://alligator.io/vuejs/vue-router-modify-head/
  39. 39. @HamletBatista Prevent accidental cloaking issues by using universal JavaScript Scan and tweet #SMXInsights
  40. 40. @HamletBatista Running different code for users and bots often leads to inconsistencies LEVERAGE UNIVERSAL JAVASCRIPT • Welcome • User User • Welcome • Visitor Content • Welcome • Search bot Search bot
  41. 41. @HamletBatista Headings, images, tags or content that doesn't match LEVERAGE UNIVERSAL JAVASCRIPT
  42. 42. @HamletBatista Similar situation with separate code to handle mobile, desktop and tablet LEVERAGE UNIVERSAL JAVASCRIPT
  43. 43. @HamletBatista One risk is a cloaking penalty, but a more common one is disapproved shopping feed ads due to compliance issues LEVERAGE UNIVERSAL JAVASCRIPT
  44. 44. @HamletBatista Universal is not always practical (some actions don't exist on the server, for example scrolling events) LEVERAGE UNIVERSAL JAVASCRIPT https://medium.com/commencis/isomorphic-universal-javascript-496dc8c4341a
  45. 45. @HamletBatista If you need to have separate codebases, cover them with robust unit tests LEVERAGE UNIVERSAL JAVASCRIPT https://istanbul.js.org/
  46. 46. @HamletBatista Universal JavaScript uses same code, but careful with relative/absolute paths LEVERAGE UNIVERSAL JAVASCRIPT
  47. 47. @HamletBatista Responsive design is ideal to avoid issues LEVERAGE UNIVERSAL JAVASCRIPT
  48. 48. @HamletBatista • https://github.com/brillout/awesome-universal-rendering • https://www.oreilly.com/library/view/building-isomorphic- javascript/9781491932926/ch01.html RESOURCES TO LEARN MORE ABOUT UNIVERSAL JAVASCRIPT
  49. 49. @HamletBatista Avoid hiding important content behind user actions Scan and tweet #SMXInsights
  50. 50. @HamletBatista Rendering hides content that is not visible during the snapshot AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS
  51. 51. @HamletBatista Examples of content that requires clicks: • Tabbed content • Accordion content • Click to read more • Click to load more items AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS
  52. 52. @HamletBatista Another example is content that requires scrolling like: • Infinite scrolls • Slideshows AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS Alternatively, you could program your renderer to simulate user actions
  53. 53. @HamletBatista It is simpler to move the content to a visible area AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS
  54. 54. @HamletBatista Or if the content can stand on its own, create routes to the specific components AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS
  55. 55. @HamletBatista
  56. 56. @HamletBatista RESOURCES TO LEARN MORE ABOUT COMPONENT ROUTING • AngularJs https://angular.io/guide/router • ReactJs https://reacttraining.com/react-router/web/guides/quick-start • VueJs https://vuejs.org/v2/guide/routing.html
  57. 57. @HamletBatista Delegate long running processes to a service worker Scan and tweet #SMXInsights
  58. 58. @HamletBatista A service worker operates outside of the main browser execution thread DELEGATE LONG RUNNING PROCESSES TO A SERVICE WORKER https://angular.io/guide/service-worker-getting-started
  59. 59. @HamletBatista • Speed up rendering • Avoid partial rendering issues DELEGATE LONG RUNNING PROCESSES TO A SERVICE WORKER https://angular.io/guide/service-worker-getting-started
  60. 60. @HamletBatista RESOURCES TO LEARN MORE SERVICE WORKERS AND PWAS • AngularJs https://angular.io/guide/service-worker-getting-started • ReactJs https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app • VueJs https://github.com/vuejs-templates/pwa
  61. 61. @HamletBatista • Free real-time crawler monitor • Quick issue patching in Cloudflare ABOUT RANKSENSE https://www.cloudflare.com/apps/ranksense
  62. 62. @HamletBatista

×