This document discusses various techniques for improving JavaScript rendering for SEO purposes, including: - Using automated tests to prevent JavaScript-related SEO errors before deployment. Unit and end-to-end tests can check for issues like missing tags. - Choosing an appropriate rendering technique depending on how often content changes, whether it be pre-rendering, server-side rendering, or dynamic rendering. - Leveraging universal JavaScript to avoid accidental cloaking issues and ensure consistency between what users and search engines see. Workarounds are discussed when universal JavaScript is not practical.

1. @HamletBatista

2. @HamletBatista
https://en.wikipedia.org/wiki/Coco_(folklore)

3. @HamletBatista
JavaScript El Coco≠

4. @HamletBatista
https://github.com/ranksense/gtrends-watch

5. @HamletBatista

6. @HamletBatista

7. @HamletBatista

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. @HamletBatista
Use automated tests to stop JavaScript
related SEO errors before it's too late!
Scan and tweet #SMXInsights

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. @HamletBatista
Unit tests help check
every component
individually performs as
expected
USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO
ERRORS

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. @HamletBatista

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. @HamletBatista
End to end/integration
tests help check overall
operation
USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO
ERRORS
https://www.protractortest.org/

16. @HamletBatista
Many user actions are not in scope of SEO (clicking/saving)
USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO
ERRORS

17. @HamletBatista
End to end tests are
ideal to check for
rendering problems
USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO
ERRORS

18. @HamletBatista

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. @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. @HamletBatista
Don't pre-render dynamic JavaScript
content (changes often), use server side
rendering instead
Scan and tweet #SMXInsights

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. @HamletBatista
Server side render (on
demand) if it changes in less
than 24 hours
PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER
OTHERWISE

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. @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. @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. @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. @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. @HamletBatista
You need to hack the latest AngularJs
framework to place basic tags like
canonical and hreflang!
Scan and tweet #SMXInsights

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. @HamletBatista
THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

32. @HamletBatista
THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

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. @HamletBatista
THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

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. @HamletBatista
THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

37. @HamletBatista
THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

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. @HamletBatista
Prevent accidental cloaking issues by using
universal JavaScript
Scan and tweet #SMXInsights

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. @HamletBatista
Headings, images, tags or content that doesn't match
LEVERAGE UNIVERSAL JAVASCRIPT

42. @HamletBatista
Similar situation with separate code to handle mobile, desktop and tablet
LEVERAGE UNIVERSAL JAVASCRIPT

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. @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. @HamletBatista
If you need to have
separate codebases, cover
them with robust unit tests
LEVERAGE UNIVERSAL JAVASCRIPT
https://istanbul.js.org/

46. @HamletBatista
Universal JavaScript
uses same code, but
careful with
relative/absolute paths
LEVERAGE UNIVERSAL JAVASCRIPT

47. @HamletBatista
Responsive design is
ideal to avoid issues
LEVERAGE UNIVERSAL JAVASCRIPT

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. @HamletBatista
Avoid hiding important content behind
user actions
Scan and tweet #SMXInsights

50. @HamletBatista
Rendering hides content
that is not visible during the
snapshot
AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

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. @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. @HamletBatista
It is simpler to move the
content to a visible area
AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

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. @HamletBatista

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. @HamletBatista
Delegate long running processes
to a service worker
Scan and tweet #SMXInsights

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. @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. @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. @HamletBatista
• Free real-time crawler
monitor
• Quick issue patching in
Cloudflare
ABOUT RANKSENSE
https://www.cloudflare.com/apps/ranksense

62. @HamletBatista