Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SEO para Front-End

15,523

Published on

Published in: Technology
2 Comments
61 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,523
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
304
Comments
2
Likes
61
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SEO para Front-End Dicas para construir sites melhoresPor Fábio Ricotta, Co-Fundador da MestreSEOFront In Sampa - Novembro de 2012
  • 2. Fábio RicottaCo-Fundador da MestreSEOContatoTwitter: @fabioricottaEmail: fabioricotta@mestreseo.com.brWebsite: www.mestreseo.com.br
  • 3. Elias e Fábio, em Boston, Abril de 2012
  • 4. slideshare.net/fabioricottaVocê pode baixar esta e todas as outras palestras...
  • 5. O MercadoO cenário do profissional de Front End
  • 6. Antes de começarGostaria de mostrar comoestá 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 defron-end?
  • 10. Nos dias de hojeQuando as empresasbuscam por front-ends...
  • 11. Elas especificam a vaga deuma forma curiosa...
  • 12. Praticamente todasAs empresas querem umfront-end comconhecimentos em SEO!
  • 13. Que talAprender um pouco deSEO? Vamos lá?
  • 14. Entendendo Princípios Como o Google funciona
  • 15. http://www.youtube.com/watch?v=BNHR6IQJGZs
  • 16. http://www.youtube.com/watch?v=BNHR6IQJGZs
  • 17. http://www.youtube.com/watch?v=BNHR6IQJGZs
  • 18. http://www.youtube.com/watch?v=BNHR6IQJGZs
  • 19. http://www.youtube.com/watch?v=BNHR6IQJGZs
  • 20. Fórmula Secreta = 200 fatores (PageRank e outros).
  • 21. O Brasil fala “Googlês”
  • 22. No BrasilDe cada 100 buscas, oGoogle é o mediador de 86
  • 23. http://www.serasaexperian.com.br/release/noticias/2012/noticia_00883.htm
  • 24. Market Share – Buscas no Brasil 14% Google Outros 86%
  • 25. O interessanteAs buscas são compostasnormalmente de 1 a 4termos
  • 26. Explicando o SEO O que é esta sopa de letrinhas?
  • 27. Links Patrocinados
  • 28. Resultados Orgânicos
  • 29. É na área de resultadosorgânicos quetrabalhamos...
  • 30. Pois, em média, osresultados orgânicosrecebem cerca de 70%dos cliques.
  • 31. 30% dos cliques70% dos cliques
  • 32. Resumindo um pouco ahistória...
  • 33. Meu Cliente*
  • 34. *
  • 35. *
  • 36. Estando melhorposicionado, eu consigomais visitantes.
  • 37. 10 Dicas de SEOpara Front-End
  • 38. 1. Webmaster Tools
  • 39. O Google Webmaster Toolsplataforma do Google paraajudar os webmasters
  • 40. https://www.google.com/webmasters/tools/
  • 41. Fica a dicaA Microsoft (Bing) tambémpossui uma plataformapara ajudar os webmasters
  • 42. http://www.bing.com/toolbox/webmaster
  • 43. Elas te dãoAvisos sobre como vocêpode melhorar o seu site...
  • 44. E aindaMostram quando vocêpossui algum problemasério.
  • 45. 2. Títulos
  • 46. Guarde como um mantraCada página deve possuirum <title> único
  • 47. Saiba queO <title> é a informaçãoque o Google vai exibir napágina de resultados
  • 48. 3. Imagens
  • 49. É importante você saber queO Google adora imagens!
  • 50. http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=114016
  • 51. Coloque sempreNomes detalhados einformativos,como servico-hospedagem-cloud.jpge fuja de DSC00281.jpg
  • 52. Forneça sempreUm atributo ALTinformativo,como <img src=“” alt=“Máquina virtual noIBM SmartCloud Enterprise+”>
  • 53. E sempreForneça contexto para asua imagem, não adeixando-a sozinha napágina.
  • 54. 4. URLs
  • 55. Para o Google as URLs indicamO que vamos encontrarnaquela página
  • 56. Por exemplo,O que você entende poruma URL como:www.meusite.com/?p=1234
  • 57. É simples.Nada.
  • 58. Agora,O que você entende poruma URL como:www.meusite.com/servicos/servidor-cloud
  • 59. É simples.Que aquela página é de“serviços” e falará de“servidores cloud”.
  • 60. Na nossa áreaChamamos isto de URLsamigáveis.
  • 61. O GooglePrivilegia URLs que contémpalavras sobre o assuntoque elas tratam.
  • 62. 5. Tempo deCarregamento
  • 63. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
  • 64. A essência éAs pessoas desejamacessar sites maisrápidos
  • 65. EntãoO Google adotou istocomo fator derankeamento!
  • 66. LogoVocê pode otimizar otempo de carregamentopor etapas...
  • 67. Comece por aqui...Nas imagens do seu site,através de compressão...
  • 68. Para facilitarUse ferramentas comojpegtran, Jpegoptim, OptiPNGou PNGOUT.
  • 69. Nos arquivosJavascript e CSS atravésde versões reduzidas,sem comentários eespaços...
  • 70. Para facilitarUse ferramentas comoClosure Compiler, JSMin,CSSmin ou YUI Compressor.
  • 71. No servidorHabilite a compressãogzip...
  • 72. O que ele fazÉ fornecer uma versãocompactada dos seusarquivos.
  • 73. Onde as otimizaçõesSão indicadas pelaferramenta PageSpeed
  • 74. https://developers.google.com/speed/pagespeed/insights
  • 75. Ou aindaPela ferramentaWebPageTest
  • 76. http://www.webpagetest.org/result/121015_HH_EFY/
  • 77. 6. Rich Snippets
  • 78. Em 2009O Google fez um anúncioque mudaria muitoswebsites
  • 79. http://googlewebmastercentral.blogspot.com.br/2009/05/introducing-rich-snippets.html
  • 80. Mas desde 2009O Google melhorou emuito o suporte àsmarcações
  • 81. http://www.google.com/webmasters/tools/richsnippets
  • 82. E vale lembrarQue existem diretrizes paraas rich snippets
  • 83. http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2722261
  • 84. 7. Rel Author
  • 85. Você já se perguntouComo faço para aparecermeu rosto no Google?
  • 86. Você pode conseguirAumento de 30% devisitas apenas por exibirsua foto
  • 87. Você deve pensarE como posso usar nomeu site?
  • 88. É simples, olha só...
  • 89. http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1408986
  • 90. Você front-endJá pode criar isto emdois passos simples
  • 91. Primeiro passoCada página do site devepossuir um link<a href="[profile_url]?rel=author">Google</a>
  • 92. Segundo passoO autor, em seu perfil doGoogle+, deve adicionarum link para o site.
  • 93. Em seguidaBasta validar utilizando aferramenta de RichSnippets
  • 94. http://www.google.com/webmasters/tools/richsnippets
  • 95. 8. Sitemap.XML
  • 96. Em 2008Os grandes mecanismosde busca adotaram umpadrão...
  • 97. http://www.sitemaps.org/
  • 98. Este padrãoÉ uma forma de informaraos mecanismos de buscaas páginas existentes emum site.
  • 99. E o padrãoTem mais ou menos esta“cara”:
  • 100. 9. AJAX
  • 101. Um dosGrandes problemas doGoogle é ler AJAX.
  • 102. Isto acontencePois o Googlebot é um“navegador” comJavascript desabilitado
  • 103. https://developers.google.com/webmasters/ajax-crawling/
  • 104. De forma sequencial...
  • 105. O GooglebotEncontra uma URL comoesta:www.example.com/page? query#!mystake
  • 106. AssimO Google é capaz de ler oconteúdo que seriacarregado em AJAX.
  • 107. 10. Flash
  • 108. Assim como no AJAXO Google tem sériosproblemas em ler Flash.
  • 109. http://www.pierpaulista.com.br/
  • 110. Olhando por cimaParece tudo bem, correto?Hummmmm....
  • 111. Fica a dicaSempre veja a “versãosomente texto”.
  • 112. Em branco...É desta forma que o Google“enxerga” o site em Flash.
  • 113. E olhandoO código fonte, notamos...
  • 114. QueNunca este código será omesmo que um conteúdono HTML.
  • 115. Considerações Finais
  • 116. Fórmula mágicaPara ter sucesso, bastaimplementar...
  • 117. Por fim...Não existe mágica.Existem empresas que jáimplementam...
  • 118. Falta apenas você.
  • 119. Muito Obrigado!Dúvidas?ContatoTwitter: @fabioricottaEmail: fabioricotta@mestreseo.com.brWebsite: www.mestreseo.com.br

×