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

Tecn

olog

ia

Cont

eúdo

Repu

taçã

o

SEOTecnologia

● 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óriosCountry 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 URLTipos 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 URLReescrita de URL

http://www.dominio.com.br/pagina.php?id=789

Redirecionamentos e Reescritas de URLReescrita de URL

http://www.dominio.com.br/pagina.php?id=789

Redirecionamentos e Reescritas de URLReescrita de URL

http://www.dominio.com.br/pagina.php?id=789

http://www.dominio.com.br/titulo-da-pagina

Robots.txt

robots.txtrobots.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çõesA 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çõesA 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 GraphElementos 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 GraphElementos Opcionais:● og:video● og:audio● og:locale● og:site_name● entre outros...

Devem ser editáveis

og:title

og:urlog: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 CardsElementos 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 CardsElementos 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">

MicrodataDados 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ônusAcesse a URL

E ganhe até R$ 100,00para testar nossos

serviços*

https://www.umbler.com/U7I5H

* Somente para novos usuários

OBRIGADO!

gustavo@umbler.comDúvidas? Envie um e-mail