SEO para Front-End

17.109 visualizações

Publicada em

Publicada em: Tecnologia
2 comentários
64 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
17.109
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10.009
Ações
Compartilhamentos
0
Downloads
333
Comentários
2
Gostaram
64
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

SEO para Front-End

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

×