Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Optimising AJAX Applications for Organic Search
➡ Run DeCabbit Consultancy doing SEO, PPC, Social Media and integrated
marketing campaigns - working with bloggers for lin...
Agenda
WTF - AJAX, JS, CSS, & SEO
How to deal with technologies that aren’t favoured by
Google such as AJAX, JS and Flash
...
NOTE: I assume you
either know the basics
of SEO or have an
expert on hand. This
session does not cover
broad, basic SEO.
...
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 yo...
WTF - AJAX, JS, CSS, & SEO
AJAX
AJAX = Asynchronous JavaScript and XML
The method of exchanging data with a server, and updating
parts of a web page ...
JavaScript
An object-oriented computer programming language
commonly used to create interactive effects within web
browser...
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
@Ju...
How to deal with
technologies that
aren’t favoured by
Google such as
AJAX, JS and Flash
Flash
2005 called and wanted its website back
SRSLY
HTML5 is the future
@JudithLewis
@Decabbit
JavaScript
@JudithLewis
@Decabbit
JavaScript
Adam Audette and Merkle | RKG tested Google’s ability
to spider and understand/render JS
TL;DR – it does, and i...
JavaScript
It ain’t pretty but Google see all, knows all
@JudithLewis
@Decabbit
ViewSource
@JudithLewis
@Decabbit
Inspect Element
@JudithLewis
@Decabbit
AJAX
AngularJS
Ngnix
Varnish
Server-side pre-rendered code
Hashbang (#!)
Pretty URLs vs Ugly URLs
@JudithLewis
@Decabbit
AJAX
It’s a brave new world of AJAX site optimisation
@JudithLewis
@Decabbit
19
Making AJAX
SEO Friendly
Implementing <HEAD> Elements Using JS
@JudithLewis
@Decabbit
Infinite Scroll
Break it up into non-
duplicating content “pages”
Structure URLs for search-
engine friendliness
Think abo...
Breaking up InfiniteScroll
Break up page into chunks which don’t duplicate and ensure
Google can see the chunks clearly
Co...
Infinite Scroll
Use rel=next and rel=prev in
<head> of the page
(pagination in <body> is
ignored by Google)
Implement
repl...
pushState and replaceState
pushState is an HTML5 method that dictates the load
process. pushState will draw from the state...
rel=prev and rel=next
@JudithLewis
@Decabbit
26
Key
Takeaways
Key Takeaways
“Progressive Enhancement Rules” should be your new
mantra
Ensure all URLs are crawlable
Allow Google to spid...
28
References
Manipulating the browser history
https://developer.mozilla.org/en-
US/docs/Web/API/History_API
http://searcheng...
You Can Stalk Me Online
Twitter: @JudithLewis
@Decabbit
LinkedIn: http://uk.linkedin.com/in/judithlewis
Google+: https://p...
THANK YOU FOR YOUR TIME
31
Upcoming SlideShare
Loading in …5
×

Optimising AJAX Applications for Organic Search

1,381 views

Published on

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 ;-)

Published in: Internet
  • Be the first to comment

Optimising AJAX Applications for Organic Search

  1. 1. Optimising AJAX Applications for Organic Search
  2. 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. 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. 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. 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
  6. 6. WTF - AJAX, JS, CSS, & SEO
  7. 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. 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. 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. 10. How to deal with technologies that aren’t favoured by Google such as AJAX, JS and Flash
  11. 11. Flash 2005 called and wanted its website back SRSLY HTML5 is the future @JudithLewis @Decabbit
  12. 12. JavaScript @JudithLewis @Decabbit
  13. 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
  14. 14. JavaScript It ain’t pretty but Google see all, knows all @JudithLewis @Decabbit
  15. 15. ViewSource @JudithLewis @Decabbit
  16. 16. Inspect Element @JudithLewis @Decabbit
  17. 17. AJAX AngularJS Ngnix Varnish Server-side pre-rendered code Hashbang (#!) Pretty URLs vs Ugly URLs @JudithLewis @Decabbit
  18. 18. AJAX It’s a brave new world of AJAX site optimisation @JudithLewis @Decabbit
  19. 19. 19 Making AJAX SEO Friendly
  20. 20. Implementing <HEAD> Elements Using JS @JudithLewis @Decabbit
  21. 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. 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. 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. 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
  25. 25. rel=prev and rel=next @JudithLewis @Decabbit
  26. 26. 26 Key Takeaways
  27. 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
  28. 28. 28
  29. 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. 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
  31. 31. THANK YOU FOR YOUR TIME 31

×