Javascript, SEO and Dollhouses by - #5HoursofTechnicalSEO @SEMrush

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

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

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

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

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

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

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

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

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

57. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com JavaScript SEO Best Practices Summary 1: Pages have unique URLs that Google can ﬁnd 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