Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@GugaAlves• Analista de Sistemas• Pós Graduado em Gestão Estratégica de  Marketing Digital• Professor de SEO do Instituto ...
The Web has not seen this level of   transformation, this level ofacceleration, in the past ten years.   Were betting big ...
The world is moving to HTML5.    Steve Jobs    Apple
If you want to do something universal, there is no    question, the world is going HTML5. That isclear...The world is just...
In general, we work hard to understand          as much of the web as possible, but I have a feeling that     HTML5 markup...
Atualmente, usamoselementos <div> paraorganizar e segmentode uma página web.Não temos umaorganizaçãosemântica quemostre co...
Uma vez o HTML5sendo maisamplamente adotado,mecanismos de buscapodem usar essesnovos elementos paraos ajudar a encontrarel...
Microdata e HTML5
Microdados são um subconjunto deinformacões em um documento que tem um significado para as maquinas, robôs, assim como tem...
Exemplo prático:http://www.tudoparawordpress.com.br/seo-wordpress/impacto-html-5-seo/
Breadcrumbs<p id="crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">    <span itemprop="title">          ...
Marcação de Autor<aside itemscope itemtype="http://schema.org/Person">   <img alt="Guga Alves" src="guga-alves.jpg" class=...
Ferramenta de teste de dados estruturados                         Breadcrumbs       Perfil do Autor no Google+   http://ww...
Como é interpretado pelo Googlebot?
Exemplo 2: Rating<div class="vote">    <p class="rating num-votes">Taxa de aprovação         <span><span class="average">3...
Como é interpretado pelo Googlebot?     Como é exibido para o usuário?
Mais informações no GWThttps://www.google.com/webmasters/tools/structured-data
https://developers.google.com/speed/
http://www.youtube.com/watch?v=6EJ801el-I8http://www.slideshare.net/souders/high-performance-html5-sf-html5-ug
E lembre-se dos dispositivos portáteis!
Resumindo:• Diversas melhorias na usabilidade e experiência do  usuário.• Novas tags que ajudam a classificar o conteúdo d...
HTML5 + CSS3 + Javascript           =      Semântica           +    Interatividade           +   Encontrabilidade
Referências• html5rocks.com• html5doctor.com• google.com/webmasters/tools/richsnippets?hl=pt-BR• tableless.com.br/introduc...
twiter.com/GugaAlvestwitter.com/TudoParaWPhttp://br.linkedin.com/in/gugaalves/pthttp://www.slideshare.net/gugaalves       ...
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Seo e HTML5
Upcoming SlideShare
Loading in …5
×

Seo e HTML5

Palestra 'SEO e HTML5' ministrada na conferencia Web.br 2012, organizada pelo W3C Brasil no dia 19 de outubro de 2012.

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 ofacceleration, in the past ten years. Were 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 isclear...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 understandingcontent 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, usamoselementos <div> paraorganizar e segmentode uma página web.Não temos umaorganizaçãosemântica quemostre com exatidãoqual bloco deconteúdo é referentea exatamente qualseção do site.
  7. 7. Uma vez o HTML5sendo maisamplamente adotado,mecanismos de buscapodem usar essesnovos elementos paraos ajudar a encontrarelementos da páginade seu interesse.
  8. 8. Microdata e HTML5
  9. 9. Microdados são um subconjunto deinformacõ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 é, fornecermetadados de uma forma que pode ser usada por uma maquina e permitir que os dadossejam 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 GWThttps://www.google.com/webmasters/tools/structured-data
  18. 18. https://developers.google.com/speed/
  19. 19. http://www.youtube.com/watch?v=6EJ801el-I8http://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/GugaAlvestwitter.com/TudoParaWPhttp://br.linkedin.com/in/gugaalves/pthttp://www.slideshare.net/gugaalves TudoParaWordPress.com.br

×