- O HTML5 trará diversas melhorias na usabilidade e experiência do usuário através de novas tags e funcionalidades para mídia. - Essas novas funcionalidades como microdados e marcação semântica podem ajudar os mecanismos de busca a entenderem melhor o conteúdo das páginas da web. - À medida que o HTML5 se torne mais adotado, é possível que motores de busca passem a usar essas informações para melhorar os resultados de busca.

2. @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

4. 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

5. The world is moving to HTML5.
Steve Jobs
Apple

6. 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

8. 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

11. 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.

13. 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.

14. Microdata e HTML5

15. 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.

16. Exemplo prático:
http://www.tudoparawordpress.com.br/seo-wordpress/impacto-html-5-seo/

17. 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>

18. 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>

19. Ferramenta de teste de dados estruturados
Breadcrumbs
Perfil do Autor no Google+
http://www.google.com/webmasters/tools/richsnippets?hl=pt-BR

20. Como é interpretado pelo Googlebot?

21. 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>

22. Como é interpretado pelo Googlebot?
Como é exibido para o usuário?

23. Mais informações no GWT
https://www.google.com/webmasters/tools/structured-data

25. https://developers.google.com/speed/

27. http://www.youtube.com/watch?v=6EJ801el-I8
http://www.slideshare.net/souders/high-performance-html5-sf-html5-ug

28. E lembre-se dos dispositivos portáteis!

29. 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.

31. HTML5 + CSS3 + Javascript
=
Semântica
+
Interatividade
+
Encontrabilidade

32. 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

33. twiter.com/GugaAlves
twitter.com/TudoParaWP
http://br.linkedin.com/in/gugaalves/pt
http://www.slideshare.net/gugaalves
TudoParaWordPress.com.br