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

Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

Apr 21, 2017

Download

Marketing

Max Prin
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeightSEO Best Practices for JavaScript

What To Do When Google

Can't Understand

Your JavaScript

Page 2: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 3: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

How Search Engines Typically Work

Page 4: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Everything is there!

Page 5: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 6: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 7: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Web Development Technologies

Page 8: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Search Engines’ Mission:

Serving the best result

Page 9: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

No page titleNo content

Etc.

Page 10: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

It’s in the DOM!

Page 11: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

How Search Engines Typically Work

Render “Understanding web pages

better”

Page 12: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 13: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

So, what now?

Page 14: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Crawling– Don’t block resources via robots.txt

How To Make Sure Google Can Understand Your Pages

Page 15: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 16: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 17: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 18: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 19: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 20: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 21: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeightHistory API - pushState()

Page 22: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 23: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 24: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 25: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Google Fetch & Render PageSpeed Insights

The 5-second rule

Page 26: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 27: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 28: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

DOMHTML

Snapshot

Page 29: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

DOMHTML

Snapshot

Page 30: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 31: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

HTTP Headers

HTML Source DOM

HTML Snapsh

ot

Page 32: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Google cache (unless HTML snapshots)

Tools For SEO And JavaScript

Page 33: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 34: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 35: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 36: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 37: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 38: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 39: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeight

Page 40: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#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

Page 41: Max Prin - SMX West 2017 - What to do when Google can't understand your JavaScript

#SMX #23A2 @maxxeightLEARN MORE: UPCOMING @SMX EVENTS

THANK YOU! SEE YOU AT THE NEXT #SMX