Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

2.261 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  2. 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. 3. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  4. 4. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com The question is…
  5. 5. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Where did the candle holder go?
  6. 6. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com A simple truth: Even the best things in the world need the way to be found
  7. 7. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Your website pages Page elements
  8. 8. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Don’t let JavaScript ruin it
  9. 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. 10. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Why JS is dangerous
  11. 11. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Nooooooooooooo
  12. 12. Kristina Azarenko @azarchick | marketingsyrup.com @SEMrush JavaScript SEO: Bad Example
  13. 13. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Example 1: The Website Navigation is Not Crawlable
  14. 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. 15. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Example 2: Image Search Has Decreased After Lazy Load Implemented (Improperly)
  16. 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. 17. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  18. 18. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Example 3: The Website Was Switched to ReactJS with No Consideration of SEO
  19. 19. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Example 3: Issues Everything
  20. 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. 21. Kristina Azarenko @azarchick | marketingsyrup.com @SEMrush JavaScript SEO: Some Theory
  22. 22. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com A quick overview of how Google process of indexing works:
  23. 23. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Source: https://developers.google.com/search/docs/guides/javascript-seo-basics
  24. 24. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Google Doesn’t: Interact with your content
  25. 25. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Google Doesn’t: Scroll
  26. 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. 27. Kristina Azarenko @azarchick | marketingsyrup.com @SEMrush JavaScript SEO: How To Use JS the Right Way
  28. 28. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com So that this doesn’t happen
  29. 29. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  30. 30. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com 1. Use ‘HREF’ for Internal Links
  31. 31. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  32. 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. 33. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com They require Google to interact with your content
  34. 34. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Google Doesn’t: Interact with your content
  35. 35. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  36. 36. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com 2. Update the Title Tag, Meta Description and Main Content When a New Page is Loaded
  37. 37. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Render pages on the server, not in a browser
  38. 38. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Title: Christmas Gifts | Xmas Present Ideas 2020 Title: Christmas Gifts For Him 2020 HREF
  39. 39. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com 3. Make Sure That Rendered HTML Has All Main Information
  40. 40. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Rendered HTML: Your source code + JS and CSS applied
  41. 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. 42. Kristina Azarenko @azarchick | marketingsyrup.com @SEMrush JavaScript SEO: Debug Tools To Use
  43. 43. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check how much a website relies on JS
  44. 44. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check how much a website relies on JS
  45. 45. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check how Google sees your mobile rendered HTML: Google mobile-friendly test or Rich Results tool
  46. 46. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check how Google sees your mobile rendered HTML: Google mobile-friendly test or Rich Snippets tool
  47. 47. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check how Google sees your mobile rendered HTML: URL Inspection Tool in Google Search Console
  48. 48. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check Differences Between Page Source vs Rendered HTML
  49. 49. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Check Differences Between Page Source vs Rendered HTML
  50. 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. 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. 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. 53. Kristina Azarenko @azarchick | marketingsyrup.com @SEMrush JavaScript SEO: Mission is Possible
  54. 54. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  55. 55. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Spoiler: No, it’s not if used correctly
  56. 56. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com
  57. 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. 58. Kristina Azarenko @azarchick | @SEMrush marketingsyrup.com Everything can be ‘crawled’ here
  59. 59. marketingsyrup.com Thank you! azarchick Kristina Azarenko • eCommerce & Technical SEO Consultant • Founder of MarketingSyrup • Creator of the SEO Challenge course

×