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

Google

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

http://www.bing.com/toolbox/webmaster

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

http://www.webpagetest.org/result/121015_HH_EFY/

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...

http://www.sitemaps.org/

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.

http://www.pierpaulista.com.br/

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