SEO para Front-End - BeagaJS

217
SEO para Front-End Dicas para construir sites melhores Por Fábio Ricotta, Co-Fundador da MestreSEO BeagaJS - Março de 2013

description

Palestra oferecida em BH no evento BeagaJS. Nesta palestra tive a oportunidade de mostrar 10 dicas pontuais para que os front-ends consigam aplicar SEO.

Transcript of SEO para Front-End - BeagaJS

Page 1: SEO para Front-End - BeagaJS

SEO para Front-End Dicas para construir sites melhores

Por Fábio Ricotta, Co-Fundador da MestreSEO BeagaJS - Março de 2013

Page 2: SEO para Front-End - BeagaJS

Fábio Ricotta Co-Fundador da MestreSEO

Contato Twitter: @fabioricotta Email: [email protected] Website: www.mestreseo.com.br

Page 3: SEO para Front-End - BeagaJS

Elias e Fábio, em Boston, Abril de 2012

Page 4: SEO para Front-End - BeagaJS

slideshare.net/fabioricotta Você pode baixar esta e todas as outras palestras...

Page 5: SEO para Front-End - BeagaJS

O Mercado O cenário do profissional de Front End

Page 6: SEO para Front-End - BeagaJS

Antes de começar

Gostaria de mostrar como está o nosso mercado...

Page 8: SEO para Front-End - BeagaJS

Engraçado não é? Parece piada...

Page 9: SEO para Front-End - BeagaJS

Mas e no mercado de fron-end?

Page 10: SEO para Front-End - BeagaJS

Nos dias de hoje

Quando as empresas buscam por front-ends...

Page 11: SEO para Front-End - BeagaJS

Elas especificam a vaga de uma forma curiosa...

Page 12: SEO para Front-End - BeagaJS
Page 13: SEO para Front-End - BeagaJS
Page 14: SEO para Front-End - BeagaJS
Page 15: SEO para Front-End - BeagaJS
Page 16: SEO para Front-End - BeagaJS
Page 17: SEO para Front-End - BeagaJS
Page 18: SEO para Front-End - BeagaJS
Page 19: SEO para Front-End - BeagaJS

Praticamente todas

As empresas querem um front-end com conhecimentos em SEO!

Page 20: SEO para Front-End - BeagaJS

Que tal

Aprender um pouco de SEO? Vamos lá?

Page 21: SEO para Front-End - BeagaJS

Entendendo Princípios Como o Google funciona

Page 22: SEO para Front-End - BeagaJS
Page 23: SEO para Front-End - BeagaJS

http://www.youtube.com/watch?v=BNHR6IQJGZs

Page 24: SEO para Front-End - BeagaJS

http://www.youtube.com/watch?v=BNHR6IQJGZs

Page 25: SEO para Front-End - BeagaJS

http://www.youtube.com/watch?v=BNHR6IQJGZs

Page 26: SEO para Front-End - BeagaJS

http://www.youtube.com/watch?v=BNHR6IQJGZs

Page 27: SEO para Front-End - BeagaJS

http://www.youtube.com/watch?v=BNHR6IQJGZs

Page 28: SEO para Front-End - BeagaJS

Fórmula Secreta =

200 fatores (PageRank e outros).

Page 29: SEO para Front-End - BeagaJS

O Brasil fala “Googlês”

Page 30: SEO para Front-End - BeagaJS

No Brasil

De cada 100 buscas, o Google é o mediador de 86

Page 31: SEO para Front-End - BeagaJS

http://www.serasaexperian.com.br/release/noticias/2012/noticia_00883.htm

Page 32: SEO para Front-End - BeagaJS

86%

14%

Market Share – Buscas no Brasil

Google

Outros

Page 33: SEO para Front-End - BeagaJS

Explicando o SEO O que é esta sopa de letrinhas?

Page 34: SEO para Front-End - BeagaJS
Page 35: SEO para Front-End - BeagaJS

Links Patrocinados

Page 36: SEO para Front-End - BeagaJS

Resultados Orgânicos

Page 37: SEO para Front-End - BeagaJS

É na área de resultados orgânicos que trabalhamos...

Page 38: SEO para Front-End - BeagaJS

Pois, em média, os resultados orgânicos recebem cerca de 70% dos cliques.

Page 39: SEO para Front-End - BeagaJS

30% dos cliques

70% dos cliques

Page 40: SEO para Front-End - BeagaJS

Resumindo um pouco a história...

Page 41: SEO para Front-End - BeagaJS

Estando melhor posicionado, eu consigo mais visitantes.

Page 42: SEO para Front-End - BeagaJS

10 Dicas de SEO para Front-End

Page 43: SEO para Front-End - BeagaJS

1. Webmaster Tools

Page 44: SEO para Front-End - BeagaJS

O Google Webmaster Tools

plataforma do Google para ajudar os webmasters

Page 46: SEO para Front-End - BeagaJS

Fica a dica

A Microsoft (Bing) também possui uma plataforma para ajudar os webmasters

Page 47: SEO para Front-End - BeagaJS

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

Page 48: SEO para Front-End - BeagaJS

Elas te dão

Avisos sobre como você pode melhorar o seu site...

Page 49: SEO para Front-End - BeagaJS

E ainda

Mostram quando você possui algum problema sério.

Page 50: SEO para Front-End - BeagaJS

2. Títulos

Page 51: SEO para Front-End - BeagaJS

Guarde como um mantra

Cada página deve possuir um <title> único

Page 52: SEO para Front-End - BeagaJS
Page 53: SEO para Front-End - BeagaJS
Page 54: SEO para Front-End - BeagaJS
Page 55: SEO para Front-End - BeagaJS
Page 56: SEO para Front-End - BeagaJS

Saiba que

O <title> é a informação que o Google vai exibir na página de resultados

Page 57: SEO para Front-End - BeagaJS
Page 58: SEO para Front-End - BeagaJS
Page 59: SEO para Front-End - BeagaJS
Page 60: SEO para Front-End - BeagaJS

3. Imagens

Page 61: SEO para Front-End - BeagaJS

É importante você saber que

O Google adora imagens!

Page 63: SEO para Front-End - BeagaJS

Coloque sempre

Nomes detalhados e informativos, como servico-hospedagem-cloud.jpg e fuja de DSC00281.jpg

Page 64: SEO para Front-End - BeagaJS

Forneça sempre

Um atributo ALT informativo, como <img src=“” alt=“Máquina virtual no IBM SmartCloud Enterprise+”>

Page 65: SEO para Front-End - BeagaJS

E sempre

Forneça contexto para a sua imagem, não a deixando-a sozinha na página.

Page 66: SEO para Front-End - BeagaJS
Page 67: SEO para Front-End - BeagaJS
Page 68: SEO para Front-End - BeagaJS
Page 69: SEO para Front-End - BeagaJS

4. URLs

Page 70: SEO para Front-End - BeagaJS

Para o Google as URLs indicam

O que vamos encontrar naquela página

Page 71: SEO para Front-End - BeagaJS

Por exemplo,

O que você entende por uma URL como: www.meusite.com/?p=1234

Page 72: SEO para Front-End - BeagaJS

É simples.

Nada.

Page 73: SEO para Front-End - BeagaJS

Agora,

O que você entende por uma URL como: www.meusite.com/servicos/servidor-cloud

Page 74: SEO para Front-End - BeagaJS

É simples.

Que aquela página é de “serviços” e falará de “servidores cloud”.

Page 75: SEO para Front-End - BeagaJS

Na nossa área

Chamamos isto de URLs amigáveis.

Page 76: SEO para Front-End - BeagaJS

O Google

Privilegia URLs que contém palavras sobre o assunto que elas tratam.

Page 77: SEO para Front-End - BeagaJS

Uma dica...

No Wordpress...

Page 78: SEO para Front-End - BeagaJS
Page 79: SEO para Front-End - BeagaJS
Page 80: SEO para Front-End - BeagaJS
Page 81: SEO para Front-End - BeagaJS
Page 82: SEO para Front-End - BeagaJS
Page 83: SEO para Front-End - BeagaJS

5. Tempo de Carregamento

Page 85: SEO para Front-End - BeagaJS

A essência é

As pessoas desejam acessar sites mais rápidos

Page 86: SEO para Front-End - BeagaJS

Então

O Google adotou isto como fator de rankeamento!

Page 87: SEO para Front-End - BeagaJS

Logo

Você pode otimizar o tempo de carregamento por etapas...

Page 88: SEO para Front-End - BeagaJS

Comece por aqui...

Nas imagens do seu site, através de compressão...

Page 90: SEO para Front-End - BeagaJS

Nos arquivos

Javascript e CSS através de versões reduzidas, sem comentários e espaços...

Page 92: SEO para Front-End - BeagaJS

No servidor

Habilite a compressão gzip...

Page 93: SEO para Front-End - BeagaJS
Page 94: SEO para Front-End - BeagaJS
Page 95: SEO para Front-End - BeagaJS

O que ele faz

É fornecer uma versão compactada dos seus arquivos.

Page 96: SEO para Front-End - BeagaJS

Faça otimizações

Indicadas pela ferramenta PageSpeed

Page 97: SEO para Front-End - BeagaJS

https://developers.google.com/speed/pagespeed/insights

Page 98: SEO para Front-End - BeagaJS
Page 99: SEO para Front-End - BeagaJS
Page 100: SEO para Front-End - BeagaJS
Page 101: SEO para Front-End - BeagaJS
Page 102: SEO para Front-End - BeagaJS

Ou ainda

Pela ferramenta WebPageTest

Page 103: SEO para Front-End - BeagaJS

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

Page 104: SEO para Front-End - BeagaJS

No Wordpress

Podemos usar o plugin W3 Total Cache

Page 106: SEO para Front-End - BeagaJS

Se você quiser

Pode utilizar o serviço CloudFlare

Page 108: SEO para Front-End - BeagaJS

É bem simples o funcionamento...

Page 109: SEO para Front-End - BeagaJS
Page 110: SEO para Front-End - BeagaJS
Page 111: SEO para Front-End - BeagaJS

Ainda existe

O serviço do Google, chamado PageSpeed

Page 113: SEO para Front-End - BeagaJS

Assim

O seu site irá carregar muito mais rápido

Page 114: SEO para Front-End - BeagaJS

6. Rich Snippets

Page 115: SEO para Front-End - BeagaJS

Em 2009

O Google fez um anúncio que mudaria muitos websites

Page 117: SEO para Front-End - BeagaJS

Um exemplo bem simples...

Page 118: SEO para Front-End - BeagaJS
Page 119: SEO para Front-End - BeagaJS
Page 120: SEO para Front-End - BeagaJS

Mas desde 2009

O Google melhorou e muito o suporte às marcações

Page 121: SEO para Front-End - BeagaJS

http://www.google.com/webmasters/tools/richsnippets

Page 122: SEO para Front-End - BeagaJS

Existem

Vários tipos de rich snippets

Page 123: SEO para Front-End - BeagaJS
Page 124: SEO para Front-End - BeagaJS

A mais simples

É a de Breadcrumb

Page 125: SEO para Front-End - BeagaJS
Page 126: SEO para Front-End - BeagaJS

<body> ... <div> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a> </div>

Page 127: SEO para Front-End - BeagaJS

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

Page 128: SEO para Front-End - BeagaJS

http://schema.org/WebPage

Page 129: SEO para Front-End - BeagaJS

Uma bem utilizada

É a Reviews

Page 130: SEO para Front-End - BeagaJS
Page 131: SEO para Front-End - BeagaJS

http://schema.org/Review

Page 132: SEO para Front-End - BeagaJS

Uma em ascensão

É a Receitas

Page 133: SEO para Front-End - BeagaJS
Page 134: SEO para Front-End - BeagaJS

http://schema.org/Recipe

Page 135: SEO para Front-End - BeagaJS

Aprenda mais

Use o Schema.org e aprenda mais sobre estas novas formatações

Page 137: SEO para Front-End - BeagaJS

E vale lembrar

Que existem diretrizes para as rich snippets

Page 138: SEO para Front-End - BeagaJS

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2722261

Page 139: SEO para Front-End - BeagaJS

7. Rel Author

Page 140: SEO para Front-End - BeagaJS

Você já se perguntou

Como faço para aparecer meu rosto no Google?

Page 141: SEO para Front-End - BeagaJS
Page 142: SEO para Front-End - BeagaJS
Page 143: SEO para Front-End - BeagaJS

Você pode conseguir

Aumento de 30% de visitas apenas por exibir sua foto

Page 144: SEO para Front-End - BeagaJS

Você deve pensar

E como posso usar no meu site?

Page 145: SEO para Front-End - BeagaJS

É simples, olha só...

Page 146: SEO para Front-End - BeagaJS

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1408986

Page 147: SEO para Front-End - BeagaJS

Você front-end

Já pode criar isto em dois passos simples

Page 148: SEO para Front-End - BeagaJS

Primeiro passo

Cada página do site deve possuir um link <a href="[profile_url]?rel=author">Google</a>

Page 149: SEO para Front-End - BeagaJS
Page 150: SEO para Front-End - BeagaJS
Page 151: SEO para Front-End - BeagaJS

Segundo passo

O autor, em seu perfil do Google+, deve adicionar um link para o site.

Page 152: SEO para Front-End - BeagaJS

Em seguida

Basta validar utilizando a ferramenta de Rich Snippets

Page 153: SEO para Front-End - BeagaJS

http://www.google.com/webmasters/tools/richsnippets

Page 154: SEO para Front-End - BeagaJS

8. Sitemap.XML

Page 155: SEO para Front-End - BeagaJS

Em 2008

Os grandes mecanismos de busca adotaram um padrão...

Page 156: SEO para Front-End - BeagaJS

http://www.sitemaps.org/

Page 157: SEO para Front-End - BeagaJS

Este padrão

É uma forma de informar aos mecanismos de busca as páginas existentes em um site.

Page 158: SEO para Front-End - BeagaJS
Page 159: SEO para Front-End - BeagaJS

E o padrão

Tem mais ou menos esta “cara”:

Page 160: SEO para Front-End - BeagaJS
Page 161: SEO para Front-End - BeagaJS

No Wordpress

Você precisará do Wordpress SEO instalado...

Page 162: SEO para Front-End - BeagaJS
Page 163: SEO para Front-End - BeagaJS
Page 164: SEO para Front-End - BeagaJS

Será algo como: http://www.meusite.com.br/sitemap_index.xml

Page 165: SEO para Front-End - BeagaJS

Com esta URL em mãos...

Page 166: SEO para Front-End - BeagaJS
Page 167: SEO para Front-End - BeagaJS
Page 168: SEO para Front-End - BeagaJS
Page 169: SEO para Front-End - BeagaJS
Page 170: SEO para Front-End - BeagaJS
Page 171: SEO para Front-End - BeagaJS

Todo mundo

O Google vai descobrir as minhas páginas rapidamente!

Page 172: SEO para Front-End - BeagaJS

Atenção

Um detalhe importante!

Page 173: SEO para Front-End - BeagaJS
Page 174: SEO para Front-End - BeagaJS

Não usem

Geradores que descobrem as suas URLs!

Page 175: SEO para Front-End - BeagaJS

O problema é que

Eles podem cometer erros de leitura de URLs e isto pode lhe prejudicar

Page 176: SEO para Front-End - BeagaJS

9. AJAX

Page 177: SEO para Front-End - BeagaJS

Um dos

Grandes problemas do Google é ler AJAX.

Page 178: SEO para Front-End - BeagaJS

Isto acontence

Pois o Googlebot é um “navegador” com Javascript desabilitado

Page 180: SEO para Front-End - BeagaJS

De forma sequencial...

Page 181: SEO para Front-End - BeagaJS

O Googlebot

Encontra uma URL como esta: www.example.com/page? query#!mystake

Page 182: SEO para Front-End - BeagaJS

Crawler Seu Servidor

www.example.com/page?query#!mystake

O robô de busca (crawler) encontra a URL

Page 183: SEO para Front-End - BeagaJS

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”

Page 184: SEO para Front-End - BeagaJS

Crawler Seu Servidor

www.example.com/page?query&_escape_fragment=mystake

O robô faz a consulta da URL no seu servidor

Page 185: SEO para Front-End - BeagaJS

Crawler Seu Servidor

O servidor vê que é uma URL “feia” e mapeia ela para a URL AJAX

www.example.com/page? query#!mystake

Page 186: SEO para Front-End - BeagaJS

Crawler Seu Servidor

O servidor invoca o “Headless Browser”

Headless Browser

Page 187: SEO para Front-End - BeagaJS

Crawler Seu Servidor

O “Headless Browser” executa o javascript e gera um Snapshot do HTML

Headless Browser

Snapshot do HTML

Page 188: SEO para Front-End - BeagaJS

Crawler Seu Servidor

Snapshot do HTML

Headless Browser

O servidor envia ao robô o Snapshot do HTML

Page 189: SEO para Front-End - BeagaJS

Crawler Seu Servidor

O robô processa o Snapshot de HTML e extrai as URLs normais.

Headless Browser

Snapshot do HTML

Page 190: SEO para Front-End - BeagaJS

Assim

O Google é capaz de ler o conteúdo que seria carregado em AJAX.

Page 191: SEO para Front-End - BeagaJS

10. Flash

Page 192: SEO para Front-End - BeagaJS

Assim como no AJAX

O Google tem sérios problemas em ler Flash.

Page 193: SEO para Front-End - BeagaJS

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

Page 194: SEO para Front-End - BeagaJS
Page 195: SEO para Front-End - BeagaJS
Page 196: SEO para Front-End - BeagaJS
Page 197: SEO para Front-End - BeagaJS

Olhando por cima

Parece tudo bem, correto? Hummmmm....

Page 198: SEO para Front-End - BeagaJS

Fica a dica

Sempre veja a “versão somente texto”.

Page 199: SEO para Front-End - BeagaJS
Page 200: SEO para Front-End - BeagaJS
Page 201: SEO para Front-End - BeagaJS

Em branco...

É desta forma que o Google “enxerga” o site em Flash.

Page 202: SEO para Front-End - BeagaJS

E olhando

O código fonte, notamos...

Page 203: SEO para Front-End - BeagaJS
Page 204: SEO para Front-End - BeagaJS

Que

Nunca este código será o mesmo que um conteúdo no HTML.

Page 205: SEO para Front-End - BeagaJS

Extra

Page 206: SEO para Front-End - BeagaJS

Seu futuro

Quer aprender mais?

Page 209: SEO para Front-End - BeagaJS

http://digitaisdomarketing.com.br/

Page 210: SEO para Front-End - BeagaJS

http://inbound.org/

Page 212: SEO para Front-End - BeagaJS

https://twitter.com/fabioricotta

Page 213: SEO para Front-End - BeagaJS

https://twitter.com/marthagabriel

Page 214: SEO para Front-End - BeagaJS

http://www.mestreseo.com.br/newsletter

Page 215: SEO para Front-End - BeagaJS

Fórmula mágica

Para ter sucesso, basta implementar...

Page 216: SEO para Front-End - BeagaJS

Rumo ao sucesso! Agora é dominar o mundo!

Page 217: SEO para Front-End - BeagaJS

Muito Obrigado! Dúvidas?

Contato Twitter: @fabioricotta Email: [email protected] Website: www.mestreseo.com.br