SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA

POR LEONARDO FERREIRA @LEONARDOFERREIRA

LEONARDO FERREIRA
• Graduando em Design Gráfico - ESAMC
• WebDesigner e Programador Front-End (UI e UX)
• CEO FerreiraStudios e BlogdosOito
• Youtube Creator

POR QUE
BUSCAR?BUSCAMOS MAIS DO QUE INFORMAÇÕES

90%
DOS USUÁRIOS
BUSCAM NO GOOGLE

85%
DOS USUÁRIOS
ENCONTRAM O QUE
PROCURAM

70%
CLICAM NOS
RESULTADOS DA PRIMEIRA PÁGINA

100BILHÕES DE
BUSCAS
SÃO FEITAS TODO MÊS

SEO(SEARCH ENGINE OPTIMIZATION)

86%
CLICAM EM
RESULTADOS DA
BUSCA ORGÂNICA (SEO)
14%
CLICAM EM
RESULTADOS DE
LINKS PATROCINADOS

• LINKS PATROCINADOS
• EFETUA-SE O PAGAMENTO E
SE TEM UM RESULTADO MAIS
IMEDIATO.
• SEO
• OS CUSTOS SÃO RELATIVAMENTE
BAIXOS (OU NÃO EXISTEM) E SE
TEM UM RESULTADO A LONGO
PRAZO.
SEO
DIVULGAÇÃO
EM MÍDIAS
LINKS
PATROCINADOS

SEO
LINKS
PATROCINADOS INVESTIMENTO

SEO ON-PAGE
(ASPECTOS INTERNOS)

SEO ON-PAGE (ASPECTOS INTERNOS)
• URL AMIGÁVEL
• Evite utilizar “URLS” muito
longas e mal posicionadas.
• Quanto mais curta melhor!
• Utilize hífen (-)
 EXEMPLO
 www.ferreirastudios.com/
marketing/redes-sociais
х EXEMPLO
х www.ferreirastudios/category.ph
p?codigo.153

FEMININO
MASCULINO
INFANTIL
• ARQUITETURA DA
INFORMAÇÃO
• Pense sempre no usuário e em
sua experiência
• Entenda o que ele procura e
facilite sua navegação
• Hierarquia e Fluxo é importante
PÁGINA INICIAL
SOBRE ROUPAS FILIAIS FALE CONOSCO

• DESCRIPTION
• Use a “meta tag” description
• Construa uma description atraente
• Seja verdadeiro e Criativo
• Utilize palavras chave
(Keywords)
<meta name=”description” content=”Escreva aqui a descrição da sua
página” />

• DEFINIÇÃO DE TÍTULOS
• Ficam entre tags como title,
H1 e H2
• Defina títulos criativos,
chamativos e claros
 EXEMPLO
 MELHORE SEU PAGE RANK
NOS BUSCADORES
х EXEMPLO
х SAIBA COMO MELHORAR O
PAGE RANK DO SEU SITE NOS
MECANISMOS DE BUSCA

• MÚLTIPLAS URLS NA MESMA
PÁGINA
• Várias URLs que indiquem o mesmo
conteúdo
• Páginas diferentes são consideradas
conteúdo duplicado e reduzem a relevância
• Canonical
<link rel=“canonical” href=“url.principal”/>
EXEMPLOS
• http://www.ferreirastudios.com.br
• http://ferreirastudios.com.br
• http://www.ferreirastudios.com.br/inde
x.php
• http://ferreirastudios.com.br/index.php
• http://ferreirastudios.com.br/php?site=
version1

• OTIMIZAÇÃO DE IMAGENS - UTILIZAÇÃO DE SPRITES
• Essa técnica consiste em agrupar
diversas imagens em uma só.
EXEMPLO
.icon-social {
background-image: url('mySprite.png');
background-position: -10px -10px;
}

• OTIMIZAÇÃO DE IMAGENS - UTILIZAÇÃO DE SPRITES
• Reduz absurdamente o número
de requisições HTTP e evita
atrasos nos recursos página.
• Espaços em branco afeta o uso
de memória para processar o
mapa de pixels.

• OTIMIZAÇÃO DE IMAGENS - DATA-URI (BASES 64)
• É uma maneira de adicionar conteúdo inline de uma URI que você
normalmente iria apontar reduzindo o número de requisições HTTP
necessárias para carregar uma página.
EXEMPLO
.bg-container { background-image: url('foo.png');}
.bg-container { background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAA
AXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D') ;}

• OTIMIZAÇÃO DE IMAGENS - DATA-URI (BASES 64)
• IE8 para cima suportam codificação base64.
• Esse método e CSS Sprites precisam de
ferramentas de build para serem de fácil
manutenção.
• Desvantagem - Aumenta consideravelmente o
tamanho do seu HTML/CSS se você possuir
imagens grandes.
• GERADORES DE BASE 64
• http://dopiaza.org/tools/datauri/index.php
• http://websemantics.co.uk/online_tools/imag
e_to_data_uri_convertor/

• FERRAMENTAS DE OTIMIZAÇÃO DE IMAGENS
SOFTWARES
• RIOT - http://luci.criosweb.ro/riot/download/
• JPEG MINI - http://www.jpegmini.com/
• CAESIUM – http://www.caesium.com
ONLINE
• Tinypng - https://tinypng.com
• Smulthit - http://www.smushit.com/ysmush.it
• Kraken - https://kraken.io

• PLUGINS ATUALIZADOS
• jQuery – Um dos plugins mais utilizados
(constantemente atualizado)
• Esteja sempre atento as novidades de plugins
• Evite utilizar plugins sempre que for possível.
quanto menos plugins melhor !

SEO OFF-PAGE
(ASPECTOS EXTERNOS)

• LINK BUILDING
• Captar links externos para o web-site
• Quanto mais links se recebe em uma página, melhor seu
posicionamento
• Produza conteúdo de valor, publique entrevistas, aborde
temas polêmicos e que geram interesse.
SEO OFF-PAGE (ASPECTOS
EXTERNOS)

• INTEGRAR O SITE EM REDES SOCIAIS
• INVISTA EM DIVULGAÇÃO
• FACILITAR O COMPARTILHAMENTO E ACESSO
• OS BUSCADORES TEM LEVADO EM CONSIDERAÇÃO
O COMPARTILHAMENTO NAS MÍDIAS SOCIAIS PARA
DEFINIR
A RELEVÂNCIA DA PÁGINA
• DAR LIKE E COMPARTILHAR É UMA PROVA SOCIAL DE
CONTEÚDO QUALIFICADO
SEO OFF-PAGE (ASPECTOS
EXTERNOS)

1. INDEXABILIDADE
• DOMÍNIOS
• INVESTIR EM DORMÍNIOS PERTINENTES, INVESTIR EM PALAVRAS CHAVES
COMBINATIVAS COM A EMPRESA E SEMPRE INVESTIR EM DOMÍNIOS CURTOS
• PLANEJADOR DE PALAVRAS DO GOOGLE ADWORDS http://adwords.google.com.br/keywordplanner
• CONTEÚDO NÃO INDEXÁVEL PELOS NAVEGADORES
ex FLASH, JAVA, VÍDEO, IMAGENS... (SEMPRE INTEGRAR O ATRIBUTO ALT E
DESCRIÇÕES)
• SITEMAPS
• A AUSÊNCIA DO SITEMAP DIFICULTA A INDEXAÇÃO
• ex ENVIAR ARQUIVO “SITEMAP.XML”
GERADOR DE SITEMAP –
http://www.xml-sitemaps.com/
ENVIAR PARA O GOOGLE –
https://support.google.com/webmasters/answer/183669?hl=en&ref_topic=8476

2. ESTRUTURA E CÓDIGO
• UTILIZAR CÓDIGO EXTERNO (ESTILOS NO TOPO E
SCRIPT NO RODAPÉ )
<LINK> E <SCRIPT>
• COMPRIMIR O CSS
• PARA O NAVEGADOR NADA IMPORTA
ECONOMIZA BITES E O TEMPO DE EXECUÇÃO
• COMPRESSADOR - http://cssminifier.com

• PREFIRA LINK AO INVÉS DE
@IMPORT
• Há duas maneiras de incluir uma folha
de estilo externa na sua página, pode
ser através da tag “link”
<link rel="stylesheet" href="style.css">
Ou da propriedade @import:
@import url('style.css');
• Com o atributo @import
o navegador é incapaz de
realizar o download em
paralelo, o que causa
atraso na cascata de
carregamento dos
arquivos.

• CARREGAMENTO ASSÍNCRONICO
• É IMPORTANTE PRINCIPALMENTE QUANDO
CARREGAMOS O CÓDIGO DE TERCEIROS PARA
EMBEDAR UM BOTÃO LIKE OU TWEET POR EXEMPLO.
• OS CÓDIGOS MUITAS VEZES ESTÃO INEFICIENTES
DEVIDO A CONEXÃO DO USUÁRIO OU PELA CONEXÃO
COM O SERVIDOR ONDE ESTÃO HOSPEDADOS
• USAMOS ENTÃO OS CÓDIGOS DE FORMA
ASSÍNCRONICA (OU ENTÃO IFRAMES)
COMPRESSOR JAVASCRIPT -
http://developer.yahoo.com/yui/compressor/
var script = document.createElement('script'),
scripts = document.getElementsByTagName
('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

3. DIAGNÓSTICO
• FERRAMENTAS DE DIAGNÓSTICO SEO
(yslow, pagespeed, webpagetest, http archive)
• Em geral elas analisam a performance do seu site, geram um relatório e dão uma
nota para ele, sem contar nas dicas preciosas que apresentam para você resolver
cada um dos problemas.
• ACOMPANHAMENTO DOS RESULTADOS
• O SITE NÃO MORRE DEPOIS DE FINALIZADO
• Comportamento pós-compra é fundalmental

3. DIAGNÓSTICO
• TÉCNICAS BLACK HAT

4. BÔNUS
• TESTE A/B
• DIVIDE O TRÁFEGO DE UMA DETERMINADA
PÁGINA EM DUAS VERSÕES E VERIFICA QUAL
DAS DUAS GERA MAIOR TAXA DE CONVERSÃO
• FEEDBACK REAL DO MERCADO E MENSURAÇÃO
COM PRECISÃO.
• DEVE SE TER UM NÚMERO SIGNIFICATIVO DE ACESSOS.

OBRIGADO
!“ Você pode encarar um erro como uma besteira a ser esquecida,
ou como um resultado que aponta uma nova direção. ”
STEVE JOBS

SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA

Mais conteúdo relacionado

Mais procurados

Semelhante a SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA

Último

SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA