Palestra oferecida aos programadores e entusiastas no IBM Tech Day 2012. Esta palestra reuniu diversas dicas para desenvolvedores web e web designers, levando-os a pensar mais em técnicas de SEO para ajudá-los nos desafios do dia-a-dia.

1. SEO para Devs. e Designers
Dicas para webdevelopers e webdesigners
Por Fábio Ricotta, Co-Fundador da MestreSEO
IBM TechDay 2012 - Outubro 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. Entendendo
Princípios
Como o Google funciona

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

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

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

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

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

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

13. O Brasil fala
“Googlês”

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

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

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

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

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

21. Links Patrocinados

22. Resultados Orgânicos

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

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

25. 30% dos cliques
70% dos cliques

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

28. Meu
Cliente
*

29. *

30. *

31. Estando melhor
posicionado, eu consigo
mais visitantes.

32. Planejamento

33. Precisamos sempre
entender o que o
dono/cliente deseja...

34. http://bit.ly/briefing-seo

35. SEMPRE
Crie e preencha a
planilha de briefing.

36. Conteúdo

37. Precisamos investigar
o que as pessoas
buscam na área...

38. E assim
fornecer no nosso
website estas
informações

39. Posso começar,
olhando o nosso briefing
do projeto...

40. E complementar,
com a ferramenta
Google Keyword Tool

41. https://adwords.google.com/o/KeywordTool

42. Ela fornece
uma visão sobre quais
termos as pessoas usam

43. Fique atento
Uma dica importante

44. https://adwords.google.com/o/KeywordTool

45. Utilize sempre
A opção
correspondência exata!

48. Desta forma
Você terá um valor mais
próximo das buscas
mensais pelo termo.

49. Organização do Site

50. Diante dos dados iniciais
organizo uma planilha das
palavras que vou abordar e
seus volumes de busca

52. Em seguida
crio um mapa mental de
como as páginas serão
organizadas

54. Você pode utilizar
uma ferramenta como o
MindMeinster

55. http://www.mindmeister.com/pt

56. SEO para o Site

57. 10 Dicas
Fundamentais

58. 1. Webmaster Tools

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

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

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

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

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

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

65. 2. Títulos

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

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

75. 3. Imagens

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

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

78. Coloque sempre
Nomes detalhados e
informativos,
como ibm-smartcloud-enterprise.jpg
e fuja de DSC00281.jpg

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

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

84. 4. URLs

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

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

87. É simples.
Nada.

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

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

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

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

92. 5. Tempo de
Carregamento

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

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

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

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

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

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

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

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

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

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

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

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

111. Ou ainda
Pela ferramenta
WebPageTest

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

113. 6.
Redirecionamentos

114. Sempre que você
Mudar alguma
URL, lembre-se:

115. paginaA.html

116. paginaA.html

117. paginaA.html paginaB.html

118. Redirecionamento 301
paginaA.html paginaB.html

119. O Google
Entende o
redirecionamento 301
como uma transferência de
propriedades

120. Ou seja
Tudo o que você
possuía, será passado para
a nova URL.

121. A regra
Vale também para
domínios!

122. 7. Rel Author

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

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

127. Você deve pensar
E como podemos usar
isto na IBM?

128. É simples, olha só...

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

132. Você dev. ou webdesigner
Já pode criar isto em
dois passos simples

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

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

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

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

137. 8. Sitemap.XML

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

139. http://www.sitemaps.org/

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

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

144. O sitemap.xml
É fundamental para sites
grandes, com muitas
páginas.

145. 9. AJAX

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

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

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

149. De forma sequencial...

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

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

153. 10. Flash

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

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

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

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

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

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

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

167. Considerações Finais

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

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

170. Falta apenas você.

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