This document discusses SEO best practices for developers. It provides tips on how to structure code and applications to improve search engine optimization. Key points include using modular reusable code, separating templates from logic, loading content asynchronously to improve speed, and ensuring URLs are crawlable by search engines through proper linking and redirects. The author also discusses optimizing title tags, H1 tags, and using 301/302 redirects appropriately.

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