TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
•Download as PPTX, PDF•
4 likes•6,871 views
While providing a dynamic and fast user experience, JavaScript-based sites (SPAs/PWAs) are not always “SEO friendly.” Therefore, it is crucial for developers to understand how search engines crawl, parse, eventually render, and index dynamic websites, to make sure bots get the experience they developed and the content of the site.
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
Similar to TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites (20)
More from Catalyst
More from Catalyst (20)
Recently uploaded
Recently uploaded (20)
TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
- 1. Max Prin | @maxxeight #TechSEOBoost SEO Best Practices For JavaScript-Based Websites How to make sure search engines can “understand” your website
- 2. Max Prin | @maxxeight #TechSEOBoost
- 3. Max Prin | @maxxeight #TechSEOBoost How (Advanced) Search Engines Work Render “Understanding web pages better”
- 4. Max Prin | @maxxeight #TechSEOBoost Rendering On Google Search Googlebot uses a web rendering service (WRS) that is based on Chrome 41 (M41). However: • Some features and APIs, such as IndexedDB or Service Workers, are disabled. • The Search team is working on updating the WRS so it’s always based on the latest available Chrome version.
- 5. Max Prin | @maxxeight #TechSEOBoost Web Development Technologies
- 6. Max Prin | @maxxeight #TechSEOBoost No page title No content Etc.
- 7. Max Prin | @maxxeight #TechSEOBoost It’s in the DOM!
- 8. Max Prin | @maxxeight #TechSEOBoost HOWEVER…
- 9. Max Prin | @maxxeight #TechSEOBoost HOWEVER… • Unique URL (SPA) • Unique HTML document (with duplicated <head> section) • Blocked resources • Links structure • Rendering delays • User interactions • JavaScript errors • Etc.
- 10. Max Prin | @maxxeight #TechSEOBoost CRAWLING
- 11. Max Prin | @maxxeight #TechSEOBoost URL Structure Fragment Identifier: example.com/#url Hashbang: example.com/#!url (pretty URL) • Google and Bing will request: example.com/?_escaped_fragment_=url (ugly URL) • The escaped_fragment URL should return an HTML snapshot
- 12. Max Prin | @maxxeight #TechSEOBoost AJAX-Crawling Scheme • Change URL structure: example.com/#url example.com/#!url • Google and Bing would request: example.com/?_escaped_fragment_=url • Server would return an HTML snapshot • Google and Bing index example.com/#!url with content from example.com/?_escaped_fragment_=url • Google has deprecated this recommendation in October 2015 • Won’t be supported by ~Q2 2018
- 13. Max Prin | @maxxeight #TechSEOBoost URL Structure Fragment Identifier: example.com/#url Hashbang: example.com/#!url (pretty URL) • Google and Bing will request: example.com/?_escaped_fragment_=url (ugly URL) • The escaped_fragment URL should return an HTML snapshot Clean URL: example.com/url • Leveraging the pushState function of the History API
- 14. Max Prin | @maxxeight #TechSEOBoost Internal Linking onclick + window.location ≠ <a href=”link.html”>
- 15. Max Prin | @maxxeight #TechSEOBoost RENDERING
- 16. Max Prin | @maxxeight #TechSEOBoost Blocked Resources (robots.txt)
- 17. Max Prin | @maxxeight #TechSEOBoost Content Loading
- 18. Max Prin | @maxxeight #TechSEOBoost Content Loading
- 19. Max Prin | @maxxeight #TechSEOBoost HTML Snapshots (“pre-rendering”) AJAX-crawling scheme User-agent (bot) detection Hybrid rendering / Isomorphic JavaScript
- 20. Max Prin | @maxxeight #TechSEOBoost INDEXING
- 21. Max Prin | @maxxeight #TechSEOBoost Main content gets rendered here Same title, description, canonical tag, etc. for every URL Duplicated Meta Info Across URLs
- 22. Max Prin | @maxxeight #TechSEOBoost TOOLS
- 23. Max Prin | @maxxeight #TechSEOBoost Google Search Console – Fetch & Render
- 24. Max Prin | @maxxeight #TechSEOBoost TechnicalSEO.com – Fetch & Render
- 25. Max Prin | @maxxeight #TechSEOBoost SEO Crawlers
- 26. Max Prin | @maxxeight #TechSEOBoost Chrome Dev Tools: Console - Lighthouse
- 27. Max Prin | @maxxeight #TechSEOBoost THANK YOU! @maxxeight
Editor's Notes
- https://developers.google.com/search/docs/guides/rendering
- Accessibility of content is NOT a google-only concern.
- Accessibility of content is NOT a google-only concern.
- Automatically vs. User-interaction
- The 5-second rule