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