Improving Search Engine Optimization and Performance using Server Side Rendering in React

1. IMPROVING SEARCH ENGINE
OPTIMIZATION AND PERFORMANCE
USING SERVER SIDE RENDERING IN
REACT
SEO SSR
Performanc
e

2. Why No Customer

3. SEARCH
ENGINE Crawling Rendering Indexing

4. Crawling – Collects details about each page: titles,
images, keywords, other linked pages
Crawling
Rendering & Indexing - Store and organize the
content found during the crawling process. After
crawling process search engine renders data collected
from crawling, this process is called Indexing.
Rendering
&
Indexing

5. ARCHITECTURE

6. SEARCH
CRITERIA'
S
• HOW MANY TIMES THIS PAGE CONTAINS THE
KEYWORD?
• DO THE WORDS APPEAR IN TITLE? URL?
• DOES THE PAGE INCLUDES SYNANONS FOR THAT
WORD
• IS THIS PAGE FROM A QUALITY WEBSITE OR
SPAMMING?
• ETC…

8. HOW TO
IMPROVE SEO
SCORE ?

9. CLIENT SIDE RENDERING IN REACT
• ROOT ELEMENT IN INDEX.HTML
<DIV ID="ROOT"></DIV>
• REACT COMPONENTS BUNDLED IN
JAVASCRIPT
<SCRIPT
SRC="/STATIC/JS/BUNDLE.JS">

10. CLIENT SIDE RENDERING

11. SERVER SIDE RENDERING
• ROOT ELEMENT IN INDEX.HTML
<DIV ID="ROOT"></DIV>
• ALL THE CONTENT IS RENDERED
PRIOR
<H1>HELLO WORLD FROM
REACT</H1>
<SCRIPT
SRC="BUNDLE.JS"></SCRIPT>

12. SERVER SIDE RENDERING

13. HOW TO IMPLEMENT SSR
• TRANSPILE THE SERVER CODE
• BABEL ONLY – USING BABEL-CLI
• BABEL WITH WEBPACK
• RENDER TO STRING
• CONST REACTHTML = REACTDOMSERVER.RENDERTOSTRING(<APP />);
• INJECT THE GENERATED HTML ON YOUR SERVER-SIDE RENDERED PAGE
• <DIV ID="APP">${REACTHTML}</DIV>
• MAKE SURE YOU DON’T REFERENCE WINDOW OR DOCUMENT

14. SERVER SIDE RENDERING VS CLIENT SIDE
RENDERING

15.  USE SERVER SIDE RENDERING
 USE ACTUAL AND USEFUL LINKS
 USE HISTORY API
 ROBOTS.TXT
 ROBOTS.TXT FILES ARE LOCATED IN THE ROOT DIRECTORY OF WEBSITES (EX.
YOURDOMAIN.COM/ROBOTS.TXT) AND SUGGEST WHICH PARTS OF YOUR SITE SEARCH ENGINES SHOULD
AND SHOULDN'T CRAWL, AS WELL AS THE SPEED AT WHICH THEY CRAWL YOUR SITE
 REACT ROUTER
 ADD META TAGS, TITLE AND DESCRIPTIONS IN THE APPLICATION
 GOOGLE SEARCH CONSOLE
 MOBILE FRIENDLY TEST
 VIDEO AND IMAGE WITH CAPTION
PERFORMANCE

16. REACT HELMET

18. Q & A AND CONNECT
MANASA RAMANARAYAN
SENIOR SOFTWARE ENGINEER AT IBM
• SLIDES :
HTTPS://WWW.SLIDESHARE.NET/MANASARAMANARAYAN
• GITHUB : HTTPS://GITHUB.COM/MANSAMS500
• LINKEDIN: HTTPS://WWW.LINKEDIN.COM/IN/MANASA-
RAMANARAYAN-7A58825A/
• TWITTER : HTTPS://TWITTER.COM/MANASARAM10