SEO para Desenvolvedores
Gustavo Sartori (AKA Sartori)
SEO Manager @ Umbler
❏10+ de atuação no mercado digital
❏Marketeiro
❏Desenvolvedor
❏SEO Lover
CÉU? SEU? CEO? Não! É ÉSS-I-O
Tecnologia
Conteúdo
Reputação
SEO
Tecnologia
● Linguagem de Programação Utilizada
● Compatibilidade Mobile
● Velocidade de Renderização
● Arquivos de robôs (robots.txt e
sitemap.xml)
● Estrutura de URLs
● Consistência de Navegação (Erros 404)
Search Engine Optimization
Domínios, Subdomínios e Diretórios
Server Side SEO
Domínios, Subdomínios e Diretórios
Country Code Top Level Domain (ccTLD)
● .com.br
● .net.br
● .gov.br (restrito)
● ….
Generic Top Level Domain (gTLD)
● .store
● .guru
● .travel
● .pro
● ….
Anatomia do Domínio
Domínios, Subdomínios e Diretórios
Normalmente Utilizado por
● Sites de Notícias
● E-commerces
● Políticos e Partidos
Subdomínios
Recomendado para
● Aplicações Diferentes
● Hub de Conteúdo
● Categorização de Conteúdo
Domínios, Subdomínios e Diretórios
Problema do Subdomínio
● Buscadores consideram subdomínios sites distintos
● Métricas de reputação não ‘fluem’ para o domínio principal
Subdomínios
Domínios, Subdomínios e Diretórios
● Organização do conteúdo de forma
lógica (para humanos)
● Facilita memorização da url
● Métricas de Reputação e Autoridade
são melhor distribuídas
Diretórios
Redirecionamentos e Reescrita de URL
Redirecionamentos e Reescritas de URL
Tipos de Redirecionamentos
301 - Permanente
● A URL antiga sai do índice dos
buscadores
● A nova URL recebe todas as
métricas
● Sua reversão pode afetar landing
pages envolvidas
302 - Temporária
● A URL antiga permanece no
índice dos buscadores
● A nova URL não recebe
nenhuma métrica
● Pode ser revertida sem prejuízos
ao SEO
Redirecionamentos e Reescritas de URL
Reescrita de URL
http://www.dominio.com.br/pagina.php?id=789
Redirecionamentos e Reescritas de URL
Reescrita de URL
http://www.dominio.com.br/pagina.php?id=789
Redirecionamentos e Reescritas de URL
Reescrita de URL
http://www.dominio.com.br/pagina.php?id=789
http://www.dominio.com.br/titulo-da-pagina
Robots.txt
robots.txt
robots.txt
Para que serve?
● Páginas/Diretórios permitidos ou bloqueados
● Restrição por tipo de crawler
● Informar a URL do sitemap.xml
.htaccess / web.config
.htaccess/web.config
.htaccess/web.config
● Configurações do Server
○ Memória
○ Cache
○ Compactação
● Depende de permissão
● Secundário à configuração padrão do ambiente
.htaccess
web.config
.htaccess/web.config
.htaccess/web.config
● Configurações do Server
○ Memória
○ Cache
○ Compactação
● Depende de permissão
● Secundário à configuração padrão do ambiente
.htaccess
web.config
OBS: Caso alguma
configuração inserida no xml
não seja permitida, gerará
erro de compilação.
Titles e Meta Informações
On Page SEO
Title e Meta Informações
A Informação sobre a Informação
● O usuário não vê as meta tags
● Os buscadores escolhem qual trecho do conteúdo será exibido
Title e Meta Informações
A Informação sobre a Informação
● O usuário não vê as meta tags
● Os buscadores escolhem qual trecho do conteúdo será exibido
Devem ser editáveis
Meta Informações para Social Media
Meta Informações para Social Media
Elementos Obrigatórios:
● og:type
● og:title
● og:image
● og:url
Open Graph
Elementos Opcionais:
● og:video
● og:audio
● og:locale
● og:site_name
● entre outros...
Meta Informações para Social Media
Elementos Obrigatórios:
● og:type
● og:title
● og:image
● og:url
Open Graph
Elementos Opcionais:
● og:video
● og:audio
● og:locale
● og:site_name
● entre outros...
Devem ser editáveis
og:title
og:url
og:description
og:image
Meta Informações para Social Media
Elementos Obrigatórios:
● twitter:card
● twitter:title ou og:title
● twitter:image ou og:image
● twitter:description ou og:description
● twitter:site
Twitter Cards
Elementos Opcionais:
● twitter:image:alt
● twitter:player
● twitter:player:stream
● entre outros...
Meta Informações para Social Media
Elementos Obrigatórios:
● twitter:card
● twitter:title ou og:title
● twitter:image ou og:image
● twitter:description ou og:description
● twitter:site
Twitter Cards
Elementos Opcionais:
● twitter:image:alt
● twitter:player
● twitter:player:stream
● entre outros...
Devem ser editáveis
twitter:title
twitter:site
twitter:description
twitter:image
Meta Robots
Meta Robots
<meta name="robots" content="index,follow">
● index
● noindex
● follow
● nofollow
● nosnippet
● noodp
● noarchive
● noimageindex
As mesmas configurações possíveis no robots.txt
● Permite criação de regras por página
● Maior controle de URLs
Configurações possíveis:
Tag Link
Tag Link
Usada para:
● Relacionar folhas de estilo (.css)
● Canonização de URL
● Localization
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="canonical" href="seusite.com.br/url-da-pagina-original">
<link rel="alternate" hreflang="pt-BR" href="seusite.com.br/pt-br">
<link rel="alternate" hreflang="pt-PT" href="seusite.com.br/pt-pt">
Tag Link
Utilizado para:
● Content Syndication
● Paginação
● Conteúdos Duplicados
rel="canonical"
Tag Link
Utilizado para:
● Content Syndication
● Paginação
● Conteúdos Duplicados
rel="canonical"
As páginas, quando não forem
cópias, devem se autorreferenciar
Tag Link
● Utilizado para Relacionar URL de páginas em outros idiomas
● Podemos criar versões diferentes para o mesmo idioma de países
diferentes (Ex: pt-BR e pt-PT)
● A identificação do idioma do usuário é feita com com base no
browser.
rel="alternate" hreflang="xx" href="url-da-versao"
<link rel="alternate" href="https://www.umbler.com/br/" hreflang="pt-BR">
<link rel="alternate" href="https://www.umbler.com/pt/" hreflang="pt-PT">
Tag Link
● Utilizado para Relacionar URL de páginas em outros idiomas
● Podemos criar versões diferentes para o mesmo idioma de países
diferentes (Ex: pt-BR e pt-PT)
● A identificação do idioma do usuário é feita com com base no
browser.
rel="alternate" hreflang="xx" href="url-da-versao"
O idioma da versão deve ser
informado na tag <html>
Ex: <html lang="pt-BR" ... >
<link rel="alternate" href="https://www.umbler.com/br/" hreflang="pt-BR">
<link rel="alternate" href="https://www.umbler.com/pt/" hreflang="pt-PT">
Microdata
Dados Estruturados
Microdata
● Dá Sentido à marcação HTML
● Estrutura o conteúdo de forma lógica
● Utilizado pelos buscadores para criação dos Snippets
<h2>Avatar</h2>
Microdata
● Dá Sentido à marcação HTML
● Estrutura o conteúdo de forma lógica
● Utilizado pelos buscadores para criação dos Snippets
<h2>Avatar</h2>
Microdata
● Dá Sentido à marcação HTML
● Estrutura o conteúdo de forma lógica
● Utilizado pelos buscadores para criação dos Snippets
<h2>Avatar</h2>
Microdata
● Dá Sentido à marcação HTML
● Estrutura o conteúdo de forma lógica
● Utilizado pelos buscadores para criação dos Snippets
<h2>Avatar</h2>
Microdata
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">Avatar</h2>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Diretor: <span itemprop="name">James Cameron</span> (Nascido <span
itemprop="birthDate">16 de Agosto de 1954</span>)
</div>
<span itemprop="genre">Ficção Científica</span>
<a href="../filmes/avatar-trailer.html" itemprop="trailer">Trailer</a>
</div>
Microdata
● Produtos
○ Product
○ Offer
○ AggregateOffer
Outros Escopos e Tipos
● Trabalhos Criativos
○ Movie
○ MusicRecording
○ Recipes
● Locais
○ Place
○ LocalBusiness
○ Restaurant
HTML Headers
HTML Headers
● São os títulos do conteúdo
● Apenas 1 H1 por página
● Devem ser abertas de forma aninhada
● Quanto MAIOR o # do Hx, mais importante é
o conteúdo
Velocidade de Carregamento
Velocidade de Carregamento
Sim.... Mas não muito
O IP do Servidor é o maior influenciador
Como contornar
● CDNs
● ccTLD
● Reforce a utilização do nome do país foco em seu conteúdo
Localização do Servidor Importa?
Velocidade de Carregamento
Fatores Internos (Infraestrutura)
Fatores Externos
Fatores Internos (Aplicação)
Velocidade de Carregamento
Localização do Servidor Importa?
Vantagens
● Reduzir a latência
● Reduzir consumo de banda
● Minimizar a utilização de recursos do servidor
● Pode ter cache habilitado
E os CDNs?
Desvantagens
● Custo
● Complexidade de configuração
Bônus
Acesse a URL
E ganhe até R$ 100,00
para testar nossos serviços*
https://www.umbler.com/U7I5H
* Somente para novos usuários
OBRIGADO!
gustavo@umbler.com
Dúvidas? Envie um e-mail

SEO Para Desenvolvedores

  • 1.
  • 2.
    Gustavo Sartori (AKASartori) SEO Manager @ Umbler ❏10+ de atuação no mercado digital ❏Marketeiro ❏Desenvolvedor ❏SEO Lover
  • 3.
    CÉU? SEU? CEO?Não! É ÉSS-I-O Tecnologia Conteúdo Reputação SEO Tecnologia ● Linguagem de Programação Utilizada ● Compatibilidade Mobile ● Velocidade de Renderização ● Arquivos de robôs (robots.txt e sitemap.xml) ● Estrutura de URLs ● Consistência de Navegação (Erros 404) Search Engine Optimization
  • 4.
    Domínios, Subdomínios eDiretórios Server Side SEO
  • 5.
    Domínios, Subdomínios eDiretórios Country Code Top Level Domain (ccTLD) ● .com.br ● .net.br ● .gov.br (restrito) ● …. Generic Top Level Domain (gTLD) ● .store ● .guru ● .travel ● .pro ● …. Anatomia do Domínio
  • 6.
    Domínios, Subdomínios eDiretórios Normalmente Utilizado por ● Sites de Notícias ● E-commerces ● Políticos e Partidos Subdomínios Recomendado para ● Aplicações Diferentes ● Hub de Conteúdo ● Categorização de Conteúdo
  • 7.
    Domínios, Subdomínios eDiretórios Problema do Subdomínio ● Buscadores consideram subdomínios sites distintos ● Métricas de reputação não ‘fluem’ para o domínio principal Subdomínios
  • 8.
    Domínios, Subdomínios eDiretórios ● Organização do conteúdo de forma lógica (para humanos) ● Facilita memorização da url ● Métricas de Reputação e Autoridade são melhor distribuídas Diretórios
  • 9.
  • 10.
    Redirecionamentos e Reescritasde URL Tipos de Redirecionamentos 301 - Permanente ● A URL antiga sai do índice dos buscadores ● A nova URL recebe todas as métricas ● Sua reversão pode afetar landing pages envolvidas 302 - Temporária ● A URL antiga permanece no índice dos buscadores ● A nova URL não recebe nenhuma métrica ● Pode ser revertida sem prejuízos ao SEO
  • 11.
    Redirecionamentos e Reescritasde URL Reescrita de URL http://www.dominio.com.br/pagina.php?id=789
  • 12.
    Redirecionamentos e Reescritasde URL Reescrita de URL http://www.dominio.com.br/pagina.php?id=789
  • 13.
    Redirecionamentos e Reescritasde URL Reescrita de URL http://www.dominio.com.br/pagina.php?id=789 http://www.dominio.com.br/titulo-da-pagina
  • 14.
  • 15.
    robots.txt robots.txt Para que serve? ●Páginas/Diretórios permitidos ou bloqueados ● Restrição por tipo de crawler ● Informar a URL do sitemap.xml
  • 16.
  • 17.
    .htaccess/web.config .htaccess/web.config ● Configurações doServer ○ Memória ○ Cache ○ Compactação ● Depende de permissão ● Secundário à configuração padrão do ambiente .htaccess web.config
  • 18.
    .htaccess/web.config .htaccess/web.config ● Configurações doServer ○ Memória ○ Cache ○ Compactação ● Depende de permissão ● Secundário à configuração padrão do ambiente .htaccess web.config OBS: Caso alguma configuração inserida no xml não seja permitida, gerará erro de compilação.
  • 19.
    Titles e MetaInformações On Page SEO
  • 20.
    Title e MetaInformações A Informação sobre a Informação ● O usuário não vê as meta tags ● Os buscadores escolhem qual trecho do conteúdo será exibido
  • 21.
    Title e MetaInformações A Informação sobre a Informação ● O usuário não vê as meta tags ● Os buscadores escolhem qual trecho do conteúdo será exibido Devem ser editáveis
  • 22.
  • 23.
    Meta Informações paraSocial Media Elementos Obrigatórios: ● og:type ● og:title ● og:image ● og:url Open Graph Elementos Opcionais: ● og:video ● og:audio ● og:locale ● og:site_name ● entre outros...
  • 24.
    Meta Informações paraSocial Media Elementos Obrigatórios: ● og:type ● og:title ● og:image ● og:url Open Graph Elementos Opcionais: ● og:video ● og:audio ● og:locale ● og:site_name ● entre outros... Devem ser editáveis
  • 25.
  • 26.
    Meta Informações paraSocial Media Elementos Obrigatórios: ● twitter:card ● twitter:title ou og:title ● twitter:image ou og:image ● twitter:description ou og:description ● twitter:site Twitter Cards Elementos Opcionais: ● twitter:image:alt ● twitter:player ● twitter:player:stream ● entre outros...
  • 27.
    Meta Informações paraSocial Media Elementos Obrigatórios: ● twitter:card ● twitter:title ou og:title ● twitter:image ou og:image ● twitter:description ou og:description ● twitter:site Twitter Cards Elementos Opcionais: ● twitter:image:alt ● twitter:player ● twitter:player:stream ● entre outros... Devem ser editáveis
  • 28.
  • 29.
  • 30.
    Meta Robots <meta name="robots"content="index,follow"> ● index ● noindex ● follow ● nofollow ● nosnippet ● noodp ● noarchive ● noimageindex As mesmas configurações possíveis no robots.txt ● Permite criação de regras por página ● Maior controle de URLs Configurações possíveis:
  • 31.
  • 32.
    Tag Link Usada para: ●Relacionar folhas de estilo (.css) ● Canonização de URL ● Localization <link rel="stylesheet" type="text/css" href="assets/style.css"> <link rel="canonical" href="seusite.com.br/url-da-pagina-original"> <link rel="alternate" hreflang="pt-BR" href="seusite.com.br/pt-br"> <link rel="alternate" hreflang="pt-PT" href="seusite.com.br/pt-pt">
  • 33.
    Tag Link Utilizado para: ●Content Syndication ● Paginação ● Conteúdos Duplicados rel="canonical"
  • 34.
    Tag Link Utilizado para: ●Content Syndication ● Paginação ● Conteúdos Duplicados rel="canonical" As páginas, quando não forem cópias, devem se autorreferenciar
  • 35.
    Tag Link ● Utilizadopara Relacionar URL de páginas em outros idiomas ● Podemos criar versões diferentes para o mesmo idioma de países diferentes (Ex: pt-BR e pt-PT) ● A identificação do idioma do usuário é feita com com base no browser. rel="alternate" hreflang="xx" href="url-da-versao" <link rel="alternate" href="https://www.umbler.com/br/" hreflang="pt-BR"> <link rel="alternate" href="https://www.umbler.com/pt/" hreflang="pt-PT">
  • 36.
    Tag Link ● Utilizadopara Relacionar URL de páginas em outros idiomas ● Podemos criar versões diferentes para o mesmo idioma de países diferentes (Ex: pt-BR e pt-PT) ● A identificação do idioma do usuário é feita com com base no browser. rel="alternate" hreflang="xx" href="url-da-versao" O idioma da versão deve ser informado na tag <html> Ex: <html lang="pt-BR" ... > <link rel="alternate" href="https://www.umbler.com/br/" hreflang="pt-BR"> <link rel="alternate" href="https://www.umbler.com/pt/" hreflang="pt-PT">
  • 37.
  • 38.
    Microdata ● Dá Sentidoà marcação HTML ● Estrutura o conteúdo de forma lógica ● Utilizado pelos buscadores para criação dos Snippets <h2>Avatar</h2>
  • 39.
    Microdata ● Dá Sentidoà marcação HTML ● Estrutura o conteúdo de forma lógica ● Utilizado pelos buscadores para criação dos Snippets <h2>Avatar</h2>
  • 40.
    Microdata ● Dá Sentidoà marcação HTML ● Estrutura o conteúdo de forma lógica ● Utilizado pelos buscadores para criação dos Snippets <h2>Avatar</h2>
  • 41.
    Microdata ● Dá Sentidoà marcação HTML ● Estrutura o conteúdo de forma lógica ● Utilizado pelos buscadores para criação dos Snippets <h2>Avatar</h2>
  • 42.
    Microdata <div itemscope itemtype="http://schema.org/Movie"> <h2itemprop="name">Avatar</h2> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Diretor: <span itemprop="name">James Cameron</span> (Nascido <span itemprop="birthDate">16 de Agosto de 1954</span>) </div> <span itemprop="genre">Ficção Científica</span> <a href="../filmes/avatar-trailer.html" itemprop="trailer">Trailer</a> </div>
  • 44.
    Microdata ● Produtos ○ Product ○Offer ○ AggregateOffer Outros Escopos e Tipos ● Trabalhos Criativos ○ Movie ○ MusicRecording ○ Recipes ● Locais ○ Place ○ LocalBusiness ○ Restaurant
  • 45.
  • 46.
    HTML Headers ● Sãoos títulos do conteúdo ● Apenas 1 H1 por página ● Devem ser abertas de forma aninhada ● Quanto MAIOR o # do Hx, mais importante é o conteúdo
  • 47.
  • 48.
    Velocidade de Carregamento Sim....Mas não muito O IP do Servidor é o maior influenciador Como contornar ● CDNs ● ccTLD ● Reforce a utilização do nome do país foco em seu conteúdo Localização do Servidor Importa?
  • 49.
    Velocidade de Carregamento FatoresInternos (Infraestrutura) Fatores Externos Fatores Internos (Aplicação) Velocidade de Carregamento
  • 50.
    Localização do ServidorImporta? Vantagens ● Reduzir a latência ● Reduzir consumo de banda ● Minimizar a utilização de recursos do servidor ● Pode ter cache habilitado E os CDNs? Desvantagens ● Custo ● Complexidade de configuração
  • 51.
    Bônus Acesse a URL Eganhe até R$ 100,00 para testar nossos serviços* https://www.umbler.com/U7I5H * Somente para novos usuários
  • 52.