Post on 06-Jun-2015
description
SEO para Front-End Dicas para construir sites melhores
Por Fábio Ricotta, Co-Fundador da MestreSEO BeagaJS - Março de 2013
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
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...
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.
Uma dica...
No Wordpress...
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.
Faça otimizações
Indicadas pela ferramenta PageSpeed
https://developers.google.com/speed/pagespeed/insights
Ou ainda
Pela ferramenta WebPageTest
No Wordpress
Podemos usar o plugin W3 Total Cache
http://wordpress.org/extend/plugins/w3-total-cache/
Se você quiser
Pode utilizar o serviço CloudFlare
https://pt-br.cloudflare.com/
É bem simples o funcionamento...
Ainda existe
O serviço do Google, chamado PageSpeed
https://developers.google.com/speed/pagespeed/service?hl=pt-BR
Assim
O seu site irá carregar muito mais rápido
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
Um exemplo bem simples...
Mas desde 2009
O Google melhorou e muito o suporte às marcações
http://www.google.com/webmasters/tools/richsnippets
Existem
Vários tipos de rich snippets
A mais simples
É a de Breadcrumb
<body> ... <div> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a> </div>
<body itemscope itemtype="http://schema.org/WebPage"> ... <div itemprop="breadcrumb"> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a> </div>
Uma bem utilizada
É a Reviews
Uma em ascensão
É a Receitas
Aprenda mais
Use o Schema.org e aprenda mais sobre estas novas formatações
http://www.schema.org/docs/schemas.html
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”:
No Wordpress
Você precisará do Wordpress SEO instalado...
Será algo como: http://www.meusite.com.br/sitemap_index.xml
Com esta URL em mãos...
Todo mundo
O Google vai descobrir as minhas páginas rapidamente!
Atenção
Um detalhe importante!
Não usem
Geradores que descobrem as suas URLs!
O problema é que
Eles podem cometer erros de leitura de URLs e isto pode lhe prejudicar
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
Crawler Seu Servidor
www.example.com/page?query#!mystake
O robô de busca (crawler) encontra a URL
Crawler Seu Servidor
www.example.com/page?query#!mystake
www.example.com/page?query&_escape_fragment=mystake
Ele transforma a URL e uma URL “feia”
Crawler Seu Servidor
www.example.com/page?query&_escape_fragment=mystake
O robô faz a consulta da URL no seu servidor
Crawler Seu Servidor
O servidor vê que é uma URL “feia” e mapeia ela para a URL AJAX
www.example.com/page? query#!mystake
Crawler Seu Servidor
O servidor invoca o “Headless Browser”
Headless Browser
Crawler Seu Servidor
O “Headless Browser” executa o javascript e gera um Snapshot do HTML
Headless Browser
Snapshot do HTML
Crawler Seu Servidor
Snapshot do HTML
Headless Browser
O servidor envia ao robô o Snapshot do HTML
Crawler Seu Servidor
O robô processa o Snapshot de HTML e extrai as URLs normais.
Headless Browser
Snapshot do HTML
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.
Extra
Seu futuro
Quer aprender mais?
http://groups.google.com/a/googleproductforums.com/forum/#!forum/webmaster-pt
http://www.mestreseo.com.br/artigos-seo
https://www.facebook.com/mestreseo
Fórmula mágica
Para ter sucesso, basta implementar...
Rumo ao sucesso! Agora é dominar o mundo!
Muito Obrigado! Dúvidas?
Contato Twitter: @fabioricotta Email: fabioricotta@mestreseo.com.br Website: www.mestreseo.com.br