O documento fornece 10 dicas para profissionais de front-end melhorarem o posicionamento de sites nos mecanismos de busca, especialmente no Google, através de otimizações relacionadas a SEO. As dicas incluem configurar ferramentas do Google e Bing para webmasters, melhorar títulos, imagens, URLs, tempo de carregamento, usar marcações rich snippets, sitemaps XML e lidar com conteúdo AJAX e Flash.

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

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. Explicando o SEO
O que é esta sopa de letrinhas?

35. Links Patrocinados

36. Resultados Orgânicos

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

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

39. 30% dos cliques
70% dos cliques

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

41. Estando melhor
posicionado, eu consigo
mais visitantes.

42. 10 Dicas de SEO
para Front-End

43. 1. Webmaster Tools

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

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

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

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

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

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

50. 2. Títulos

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

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

60. 3. Imagens

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

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

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

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

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

69. 4. URLs

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

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

72. É simples.
Nada.

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

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

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

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

77. Uma dica...
No Wordpress...

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. Faça otimizações
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. No Wordpress
Podemos usar o plugin
W3 Total Cache

105. http://wordpress.org/extend/plugins/w3-total-cache/

106. Se você quiser
Pode utilizar o serviço
CloudFlare

107. https://pt-br.cloudflare.com/

108. É bem simples o
funcionamento...

111. Ainda existe
O serviço do Google,
chamado PageSpeed

112. https://developers.google.com/speed/pagespeed/service?hl=pt-BR

113. Assim
O seu site irá carregar
muito mais rápido

114. 6. Rich Snippets

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

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

117. Um exemplo bem simples...

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

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

122. Existem
Vários tipos de
rich snippets

124. A mais simples
É a de Breadcrumb

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

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

128. http://schema.org/WebPage

129. Uma bem utilizada
É a Reviews

131. http://schema.org/Review

132. Uma em ascensão
É a Receitas

134. http://schema.org/Recipe

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

136. http://www.schema.org/docs/schemas.html

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

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

139. 7. Rel Author

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

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

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

145. É simples, olha só...

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

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

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

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

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

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

154. 8. Sitemap.XML

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

156. http://www.sitemaps.org/

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

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

161. No Wordpress
Você precisará do
Wordpress SEO instalado...

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

165. Com esta URL em mãos...

171. Todo mundo
O Google vai descobrir as
minhas páginas rapidamente!

172. Atenção
Um detalhe importante!

174. Não usem
Geradores que descobrem as
suas URLs!

175. O problema é que
Eles podem cometer erros de
leitura de URLs e isto pode lhe
prejudicar

176. 9. AJAX

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

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

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

180. De forma sequencial...

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

182. www.example.com/page?query#!mystake
O robô de busca (crawler) encontra a URL
Seu Servidor Crawler

183. www.example.com/page?query#!mystake
www.example.com/page?query&_escape_fragment=mystake
Seu Servidor Crawler
Ele transforma a URL e uma URL “feia”

184. www.example.com/page?query&_escape_fragment=mystake
Seu Servidor Crawler
O robô faz a consulta da URL no seu
servidor

185. O servidor vê que é uma URL “feia” e
mapeia ela para a URL AJAX
www.example.com/page? query#!mystake
Seu Servidor Crawler

186. O servidor invoca o “Headless Browser”
Seu Servidor Crawler
Headless
Browser

187. O “Headless Browser” executa o javascript e
gera um Snapshot do HTML
Seu Servidor Crawler
Headless Snapshot
Browser do HTML

188. O servidor envia ao robô o Snapshot do
HTML
Seu Servidor Crawler
Headless Snapshot
Browser do HTML

189. O robô processa o Snapshot de HTML e
extrai as URLs normais.
Seu Servidor Crawler
Headless Snapshot
Browser do HTML

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

191. 10. Flash

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

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

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

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

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

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

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

205. Extra

206. Seu futuro
Quer aprender mais?

207. http://groups.google.com/a/googleproductforums.com/forum/#!forum/webmaster-pt

208. http://www.mestreseo.com.br/artigos-seo

209. http://digitaisdomarketing.com.br/

210. http://inbound.org/

211. https://www.facebook.com/mestreseo

212. https://twitter.com/fabioricotta

213. https://twitter.com/marthagabriel

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

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

216. Rumo ao sucesso!
Agora é dominar o mundo!

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