SEO para Front-End - BeagaJS

4,162 views
4,118 views

Published on

Palestra oferecida em BH no evento BeagaJS.

Nesta palestra tive a oportunidade de mostrar 10 dicas pontuais para que os front-ends consigam aplicar SEO.

Published in: Technology

SEO para Front-End - BeagaJS

  1. 1. SEO para Front-End Dicas para construir sites melhoresPor Fábio Ricotta, Co-Fundador da MestreSEOBeagaJS - Março de 2013
  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. Explicando o SEO O que é esta sopa de letrinhas?
  26. 26. Links Patrocinados
  27. 27. Resultados Orgânicos
  28. 28. É na área de resultadosorgânicos quetrabalhamos...
  29. 29. Pois, em média, osresultados orgânicosrecebem cerca de 70%dos cliques.
  30. 30. 30% dos cliques70% dos cliques
  31. 31. Resumindo um pouco ahistória...
  32. 32. Estando melhorposicionado, eu consigomais visitantes.
  33. 33. 10 Dicas de SEOpara Front-End
  34. 34. 1. Webmaster Tools
  35. 35. O Google Webmaster Toolsplataforma do Google paraajudar os webmasters
  36. 36. https://www.google.com/webmasters/tools/
  37. 37. Fica a dicaA Microsoft (Bing) tambémpossui uma plataformapara ajudar os webmasters
  38. 38. http://www.bing.com/toolbox/webmaster
  39. 39. Elas te dãoAvisos sobre como vocêpode melhorar o seu site...
  40. 40. E aindaMostram quando vocêpossui algum problemasério.
  41. 41. 2. Títulos
  42. 42. Guarde como um mantraCada página deve possuirum <title> único
  43. 43. Saiba queO <title> é a informaçãoque o Google vai exibir napágina de resultados
  44. 44. 3. Imagens
  45. 45. É importante você saber queO Google adora imagens!
  46. 46. http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=114016
  47. 47. Coloque sempreNomes detalhados einformativos,como servico-hospedagem-cloud.jpge fuja de DSC00281.jpg
  48. 48. Forneça sempreUm atributo ALTinformativo,como <img src=“” alt=“Máquina virtual noIBM SmartCloud Enterprise+”>
  49. 49. E sempreForneça contexto para asua imagem, não adeixando-a sozinha napágina.
  50. 50. 4. URLs
  51. 51. Para o Google as URLs indicamO que vamos encontrarnaquela página
  52. 52. Por exemplo,O que você entende poruma URL como:www.meusite.com/?p=1234
  53. 53. É simples.Nada.
  54. 54. Agora,O que você entende poruma URL como:www.meusite.com/servicos/servidor-cloud
  55. 55. É simples.Que aquela página é de“serviços” e falará de“servidores cloud”.
  56. 56. Na nossa áreaChamamos isto de URLsamigáveis.
  57. 57. O GooglePrivilegia URLs que contémpalavras sobre o assuntoque elas tratam.
  58. 58. Uma dica...No Wordpress...
  59. 59. 5. Tempo deCarregamento
  60. 60. http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
  61. 61. A essência éAs pessoas desejamacessar sites maisrápidos
  62. 62. EntãoO Google adotou istocomo fator derankeamento!
  63. 63. LogoVocê pode otimizar otempo de carregamentopor etapas...
  64. 64. Comece por aqui...Nas imagens do seu site,através de compressão...
  65. 65. Para facilitarUse ferramentas comojpegtran, Jpegoptim, OptiPNGou PNGOUT.
  66. 66. Nos arquivosJavascript e CSS atravésde versões reduzidas,sem comentários eespaços...
  67. 67. Para facilitarUse ferramentas comoClosure Compiler, JSMin,CSSmin ou YUI Compressor.
  68. 68. No servidorHabilite a compressãogzip...
  69. 69. O que ele fazÉ fornecer uma versãocompactada dos seusarquivos.
  70. 70. Faça otimizaçõesIndicadas pelaferramenta PageSpeed
  71. 71. https://developers.google.com/speed/pagespeed/insights
  72. 72. Ou aindaPela ferramentaWebPageTest
  73. 73. http://www.webpagetest.org/result/121015_HH_EFY/
  74. 74. No WordpressPodemos usar o pluginW3 Total Cache
  75. 75. http://wordpress.org/extend/plugins/w3-total-cache/
  76. 76. Se você quiserPode utilizar o serviçoCloudFlare
  77. 77. https://pt-br.cloudflare.com/
  78. 78. É bem simples ofuncionamento...
  79. 79. Ainda existeO serviço do Google,chamado PageSpeed
  80. 80. https://developers.google.com/speed/pagespeed/service?hl=pt-BR
  81. 81. AssimO seu site irá carregarmuito mais rápido
  82. 82. 6. Rich Snippets
  83. 83. Em 2009O Google fez um anúncioque mudaria muitoswebsites
  84. 84. http://googlewebmastercentral.blogspot.com.br/2009/05/introducing-rich-snippets.html
  85. 85. Um exemplo bem simples...
  86. 86. Mas desde 2009O Google melhorou emuito o suporte àsmarcações
  87. 87. http://www.google.com/webmasters/tools/richsnippets
  88. 88. ExistemVários tipos derich snippets
  89. 89. A mais simplesÉ a de Breadcrumb
  90. 90. <body>...<div> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a></div>
  91. 91. <body itemscope itemtype="http://schema.org/WebPage">...<div itemprop="breadcrumb"> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a></div>
  92. 92. http://schema.org/WebPage
  93. 93. Uma bem utilizadaÉ a Reviews
  94. 94. http://schema.org/Review
  95. 95. Uma em ascensãoÉ a Receitas
  96. 96. http://schema.org/Recipe
  97. 97. Aprenda maisUse o Schema.org eaprenda mais sobre estasnovas formatações
  98. 98. http://www.schema.org/docs/schemas.html
  99. 99. E vale lembrarQue existem diretrizes paraas rich snippets
  100. 100. http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2722261
  101. 101. 7. Rel Author
  102. 102. Você já se perguntouComo faço para aparecermeu rosto no Google?
  103. 103. Você pode conseguirAumento de 30% devisitas apenas por exibirsua foto
  104. 104. Você deve pensarE como posso usar nomeu site?
  105. 105. É simples, olha só...
  106. 106. http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1408986
  107. 107. Você front-endJá pode criar isto emdois passos simples
  108. 108. Primeiro passoCada página do site devepossuir um link<a href="[profile_url]?rel=author">Google</a>
  109. 109. Segundo passoO autor, em seu perfil doGoogle+, deve adicionarum link para o site.
  110. 110. Em seguidaBasta validar utilizando aferramenta de RichSnippets
  111. 111. http://www.google.com/webmasters/tools/richsnippets
  112. 112. 8. Sitemap.XML
  113. 113. Em 2008Os grandes mecanismosde busca adotaram umpadrão...
  114. 114. http://www.sitemaps.org/
  115. 115. Este padrãoÉ uma forma de informaraos mecanismos de buscaas páginas existentes emum site.
  116. 116. E o padrãoTem mais ou menos esta“cara”:
  117. 117. No WordpressVocê precisará doWordpress SEO instalado...
  118. 118. Será algo como:http://www.meusite.com.br/sitemap_index.xml
  119. 119. Com esta URL em mãos...
  120. 120. Todo mundoO Google vai descobrir asminhas páginas rapidamente!
  121. 121. AtençãoUm detalhe importante!
  122. 122. Não usemGeradores que descobrem assuas URLs!
  123. 123. O problema é queEles podem cometer erros deleitura de URLs e isto pode lheprejudicar
  124. 124. 9. AJAX
  125. 125. Um dosGrandes problemas doGoogle é ler AJAX.
  126. 126. Isto acontencePois o Googlebot é um“navegador” comJavascript desabilitado
  127. 127. https://developers.google.com/webmasters/ajax-crawling/
  128. 128. De forma sequencial...
  129. 129. O GooglebotEncontra uma URL comoesta:www.example.com/page? query#!mystake
  130. 130. www.example.com/page?query#!mystake O robô de busca (crawler) encontra a URLSeu Servidor Crawler
  131. 131. www.example.com/page?query#!mystake www.example.com/page?query&_escape_fragment=mystakeSeu Servidor Crawler Ele transforma a URL e uma URL “feia”
  132. 132. www.example.com/page?query&_escape_fragment=mystakeSeu Servidor Crawler O robô faz a consulta da URL no seu servidor
  133. 133. O servidor vê que é uma URL “feia” e mapeia ela para a URL AJAXwww.example.com/page? query#!mystake Seu Servidor Crawler
  134. 134. O servidor invoca o “Headless Browser” Seu Servidor Crawler Headless Browser
  135. 135. O “Headless Browser” executa o javascript e gera um Snapshot do HTML Seu Servidor Crawler Headless Snapshot Browser do HTML
  136. 136. O servidor envia ao robô o Snapshot do HTML Seu Servidor Crawler Headless Snapshot Browser do HTML
  137. 137. O robô processa o Snapshot de HTML e extrai as URLs normais.Seu Servidor Crawler Headless Snapshot Browser do HTML
  138. 138. AssimO Google é capaz de ler oconteúdo que seriacarregado em AJAX.
  139. 139. 10. Flash
  140. 140. Assim como no AJAXO Google tem sériosproblemas em ler Flash.
  141. 141. http://www.pierpaulista.com.br/
  142. 142. Olhando por cimaParece tudo bem, correto?Hummmmm....
  143. 143. Fica a dicaSempre veja a “versãosomente texto”.
  144. 144. Em branco...É desta forma que o Google“enxerga” o site em Flash.
  145. 145. E olhandoO código fonte, notamos...
  146. 146. QueNunca este código será omesmo que um conteúdono HTML.
  147. 147. Extra
  148. 148. Seu futuroQuer aprender mais?
  149. 149. http://groups.google.com/a/googleproductforums.com/forum/#!forum/webmaster-pt
  150. 150. http://www.mestreseo.com.br/artigos-seo
  151. 151. http://digitaisdomarketing.com.br/
  152. 152. http://inbound.org/
  153. 153. https://www.facebook.com/mestreseo
  154. 154. https://twitter.com/fabioricotta
  155. 155. https://twitter.com/marthagabriel
  156. 156. http://www.mestreseo.com.br/newsletter
  157. 157. Fórmula mágicaPara ter sucesso, bastaimplementar...
  158. 158. Rumo ao sucesso! Agora é dominar o mundo!
  159. 159. Muito Obrigado!Dúvidas?ContatoTwitter: @fabioricottaEmail: fabioricotta@mestreseo.com.brWebsite: www.mestreseo.com.br

×