SEO for Developers

re al
v
SEO For Developers
SELECT
*
WHERE
clue
>
0;

Date: February 29, 2012
Author: Chris Le (@djchrisle)

1

$
whoami
{
name:

“Chris
Le”,

twitter:

“@DjChrisLe”,

occupation:
[

“Internal
app
developer”,

“Project
management”,

“Technical
SEO
support”

]
}

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

re al
v
SEO For Developers
How SEO changed the way I develop


4

#
header.html.erb
<h1> </h1>
....

#
acme.css
h1
{

background-‐image:
‘/img/acme_logo.png’;

background-‐repeat:
no-‐repeat;
}

@djchrisle 7

#
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

http://www.acme.com/investments#positions
http://www.acme.com/investments#watchlist
http://www.acme.com/investments#menu1

@djchrisle 9

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

http://www.domain.com/about-‐us/blog/post
http://www.domain.com/blog/post

@djchrisle 11

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

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

Title tags

@djchrisle 20

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

@djchrisle 22

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

@djchrisle 23

#
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

puts
Page.find(1).inspect

{

title_tag:
“Experienced
Ruby
Programmers
in
Philladelphia”,

content:
“...”
}

@djchrisle 25

Title matches
keyword
+ is what user
is looking for

My Company | Experienced Ruby Programmers in Philadelphia

26

<h1> tags

@djchrisle 27

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

@djchrisle 28

#
my_page.html.erb
<h1> </h1>
....

#
acme.css
h1
{


no-‐repeat;
}

@djchrisle 31

This page is about
“Non-breaking space?”
#
my_page.html.erb
<h1> </h1>
....

#
acme.css
h1
{


no-‐repeat;
}

@djchrisle 32

Better use of H1
#
my_page.html.erb
<div
class=”logo”></div>
<h1>
Sensible
Investment
Strategies
</h1>
....

#
acme.css
.logo
{


no-‐repeat;
}

@djchrisle 33

URLs &
Hash fragments

@djchrisle 34


@djchrisle 35

4 pages .. 1 listing :(

Acme Inc | Financial Portfolio Managers
www.acme.com/investments

@djchrisle 36

Uncrawlable URL
#

<a
href=”#watchlist”>

<div

<script>

(function()
{
//
=>
sets
loadThis
to
“watchlist”

var
loadThis
=
$.param.fragment($.param.querystring);

$(“#container”).load(“/content?get=”
+
loadThis);

}
</script>

37

Crawlable URL
#

<a
href=”/investments/watchlist”>

<div

<script>

(function()
{

$(“#container”).load($.param.querystring);

}
</script>

38

#
routes.rb
resources
:investments
match
“content/:section”
=>
“content#show”

#
class
ContentController
<

respond_to
:html

def
show

@content
=
Content.find_by_name(params[:section])


end
end

@djchrisle 39

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

301 / 302
redirect

@djchrisle 41

http://www.domain.com/about-‐us/blog/post
http://www.domain.com/blog/post

@djchrisle 42

#
class
ContentController
<

respond_to
:html

def
show

redirect_to
:post_path

#
@content
=
Content.find_by_id(params[:id])

#

end
end

@djchrisle 43

Defaults as 302 response

#
class
ContentController
<

respond_to
:html

def
show

redirect_to
:post_path

#
@content
=

#

end
end

@djchrisle 44

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

#
class
ContentController
<

respond_to
:html

def
show

redirect_to
:post_path,
:status
=>
301

#
@content
=

#

end
end

@djchrisle 50

#
class
ContentController
<

respond_to
:html

def
show

redirect_to
:post_path,
:status
=>
301

#
@content
=

#

end
end

@djchrisle 51

#
routes.rb

match
“/about-‐us/blog/:post_title”
=>

redirect(“/blog/#{params[:post_title]}”)

52

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

Every great idea
deserves the
chance to be found

@djchrisle 54

re al
v
SEO For Developers
How SEO changed the way I develop


55

SEO for Developers

More Related Content

What's hot (19)

Similar to SEO for Developers (20)

Recently uploaded (20)

SEO for Developers