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)
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
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
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
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
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
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
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
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/
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
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/
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
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