how to make java script crawlable in a responsive publishing world

MARCH 5, 2015

HOW TO MAKE

JAVASCRIPT CRAWLABLE IN A REPSONSIVE PUBLISHING WORLD

Eric Wu

Sr. Director, SEO & SEM

Edmunds.com

@eywu

searchmarketingexpo.com@eywu

#SMX #32A


#SMX #32A

Quote conflated from my favorite ruby XML parser » http://nokogiri.org/

Speed, Performance, and Human Perception » https://www.youtube.com/watch?v=7ubJzEi3HuA

SERoundtable Timeline Links » http://www.seroundtable.com/google-javascript-webmaster-tools-

18602.html

Googlebot/Test External JS » http://www.seroundtable.com/archives/000236.html

Googlebot Uses Onsite Live Chat » http://www.seroundtable.com/archives/003492.html

Spider’s View on Web 2.0 » http://googlewebmastercentral.blogspot.com/2007/11/spiders-view-of-web-

20.html

AJAX Crawlability Proposal » http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-

ajax-crawlable.html

Caffine Rollout » http://googlewebmastercentral.blogspot.com/2010/06/our-new-search-index-

caffeine.html

Instant Previews »

http://googleblog.blogspot.com/2010/11/beyond-instant-results-instant-previews.html

http://googlewebmastercentral.blogspot.com/2010/11/instant-previews.html

http://googlewebmastercentral.blogspot.com/2011/11/get-post-and-safely-surfacing-more-

of.html

https://sites.google.com/site/webmasterhelpforum/en/faq-instant-previews

Matt Cutts PSA: Don’t Block JS & CSS » http://www.seroundtable.com/googlebot-javascript-css-

14930.html

Matt Video: How Does Googlebot handle content loaded via AJAX? »

https://www.youtube.com/watch?v=_6mtiwQ3nvw

http://nokogiri.org/

https://www.youtube.com/watch?v=7ubJzEi3HuA

http://www.seroundtable.com/google-javascript-webmaster-tools-18602.html

http://www.seroundtable.com/archives/000236.html

http://www.seroundtable.com/archives/003492.html

http://googlewebmastercentral.blogspot.com/2007/11/spiders-view-of-web-20.html

http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

http://googlewebmastercentral.blogspot.com/2010/06/our-new-search-index-caffeine.html

http://googleblog.blogspot.com/2010/11/beyond-instant-results-instant-previews.html

http://googlewebmastercentral.blogspot.com/2010/11/instant-previews.html

http://googlewebmastercentral.blogspot.com/2011/11/get-post-and-safely-surfacing-more-of.html

https://sites.google.com/site/webmasterhelpforum/en/faq-instant-previews

http://www.seroundtable.com/googlebot-javascript-css-14930.html

https://www.youtube.com/watch?v=_6mtiwQ3nvw


#SMX #32A

Zineb Ait Bahajji PSA on G+: https://plus.google.com/+ZinebAitBahajji/posts/Bs9ycybZCbT

GWT Fetch & Render » http://googlewebmastercentral.blogspot.com/2014/05/rendering-pages-with-

fetch-as-google.html

Google Blog: Infinite Scroll Recommendations & Example »

http://googlewebmastercentral.blogspot.com/2014/02/infinite-scroll-search-friendly.html

LA Times Reimagined by Code and Theory » http://www.codeandtheory.com/things-we-make/the-los-

angeles-times-reimagined

Google Blog: Specify your canonical » http://googlewebmastercentral.blogspot.com/2009/02/specify-

your-canonical.html

Google Blog: Pagination with rel=“next” and rel=“prev” »

http://googlewebmastercentral.blogspot.com/2011/09/pagination-with-relnext-and-relprev.html

Google Blog: Video about Pagination » http://googlewebmastercentral.blogspot.com/2012/03/video-

about-pagination-with-relnext-and.html

One Page Wonder: Coverage on QZ » http://www.foliomag.com/2013/one-page-wonder-infinite-scroll

The Next Web Redesign Coverage » http://www.niemanlab.org/2012/10/the-next-web-redesigns-to-be-

more-app-like/

The Next Web Press Release »

http://thenextweb.pr.co/010a893a11df2bb61d981b2b0607c1b6784a5ab07b5ab100790b2bb3168a35f8

http://googlewebmastercentral.blogspot.com/2014/05/rendering-pages-with-fetch-as-google.html

http://googlewebmastercentral.blogspot.com/2014/02/infinite-scroll-search-friendly.html

http://www.codeandtheory.com/things-we-make/the-los-angeles-times-reimagined

http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html

http://googlewebmastercentral.blogspot.com/2011/09/pagination-with-relnext-and-relprev.html

http://googlewebmastercentral.blogspot.com/2012/03/video-about-pagination-with-relnext-and.html

http://www.foliomag.com/2013/one-page-wonder-infinite-scroll

http://www.niemanlab.org/2012/10/the-next-web-redesigns-to-be-more-app-like/

http://thenextweb.pr.co/010a893a11df2bb61d981b2b0607c1b6784a5ab07b5ab100790b2bb3168a35f8


#SMX #32A

USA Today Redesign »

http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/

http://designenvy.aiga.org/usa-today-website-redesign-fantasy-interactive/

http://www.businessinsider.com/usa-todays-homepage-redesigns-2012-9

Gawker 1 Year Later Success » http://thenextweb.com/insider/2012/02/02/remember-that-gawker-

redesign-a-years-worth-of-data-says-it-worked/

http://www.businessinsider.com/nick-denton-loses-bet-that-the-gawker-redesign-wouldnt-hurt-traffic-

2011-10

http://www.businessinsider.com/gawker-media-traffic-numbers-2011-4

Gawker Failed Coverage »

http://www.catchmyfame.com/2013/05/02/how-gawker-sabotaged-their-own-network-with-a-horrible-

new-layout/

http://www.theatlantic.com/technology/archive/2011/04/gawkers-traffic-numbers-are-worse-than-anyone-

anticipated/237594/

http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/

Paul Irish to Matt Cutts Video » https://www.youtube.com/watch?v=yiAF9VdvRPw

Google Developer Documentation on AJAX Crawlability »

https://developers.google.com/webmasters/ajax-crawling/

Browser Compatibility Chart » http://caniuse.com/#search=history

Breaking The Web With Hash Bangs »

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs

http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/

http://designenvy.aiga.org/usa-today-website-redesign-fantasy-interactive/

http://www.businessinsider.com/usa-todays-homepage-redesigns-2012-9

http://thenextweb.com/insider/2012/02/02/remember-that-gawker-redesign-a-years-worth-of-data-says-it-worked/

http://www.businessinsider.com/nick-denton-loses-bet-that-the-gawker-redesign-wouldnt-hurt-traffic-2011-10

http://www.businessinsider.com/gawker-media-traffic-numbers-2011-4

http://www.catchmyfame.com/2013/05/02/how-gawker-sabotaged-their-own-network-with-a-horrible-new-layout/

http://www.theatlantic.com/technology/archive/2011/04/gawkers-traffic-numbers-are-worse-than-anyone-anticipated/237594/

http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/

https://www.youtube.com/watch?v=yiAF9VdvRPw

https://developers.google.com/webmasters/ajax-crawling/

http://caniuse.com/#search=history

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs


#SMX #32A

Vox Cards: Legalization of Marijuana » http://www.vox.com/cards/marijuana-legalization/learn-more-

about-marijuana-legalization

Bing’s Duane Forrester says still no rel=canonical in http headers »

https://twitter.com/DuaneForrester/status/459387860358295552

Google Blog: A Faster Image Search » http://googlewebmastercentral.blogspot.com/2013/01/faster-

image-search.html

Google Says It’s Better for Webmasters » http://www.seroundtable.com/google-image-search-design-

16259.html

Ilya Grigork discussion around <plaintext> injection »

https://plus.google.com/+IlyaGrigorik/posts/S6j45VxNESB

Vox Workflow for Creating SVG Images » http://product.voxmedia.com/2013/11/25/5426880/polygon-

feature-design-svg-animations-for-fun-and-profit

One Solution to Responsive Images » http://www.smashingmagazine.com/2014/02/03/one-solution-to-

responsive-images/

Truly Responsive Images » http://davidwalsh.name/responsive-design

http://www.vox.com/cards/marijuana-legalization/learn-more-about-marijuana-legalization

https://twitter.com/DuaneForrester/status/459387860358295552

http://googlewebmastercentral.blogspot.com/2013/01/faster-image-search.html

http://www.seroundtable.com/google-image-search-design-16259.html

https://plus.google.com/+IlyaGrigorik/posts/S6j45VxNESB

http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit

http://www.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/

http://davidwalsh.name/responsive-design

how to make java script crawlable in a responsive publishing world

Marketing

pagination http

theory http

prev http

canonical http

external js http

timeline links http

makin rollout http

crawlability proposal