SEO para Front-End
66 gostaram9,394 visualizações
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.
![Primeiro passo
Cada página do site deve
possuir um link
<a href="[profile_url]?rel=author">Google</a>](https://image.slidesharecdn.com/fabio-ricotta-frontinsp-121105061414-phpapp02/85/SEO-para-Front-End-122-320.jpg)
SEO para Front-End
- 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...
- 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
- 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
- 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?
- 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
- 50. O Google Webmaster Tools plataforma do Google para ajudar os webmasters
- 52. Fica a dica A Microsoft (Bing) também possui uma plataforma para ajudar os webmasters
- 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!
- 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.
- 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
- 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
- 111. E vale lembrar Que existem diretrizes para as rich snippets
- 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ó...
- 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
- 126. 8. Sitemap.XML
- 127. Em 2008 Os grandes mecanismos de busca adotaram um padrão...
- 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
- 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.
- 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