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
Upcoming SlideShare
Loading in...5
×

SearchLove Boston 2013_Will Critchlow_Technical SEO

22,218

Published on

Published in: Technology, Design
0 Comments
41 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
22,218
On Slideshare
0
From Embeds
0
Number of Embeds
148
Actions
Shares
0
Downloads
189
Comments
0
Likes
41
Embeds 0
No embeds

No notes for slide
  • I know what you’re thinking
  • SearchLove Boston 2013_Will Critchlow_Technical SEO

    1. 1. Modern Technical SEOWILL CRITCHLOW
    2. 2. Best practice says youshould remove allparameters from your URLs
    3. 3. That kind of“recommendation” doesn’tget things done
    4. 4. Jeff Bezos insists onrecommendations written in prose
    5. 5. Read Steve Yegge’s accidental reply-allhttps://plus.google.com/110981030061712822816/posts/AaygmbzVeRq
    6. 6. Presenting to Jeff is agauntlet that tends tosend people back to thecave to lick their wounds-- Steve Yegge
    7. 7. Imagine you’ve done all that– now be prepared to beasked “WHY?”
    8. 8. Site speed
    9. 9. You know why you care about speed
    10. 10. You need to care about the detailsYou’ve probably all used tools like Google PageSpeed Insights
    11. 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. 12. Why?Checking boxes doesn’tdelight users
    13. 13. Diagnose when sites are actually slowDifference between “Has a CDN” vs. “CDN speeds site up”
    14. 14. How?
    15. 15. Gather more site speed data in GAAddthisline
    16. 16. Understand waterfall reportsWe’re working on our own site speed. This is from DistilledU
    17. 17. But what does it mean??All the credit goes to Waterfalls 101 from Web Performance Today
    18. 18. Loads of rows?Combine assets(CSS, JS, images)All the credit goes to Waterfalls 101 from Web Performance Today
    19. 19. Seeing lots ofORANGE bars?Try “keep-alive” toavoid dropping TCPconnectionsAll the credit goes to Waterfalls 101 from Web Performance Today
    20. 20. Big GREEN bars?Shorten them with server-sideimprovements and CDNsUse analytics to tell you which – segment geographically
    21. 21. Big BLUE bars?Shorten them by optimizing assetsShrink images, minify CSS / JS
    22. 22. Before and afterNote: blue bars look bigger because of combined assets but total blue is less
    23. 23. SEGWAYSEGUE
    24. 24. Robots.txt
    25. 25. Why?It’s amazing how often thisgets screwed up
    26. 26. Spot-quiz from DistilledUWith this robots.txt, what areas of thesite can googlebot crawl?
    27. 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. 28. Set alerts for changes to Robots.txtI use Server Density [disclaimer: we’re investors] – see how here
    29. 29. SEGWAYSEGUE
    30. 30. Mobile and Internationalhave similar technicalchallenges
    31. 31. m.t.www..co.uk.de.es.frOne site or more?
    32. 32. Sets ofinternationalsites groupwith hreflang.co.uk.de.es.frHREFLANG
    33. 33. Sets of mobilesites groupwith alternatem.t.www.ALTERNATE
    34. 34. rel=alternate
    35. 35. Why?Declare a canonical pageand a mobile version
    36. 36. Do a searchlike this onthe mobile
    37. 37. When youclickthrough, youend up onthe mobileversion
    38. 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. 39. Who links whilemobile?Desktop pages accrue all the authority
    40. 40. Check all of this with Chrome mobileemulationSettings  Developer Tools  cog (bottom right)  Overrides
    41. 41. “Vary” header
    42. 42. Why?Change your page based onuser-agent without worryingabout cloakingRESS – REsponsive with Server Side
    43. 43. HTTP headercurl -I www.example.com
    44. 44. HTTP headercurl -I www.example.com
    45. 45. Modern meta information
    46. 46. Why?Control how your pageslook when shared
    47. 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. 48. Twitter cardsAllow control of thetweet versus thebasic:
    49. 49. Twitter cardsAllow control of thetweet versus thebasic:
    50. 50. Implement Twitter CardsGet a competitive advantage and sort this out now (stats from BuiltWith)
    51. 51. SEGWAYSEGUE
    52. 52. JavaScript
    53. 53. Why?The days of “googlebotcan’t execute JS so I don’tneed to understand it” aregone
    54. 54. Anything beyond verybasic customizationof analytics coderesults in you writingcustom JavaScriptThis is a screenshot of the DistilledU module on customizing GA
    55. 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. 56. Get to grips with jQuerySo much easier than just JavaScript
    57. 57. For example, Optimizely tests arebuilt from jQueryThis is a live test on the Distilled website
    58. 58. Luckily, learning is easierthan ever
    59. 59. DebuggingChrome ships with some powerful debugging toolsCTRL+SHIFT+J
    60. 60. But alert() and console.log() areyour friends
    61. 61. Right-click  Inspect ElementHighlight active DIVs and test changes immediately
    62. 62. You can even edit pages here tomock things upObviously there are more useful things to do with this super power
    63. 63. AJAX and PushState
    64. 64. These buttons switch stories
    65. 65. URLchangedwithoutthe pagereloading
    66. 66. Contentchangedvia AJAX
    67. 67. It can be hard for JS and server towork togetherNode.js on the server?
    68. 68. Why?You’re going to recommendit or encounter it in a siteaudit
    69. 69. And, incidentally, youshould – it’s great toseparate content frompresentation
    70. 70. How do you audit AJAX?
    71. 71. URLs load contentSpot-check with a browser + disabled js. Test with a crawler
    72. 72. Links are HTML linksCTRL+U is view source in Chrome on Windows – learn your shortcuts
    73. 73. …and the href is the same as thePushStateCTRL+U is view source in Chrome on Windows – learn your shortcuts
    74. 74. For an idea of thecomplexity…
    75. 75. Here’s an example of a beautiful siteFast CoEXIST
    76. 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. 77. That loadscontent viaAJAXEmptyHTML
    78. 78. Infinite Scroll
    79. 79. This is what a mashablepage looks like when youload it
    80. 80. When you keep scrolling moreloads under your mouse
    81. 81. When you keep scrolling moreloads under your mouse
    82. 82. Why?You’re going to encounter itin a site audit
    83. 83. How do you audit infinitescroll?
    84. 84. Can you get to all these links withoutscroll-loading?Make sure there is a (traditionally) crawlable navigation (Tips here)
    85. 85. Can you see all the importantcontent without the scroll-loading?Or at least check that it’s getting indexed
    86. 86. The state ofJavaScript indexation
    87. 87. We know that FB comments can beindexedSee, for example this page whose JS comments are indexed
    88. 88. Is it worth it though?
    89. 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. 90. When Matt said this in 2011Original tweet
    91. 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. 92. Disqus is growing fast by the waySites using Disqus vs. FB comments – data from BuiltWith
    93. 93. Disqus comments can be indexedDisqus via API in source code indexed
    94. 94. But the JS version can’tHas anyone seen it work anywhere?Disqus via JavaScript not indexed
    95. 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. 96. It doesn’t look like arbitraryJavaScript execution
    97. 97. I would always specify thatall content and all links canbe found without JavaScript
    98. 98. When you’re specifyingsomething, you can be as prescriptiveas you like
    99. 99. When you are auditing, you should bemore cautious of the cost of changes
    100. 100. If an audit shows contentbeing pulled in via JSbut it’s getting indexedI’d leave well enough alone
    101. 101. If links are only accessiblevia JS, I would suggestfixing that even if pages arebeing discovered
    102. 102. Go write technical recommendationslike you’re presenting to this guy
    103. 103. Thanks.Any questions?WILL CRITCHLOWwill.critchlow@distilled.net@willcritchlow
    104. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×