seo for developers

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

Upload: christopher-le

Post on 06-Jul-2015

474 views

Category:

Technology


0 download

DESCRIPTION

Slides from my talk at

TRANSCRIPT

Page 1: SEO for Developers

Date:

Author:

February 29, 2012

Chris Le (@djchrisle)

SEO For DevelopersSELECT  *  WHERE  clue  >  0;

1

realv

Page 2: SEO for Developers

$  whoami{  name:                “Chris  Le”,    twitter:          “@DjChrisLe”,

   occupation:  [        “Internal  app  developer”,        “Project  management”,        “Technical  SEO  support”    ]}

Page 3: SEO for Developers

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

Page 4: SEO for Developers

Date:

Author:

February 29, 2012

Chris Le (@djchrisle)

SEO For DevelopersHow SEO changed the way I develop

4

realv

Page 5: SEO for Developers

5

Page 6: SEO for Developers

@djchrisle 6

Page 7: SEO for Developers

@djchrisle 7

#  header.html.erb<h1>&nbsp;</h1>....

#  acme.cssh1  {      background-­‐image:  ‘/img/acme_logo.png’;      background-­‐repeat:  no-­‐repeat;}

Page 8: SEO for Developers

@djchrisle 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.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  index        @content  =  Content.find_by_name(params[:get]        respond_with(@content)    endend

Page 9: SEO for Developers

@djchrisle 9

http://www.acme.com/investments#positionshttp://www.acme.com/investments#watchlisthttp://www.acme.com/investments#menu1http://www.acme.com/investments#menu2

Page 10: SEO for Developers

@djchrisle

Best Practices

10

• 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”)

Page 11: SEO for Developers

@djchrisle 11

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

Page 12: SEO for Developers

Q: What is SEO?

12

A: Help the RIGHT customers find YOU.

Page 13: SEO for Developers

About us

13

Page 14: SEO for Developers

@djchrisle 14

Page 15: SEO for Developers

@djchrisle 15

Page 16: SEO for Developers

@djchrisle 16

Page 17: SEO for Developers

@djchrisle 17

require  'anemone'

Anemone.crawl("http://www.example.com/")  do  |anemone|    anemone.on_every_page  do  |page|            puts  page.url    endend

Bank.account  <<  Profit!

Page 18: SEO for Developers

@djchrisle 18

Page 19: SEO for Developers

nsfw 19

Page 20: SEO for Developers

@djchrisle

Title tags

20

Page 21: SEO for Developers

21

????

Page 22: SEO for Developers

@djchrisle 22

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

Page 23: SEO for Developers

@djchrisle 23

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

Page 24: SEO for Developers

@djchrisle 24

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

#  schema.rbcreate_table  “Page”    t.string  “title_tag”    ...end

#  page.rbClass  Page  <  ActiveRecord::Base    belongs_to  :category        def  title_tag        title_tag.defined?  ?  super()  :  self.category.name    endend

Page 25: SEO for Developers

@djchrisle 25

puts  Page.find(1).inspect

{    title_tag:  “Experienced  Ruby  Programmers  in  Philladelphia”,    content:  “...”}

Page 26: SEO for Developers

26

My Company | Experienced Ruby Programmers in Philadelphia

Title matches keyword+ is what user is looking for

Page 27: SEO for Developers

@djchrisle

<h1> tags

27

Page 28: SEO for Developers

@djchrisle 28

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

Page 29: SEO for Developers

@djchrisle 29

Page 30: SEO for Developers

@djchrisle 30

Page 31: SEO for Developers

@djchrisle 31

#  my_page.html.erb<h1>&nbsp;</h1>....

#  acme.cssh1  {      background-­‐image:  ‘/img/acme_logo.png’;      background-­‐repeat:  no-­‐repeat;}

Page 32: SEO for Developers

@djchrisle 32

#  my_page.html.erb<h1>&nbsp;</h1>....

#  acme.cssh1  {      background-­‐image:  ‘/img/acme_logo.png’;      background-­‐repeat:  no-­‐repeat;}

This page is about “Non-breaking space?”

Page 33: SEO for Developers

@djchrisle 33

#  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;}

Better use of H1

Page 34: SEO for Developers

@djchrisle

URLs &Hash fragments

34

Page 35: SEO for Developers

@djchrisle 35

http://www.acme.com/investments#positionshttp://www.acme.com/investments#watchlisthttp://www.acme.com/investments#menu1http://www.acme.com/investments#menu2

Page 36: SEO for Developers

@djchrisle 36

http://www.acme.com/investments#positionshttp://www.acme.com/investments#watchlisthttp://www.acme.com/investments#menu1http://www.acme.com/investments#menu2

www.acme.com/investmentsAcme Inc | Financial Portfolio Managers

4 pages .. 1 listing :(

Page 37: SEO for Developers

37

#  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>

Uncrawlable URL

Page 38: SEO for Developers

38

#  investments.html.erb

<a  href=”/investments/watchlist”>

<div  id=”container”></div>

<script>    $(“#watchlist”).click  (function()  {        $(“#container”).load($.param.querystring);    }</script>

Crawlable URL

Page 39: SEO for Developers

@djchrisle 39

#  routes.rbresources  :investmentsmatch  “content/:section”  =>  “content#show”

#  content_controller.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  show        @content  =  Content.find_by_name(params[:section])        respond_with(@content)    endend

Page 40: SEO for Developers

@djchrisle 40

http://www.acme.com/investments/positionshttp://www.acme.com/investments/watchlisthttp://www.acme.com/investments/menu1http://www.acme.com/investments/menu2

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

4 pages .. 4 listings :)

Page 41: SEO for Developers

@djchrisle

301 / 302 redirect

41

Page 42: SEO for Developers

@djchrisle 42

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

Page 43: SEO for Developers

@djchrisle 43

#  content_controller.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  show        redirect_to  :post_path        #  @content  =  Content.find_by_id(params[:id])        #  respond_with(@content)    endend

Page 44: SEO for Developers

@djchrisle 44

#  content_controller.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  show        redirect_to  :post_path        #  @content  =  Content.find_by_id(params[:id])        #  respond_with(@content)    endend

Defaults as 302 response

Page 45: SEO for Developers

@djchrisle

301 vs 302 redirect

45

• 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

Page 46: SEO for Developers

46

Page 47: SEO for Developers

47

302 = nothing

Page 48: SEO for Developers

48

301 = change

Page 49: SEO for Developers

49

404 = delist

Page 50: SEO for Developers

@djchrisle 50

#  content_controller.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  show        redirect_to  :post_path,  :status  =>  301        #  @content  =  Content.find_by_id(params[:id])        #  respond_with(@content)    endend

Page 51: SEO for Developers

@djchrisle 51

#  content_controller.rbclass  ContentController  <  ActionController::Base    respond_to  :html

   def  show        redirect_to  :post_path,  :status  =>  301        #  @content  =  Content.find_by_id(params[:id])        #  respond_with(@content)    endend

Page 52: SEO for Developers

52

#  routes.rb

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

Page 53: SEO for Developers

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

Page 54: SEO for Developers

@djchrisle

Every great idea deserves the

chance to be found

54

Page 55: SEO for Developers

Date:

Author:

February 29, 2012

Chris Le (@djchrisle)

SEO For DevelopersHow SEO changed the way I develop

55

realv

Page 56: SEO for Developers

@djchrisle

Q&A

56

Page 57: SEO for Developers

57

2006-2007

Page 58: SEO for Developers

58