Introdu��o ao Schema.org

Schema em grego significa plano de forma, ou modelo. J� schema.org � uma s�rie de tags XML usado para fornecer informaç�es adicionais sobre o conte�do da Internet para os motores de busca. Ou seja, pequenos trechos de c�digo que ajuda muito quando as pessoas facilmente encontrar seu site, entre outros tantos na web.

A id�ia de criar tags XML que apresentam informaç�es sobre o significado de um conte�do n�o � novo. Antigamente existiam v�rios outros como os microdados, microformatos e RDFa.

Mas essa pluralidade de l�nguas era precisamente o que dificultava a adoç�o pelos desenvolvedores. Ele surgiu a partir de uma aç�o colaborativa entre principais motores de busca do mundo, o Google, Bing, Yahoo! e Yandex, motor de busca russo.

A adoç�o de um modelo mais "universal" eliminou a ramificaç�o causada pelo uso de diferentes formatos, tornando mais f�cil a vida dos desenvolvedores (que n�o precisam mais se desdobrar entre v�rias linguagens diferentes) e, acima de tudo, os usu�rios.

Figura 1. schema.org

Todo mundo sabe que cada linguagem possui a sua particularidade, seja ela o Ingl�s, Espanhol, etc. Mas os motores de busca n�o podem compreender totalmente as particularidades de cada idioma.

Para que todas as pessoas possam encontrar facilmente a informaç�o na Internet, n�s desenvolvedores precisam dizer aos motores de busca o que determinado conte�do significa. E n�s podemos fazer isso atrav�s das tags propostas pelos schema.org.

Ao utilizar as normas estabelecidas pelo schema, os motores de busca v�o saber o n�mero do telefone de sua empresa, por exemplo, independentemente do contexto. E pode mostrar essa informaç�o no corpo dos resultados da pesquisa, facilitando a tarefa do usu�rio que pesquisar ou precisar de informaç�es sobre o site. E isso n�o funciona apenas para n�meros de telefone. Voc� pode selecionar uma variedade de dados, tais como nome, endereço, e-mail, etc.

Rich Snippets

Outra grande vantagem � chamada de Rich Snippets, a qual voc� provavelmente j� ouviu dizerem por a�. S�o resultados de pesquisa que cont�m informaç�es adicionais e muitas vezes ganham formas, cores e s�mbolos diferentes. Esta informaç�o vem precisamente de diferentes tags XML como aprendemos neste post.

Isso acontece porque um conceito da teoria da percepç�o (gestalt) chamado segregaç�o que basicamente diz que tudo � diferente chama mais atenç�o. Um resultado que mais se destaca consequentemente receber mais visitas. Atualmente Google suporta rich snippets para as pessoas, eventos, opini�es, produtos, receitas e estrutura de navegaç�o (breadcrumbs).

Para um melhor entendimento, vamos ver como funciona na pr�tica, vamos fazer uma pesquisa no google e veja como o resultado � exibido com rich snippets.

Figura 2. Exemplo de Rich Snippet

Entendendo o funcionamento do Schema

Se voc� j� participou alguma vez de uma mudança, sabe por experi�ncia que se n�o marcarmos e rotularmos as caixas de roupas, livros, louças, etc, pode terminar sem encontrar um par de meias limpas em sua nova casa.

� melhor deixar os objetos em caixas que t�m algum elemento em comum, eles v�m do mesmo ambiente (quarto, cozinha, banheiro) ou t�m a mesma funç�o (sapatos, brinquedos, ferramentas). Cada caixa pode ent�o ser considerada como um conjunto de elementos que t�m um objetivo comum. O mesmo acontece com as palavras. Eles podem ser agrupados por significados t�m em comum, ou, se voc� quiser usar a palavra legal, fazendo parte do mesmo campo sem�ntico. Basicamente o sistema de herança.

A funç�o de schema.org � marcar o significado por tr�s das caixas de conte�do na internet. Ele funciona basicamente como o tag html com marcadores que indicam o campo sem�ntico que parte de conte�do. Para que isso funcione de uma forma mais organizada uma hierarquia foi criada para o vocabul�rio.

Exemplo

Vamos imaginar um conjunto chamado �Coisa�, s� que um conjunto chamado coisa ficaria muito gen�rico, precisamos sempre ser os mais espec�ficos poss�veis. O grupo �Coisa�, por sua vez, � dividido em conjuntos menores, como crianças, s�o eles: CreativeWork, Event, Intangible, MedicalEntity, Organization, Person, Place e Product.

Por sua vez estes grupos (ou schemas) s�o divididos em grupos menores. Cada uma dessas entradas tamb�m tem propriedades espec�ficas. Lembrando que cada um dos "filhos" herdam caracter�sticas de seus pais.

Por dentro dos schemas

A primeira coisa a considerar � que voc� precisa usar o HTML5. Este tipo de sintaxe n�o funciona com outros doctypes! Ent�o, certifique-se que o documento est� em HTML5, ok?

Para usar shema.org deve conhecer tr�s par�metros de microdados que surgiram com o HTML5. Confira seus melhores amigos novos:

itemscope - Define o alcance de meta-dados. Ou seja, anuncia ao mundo que a informaç�o que voc� escreve � parte do mesmo grupo de significado. Esta propriedade � in�til se voc� n�o referenciar o que este grupo de qualquer maneira. E, para isso, usamos o seguinte par�metro: o itemtype.
itemtype - � a mudança de r�tulo da caixa. Define o que � o grupo do item que voc� est� usando. No caso de schema.org, voc� sempre precisa definir um in�cio de url com "http://schema.org/" (por exemplo: http://schema.org/Place).
itemprop - Define as propriedades do item. Cada propriedade tem um valor esperado que pode ser um texto, numeral, url, etc. Consulte a documentaç�o de cada itemtype que voc� deseja usar para uma lista completa de propriedades suportados por cada elemento e seus valores.

Decorar um n�mero de telefone de um jingle � uma tarefa imposs�vel, certo? Felizmente existe a internet! Vamos aprender a dizer "Ei motor de busca! Aqui est� o n�mero de telefone de emerg�ncia do hospital.". Para isso, vamos usar o Hospital itemtype e dois itemprops (nome e telefone).

 
...
 
<div itemscope itemtype="<http://schema.org/Hospital>">
   <span itemprop="name">Hospital</span>
   <span itemprop="telephone">0118 999 881 999 199 725 3</span>
</div>
 
...

Listagem 1. Exemplo de itemprop

Tamb�m existe uma outra forma de vermos o funcionamento do schema.


...
 
 <article>
 <h1>Schema.org - Entendendo o conte�do na Internet</h1>
 <h2>By Ricardo Arrigoni</h2>
 <img src="http://arquivo.devmedia.com.br/artigos/Ricardo_Arrigoni/SchemaOrg/Schema01.jpg" 
 alt="schema.org">
 <p> Neste artigo, vamos analisar como os conceitos de sintaxe, a sem�ntica eo vocabul�rio 
 pode ajudar voc� a melhor classificaç�o nos motores de busca, tornar a vida mais f�cil para os 
 usu�rios e dar sentido ao seu conte�do na Internet.<p>
 </article>
 
...

Listagem 2. Examplo de Meta Language

BlogPosting

Abaixo veremos algumas das propriedades usadas no schema BlogPosting.

author - respons�vel pelo post
headline - T�tulo do post
articleBody - Texto do post
image - Exibe uma imagem
url - Endereço da p�gina
keywords - Palavras-chave

 
...
 
<article itemscope itemtype="<http://schema.org/BlogPosting>">
<h1 itemprop="headline">Introduç�o ao Schema.org</h1>
<h2>By <span itemprop="author">Ricardo Arrigoni</span></h2>
<img src="http://arquivo.devmedia.com.br/artigos/Ricardo_Arrigoni/SchemaOrg/Schema01.jpg" 
alt="schema.org" itemprop="image">
<p itemprop="articleBody"> Neste artigo, vamos analisar como os conceitos de sintaxe, 
a sem�ntica eo vocabul�rio pode ajudar voc� a melhor classificaç�o nos motores de busca, 
tornar a vida mais f�cil para os usu�rios e dar sentido ao seu conte�do na Internet.</p>
</article>
 
...

Listing 3. Exemplo de BlogPosting

Voc� pode combinar e usar itemscopes diferentes em apenas uma p�gina. Por exemplo, na p�gina de um itemscope autor do blog que poder�amos usar para cada um dos colunistas. Neste momento, � sempre bom usar uma ferramenta como o Google Rich Snippets para testar.

Conclus�o

� imposs�vel fazer um bom trabalho sem consultar a documentaç�o. Como � uma ferramenta em constante evoluç�o � bom sempre estar acompanhando o Blog Schema.org para verificar alguma novidade.

Espero que tenham gostado do artigo e entender como usar o Schema. At� a pr�xima.