JavaScript SEO Training (WTS, Sitebulb, Gray Dot) - Session #3 Prioritizing & Explaining JS SEO

Deck from the September 24th, 2024 final (public) session of the JavaScript SEO Training, "Prioritizing and Explaining JavaScript SEO."

Sign up here to see the session recording, as well as all of the follow up sessions: https://sitebulb.com/javascript-seo-training/

If you identify as a woman or marginalized gender, sign up for WTS here: https://www.womenintechseo.com/join/

Learn more about:
- Gray Dot Co: https://thegray.company
- Sitebulb: https://sitebulb.com/
- Women in Tech SEO: https://www.womenintechseo.com/

Transcript

1. Understandin g JavaScript SEO Presented by
2. Hi! We’re Gray Dot Co We’re into JavaScript SEO. And Headless SEO. And, really, all manner of needlessly complicated software stuff. SAM TORRES Chief Digital Officer Data & dev nerd SEO mermaid™ TORY GRAY Founder & CEO SEO & data nerd Puzzle enthusiast
3. Sitebulb Site Auditing Tool Desktop & Cloud crawling Famously sweary release notes WTS Global Community Tech SEO Nerds Home to best members of all time On behalf of Sitebulb & WTS The very best sponsors a girl could ask for…
4. • Understanding JavaScript SEO • Auditing JS for SEO • Prioritizing & Explaining JS SEO Issues • Bonus: Live Auditing Q&A (Exclusive to #WTS) What this series covers
5. Prioritizing & Explaining JavaScript SEO Issues
6. 4 tiers of JavaScript SEO issues…
7. #1 No unique, indexable URLs
8. #2 No content on pages (or some critical content is missing)
9. #3 Content is accessible, but requires rendering Reading: SSR v CSR Case Studies
10. #4 Critical errors: timeouts, breaking the head Reading: Real World JS Problems Reading: Render Gauntlet
11. In other words…
12. How to think about issues All content available, everywhere No content available anywhere Important content is available upon rendering Some important content is missing upon rendering Remember: Critical SEO Fields Remember: Critical SEO Pages
13. Product Management for SEO and JavaScript
14. Use your team’s language Examples: • Tags ◦ Tag name ◦ Attribute ◦ Value ◦ Text node • Web components ◦ Slot(s) • DOM ◦ Light DOM ◦ Shadow DOM ◦ Virtual DOM • Stage, Production • Rendering (and types)
15. Use your team’s processes Image credit: Planyway
16. Use your team’s project organization methodology Image credit: Planyway
17. Crafting defect tickets that get implemented Template credit: Defect Ticket https://thegray.company/ticket Elements: • Title • Affected sections/features • Affected URLs • Defect Description • Actual Behavior • Expected Behavior • Impact • Steps to reproduce • Context, technical notes & references • Testing notes • Acceptance criteria
18. More PM resources • Worth learning from: Vanda Pokecz, Holly Miller Anderson, Gus Palogia, Adam Gent, Eli Schwartz, Gray Dot Company • SEO Roadmap ◦ https://thegray.company/blog/how-to-build-seo-roadmap • SEO Business Case ◦ https://thegray.company/blog/seo-product-management-business- case • Product Requirements Documentation ◦ https://thegray.company/blog/seo-product-requirements-how-to- template
19. Documentation
20. What documentation should cover: rendering • Rendering types (https://web.dev/articles/rendering-on-the-web) ◦ Which types are available to your brand (current type & potential types) ◦ How those types may affect a search engine’s ability to crawl/render/rank your site ▪ Onely: Rendering Queue: Google Needs 9X More Time To Crawl JS Than HTML ◦ Anticipated differences in performance between the types
21. What documentation should cover: errors • Serving accurate HTTP status codes ◦ https://developers.google.com/search/docs/crawling-indexing/j avascript/javascript-seo-basics#use-meaningful-http-status-c odes ◦ https://thegray.company/blog/single-page-application-spas- 404s-seo • Soft 404s ◦ https://developers.google.com/search/docs/crawling-indexing/j avascript/javascript-seo-basics#avoid-soft-404s
22. What documentation should cover: site structure • URL creation - avoid fragments (e.g. “#”- hashes - or “#!” - called hash bangs - neither of which are recommended.) ◦ https://developers.google.com/search/docs/crawling-indexing/javascript/j avascript-seo-basics#use-history-api • Pagination ◦ https://developers.google.com/search/docs/crawling-indexing/javascript/l azy-loading#paginated-infinite-scroll ◦ https://developers.google.com/search/docs/specialty/ecommerce/pagina tion-and-incremental-page-loading • Menu/Navigation • Filters, Facets & Sorting
23. What documentation should cover: links • Linking ◦ https://developers.google.com/search/docs/crawling-indexing /links-crawlable • Major takeaway: No <a href>, no link. ◦ Can follow: <a href=”https://thegray.company/>Anchor Text</a> ◦ Can’t follow: ▪ <a routerLink=”some/path”> ▪ <span href=”/some-url-path”> ▪ <a onClick=”goto(‘https://thegray.company’)”>
24. What documentation should cover: rich media • Rich media ◦ https://developers.google.com/search/docs/appearance/google-im ages#semantic-html ◦ https://developers.google.com/search/docs/appearance/video#hel p-google-find • Major takeaway: No <img src>, no image. ◦ Can follow: <img src=”puppy.jpg” alt=”a golden retriever puppy”> ◦ Can’t follow: <div style=”background-image:url(puppy.jpg)”>
25. What documentation should cover: (more) on-page • Page copy ◦ Text nodes: ▪ <div description=”something”>This is a Text Node</div> ▪ <h1 class=”class-name”>This is also a Text Node that’s an H1</h1> ▪ <a href=”/url-path”>This is also a Text Node that’s Anchor Text</a> ▪ <h1 description=”class-name”>_</a> ← That’s not page copy! • Lazy loading ◦ https://developers.google.com/search/docs/crawling-indexing/javas cript/lazy-loading • Structured data ◦ https://developers.google.com/search/docs/appearance/structured -data/generate-structured-data-with-javascript#testing
26. What documentation should cover: web components • Web components ◦ https://developers.google.com/search/docs/crawling- indexing/javascript/javascript-seo-basics#web-components • Parts of a Tag: Tag Name, Attribute(s), Value, Text Node <custom-component description=”This is a Value” custom-attribute> <p>This is a text node.</p> This is also a text node. </custom-component>
27. More about web components <my-custom-component description=”This is a Value” custom-attribute content=”This is not page copy”>_ </my-custom-component> • No Text Node = no page copy (attributes, values don’t count!) • No Text Node (Anchor text) = links ONLY in the code, not on the page <my-custom-component description=”This is a Value” custom-attribute><slot><a href=”/valid-url-path”>_</a></slot> </my-custom-component>
28. Examples (good ones!): Groupon
29. Examples (good ones!): Vox
30. More examples (less great)
31. More examples (no bueno)
32. QA & Monitoring for SEO and JavaScript
33. On the importance of QA: Goals Reading: SEO QA Minimize the chances of deploying code with detrimental SEO impact Catch and correct errors that make their way into production early Identify opportunities for future, related SEO enhancements
34. Critical JavaScript QA list: what might BREAK Reading: SEO QA • All normal SEO QA • Meta ordering ◦ Critical SEO tags sometimes (incorrectly) moved out of the head, including: title, meta desc, meta robots, canonical. • Custom overrides ◦ Custom, one-off changes may accidentally be overwritten. Consider: SEO Testing Guide Include tips, tricks, tools & resources for the QA team.
35. Monitoring for consistency
36. Questions? Share in the comments!
37. Don’t forget! Final session…. Tuesday October 4th 4pm BST (11am ET) • Live Auditing Q&A (Exclusive to #WTS)
38. Thank you! LinkedIn /company/graydotco /company/sitebulb /company/techseowomen X (Formerly Twitter) @GrayDotCo @Sitebulb @techseowomen