SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
-
Upload
leonardo-ferreira -
Category
Technology
-
view
399 -
download
7
description
Transcript of SEO – A PEÇA CHAVE DO QUEBRA-CABEÇA
LEONARDO FERREIRA
• Graduando em Design Gráfico - ESAMC
• WebDesigner e Programador Front-End (UI e UX)
• CEO FerreiraStudios e BlogdosOito
• Youtube Creator
• 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
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
SEO ON-PAGE (ASPECTOS INTERNOS)
• DESCRIPTION
• Use a “meta tag” description
• Construa uma description atraente
• Seja verdadeiro e Criativo
• Utilize palavras chave (Keywords)
SEO ON-PAGE (ASPECTOS INTERNOS)
<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
SEO ON-PAGE (ASPECTOS INTERNOS)
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
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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;}
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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.
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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') ;}
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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/
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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
SEO ON-PAGE (ASPECTOS INTERNOS)
• 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 ON-PAGE (ASPECTOS INTERNOS)
• 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
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.