This deck is from #LAC2016 where I stepped in last minute to do a session on optimising AJAX for organic search pitched at beginner level with expectation some intermediate level. Well received by audience it seemed as no one walked out after the TL;DR ;-)
2. ➡ Run DeCabbit Consultancy doing SEO, PPC, Social Media and integrated
marketing campaigns - working with bloggers for link building
➡ Got on the Internet in 1986 at my school programming lab
➡ Working online with search since 1996
➡ Worked in-house within e-Commerce, Publishing & High Tech
➡ Have worked with GalaCoral, Google (SEO for product sites), Orange, COI,
NatWest/RBS, National Gallery, CIPD, Fidelity, NBC Universal, Readers
Digest, Bayer, Family Search, Amadeus, AMD, AmEx, TotalJobs, Virgin.com,
Virgin Startup, Zopa, NSPCC, GE & more
➡ Chosen as a founding Modern Muse, contributed to book “Pimp My Site”,
judge of the UK, US & European Search Awards, one of the SEO Chicks, blog
on Huffington Post & run Decabbitolate.com food blog
AM I
Who Obligatory slide !
Judith Lewis
@JudithLewis
@Decabbit
3. Agenda
WTF - AJAX, JS, CSS, & SEO
How to deal with technologies that aren’t favoured by
Google such as AJAX, JS and Flash
How to make your AJAX website SEO friendly
@JudithLewis
@Decabbit
4. NOTE: I assume you
either know the basics
of SEO or have an
expert on hand. This
session does not cover
broad, basic SEO.
This session
mainly focuses
on AJAX
solutions
5. The TL;DR Version
History_API is all you
really need
Google now spiders
JS so that’s that
Ditch the Flash and
make AJAX your BFF
@JudithLewis
@Decabbit
7. AJAX
AJAX = Asynchronous JavaScript and XML
The method of exchanging data with a server, and updating
parts of a web page - without reloading the entire page
It’s a framework (unlike Flash), and requires no compiling
(unlike Flash)
AJAX is based on internet standards, and uses a combination
of:
XMLHttpRequest object (to retrieve data from a web server)
JavaScript/DOM (to display/use the data)
@JudithLewis
@Decabbit
8. JavaScript
An object-oriented computer programming language
commonly used to create interactive effects within web
browsers – no more reloading entire pages to display new or
updated information
Client-side JavaScript extends the core language by
supplying objects to control a browser and its Document
Object Model (DOM).
For example, client-side extensions allow an application to place
elements on an HTML form and respond to user events such as
mouse clicks, form input, and page navigation.
@JudithLewis
@Decabbit
9. It all boils down to…
What you see in the browser is not what you see in the
code – and search engines don’t like that
@JudithLewis
@Decabbit
10. How to deal with
technologies that
aren’t favoured by
Google such as
AJAX, JS and Flash
11. Flash
2005 called and wanted its website back
SRSLY
HTML5 is the future
@JudithLewis
@Decabbit
13. JavaScript
Adam Audette and Merkle | RKG tested Google’s ability
to spider and understand/render JS
TL;DR – it does, and it does it well – time to OPTIMISE (if you
haven’t bothered to this point)
SEO signals in the DOM (page titles, meta descriptions,
canonical tags, meta robots tags, etc.) are respected.
Content dynamically inserted in the DOM is also crawlable and
indexable.
In certain cases, the DOM signals may even take precedence
over contradictory statements in HTML source code.
@JudithLewis
@Decabbit
21. Infinite Scroll
Break it up into non-
duplicating content “pages”
Structure URLs for search-
engine friendliness
Think about “load more”
pagination
@JudithLewis
@Decabbit
22. Breaking up InfiniteScroll
Break up page into chunks which don’t duplicate and ensure
Google can see the chunks clearly
Consider canonical on the chunked, unique content URLs but
not the infinite scroll URL
What to avoid when creating URLs in AJAX
Do not use relative-time-based URL parameters
Do not use code-based language in your URL
Make sure that pages have optimal load times (remember –
page load time is a ranking factor so this is the SEO part)
@JudithLewis
@Decabbit
23. Infinite Scroll
Use rel=next and rel=prev in
<head> of the page
(pagination in <body> is
ignored by Google)
Implement
replaceState/pushState on
the infinite scroll page
@JudithLewis
@Decabbit
24. pushState and replaceState
pushState is an HTML5 method that dictates the load
process. pushState will draw from the state object (anything
serialised) and the URL to load the new content in the
sequence defined by the pagination.
Basically, pushState tells the browser what to load and display. This
is how Twitter implements its infinite scroll.
Alternatively (or additionally), you can use the replaceState
method for modifying the history entry or responding to user-
scrolling behaviour.
replaceState would respond to scroll actions or allow the user to
scroll backwards and view the pages that were loaded in the
pagination history
@JudithLewis
@Decabbit
27. Key Takeaways
“Progressive Enhancement Rules” should be your new
mantra
Ensure all URLs are crawlable
Allow Google to spider JS and CSS
Ensure you inject optimised <HEAD> elements into your
pages using JS
Chunk infinite scroll into non-duplicated “pages” utilising
canonical on chunks only
@JudithLewis
@Decabbit
29. References
Manipulating the browser history
https://developer.mozilla.org/en-
US/docs/Web/API/History_API
http://searchengineland.com/tested-googlebot-crawls-
javascript-heres-learned-220157
https://www.smashingmagazine.com/2015/11/technical-
seo-2015-wiring-websites-organic-search/
http://searchengineland.com/can-now-trust-google-crawl-
ajax-sites-235267
@JudithLewis
@Decabbit
30. You Can Stalk Me Online
Twitter: @JudithLewis
@Decabbit
LinkedIn: http://uk.linkedin.com/in/judithlewis
Google+: https://plus.google.com/+JudithLewis
Web: http://www.decabbit.com
Food Blog: http://MostlyAboutChocolate.com
HuffPost: http://www.huffingtonpost.co.uk/judith-lewis
SEO Blog: http://www.SEO-Chicks.com
ShideShare: http://www.slideshare.net/deCabbit/
...and the list goes on