The document provides technical recommendations for SEO, including: 1. Removing URL parameters, implementing rel="alternate" for mobile sites, and using HREFLANG tags to group international sites. It also recommends diagnosing actual site speed issues, implementing Twitter Cards, and getting familiar with JavaScript, jQuery, and debugging tools. 2. Auditing AJAX implementations to ensure all content and links are crawlable without JavaScript. It notes Google can now index some JavaScript-rendered content like Facebook comments. 3. When making recommendations, being prescriptive, but when auditing, being cautious of the costs of changes if content is already being indexed. Fix only what's necessary, not purely for technical purity.

1. Modern Technical SEO
WILL CRITCHLOW

2. Best practice says you
should remove all
parameters from your URLs

3. That kind of
“recommendation” doesn’t
get things done

4. Jeff Bezos insists on
recommendations written in prose

5. Read Steve Yegge’s accidental reply-all
https://plus.google.com/110981030061712822816/posts/AaygmbzVeRq

6. Presenting to Jeff is a
gauntlet that tends to
send people back to the
cave to lick their wounds
-- Steve Yegge

7. Imagine you’ve done all that
– now be prepared to be
asked “WHY?”

8. Site speed

9. You know why you care about speed

10. You need to care about the details
You’ve probably all used tools like Google PageSpeed Insights

11. A high score indicates little room for
improvement, while a lower score indicates more
room for improvement. The PageSpeed Score
does not measure the time it takes for a page to
load.
-- Google
Wait, what?

12. Why?
Checking boxes doesn’t
delight users

13. Diagnose when sites are actually slow
Difference between “Has a CDN” vs. “CDN speeds site up”

14. How?

15. Gather more site speed data in GA
Add
this
line

16. Understand waterfall reports
We’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 of
ORANGE bars?
Try “keep-alive” to
avoid dropping TCP
connections
All the credit goes to Waterfalls 101 from Web Performance Today

20. Big GREEN bars?
Shorten them with server-side
improvements and CDNs
Use analytics to tell you which – segment geographically

21. Big BLUE bars?
Shorten them by optimizing assets
Shrink images, minify CSS / JS

22. Before and after
Note: 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 this
gets screwed up

26. Spot-quiz from DistilledU
With this robots.txt, what areas of the
site can googlebot crawl?

27. Spot-quiz from DistilledU
Answer: everything but the /secret/ directory – Robots.txt rules do not inherit
With this robots.txt, what areas of the
site can googlebot crawl?

28. Set alerts for changes to Robots.txt
I use Server Density [disclaimer: we’re investors] – see how here

29. SEGWAYSEGUE

30. Mobile and International
have similar technical
challenges

31. m.
t.
www.
.co.uk
.de
.es
.fr
One site or more?

32. Sets of
international
sites group
with hreflang
.co.uk
.de
.es
.fr
HREFLANG

33. Sets of mobile
sites group
with alternate
m.
t.
www.
ALTERNATE

34. rel=alternate

35. Why?
Declare a canonical page
and a mobile version

36. Do a search
like this on
the mobile

37. When you
click
through, you
end up on
the mobile
version

38. It’s hard to tell, but there’s no
redirect
This link actually goes to the m.
version specified with a
rel=alternate
But the title, URL, description all
come from the desktop version

39. Who links while
mobile?
Desktop pages accrue all the authority

40. Check all of this with Chrome mobile
emulation
Settings  Developer Tools  cog (bottom right)  Overrides

41. “Vary” header

42. Why?
Change your page based on
user-agent without worrying
about cloaking
RESS – REsponsive with Server Side

43. HTTP header
curl -I www.example.com

44. HTTP header
curl -I www.example.com

45. Modern meta information

46. Why?
Control how your pages
look when shared

47. Do better than this kind of share
Actually, I checked and WSJ does have og: tags – specifying that image so maybe it’s
deliberate branding

48. Twitter cards
Allow control of the
tweet versus the
basic:

49. Twitter cards
Allow control of the
tweet versus the
basic:

50. Implement Twitter Cards
Get a competitive advantage and sort this out now (stats from BuiltWith)

51. SEGWAYSEGUE

52. JavaScript

53. Why?
The days of “googlebot
can’t execute JS so I don’t
need to understand it” are
gone

54. Anything beyond very
basic customization
of analytics code
results in you writing
custom JavaScript
This is a screenshot of the DistilledU module on customizing GA

55. Sidenote: not all Google Analytics
has to be JavaScript-based
We were toying with pushing Googlebot visits to GA via a server-side call
You 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%20I'm%20the%20Googlebot&dh=distilled.net&cd
1*=192.168.1.1&cs=googlebot

56. Get to grips with jQuery
So much easier than just JavaScript

57. For example, Optimizely tests are
built from jQuery
This is a live test on the Distilled website

58. Luckily, learning is easier
than ever

60. Debugging
Chrome ships with some powerful debugging tools
CTRL+SHIFT+J

61. But alert() and console.log() are
your friends

62. Right-click  Inspect Element
Highlight active DIVs and test changes immediately

63. You can even edit pages here to
mock things up
Obviously there are more useful things to do with this super power

64. AJAX and PushState

65. These buttons switch stories

66. URL
changed
without
the page
reloading

67. Content
changed
via AJAX

68. It can be hard for JS and server to
work together
Node.js on the server?

69. Why?
You’re going to recommend
it or encounter it in a site
audit

70. And, incidentally, you
should – it’s great to
separate content from
presentation

71. How do you audit AJAX?

72. URLs load content
Spot-check with a browser + disabled js. Test with a crawler

73. Links are HTML links
CTRL+U is view source in Chrome on Windows – learn your shortcuts

74. …and the href is the same as the
PushState
CTRL+U is view source in Chrome on Windows – learn your shortcuts

75. For an idea of the
complexity…

76. Here’s an example of a beautiful site
Fast CoEXIST

77. That
redirects to
a mobile
site
http://www.fastcoexist.com/
1682002/this-24-year-old-
entrepreneur-raised-
300000-by-wearing-dad-s-
wool-shirt-for-100-days
http://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&

78. That loads
content via
AJAX
Empty
HTML


79. Infinite Scroll

80. This is what a mashable
page looks like when you
load it

81. When you keep scrolling more
loads under your mouse

82. When you keep scrolling more
loads under your mouse

83. Why?
You’re going to encounter it
in a site audit

84. How do you audit infinite
scroll?

85. Can you get to all these links without
scroll-loading?
Make sure there is a (traditionally) crawlable navigation (Tips here)

86. Can you see all the important
content without the scroll-loading?
Or at least check that it’s getting indexed

87. The state of
JavaScript indexation

88. We know that FB comments can be
indexed
See, for example this page whose JS comments are indexed

89. Is it worth it though?

90. TechCrunch admits that
using Facebook comments
drove away most of their
commenters
-- techdirt [original TC article]
We have seen a few mis-steps from FB on the comment front

91. When Matt said this in 2011
Original tweet

92. This gives Google …the ability to
read comments in AJAX or
JavaScript, such as Facebook
comments or Disqus comments
-- SearchEngineLand [emphasis mine]
Much of the coverage was similar to this

93. Disqus is growing fast by the way
Sites using Disqus vs. FB comments – data from BuiltWith

94. Disqus comments can be indexed
Disqus via API in source code indexed

95. But the JS version can’t
Has anyone seen it work anywhere?
Disqus via JavaScript not indexed

96. We have seen aggressive crawling
of 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

97. It doesn’t look like arbitrary
JavaScript execution

98. I would always specify that
all content and all links can
be found without JavaScript

99. When you’re specifying
something, you can be as prescriptive
as you like

100. When you are auditing, you should be
more cautious of the cost of changes

101. If an audit shows content
being pulled in via JS
but it’s getting indexed
I’d leave well enough alone

102. If links are only accessible
via JS, I would suggest
fixing that even if pages are
being discovered

103. Go write technical recommendations
like you’re presenting to this guy

104. Thanks.
Any questions?
WILL CRITCHLOW
will.critchlow@distilled.net
@willcritchlow

105. Image credits:
http://kilocopter.deviantart.com/art/Birthday-Unicorns-166578859
http://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/