Javascript SEO, Solved!

Slide 1

Slide 1 text

JavaScript SEO, Solved! Aliya Mirzakhmet Prerender Speakerdeck.com/aliyamirzakhmet @Aliya Mirzakhmet

Slide 2

Slide 2 text

Technical SEO Manager at an Ecommerce fashion brand with >5 million URLs Say hi to Alex

Slide 3

Slide 3 text

The problem is...

Slide 4

Slide 4 text

Their website trafﬁc dropped a lot after they redesigned it in React

Slide 5

Slide 5 text

Feels familiar?

Slide 6

Slide 6 text

Raise your hand if JS gives you a headache

Slide 7

Slide 7 text

Product Lead at Prerender I help businesses build products that solve problems Probably the first Kazakh 󰏱 person you have ever met :) I’m Aliya

Slide 8

Slide 8 text

50billion pages 1.8billion websites 98% built on JavaScript https://radixweb.com/blog/top-JavaScript-usage-statistics https://siteefy.com/how-many-websites-are-there/#:~:text=The%20Total%20Number%20of%20Indexed%20Web%20Pages&text=As%20of%2021%20April%202023,on%20the%20world%20wide%20web.

Slide 9

Slide 9 text

https://radixweb.com/blog/top-JavaScript-usage-statistics https://siteefy.com/how-many-websites-are-there/#:~:text=The%20Total%20Number%20of%20Indexed%20Web%20Pages&text=As%20of%2021%20April%202023,on%20the%20world%20wide%20web. ~40-60% not crawled > 30 billion pages not indexed

Slide 10

Slide 10 text

Don’t let JavaScript Ruin it Bigger website – less % of crawled pages

Slide 11

Slide 11 text

Website Trafﬁc Visibility Indexing Crawling

Slide 12

Slide 12 text

The truth is simple Even the best things in the world need a way to be discovered

Slide 13

Slide 13 text

The truth is simple Even the best things in the world need a way to be discovered crawled

Slide 14

Slide 14 text

But JavaScript SEO can be painful…

Slide 15

Slide 15 text

Limited budget Immediate results Scalable Customized solution Fix it ASAP

Slide 16

Slide 16 text

JavaScript SEO 1. Common Issues 2. Practical Tips 3. Solutions 4. Summary

Slide 17

Slide 17 text

Issue #1: Outdated sitemaps ➔ Poor SEO ranking ➔ User Frustration ➔ Missed Opportunities

Slide 18

Slide 18 text

Issue #2: Large and Unoptimized JS Files https://ftf.co/technical-seo-issues/ https://searchengineland.com/8-major-google-ranking-signals-2017-278450

Slide 19

Slide 19 text

Issue #3: Missing Content

Slide 20

Slide 20 text

Issue #4: Crawling Budget ➔ Limited ➔ URLs are not crawlable ➔ Content is not crawlable

Slide 21

Slide 21 text

Results taken from Onely’s study @ https://www.onely.com/blog/google-needs-9x-more-time-to-crawl-js-than-html/ It takes Google 9x longer to crawl JS than HTML

Slide 22

Slide 22 text

Here's how Google sees your site

Slide 23

Slide 23 text

Google does not ➔ Interact with your content ➔ Scroll ➔ See the content which is rendered only in a browser vs on a server

Slide 24

Slide 24 text

How to ﬁx it?

Slide 25

Slide 25 text

Mission is possible :)

Slide 26

Slide 26 text

1. Google loves sitemaps Always keep your sitemaps updated

Slide 27

Slide 27 text

2. Optimize your JS ﬁles as much as you can

Slide 28

Slide 28 text

3. Use ‘HREF’ for internal links 1 Anchor

Slide 29

Slide 29 text

4. Analyze Crawl Efﬁciency

Slide 30

Slide 30 text

5. Optimize Crawl Efﬁciency Render your pages in advance

Slide 31

Slide 31 text

When bots crawl your pages, feed the HTML version of your pages, saving you plenty of crawl budget

Slide 32

Slide 32 text

Solutions 1. Server-Side Rendering 2. Static Rendering 3. Dynamic Rendering

Slide 33

Slide 33 text

Server-Side Rendering ➔ Recommended by Google ➔ Great for JS Framework ➔ Fast ➔ Scalable based on your server capabilities ➔ High cost for Infrastructure ➔ Longer development time ➔ Technical knowledge required ➔ Needs maintenance

Slide 34

Slide 34 text

Static Rendering ➔ Great for Small SPAs ➔ Easy to crawl ➔ Limited & Costly ➔ Technical knowledge required ➔ Needs maintenance

Slide 35

Slide 35 text

Dynamic Rendering ➔ Ideal for Ecommerce, Enterprise sites and SPAs ➔ Easy to set up ➔ Fast & Scalable ➔ Near-zero development time and costs ➔ You don’t own your own rendering servers “not ideal for government” ➔ Customized features require additional development time

Slide 36

Slide 36 text

Summary 1. Keep your sitemaps always updated 2. Optimize your JS files as much as you can 3. Use ‘HREF’ for internal links 4. Analyze Crawl Efficiency 5. Render your pages

Slide 37

Slide 37 text

SSR Static Rendering Dynamic Rendering Best for Tech companies like Google, Amazon Small SPAs Ecommerce, Enterprise sites and SPAs Ease of Implementation High technical knowledge required High technical knowledge required Plug-and-play Time to Value 1 year + 1 year + Days Upfront Cost $200k+ (+ 100s of monthly dev hours) Based on the time needed to develop the static versions Near-zero development time and costs Scalability Based on your server capabilities Limited – Creating HTML versions for pages require they don’t change too often Unlimited – plus, it can generate pre-rendered versions of dynamic URLs on the ﬂy

Slide 38

Slide 38 text

● $200K ● 5 developers ● Maintenance support Alex does not have

Slide 39

Slide 39 text

Dynamic rendering could be a best middle ground solution

Slide 40

Slide 40 text

Up to 400x improved crawling budget

Slide 41

Slide 41 text

Which means… Website Traffic Visibility Indexing

Slide 42

Slide 42 text

Dynamic Rendering Can Fix That JS weakened their SEO

Slide 43

Slide 43 text

This is what we do at Prerender

Slide 44

Slide 44 text

Want to know more?

Slide 45

Slide 45 text

Come ﬁnd us at stand 12 near the entrance #brightonSEO

Slide 46

Slide 46 text

Thank you! [email protected] Speakerdeck.com/aliyamirzakhmet @Aliya Mirzakhmet or #brightonSEO