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

SEO para Front-End

15,868

Published on

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

No notes for 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×