View
3.972
Download
0
Category
Preview:
Citation preview
Max Prin | @maxxeight #TechSEOBoost
SEO Best Practices
For JavaScript-Based Websites
How to make sure search engines can “understand” your website
Max Prin | @maxxeight #TechSEOBoost
Max Prin | @maxxeight #TechSEOBoost
How (Advanced) Search Engines Work
Render “Understanding web pages better”
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.
Max Prin | @maxxeight #TechSEOBoost
Web Development Technologies
Max Prin | @maxxeight #TechSEOBoost
No page title
No content
Etc.
Max Prin | @maxxeight #TechSEOBoost
It’s in the DOM!
Max Prin | @maxxeight #TechSEOBoost
HOWEVER…
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.
Max Prin | @maxxeight #TechSEOBoost
CRAWLING
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
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
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
Max Prin | @maxxeight #TechSEOBoost
Internal Linking
onclick + window.location
≠<a href=”link.html”>
Max Prin | @maxxeight #TechSEOBoost
RENDERING
Max Prin | @maxxeight #TechSEOBoost
Blocked Resources (robots.txt)
Max Prin | @maxxeight #TechSEOBoost
Content Loading
Max Prin | @maxxeight #TechSEOBoost
Content Loading
Max Prin | @maxxeight #TechSEOBoost
HTML Snapshots (“pre-rendering”)
AJAX-crawling scheme
User-agent (bot) detection
Hybrid rendering / Isomorphic JavaScript
Max Prin | @maxxeight #TechSEOBoost
INDEXING
Max Prin | @maxxeight #TechSEOBoost
Main content gets
rendered here
Same title, description,
canonical tag, etc. for
every URL
Duplicated Meta Info Across URLs
Max Prin | @maxxeight #TechSEOBoost
TOOLS
Max Prin | @maxxeight #TechSEOBoost
Google Search Console – Fetch & Render
Max Prin | @maxxeight #TechSEOBoost
TechnicalSEO.com – Fetch & Render
Max Prin | @maxxeight #TechSEOBoost
SEO Crawlers
Max Prin | @maxxeight #TechSEOBoost
Chrome Dev Tools: Console - Lighthouse
Max Prin | @maxxeight #TechSEOBoost
THANK YOU!
@maxxeight
Recommended