Downloaded 16 times
Uploaded byCatalyst
TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
The document discusses SEO best practices for JavaScript-based websites, focusing on how search engines like Google render and understand these sites. It highlights the importance of unique URLs, clean structures, and the challenges posed by blocked resources and rendering delays. Additionally, it mentions deprecated AJAX-crawling schemes and various tools available for testing rendering and indexing capabilities.
More Related Content
Similar to TechSEO Boost 2017: SEO Best Practices for JavaScript T-Based Websites
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