Active AJAX based Active AJAX based Active AJAX based Active ...
Optimising AJAX Applications for Organic Search
-
Upload
judith-lewis -
Category
Internet
-
view
1.065 -
download
0
Transcript of Optimising AJAX Applications for Organic Search
Opt imis ing A JAX Appl icat ions fo r Organ ic Search
➡ 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 IWhoObligatory slide !
Judith Lewis
@JudithLewis@Decabbit
AgendaWTF - AJAX, JS, CSS, & SEOHow to deal with technologies that aren’t favoured by Google such as AJAX, JS and FlashHow to make your AJAX website SEO friendly
@JudithLewis@Decabbit
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
The TL;DR VersionHistory_API is all you really needGoogle now spiders JS so that’s thatDitch the Flash and make AJAX your BFF
@JudithLewis@Decabbit
WTF - AJAX, JS, CSS, & SEO
AJAXAJAX = Asynchronous JavaScript and XMLThe method of exchanging data with a server, and updating parts of a web page - without reloading the entire pageIt’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
JavaScriptAn object-oriented computer programming language commonly used to create interactive effects within web browsers – no more reloading entire pages to display new or updated informationClient-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
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
How to deal with technologies that aren’t favoured
by Google such as AJAX, JS and Flash
Flash2005 called and wanted its website back
SRSLY
HTML5 is the future
@JudithLewis@Decabbit
JavaScript
@JudithLewis@Decabbit
JavaScriptAdam Audette and Merkle | RKG tested Google’s ability to spider and understand/render JSTL;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
JavaScriptIt ain’t pretty but Google see all, knows all
@JudithLewis@Decabbit
ViewSource
@JudithLewis@Decabbit
Inspect Element
@JudithLewis@Decabbit
AJAXAngularJSNgnixVarnishServer-side pre-rendered codeHashbang (#!)Pretty URLs vs Ugly URLs
@JudithLewis@Decabbit
AJAXIt’s a brave new world of AJAX site optimisation
@JudithLewis@Decabbit
19
Drag picture to placeholder or click icon to add
Making AJAX SEO Friendly
Implementing <HEAD> Elements Using JS
@JudithLewis@Decabbit
Infinite ScrollBreak it up into non-duplicating content “pages”Structure URLs for search-engine friendlinessThink about “load more” pagination
@JudithLewis@Decabbit
Breaking up InfiniteScrollBreak up page into chunks which don’t duplicate and ensure Google can see the chunks clearlyConsider canonical on the chunked, unique content URLs but not the infinite scroll URLWhat to avoid when creating URLs in AJAX
Do not use relative- time- based URL parametersDo 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
Infinite ScrollUse 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
pushState and replaceStatepushState 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
rel=prev and rel=next
@JudithLewis@Decabbit
26
Drag picture to placeholder or click icon to add
Key Takeaways
Key Takeaways“Progressive Enhancement Rules” should be your new mantraEnsure all URLs are crawlableAllow Google to spider JS and CSSEnsure you inject optimised <HEAD> elements into your pages using JSChunk infinite scroll into non-duplicated “pages” utilising canonical on chunks only
@JudithLewis@Decabbit
28
ReferencesManipulating the browser history https://developer.mozilla.org/en-US/docs/Web/API/History_APIhttp://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157https://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
You Can Stalk Me OnlineTwitter: @JudithLewis
@DecabbitLinkedIn: http://uk.linkedin.com/in/judithlewisGoogle+: https://plus.google.com/+JudithLewisWeb: http://www.decabbit.comFood Blog: http://MostlyAboutChocolate.comHuffPost:http://www.huffingtonpost.co.uk/judith-lewisSEO Blog: http://www.SEO-Chicks.comShideShare: http://www.slideshare.net/deCabbit/...and the list goes on
THANK YOU FOR YOUR T IME31