Modern Technical SEOWILL CRITCHLOW
Best practice says youshould remove allparameters from your URLs
That kind of“recommendation” doesn’tget things done
Jeff Bezos insists onrecommendations written in prose
Read Steve Yegge’s accidental reply-allhttps://plus.google.com/110981030061712822816/posts/AaygmbzVeRq
Presenting to Jeff is agauntlet that tends tosend people back to thecave to lick their wounds-- Steve Yegge
Imagine you’ve done all that– now be prepared to beasked “WHY?”
Site speed
You know why you care about speed
You need to care about the detailsYou’ve probably all used tools like Google PageSpeed Insights
A high score indicates little room forimprovement, while a lower score indicates moreroom for improvement. The PageSpeed S...
Why?Checking boxes doesn’tdelight users
Diagnose when sites are actually slowDifference between “Has a CDN” vs. “CDN speeds site up”
How?
Gather more site speed data in GAAddthisline
Understand waterfall reportsWe’re working on our own site speed. This is from DistilledU
But what does it mean??All the credit goes to Waterfalls 101 from Web Performance Today
Loads of rows?Combine assets(CSS, JS, images)All the credit goes to Waterfalls 101 from Web Performance Today
Seeing lots ofORANGE bars?Try “keep-alive” toavoid dropping TCPconnectionsAll the credit goes to Waterfalls 101 from Web P...
Big GREEN bars?Shorten them with server-sideimprovements and CDNsUse analytics to tell you which – segment geographically
Big BLUE bars?Shorten them by optimizing assetsShrink images, minify CSS / JS
Before and afterNote: blue bars look bigger because of combined assets but total blue is less
SEGWAYSEGUE
Robots.txt
Why?It’s amazing how often thisgets screwed up
Spot-quiz from DistilledUWith this robots.txt, what areas of thesite can googlebot crawl?
Spot-quiz from DistilledUAnswer: everything but the /secret/ directory – Robots.txt rules do not inheritWith this robots.t...
Set alerts for changes to Robots.txtI use Server Density [disclaimer: we’re investors] – see how here
SEGWAYSEGUE
Mobile and Internationalhave similar technicalchallenges
m.t.www..co.uk.de.es.frOne site or more?
Sets ofinternationalsites groupwith hreflang.co.uk.de.es.frHREFLANG
Sets of mobilesites groupwith alternatem.t.www.ALTERNATE
rel=alternate
Why?Declare a canonical pageand a mobile version
Do a searchlike this onthe mobile
When youclickthrough, youend up onthe mobileversion
It’s hard to tell, but there’s noredirectThis link actually goes to the m.version specified with arel=alternateBut the tit...
Who links whilemobile?Desktop pages accrue all the authority
Check all of this with Chrome mobileemulationSettings  Developer Tools  cog (bottom right)  Overrides
“Vary” header
Why?Change your page based onuser-agent without worryingabout cloakingRESS – REsponsive with Server Side
HTTP headercurl -I www.example.com
HTTP headercurl -I www.example.com
Modern meta information
Why?Control how your pageslook when shared
Do better than this kind of shareActually, I checked and WSJ does have og: tags – specifying that image so maybe it’sdelib...
Twitter cardsAllow control of thetweet versus thebasic:
Twitter cardsAllow control of thetweet versus thebasic:
Implement Twitter CardsGet a competitive advantage and sort this out now (stats from BuiltWith)
SEGWAYSEGUE
JavaScript
Why?The days of “googlebotcan’t execute JS so I don’tneed to understand it” aregone
Anything beyond verybasic customizationof analytics coderesults in you writingcustom JavaScriptThis is a screenshot of the...
Sidenote: not all Google Analyticshas to be JavaScript-basedWe were toying with pushing Googlebot visits to GA via a serve...
Get to grips with jQuerySo much easier than just JavaScript
For example, Optimizely tests arebuilt from jQueryThis is a live test on the Distilled website
Luckily, learning is easierthan ever
DebuggingChrome ships with some powerful debugging toolsCTRL+SHIFT+J
But alert() and console.log() areyour friends
Right-click  Inspect ElementHighlight active DIVs and test changes immediately
You can even edit pages here tomock things upObviously there are more useful things to do with this super power
AJAX and PushState
These buttons switch stories
URLchangedwithoutthe pagereloading
Contentchangedvia AJAX
It can be hard for JS and server towork togetherNode.js on the server?
Why?You’re going to recommendit or encounter it in a siteaudit
And, incidentally, youshould – it’s great toseparate content frompresentation
How do you audit AJAX?
URLs load contentSpot-check with a browser + disabled js. Test with a crawler
Links are HTML linksCTRL+U is view source in Chrome on Windows – learn your shortcuts
…and the href is the same as thePushStateCTRL+U is view source in Chrome on Windows – learn your shortcuts
For an idea of thecomplexity…
Here’s an example of a beautiful siteFast CoEXIST
Thatredirects toa mobilesitehttp://www.fastcoexist.com/1682002/this-24-year-old-entrepreneur-raised-300000-by-wearing-dad-...
That loadscontent viaAJAXEmptyHTML
Infinite Scroll
This is what a mashablepage looks like when youload it
When you keep scrolling moreloads under your mouse
When you keep scrolling moreloads under your mouse
Why?You’re going to encounter itin a site audit
How do you audit infinitescroll?
Can you get to all these links withoutscroll-loading?Make sure there is a (traditionally) crawlable navigation (Tips here)
Can you see all the importantcontent without the scroll-loading?Or at least check that it’s getting indexed
The state ofJavaScript indexation
We know that FB comments can beindexedSee, for example this page whose JS comments are indexed
Is it worth it though?
TechCrunch admits thatusing Facebook commentsdrove away most of theircommenters-- techdirt [original TC article]We have se...
When Matt said this in 2011Original tweet
This gives Google …the ability toread comments in AJAX orJavaScript, such as Facebookcomments or Disqus comments-- SearchE...
Disqus is growing fast by the waySites using Disqus vs. FB comments – data from BuiltWith
Disqus comments can be indexedDisqus via API in source code indexed
But the JS version can’tHas anyone seen it work anywhere?Disqus via JavaScript not indexed
We have seen aggressive crawlingof things that look like URLs<a href="#" onclick="redirect(this);return false;" redir-to="...
It doesn’t look like arbitraryJavaScript execution
I would always specify thatall content and all links canbe found without JavaScript
When you’re specifyingsomething, you can be as prescriptiveas you like
When you are auditing, you should bemore cautious of the cost of changes
If an audit shows contentbeing pulled in via JSbut it’s getting indexedI’d leave well enough alone
If links are only accessiblevia JS, I would suggestfixing that even if pages arebeing discovered
Go write technical recommendationslike you’re presenting to this guy
Thanks.Any questions?WILL CRITCHLOWwill.critchlow@distilled.net@willcritchlow
Image credits:http://kilocopter.deviantart.com/art/Birthday-Unicorns-166578859http://www.flickr.com/photos/dachis/55367607...
SearchLove Boston 2013_Will Critchlow_Technical SEO
Prochain SlideShare
Chargement dans…5
×

SearchLove Boston 2013_Will Critchlow_Technical SEO

48 346 vues

Publié le

Publié dans : Technologie, Design
  • Soyez le premier à commenter

SearchLove Boston 2013_Will Critchlow_Technical SEO

  1. Modern Technical SEOWILL CRITCHLOW
  2. Best practice says youshould remove allparameters from your URLs
  3. That kind of“recommendation” doesn’tget things done
  4. Jeff Bezos insists onrecommendations written in prose
  5. Read Steve Yegge’s accidental reply-allhttps://plus.google.com/110981030061712822816/posts/AaygmbzVeRq
  6. Presenting to Jeff is agauntlet that tends tosend people back to thecave to lick their wounds-- Steve Yegge
  7. Imagine you’ve done all that– now be prepared to beasked “WHY?”
  8. Site speed
  9. You know why you care about speed
  10. You need to care about the detailsYou’ve probably all used tools like Google PageSpeed Insights
  11. A high score indicates little room forimprovement, while a lower score indicates moreroom for improvement. The PageSpeed Scoredoes not measure the time it takes for a page toload.-- GoogleWait, what?
  12. Why?Checking boxes doesn’tdelight users
  13. Diagnose when sites are actually slowDifference between “Has a CDN” vs. “CDN speeds site up”
  14. How?
  15. Gather more site speed data in GAAddthisline
  16. Understand waterfall reportsWe’re working on our own site speed. This is from DistilledU
  17. But what does it mean??All the credit goes to Waterfalls 101 from Web Performance Today
  18. Loads of rows?Combine assets(CSS, JS, images)All the credit goes to Waterfalls 101 from Web Performance Today
  19. Seeing lots ofORANGE bars?Try “keep-alive” toavoid dropping TCPconnectionsAll the credit goes to Waterfalls 101 from Web Performance Today
  20. Big GREEN bars?Shorten them with server-sideimprovements and CDNsUse analytics to tell you which – segment geographically
  21. Big BLUE bars?Shorten them by optimizing assetsShrink images, minify CSS / JS
  22. Before and afterNote: blue bars look bigger because of combined assets but total blue is less
  23. SEGWAYSEGUE
  24. Robots.txt
  25. Why?It’s amazing how often thisgets screwed up
  26. Spot-quiz from DistilledUWith this robots.txt, what areas of thesite can googlebot crawl?
  27. Spot-quiz from DistilledUAnswer: everything but the /secret/ directory – Robots.txt rules do not inheritWith this robots.txt, what areas of thesite can googlebot crawl?
  28. Set alerts for changes to Robots.txtI use Server Density [disclaimer: we’re investors] – see how here
  29. SEGWAYSEGUE
  30. Mobile and Internationalhave similar technicalchallenges
  31. m.t.www..co.uk.de.es.frOne site or more?
  32. Sets ofinternationalsites groupwith hreflang.co.uk.de.es.frHREFLANG
  33. Sets of mobilesites groupwith alternatem.t.www.ALTERNATE
  34. rel=alternate
  35. Why?Declare a canonical pageand a mobile version
  36. Do a searchlike this onthe mobile
  37. When youclickthrough, youend up onthe mobileversion
  38. It’s hard to tell, but there’s noredirectThis link actually goes to the m.version specified with arel=alternateBut the title, URL, description allcome from the desktop version
  39. Who links whilemobile?Desktop pages accrue all the authority
  40. Check all of this with Chrome mobileemulationSettings  Developer Tools  cog (bottom right)  Overrides
  41. “Vary” header
  42. Why?Change your page based onuser-agent without worryingabout cloakingRESS – REsponsive with Server Side
  43. HTTP headercurl -I www.example.com
  44. HTTP headercurl -I www.example.com
  45. Modern meta information
  46. Why?Control how your pageslook when shared
  47. Do better than this kind of shareActually, I checked and WSJ does have og: tags – specifying that image so maybe it’sdeliberate branding
  48. Twitter cardsAllow control of thetweet versus thebasic:
  49. Twitter cardsAllow control of thetweet versus thebasic:
  50. Implement Twitter CardsGet a competitive advantage and sort this out now (stats from BuiltWith)
  51. SEGWAYSEGUE
  52. JavaScript
  53. Why?The days of “googlebotcan’t execute JS so I don’tneed to understand it” aregone
  54. Anything beyond verybasic customizationof analytics coderesults in you writingcustom JavaScriptThis is a screenshot of the DistilledU module on customizing GA
  55. Sidenote: not all Google Analyticshas to be JavaScript-basedWe were toying with pushing Googlebot visits to GA via a server-side callYou can also use a GET request by constructing URLs like this:http://www.google-analytics.com/collect?v=1&tid=UA-1618063-1&cid=122303&t=pageview&dp=%2FTest-Page&dt=Hi%20Im%20the%20Googlebot&dh=distilled.net&cd1*=192.168.1.1&cs=googlebot
  56. Get to grips with jQuerySo much easier than just JavaScript
  57. For example, Optimizely tests arebuilt from jQueryThis is a live test on the Distilled website
  58. Luckily, learning is easierthan ever
  59. DebuggingChrome ships with some powerful debugging toolsCTRL+SHIFT+J
  60. But alert() and console.log() areyour friends
  61. Right-click  Inspect ElementHighlight active DIVs and test changes immediately
  62. You can even edit pages here tomock things upObviously there are more useful things to do with this super power
  63. AJAX and PushState
  64. These buttons switch stories
  65. URLchangedwithoutthe pagereloading
  66. Contentchangedvia AJAX
  67. It can be hard for JS and server towork togetherNode.js on the server?
  68. Why?You’re going to recommendit or encounter it in a siteaudit
  69. And, incidentally, youshould – it’s great toseparate content frompresentation
  70. How do you audit AJAX?
  71. URLs load contentSpot-check with a browser + disabled js. Test with a crawler
  72. Links are HTML linksCTRL+U is view source in Chrome on Windows – learn your shortcuts
  73. …and the href is the same as thePushStateCTRL+U is view source in Chrome on Windows – learn your shortcuts
  74. For an idea of thecomplexity…
  75. Here’s an example of a beautiful siteFast CoEXIST
  76. Thatredirects toa mobilesitehttp://www.fastcoexist.com/1682002/this-24-year-old-entrepreneur-raised-300000-by-wearing-dad-s-wool-shirt-for-100-dayshttp://m.fastcoexist.com/?m=fastcoexist/node/1682002&url=http://www.fastcoexist.com/1682002/this-24-year-old-entrepreneur-raised-300000-by-wearing-dad-s-wool-shirt-for-100-days#1&
  77. That loadscontent viaAJAXEmptyHTML
  78. Infinite Scroll
  79. This is what a mashablepage looks like when youload it
  80. When you keep scrolling moreloads under your mouse
  81. When you keep scrolling moreloads under your mouse
  82. Why?You’re going to encounter itin a site audit
  83. How do you audit infinitescroll?
  84. Can you get to all these links withoutscroll-loading?Make sure there is a (traditionally) crawlable navigation (Tips here)
  85. Can you see all the importantcontent without the scroll-loading?Or at least check that it’s getting indexed
  86. The state ofJavaScript indexation
  87. We know that FB comments can beindexedSee, for example this page whose JS comments are indexed
  88. Is it worth it though?
  89. TechCrunch admits thatusing Facebook commentsdrove away most of theircommenters-- techdirt [original TC article]We have seen a few mis-steps from FB on the comment front
  90. When Matt said this in 2011Original tweet
  91. This gives Google …the ability toread comments in AJAX orJavaScript, such as Facebookcomments or Disqus comments-- SearchEngineLand [emphasis mine]Much of the coverage was similar to this
  92. Disqus is growing fast by the waySites using Disqus vs. FB comments – data from BuiltWith
  93. Disqus comments can be indexedDisqus via API in source code indexed
  94. But the JS version can’tHas anyone seen it work anywhere?Disqus via JavaScript not indexed
  95. We have seen aggressive crawlingof things that look like URLs<a href="#" onclick="redirect(this);return false;" redir-to="$$$start$$$www/ratedpeople/com???find???trade???greater-london???little-ilford" rel=nofollow f="Brenda"l="Manor">www.ratedpeople.com</a>function redirect(elem) {url = $(elem).attr(redir-to).replace(///g,.).replace(/???/g,/).replace($$$start$$$,http://)document.location.href = url;}Worth reading the original announcement from Google – especially GET vs POST
  96. It doesn’t look like arbitraryJavaScript execution
  97. I would always specify thatall content and all links canbe found without JavaScript
  98. When you’re specifyingsomething, you can be as prescriptiveas you like
  99. When you are auditing, you should bemore cautious of the cost of changes
  100. If an audit shows contentbeing pulled in via JSbut it’s getting indexedI’d leave well enough alone
  101. If links are only accessiblevia JS, I would suggestfixing that even if pages arebeing discovered
  102. Go write technical recommendationslike you’re presenting to this guy
  103. Thanks.Any questions?WILL CRITCHLOWwill.critchlow@distilled.net@willcritchlow
  104. Image credits:http://kilocopter.deviantart.com/art/Birthday-Unicorns-166578859http://www.flickr.com/photos/dachis/5536760790/http://www.flickr.com/photos/matthigh/3687338082/http://www.flickr.com/photos/dudaphoto/5582847355/http://www.flickr.com/photos/jurvetson/5129303018/

×