#SMX #23A2 @maxxeight
SEO Best Practices for JavaScript
What To Do When
Google Can't
Understand Your
JavaScript

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
How Search Engines Typically Work

#SMX #23A2 @maxxeight
Everything is there!

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
Web Development Technologies

#SMX #23A2 @maxxeight
Search Engines’ Mission:
Serving the best result

#SMX #23A2 @maxxeight
No page title
No content
Etc.

#SMX #23A2 @maxxeight
It’s in the DOM!

#SMX #23A2 @maxxeight
How Search Engines Typically Work
Render “Understanding web pages better”

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
So, what now?

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
– 1 unique “clean” URL per piece of content (and vice-versa)
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight
URL Structures (with AJAX websites)
 Fragment Identifier: example.com/#url
– Not supported. Ignored. URL = example.com
 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 from the History API
– Must return a 200 status code when loaded directly

#SMX #23A2 @maxxeight
History API - pushState()

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
– 1 unique “clean” URL per piece of content (and vice-versa)
 Rendering
– Load content automatically, not based on user interaction (click,
mouseover, scroll)
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
– 1 unique “clean” URL per piece of content (and vice-versa)
 Rendering
– Load content automatically, not based on user interaction (click,
mouseover, scroll)
– the 5-second rule
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight
Google Fetch & Render PageSpeed Insights
The 5-second rule

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
– 1 unique “clean” URL per piece of content (and vice-versa)
 Rendering
– Load content automatically, not based on user interaction (click,
mouseover, scroll)
– the 5-second rule
– Avoid JavaScript errors (bots vs. browsers)
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 HTML snapshots are only required with
uncrawlable URLs (#!)
 When used with clean URLs:
– 2 URLs requested for each content (crawl budget!)
 Served directly to (other) crawlers (Facebook,
Twitter, Linkedin, etc.)
 Matching the content in the DOM
 No JavaScript (except JSON-LD markup)
 Not blocked from crawling
The “Old” AJAX Crawling Scheme And HTML Snapshots
DOM HTML
Snapshot

#SMX #23A2 @maxxeight
 HTML snapshots are only required with
uncrawlable URLs (#!)
 When used with clean URLs:
– 2 URLs requested for each content (crawl budget!)
 Served directly to (other) crawlers (Facebook,
Twitter, Linkedin, etc.)
 Matching the content in the DOM
 No JavaScript (except JSON-LD markup)
 Not blocked from crawling
The “Old” AJAX Crawling Scheme And HTML Snapshots
DOM HTML
Snapshot

#SMX #23A2 @maxxeight
 Crawling
– Don’t block resources via robots.txt
– onclick + window.location != <a href=”link.html”>
– 1 unique “clean” URL per piece of content (and vice-versa)
 Rendering
– Load content automatically, not based on user interaction (click,
mouseover, scroll)
– the 5-second rule
– Avoid JavaScript errors (bots vs. browsers)
 Indexing
– Mind the order of precedence (SEO signals and content)
How To Make Sure Google Can Understand Your Pages

#SMX #23A2 @maxxeight
HTTP
Headers
HTML
Source
DOM
HTML
Snapshot

#SMX #23A2 @maxxeight
 Google cache (unless HTML snapshots)
Tools For SEO And JavaScript

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Google cache (unless HTML snapshots)
 Google Fetch & Render (Search Console)
– limitation in terms of bytes (~200 KBs)
– doesn’t show HTML snapshot (DOM)
Tools For SEO And JavaScript

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Google cache (unless HTML snapshots)
 Google Fetch & Render (Search Console)
– limitation in terms of bytes (~200 KBs)
– doesn’t show HTML snapshot (DOM)
 Fetch & Render As Any Bot (TechnicalSEO.com)
Tools For SEO And JavaScript

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Google cache (unless HTML snapshots)
 Google Fetch & Render (Search Console)
– limitation in terms of bytes (~200 KBs)
– doesn’t show HTML snapshot (DOM)
 Fetch & Render As Any Bot (TechnicalSEO.com)
 Chrome DevTools (JavaScript Console)
Tools For SEO And JavaScript

#SMX #23A2 @maxxeight

#SMX #23A2 @maxxeight
 Google cache (unless HTML snapshots)
 Google Fetch & Render (Search Console)
– limitation in terms of bytes (~200 KBs)
– doesn’t show HTML snapshot (DOM)
 Fetch & Render As Any Bot (TechnicalSEO.com)
 Chrome DevTools (JavaScript Console)
 SEO Crawlers
– ScreamingFrog
– Botify
– Scalpel (Merkle proprietary tool)
Tools For SEO And JavaScript

#SMX #23A2 @maxxeight
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX