In this session, Kristina Azarenko will share the best practices for using JavaScript on a website so that it stays SEO-friendly (and can be found on Google). Kristina will also show real-life examples of when JS implementation went wrong and the tools to discover it.

1. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

2. • eCommerce & Technical SEO consultant
• I help businesses thrive online and get traffic and
sales they deserve
• Creator of the SEO Challenge Course
• International speaker
• Quarantine doll houses builder
Kristina Azarenko

3. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

4. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
The question is…

5. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Where
did
the
candle
holder
go?

6. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
A simple truth:
Even the best things in the
world need the way to be found

7. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Your website pages Page elements

8. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Don’t let JavaScript ruin it

9. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
• Bad Examples
• Some Theory
• How To Use JS the Right Way
• Debug Tools To Use
• Summary

10. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Why JS is dangerous

11. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Nooooooooooooo

12. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
Bad Example

13. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 1: The Website Navigation is Not Crawlable

14. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 1: Issues
• It makes it harder for Google to discover the internal pages
• The authority within the website is not properly distributed
• No clear indication of relationships between the pages
within the website

15. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 2: Image Search Has Decreased After Lazy Load Implemented
(Improperly)

16. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 2: Issues
• The content ‘hidden’ under lazy loading might not be discovered
by Google
• If the content is not discovered, the content is not ranked

17. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

18. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 3: The Website Was Switched to ReactJS
with No Consideration of SEO

19. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 3: Issues
Everything

20. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Example 3: Issues
• URLs are not crawlable
• Images are not crawlable
• The title tag is the same across the whole website
• Google chose the homepage as the canonical URL for all other
internal pages

21. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
Some Theory

22. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
A quick overview of
how Google process of
indexing works:

23. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Source: https://developers.google.com/search/docs/guides/javascript-seo-basics

24. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Google Doesn’t:
Interact with your content

25. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Google Doesn’t:
Scroll

26. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Google Doesn’t:
See the content which is rendered
only in a browser vs on a server

27. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
How To Use JS the
Right Way

28. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
So that this doesn’t happen

29. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

30. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
1.
Use ‘HREF’ for
Internal Links

31. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

32. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Don’t add links using:
• window.location.href=‘/page-url‘
• <a onclick=“goto(‘https://store.com/page-url')”>
• #page-url

33. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
They require Google to
interact with your
content

34. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Google Doesn’t:
Interact with your content

35. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

36. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
2.
Update the Title Tag,
Meta Description
and Main Content
When a New Page is Loaded

37. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Render pages on the server,
not in a browser

38. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Title: Christmas Gifts | Xmas Present Ideas 2020 Title: Christmas Gifts For Him 2020
HREF

39. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
3.
Make Sure That Rendered
HTML Has All Main Information

40. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Rendered HTML:
Your source code + JS and CSS applied

41. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Have the text and
media content,
structured data
Show the right
canonical and meta
robots tags
Have the right title
tag, meta
description
Your Rendered HTML Should

42. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
Debug Tools To Use

43. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check how much a website relies on JS

44. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check how much a website relies on JS

45. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check how Google sees your mobile rendered HTML:
Google mobile-friendly test or Rich Results tool

46. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check how Google sees your mobile rendered HTML:
Google mobile-friendly test or Rich Snippets tool

47. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check how Google sees your mobile rendered HTML:
URL Inspection Tool in Google Search Console

48. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check Differences Between Page Source vs Rendered HTML

49. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check Differences Between Page Source vs Rendered HTML

50. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check Differences Between Page Source vs Rendered HTML
https://www.searchviu.com/en/javascript-rendering-comparison-check

51. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check Differences Between Page Source vs Rendered HTML
https://www.searchviu.com/en/javascript-rendering-comparison-check

52. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Check Differences Between Page Source vs Rendered HTML
https://www.searchviu.com/en/javascript-rendering-comparison-check

53. Kristina Azarenko @azarchick |
marketingsyrup.com
@SEMrush
JavaScript SEO:
Mission is Possible

54. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

55. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Spoiler:
No, it’s not if used correctly

56. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com

57. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
JavaScript SEO
Best Practices
Summary
1: Pages have unique URLs that Google can find and
index
2: The links on the pages are crawlable (added
using the ‘href’ attribute)
4: The main content is available in rendered HTML
(mobile)
5: Pages have unique Title tags that Googlebot can see
6: Robots.txt allows crawling of JavaScript
3: The Title tag, meta description and main content are
updated when a new page is loaded (the content is
rendered on the server)

58. Kristina Azarenko @azarchick | @SEMrush
marketingsyrup.com
Everything
can be
‘crawled’
here

59. marketingsyrup.com
Thank you!
azarchick
Kristina Azarenko
• eCommerce & Technical SEO Consultant
• Founder of MarketingSyrup
• Creator of the SEO Challenge course