Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Max Prin - TechSEO Boost 2017 - SEO Best Practices For JavaScript-Based Websites

171 views

Published on

Max Prin - TechSEO Boost 2017 - SEO Best Practices For JavaScript-Based Websites

Published in: Technology
  • Be the first to comment

Max Prin - TechSEO Boost 2017 - SEO Best Practices For JavaScript-Based Websites

  1. 1. Max Prin | @maxxeight #TechSEOBoost SEO Best Practices For JavaScript-Based Websites How to make sure search engines can “understand” your website
  2. 2. Max Prin | @maxxeight #TechSEOBoost
  3. 3. Max Prin | @maxxeight #TechSEOBoost How (Advanced) Search Engines Work Render “Understanding web pages better”
  4. 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. 5. Max Prin | @maxxeight #TechSEOBoost Web Development Technologies
  6. 6. Max Prin | @maxxeight #TechSEOBoost No page title No content Etc.
  7. 7. Max Prin | @maxxeight #TechSEOBoost It’s in the DOM!
  8. 8. Max Prin | @maxxeight #TechSEOBoost HOWEVER…
  9. 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. 10. Max Prin | @maxxeight #TechSEOBoost CRAWLING
  11. 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. 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. 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. 14. Max Prin | @maxxeight #TechSEOBoost Internal Linking onclick + window.location ≠ <a href=”link.html”>
  15. 15. Max Prin | @maxxeight #TechSEOBoost RENDERING
  16. 16. Max Prin | @maxxeight #TechSEOBoost Blocked Resources (robots.txt)
  17. 17. Max Prin | @maxxeight #TechSEOBoost Content Loading
  18. 18. Max Prin | @maxxeight #TechSEOBoost Content Loading
  19. 19. Max Prin | @maxxeight #TechSEOBoost HTML Snapshots (“pre-rendering”) AJAX-crawling scheme User-agent (bot) detection Hybrid rendering / Isomorphic JavaScript
  20. 20. Max Prin | @maxxeight #TechSEOBoost INDEXING
  21. 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. 22. Max Prin | @maxxeight #TechSEOBoost TOOLS
  23. 23. Max Prin | @maxxeight #TechSEOBoost Google Search Console – Fetch & Render
  24. 24. Max Prin | @maxxeight #TechSEOBoost TechnicalSEO.com – Fetch & Render
  25. 25. Max Prin | @maxxeight #TechSEOBoost SEO Crawlers
  26. 26. Max Prin | @maxxeight #TechSEOBoost Chrome Dev Tools: Console - Lighthouse
  27. 27. Max Prin | @maxxeight #TechSEOBoost THANK YOU! @maxxeight

×