Presented at Distilled's ProSEO (now called 'SearchLove') conference in Boston, May 2011.
The focus was on why new technologies can help you win in the SEO game - and some particularly useful tech that you can start using straight away.
This was also the presentation where I formally announced my own webapp, Linkstant - the instant link alert tool. It's available for you to use at:
http://www.linkstant.com
Feel free to get in touch if you have any particular questions about this presentation.
4. Why do you care? Build Faster Websites
Example data via: http://ezlocal.com/blog/post/page-speed-vs-pages-crawled.aspx
5. Why do you care? First Movers Get Benefits from Google
Recipes: http://www.google.com/support/webmasters/bin/answer.py?answer=173379
Events: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506
6. Why do you care? First Movers Get Links
Any link building tactic diminishes in effectiveness over time. New technologies are a smart way to
attract the interest of the Linkerati.
7. Why do you care? First Movers Get Links
http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
SVG Ranking Factors: http://www.andyjamesdavies.com/experiments/svg-two/
8. HTML5
It’s easy, once you’ve
read the directions.
9. Why do you care? First Movers Get Links
App launch website at: http://benthebodyguard.com/
10. HTML 5: Graphic.ly
A beautifully presented HTML5 graphic-novel interface, with Frank Miller-esque touches.
http://graphic.ly
11. HTML 5: Mag.Reevoo.Com
A weekend hack project to demonstrate some HTML5/CSS3 features.
http://mag.reevoo.com
14. CSS3: Text Stroke
Lots more at: http://www.css3files.com/ and
http://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/
17. CSS3: 39 Box Shadows, No Good Reason
A sample of the demos available at: http://www.viget.com/uploads/file/boxshadows/
Info: http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
18. AJAX
Looks more complicated
than it ought to be.
19. Use jQuery.
http://jquery.com/
You can thank me later.
20. AJAX: The Old Way Sucks
www.example.com/shop
www.example.com/shop#cameras
www.example.com/shop#DVDs
www.example.com/shop#laptops
This sucks: link juice doesn’t go to the correct places.
21. AJAX: The Interim Way Kind of Sucks
www.example.com/shop#!DVDs
www.example.com/shop?_escaped_fragment_=DVDs
Info + Demo: http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content
22. AJAX: Twitter’s Implementation
twitter.com/RobOusbey
302 Google indexes
the content here.
twitter.com/#!/RobOusbey
200
ROBOTS
USERS Google translates it to:
See the page here. twitter.com/?_escaped_fragment_=/RobOusbey
NON-JS USERS
Not so much.
Why? Why would anyone do this? It really f/#!/ng sucks.
23. AJAX: Gawker’s Implementation
gawker.com/category/post-title-12345.php
302
gawker.com/#!12345/post-title
200
ROBOTS
USERS Google translates it to:
See the page here. gawker.com/?_escaped_fragment_=12345/post-title
200
NON-US USERS Allows Google to index
Redirects to home page. content here.
25. AJAX: The New Implementation
$('nav a').click(function(e) { When someone clicks the link…
url = $(this).attr("href");
$.getJSON("content.php",
{cid: url, format: 'json'},
function(json) {
$.each(json, function(key, value){ … load content in with AJAX …
$(key).html(value);
});
});
window.history.pushState('object', 'New Title', url); … change the URL …
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
e.preventDefault(); … but don’t refresh the page.
}
26. history.pushState()
history.replaceState()
Very basic .pushState() demo published at http://html5.gingerhost.com
See the technology in use on any blogspot blog, eg: thesartorialist.blogspot.com/view/sidebar/
More info: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
31. APIs: Google’s APIs
Android Rendering API Honeycomb API
Android Accessibility API Near Field Communications API
Android Marketplace API Brain API
Buzz API Google eBooks API
Latitude API In-App Payments API
Translate API Google Shopping API
* Google Places API App Engine Pipeline API
Blogger Admin API Google Fusion Tables API
Google Apps APIs App Engine Task Queue API
Google Maps API * Machine Learning Prediction API
Google Earth API YouTube Caption API
App Engine Full Text Search API YouTube Data API
Google Checkout API Google Charts API
* Google One Pass: Paywall API * Google Page Speed API
Google Tasks API
* Android Open Accessory API & Development Kit
http://developer.android.com/guide/topics/usb/adk.html
http://www.google.com/enterprise/prediction/
36. Polling
Let’s be honest,
it’s kind of old fashioned.
37. Polling: Server to Server
Anything new?
Anything new?
Anything new?
Publisher Reader
Anything new?
Anything new?
For the love all that is good,
YES.
Anything new?
This type of repeated polling is unnecessary; it puts additional load on the
publisher, and the subscriber has to downloads lots of data that it doesn’t need to.
38. Polling: Publisher / Subscriber
1: Anything new?
Hub 2: I’ll let
Publisher you know. Subscriber
3: I’ve got
new content! 4: There’s
something new!
http://code.google.com/p/pubsubhubbub/
http://code.google.com/apis/pubsubhubbub/
39. Polling: Browser to Server
Anything new?
Anything new?
Web Anything new? Web
Server Anything new? Browser
Anything new?
For the love all that is good,
YES.
Anything new?
Examples: Twitter, webmail, etc.
In this case, solutions include clever things like long-polling and websockets.