@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

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

Steve Jobs Apple

The world is moving to HTML5.

Steve Ballmer CEO Microsoft

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.

John Mueller Webmasters Trends Analyst, Google

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.

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.

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.

Microdata e HTML5

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.

Exemplo prático:

http://www.tudoparawordpress.com.br/seo-wordpress/impacto-html-5-seo/

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

Breadcrumbs

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

Marcação de Autor

Breadcrumbs

Perfil do Autor no Google+

http://www.google.com/webmasters/tools/richsnippets?hl=pt-BR

Ferramenta de teste de dados estruturados

Como é interpretado pelo Googlebot?

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

Exemplo 2: Rating

Como é interpretado pelo Googlebot?

Como é exibido para o usuário?

https://www.google.com/webmasters/tools/structured-data

Mais informações no GWT

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

http://www.youtube.com/watch?v=6EJ801el-I8

http://www.slideshare.net/souders/high-performance-html5-sf-html5-ug

E lembre-se dos dispositivos portáteis!

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

Resumindo:

HTML5 + CSS3 + Javascript

=

Semântica

+

Interatividade

+

Encontrabilidade

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_should_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

twiter.com/GugaAlvestwitter.com/TudoParaWP

http://br.linkedin.com/in/gugaalves/pthttp://www.slideshare.net/gugaalves

TudoParaWordPress.com.br