Slides from my talk at

1. re al
v
SEO For Developers
SELECT
*
WHERE
clue
>
0;
Date: February 29, 2012
Author: Chris Le (@djchrisle)
1

2. $
whoami
{
name:
“Chris
Le”,
twitter:
“@DjChrisLe”,
occupation:
[
“Internal
app
developer”,
“Project
management”,
“Technical
SEO
support”
]
}

3. If you build it, they will come is a lie 3

4. re al
v
SEO For Developers
How SEO changed the way I develop
Date: February 29, 2012
Author: Chris Le (@djchrisle)
4

5. 5

6. @djchrisle 6

7. #
header.html.erb
<h1>&nbsp;</h1>
....
#
acme.css
h1
{
background-­‐image:
‘/img/acme_logo.png’;
background-­‐repeat:
no-­‐repeat;
}
@djchrisle 7

8. #
investments.html.erb
<a
href=”#watchlist”>
<div
id=”container”></div>
<script>
$(“#watchlist”).click
(function()
{
//
=>
sets
loadThis
to
“watchlist”
var
loadThis
=
$.param.fragment($.param.querystring);
$(“#container”).load(“/content?get=”
+
loadThis);
}
</script>
#
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
index
@content
=
Content.find_by_name(params[:get]
respond_with(@content)
end
end
@djchrisle 8

9. http://www.acme.com/investments#positions
http://www.acme.com/investments#watchlist
http://www.acme.com/investments#menu1
http://www.acme.com/investments#menu2
@djchrisle 9

10. Best Practices
• Modularize & reuse code
– DRY principals (Don’t Repeat Yourself)
• Abstract template and view from logic
– Independently change stuff - no problems
• Use async JS loading to reduce load
– Lower server costs
– Fast load time (aka: “site speed”)
@djchrisle 10

11. http://www.domain.com/about-­‐us/blog/post
http://www.domain.com/blog/post
@djchrisle 11

12. Q: What is SEO?
A: Help the RIGHT
customers find YOU.
12

13. About us
13

14. @djchrisle 14

15. @djchrisle 15

16. @djchrisle 16

17. require
'anemone'
Anemone.crawl("http://www.example.com/")
do
|anemone|
anemone.on_every_page
do
|page|
puts
page.url
end
end
Bank.account
<<
Profit!
@djchrisle 17

18. @djchrisle 18

19. nsfw 19

20. Title tags
@djchrisle 20

21. ????
21

22. #
header.html.erb
<title><%=
@company.name
%></title>
@djchrisle 22

23. #
header.html.erb
<title><%=
@company.name
%>
<%=
@page.title_tag
%></title>
@djchrisle 23

24. #
header.html.erb
<title><%=
@company.name
%>
<%=
@page.title_tag
%></title>
#
schema.rb
create_table
“Page”
t.string
“title_tag”
...
end
#
page.rb
Class
Page
<
ActiveRecord::Base
belongs_to
:category
def
title_tag
title_tag.defined?
?
super()
:
self.category.name
end
end
@djchrisle 24

25. puts
Page.find(1).inspect
{
title_tag:
“Experienced
Ruby
Programmers
in
Philladelphia”,
content:
“...”
}
@djchrisle 25

26. Title matches
keyword
+ is what user
is looking for
My Company | Experienced Ruby Programmers in Philadelphia
26

27. <h1> tags
@djchrisle 27

28. #
post/index.html.erb
<h1><%=
@post.title
%></h1>
@djchrisle 28

29. @djchrisle 29

30. @djchrisle 30

31. #
my_page.html.erb
<h1>&nbsp;</h1>
....
#
acme.css
h1
{
background-­‐image:
‘/img/acme_logo.png’;
background-­‐repeat:
no-­‐repeat;
}
@djchrisle 31

32. This page is about
“Non-breaking space?”
#
my_page.html.erb
<h1>&nbsp;</h1>
....
#
acme.css
h1
{
background-­‐image:
‘/img/acme_logo.png’;
background-­‐repeat:
no-­‐repeat;
}
@djchrisle 32

33. Better use of H1
#
my_page.html.erb
<div
class=”logo”></div>
<h1>
Sensible
Investment
Strategies
</h1>
....
#
acme.css
.logo
{
background-­‐image:
‘/img/acme_logo.png’;
background-­‐repeat:
no-­‐repeat;
}
@djchrisle 33

34. URLs &
Hash fragments
@djchrisle 34

35. http://www.acme.com/investments#positions
http://www.acme.com/investments#watchlist
http://www.acme.com/investments#menu1
http://www.acme.com/investments#menu2
@djchrisle 35

36. http://www.acme.com/investments#positions
http://www.acme.com/investments#watchlist
http://www.acme.com/investments#menu1
http://www.acme.com/investments#menu2
4 pages .. 1 listing :(
Acme Inc | Financial Portfolio Managers
www.acme.com/investments
@djchrisle 36

37. Uncrawlable URL
#
investments.html.erb
<a
href=”#watchlist”>
<div
id=”container”></div>
<script>
$(“#watchlist”).click
(function()
{
//
=>
sets
loadThis
to
“watchlist”
var
loadThis
=
$.param.fragment($.param.querystring);
$(“#container”).load(“/content?get=”
+
loadThis);
}
</script>
37

38. Crawlable URL
#
investments.html.erb
<a
href=”/investments/watchlist”>
<div
id=”container”></div>
<script>
$(“#watchlist”).click
(function()
{
$(“#container”).load($.param.querystring);
}
</script>
38

39. #
routes.rb
resources
:investments
match
“content/:section”
=>
“content#show”
#
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
show
@content
=
Content.find_by_name(params[:section])
respond_with(@content)
end
end
@djchrisle 39

40. http://www.acme.com/investments/positions
http://www.acme.com/investments/watchlist
http://www.acme.com/investments/menu1
http://www.acme.com/investments/menu2
4 pages .. 4 listings :)
Acme Inc | Financial Portfolio Managers
www.acme.com/investments/positions
@djchrisle 40

41. 301 / 302
redirect
@djchrisle 41

42. http://www.domain.com/about-­‐us/blog/post
http://www.domain.com/blog/post
@djchrisle 42

43. #
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
show
redirect_to
:post_path
#
@content
=
Content.find_by_id(params[:id])
#
respond_with(@content)
end
end
@djchrisle 43

44. Defaults as 302 response
#
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
show
redirect_to
:post_path
#
@content
=
Content.find_by_id(params[:id])
#
respond_with(@content)
end
end
@djchrisle 44

45. 301 vs 302 redirect
• RFC 2616, Section 10.3.3
– 302 Found: The requested resource resides
temporarily under a different URI
• RFC 2616, Section 10.3.2
–301 Moved Permanently: The requested resource has
been assigned a new permanent URI and any future
references to this resource SHOULD use one of the
returned URIs
@djchrisle 45

46. 46

47. 302 =
nothing
47

48. 301 =
change
48

49. 404 = delist
49

50. #
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
show
redirect_to
:post_path,
:status
=>
301
#
@content
=
Content.find_by_id(params[:id])
#
respond_with(@content)
end
end
@djchrisle 50

51. #
content_controller.rb
class
ContentController
<
ActionController::Base
respond_to
:html
def
show
redirect_to
:post_path,
:status
=>
301
#
@content
=
Content.find_by_id(params[:id])
#
respond_with(@content)
end
end
@djchrisle 51

52. #
routes.rb
match
“/about-­‐us/blog/:post_title”
=>
redirect(“/blog/#{params[:post_title]}”)
52

53. If you build it, they will come is a lie 53

54. Every great idea
deserves the
chance to be found
@djchrisle 54

55. re al
v
SEO For Developers
How SEO changed the way I develop
Date: February 29, 2012
Author: Chris Le (@djchrisle)
55

56. Q&A
@djchrisle 56

57. 2006-2007
57

58. 58