O documento fornece 10 dicas para profissionais de front-end melhorarem o SEO de seus sites, incluindo usar as ferramentas do Google e Bing para webmasters, otimizar títulos, imagens, URLs, tempo de carregamento, e implementar recursos como rich snippets, sitemaps e técnicas para lidar com AJAX e Flash.

1. SEO para Front-End
Dicas para construir sites melhores
Por Fábio Ricotta, Co-Fundador da MestreSEO
Front In Sampa - Novembro de 2012

2. Fábio Ricotta
Co-Fundador da MestreSEO
Contato
Twitter: @fabioricotta
Email: fabioricotta@mestreseo.com.br
Website: www.mestreseo.com.br

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

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

5. O Mercado
O cenário do profissional de Front End

6. Antes de começar
Gostaria de mostrar como
está o nosso mercado...

7. http://digitaisdomarketing.com.br/o-analista-de-redes-sociais

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

9. Mas e no mercado de
fron-end?

10. Nos dias de hoje
Quando as empresas
buscam por front-ends...

11. Elas especificam a vaga de
uma forma curiosa...

19. Praticamente todas
As empresas querem um
front-end com
conhecimentos em SEO!

20. Que tal
Aprender um pouco de
SEO? Vamos lá?

21. Entendendo
Princípios
Como o Google funciona

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

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

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

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

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

28. Fórmula Secreta
=
200 fatores (PageRank e outros).

29. O Brasil fala
“Googlês”

30. No Brasil
De cada 100 buscas, o
Google é o mediador de 86

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

32. Market Share – Buscas no Brasil
14%
Google
Outros
86%

33. O interessante
As buscas são compostas
normalmente de 1 a 4
termos

35. Explicando o SEO
O que é esta sopa de letrinhas?

37. Links Patrocinados

38. Resultados Orgânicos

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

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

41. 30% dos cliques
70% dos cliques

42. Resumindo um pouco a
história...

44. Meu
Cliente
*

45. *

46. *

47. Estando melhor
posicionado, eu consigo
mais visitantes.

48. 10 Dicas de SEO
para Front-End

49. 1. Webmaster Tools

50. O Google Webmaster Tools
plataforma do Google para
ajudar os webmasters

51. https://www.google.com/webmasters/tools/

52. Fica a dica
A Microsoft (Bing) também
possui uma plataforma
para ajudar os webmasters

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

54. Elas te dão
Avisos sobre como você
pode melhorar o seu site...

55. E ainda
Mostram quando você
possui algum problema
sério.

56. 2. Títulos

57. Guarde como um mantra
Cada página deve possuir
um <title> único

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

66. 3. Imagens

67. É importante você saber que
O Google adora imagens!

68. http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=114016

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

70. Forneça sempre
Um atributo ALT
informativo,
como <img src=“” alt=“Máquina virtual no
IBM SmartCloud Enterprise+”>

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

75. 4. URLs

76. Para o Google as URLs indicam
O que vamos encontrar
naquela página

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

78. É simples.
Nada.

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

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

81. Na nossa área
Chamamos isto de URLs
amigáveis.

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

83. 5. Tempo de
Carregamento

84. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html

85. A essência é
As pessoas desejam
acessar sites mais
rápidos

86. Então
O Google adotou isto
como fator de
rankeamento!

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

88. Comece por aqui...
Nas imagens do seu site,
através de compressão...

89. Para facilitar
Use ferramentas como
jpegtran, Jpegoptim, OptiPNG
ou PNGOUT.

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

91. Para facilitar
Use ferramentas como
Closure Compiler, JSMin,
CSSmin ou YUI Compressor.

92. No servidor
Habilite a compressão
gzip...

95. O que ele faz
É fornecer uma versão
compactada dos seus
arquivos.

96. Onde as otimizações
São indicadas pela
ferramenta PageSpeed

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

102. Ou ainda
Pela ferramenta
WebPageTest

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

104. 6. Rich Snippets

105. Em 2009
O Google fez um anúncio
que mudaria muitos
websites

106. http://googlewebmastercentral.blogspot.com.br/2009/05/introducing-rich-snippets.html

109. Mas desde 2009
O Google melhorou e
muito o suporte às
marcações

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

111. E vale lembrar
Que existem diretrizes para
as rich snippets

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

113. 7. Rel Author

114. Você já se perguntou
Como faço para aparecer
meu rosto no Google?

117. Você pode conseguir
Aumento de 30% de
visitas apenas por exibir
sua foto

118. Você deve pensar
E como posso usar no
meu site?

119. É simples, olha só...

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

121. Você front-end
Já pode criar isto em
dois passos simples

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

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

124. Em seguida
Basta validar utilizando a
ferramenta de Rich
Snippets

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

126. 8. Sitemap.XML

127. Em 2008
Os grandes mecanismos
de busca adotaram um
padrão...

128. http://www.sitemaps.org/

129. Este padrão
É uma forma de informar
aos mecanismos de busca
as páginas existentes em
um site.

131. E o padrão
Tem mais ou menos esta
“cara”:

133. 9. AJAX

134. Um dos
Grandes problemas do
Google é ler AJAX.

135. Isto acontence
Pois o Googlebot é um
“navegador” com
Javascript desabilitado

136. https://developers.google.com/webmasters/ajax-crawling/

137. De forma sequencial...

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

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

141. 10. Flash

142. Assim como no AJAX
O Google tem sérios
problemas em ler Flash.

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

147. Olhando por cima
Parece tudo bem, correto?
Hummmmm....

148. Fica a dica
Sempre veja a “versão
somente texto”.

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

152. E olhando
O código fonte, notamos...

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

155. Considerações Finais

156. Fórmula mágica
Para ter sucesso, basta
implementar...

157. Por fim...
Não existe mágica.
Existem empresas que já
implementam...

158. Falta apenas você.

159. Muito Obrigado!
Dúvidas?
Contato
Twitter: @fabioricotta
Email: fabioricotta@mestreseo.com.br
Website: www.mestreseo.com.br