Successfully reported this slideshow.
Your SlideShare is downloading. ×

Seo e HTML5

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Seo e HTML5

  1. 1. @GugaAlves • Analista de Sistemas • Pós Graduado em Gestão Estratégica de Marketing Digital • Professor de SEO do Instituto Infnet • Coordenador de Comunicação – ABRADI-RJ • Criador do TudoParaWordPress • Vencedor do 1 #DesafioSEO da MestreSeo
  2. 2. The Web has not seen this level of transformation, this level of acceleration, in the past ten years. We're betting big on HTML5 Vic Gundotra VP of Engineering, Google
  3. 3. The world is moving to HTML5. Steve Jobs Apple
  4. 4. If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we. Steve Ballmer CEO Microsoft
  5. 5. In general, we work hard to understand as much of the web as possible, but I have a feeling that HTML5 markup is not yet as widely in use (and in use correctly) that it would make sense for us to use it as a means of understanding content better. As HTML5 gains in popularity and as we recognize specific markup elements that provide value to our indexing system, this is likely to change, but at the moment I would not assume that you would have an advantage by using HTML5 instead of older variants. John Mueller Webmasters Trends Analyst, Google
  6. 6. Atualmente, usamos elementos <div> para organizar e segmento de uma página web. Não temos uma organização semântica que mostre com exatidão qual bloco de conteúdo é referente a exatamente qual seção do site.
  7. 7. Uma vez o HTML5 sendo mais amplamente adotado, mecanismos de busca podem usar esses novos elementos para os ajudar a encontrar elementos da página de seu interesse.
  8. 8. Microdata e HTML5
  9. 9. Microdados são um subconjunto de informacões em um documento que tem um significado para as maquinas, robôs, assim como tem um significado para uma pessoa lendo o documento. Isto é, fornecer metadados de uma forma que pode ser usada por uma maquina e permitir que os dados sejam processados e exibidos de uma forma que atenda melhor o usuário.
  10. 10. Exemplo prático: http://www.tudoparawordpress.com.br/seo-wordpress/impacto-html-5-seo/
  11. 11. Breadcrumbs <p id="crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <span itemprop="title"> <a itemprop="url" href="http://www.tudoparawordpress.com.br" rel="nofollow"> <span itemprop="title">Inicial</span></a> </span> » <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="http://www.tudoparawordpress.com.br/seo-wordpress/"> <span itemprop="title">SEO</span> </a> </span> » <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <strong class="current" itemprop="title">Qual impacto o HTML 5 pode ter em SEO?</strong> </span> </p>
  12. 12. Marcação de Autor <aside itemscope itemtype="http://schema.org/Person"> <img alt="Guga Alves" src="guga-alves.jpg" class="avatar avatar-75 photo" height="75" width="75"> <div> <span class="vcard author"> <span class="fn"> <a itemprop="name" href="#">Guga Alves</a> </span> </span> <ul> <li><a href="#" class="tw">Twitter</a></li> <li><a href="#" class="fb">Facebook</a></li> <li><a href="#" class="in">Linkedin</a></li> <li><a href="#" rel="author" class="rss">Google+</a></li> <li><a href="mailto:#" class="mail" itemprop="email">Email</a></li> </ul> <p>Descrição do autor</p> </div> </aside>
  13. 13. Ferramenta de teste de dados estruturados Breadcrumbs Perfil do Autor no Google+ http://www.google.com/webmasters/tools/richsnippets?hl=pt-BR
  14. 14. Como é interpretado pelo Googlebot?
  15. 15. Exemplo 2: Rating <div class="vote"> <p class="rating num-votes">Taxa de aprovação <span><span class="average">3.9</span>/5</span> Avaliações <span class="votes">31</span> </p> <p id="star"> <span>Avalie:</span> <a class="full" href="#"></a> <a class="full" href="#"></a> <a class="full" href="#"></a> <a href="#"></a> <a href="#"></a> </p> </div>
  16. 16. Como é interpretado pelo Googlebot? Como é exibido para o usuário?
  17. 17. Mais informações no GWT https://www.google.com/webmasters/tools/structured-data
  18. 18. https://developers.google.com/speed/
  19. 19. http://www.youtube.com/watch?v=6EJ801el-I8 http://www.slideshare.net/souders/high-performance-html5-sf-html5-ug
  20. 20. E lembre-se dos dispositivos portáteis!
  21. 21. Resumindo: • Diversas melhorias na usabilidade e experiência do usuário. • Novas tags que ajudam a classificar o conteúdo de forma semântica. • Ótimas melhorias para manipulação de mídias (áudio e vídeo). • Precisa comparar com Flash e Silverlight? EPIC WIN! • SEO-friendly se pensarmos rastreamento e indexação de site. • Uso crescente em aplicativos móveis e jogos.
  22. 22. HTML5 + CSS3 + Javascript = Semântica + Interatividade + Encontrabilidade
  23. 23. Referências • html5rocks.com • html5doctor.com • google.com/webmasters/tools/richsnippets?hl=pt-BR • tableless.com.br/introducao-a-microdata-no-html5/ • marcofolio.net/webdesign/html5_microdata_what_is_it_and_why_shoul d_you_care_.html • net.tutsplus.com/tutorials/html-css-techniques/html5-microdata- welcome-to-the-machine/ • http://support.google.com/webmasters/bin/answer.py?hl=pt- BR&answer=99170&topic=21997&ctx=topic • http://searchengineland.com/seo-best-practices-for-html5-truths-half- truths-outright-lies-99406
  24. 24. twiter.com/GugaAlves twitter.com/TudoParaWP http://br.linkedin.com/in/gugaalves/pt http://www.slideshare.net/gugaalves TudoParaWordPress.com.br

×