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

... AND NOW?

SEO(SEARCH ENGINE OPTIMIZATION)

86%CLICAM EM

RESULTADOS DABUSCA ORGÂNICA (SEO)

14%CLICAM EM

RESULTADOS DELINKS 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ÇÃOEM MÍDIAS

LINKS PATROCINAD

OS

SEOLINKS

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.php?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/index.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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%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/image_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

2. ESTRUTURA E CÓDIGO• 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.

2. ESTRUTURA E CÓDIGO• 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

Technology