View
15.594
Download
2
Category
Preview:
Citation preview
SEO para Front-End Dicas para construir sites melhores
Por Fábio Ricotta, Co-Fundador da MestreSEO Front In Sampa - Novembro de 2012
Fábio Ricotta Co-Fundador da MestreSEO
Contato Twitter: @fabioricotta Email: fabioricotta@mestreseo.com.br Website: www.mestreseo.com.br
Elias e Fábio, em Boston, Abril de 2012
slideshare.net/fabioricotta Você pode baixar esta e todas as outras palestras...
O Mercado O cenário do profissional de Front End
Antes de começar
Gostaria de mostrar como está o nosso mercado...
http://digitaisdomarketing.com.br/o-analista-de-redes-sociais
Engraçado não é? Parece piada...
Mas e no mercado de fron-end?
Nos dias de hoje
Quando as empresas buscam por front-ends...
Elas especificam a vaga de uma forma curiosa...
Praticamente todas
As empresas querem um front-end com conhecimentos em SEO!
Que tal
Aprender um pouco de SEO? Vamos lá?
Entendendo Princípios Como o Google funciona
http://www.youtube.com/watch?v=BNHR6IQJGZs
http://www.youtube.com/watch?v=BNHR6IQJGZs
http://www.youtube.com/watch?v=BNHR6IQJGZs
http://www.youtube.com/watch?v=BNHR6IQJGZs
http://www.youtube.com/watch?v=BNHR6IQJGZs
Fórmula Secreta =
200 fatores (PageRank e outros).
O Brasil fala “Googlês”
No Brasil
De cada 100 buscas, o Google é o mediador de 86
http://www.serasaexperian.com.br/release/noticias/2012/noticia_00883.htm
86%
14%
Market Share – Buscas no Brasil
Outros
O interessante
As buscas são compostas normalmente de 1 a 4 termos
Explicando o SEO O que é esta sopa de letrinhas?
Links Patrocinados
Resultados Orgânicos
É na área de resultados orgânicos que trabalhamos...
Pois, em média, os resultados orgânicos recebem cerca de 70% dos cliques.
30% dos cliques
70% dos cliques
Resumindo um pouco a história...
Meu Cliente
*
*
*
Estando melhor posicionado, eu consigo mais visitantes.
10 Dicas de SEO para Front-End
1. Webmaster Tools
O Google Webmaster Tools
plataforma do Google para ajudar os webmasters
https://www.google.com/webmasters/tools/
Fica a dica
A Microsoft (Bing) também possui uma plataforma para ajudar os webmasters
Elas te dão
Avisos sobre como você pode melhorar o seu site...
E ainda
Mostram quando você possui algum problema sério.
2. Títulos
Guarde como um mantra
Cada página deve possuir um <title> único
Saiba que
O <title> é a informação que o Google vai exibir na página de resultados
3. Imagens
É importante você saber que
O Google adora imagens!
http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=114016
Coloque sempre
Nomes detalhados e informativos, como servico-hospedagem-cloud.jpg e fuja de DSC00281.jpg
Forneça sempre
Um atributo ALT informativo, como <img src=“” alt=“Máquina virtual no IBM SmartCloud Enterprise+”>
E sempre
Forneça contexto para a sua imagem, não a deixando-a sozinha na página.
4. URLs
Para o Google as URLs indicam
O que vamos encontrar naquela página
Por exemplo,
O que você entende por uma URL como: www.meusite.com/?p=1234
É simples.
Nada.
Agora,
O que você entende por uma URL como: www.meusite.com/servicos/servidor-cloud
É simples.
Que aquela página é de “serviços” e falará de “servidores cloud”.
Na nossa área
Chamamos isto de URLs amigáveis.
O Google
Privilegia URLs que contém palavras sobre o assunto que elas tratam.
5. Tempo de Carregamento
http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
A essência é
As pessoas desejam acessar sites mais rápidos
Então
O Google adotou isto como fator de rankeamento!
Logo
Você pode otimizar o tempo de carregamento por etapas...
Comece por aqui...
Nas imagens do seu site, através de compressão...
Para facilitar
Use ferramentas como jpegtran, Jpegoptim, OptiPNG ou PNGOUT.
Nos arquivos
Javascript e CSS através de versões reduzidas, sem comentários e espaços...
Para facilitar
Use ferramentas como Closure Compiler, JSMin, CSSmin ou YUI Compressor.
No servidor
Habilite a compressão gzip...
O que ele faz
É fornecer uma versão compactada dos seus arquivos.
Onde as otimizações
São indicadas pela ferramenta PageSpeed
https://developers.google.com/speed/pagespeed/insights
Ou ainda
Pela ferramenta WebPageTest
6. Rich Snippets
Em 2009
O Google fez um anúncio que mudaria muitos websites
http://googlewebmastercentral.blogspot.com.br/2009/05/introducing-rich-snippets.html
Mas desde 2009
O Google melhorou e muito o suporte às marcações
http://www.google.com/webmasters/tools/richsnippets
E vale lembrar
Que existem diretrizes para as rich snippets
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2722261
7. Rel Author
Você já se perguntou
Como faço para aparecer meu rosto no Google?
Você pode conseguir
Aumento de 30% de visitas apenas por exibir sua foto
Você deve pensar
E como posso usar no meu site?
É simples, olha só...
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1408986
Você front-end
Já pode criar isto em dois passos simples
Primeiro passo
Cada página do site deve possuir um link <a href="[profile_url]?rel=author">Google</a>
Segundo passo
O autor, em seu perfil do Google+, deve adicionar um link para o site.
Em seguida
Basta validar utilizando a ferramenta de Rich Snippets
http://www.google.com/webmasters/tools/richsnippets
8. Sitemap.XML
Em 2008
Os grandes mecanismos de busca adotaram um padrão...
Este padrão
É uma forma de informar aos mecanismos de busca as páginas existentes em um site.
E o padrão
Tem mais ou menos esta “cara”:
9. AJAX
Um dos
Grandes problemas do Google é ler AJAX.
Isto acontence
Pois o Googlebot é um “navegador” com Javascript desabilitado
https://developers.google.com/webmasters/ajax-crawling/
De forma sequencial...
O Googlebot
Encontra uma URL como esta: www.example.com/page? query#!mystake
Assim
O Google é capaz de ler o conteúdo que seria carregado em AJAX.
10. Flash
Assim como no AJAX
O Google tem sérios problemas em ler Flash.
Olhando por cima
Parece tudo bem, correto? Hummmmm....
Fica a dica
Sempre veja a “versão somente texto”.
Em branco...
É desta forma que o Google “enxerga” o site em Flash.
E olhando
O código fonte, notamos...
Que
Nunca este código será o mesmo que um conteúdo no HTML.
Considerações Finais
Fórmula mágica
Para ter sucesso, basta implementar...
Por fim...
Não existe mágica. Existem empresas que já implementam...
Falta apenas você.
Muito Obrigado! Dúvidas?
Contato Twitter: @fabioricotta Email: fabioricotta@mestreseo.com.br Website: www.mestreseo.com.br
Recommended