Microdata

Olá pessoal, continuando o papo do nosso último post, hoje continuarei falando de marcação semântica, com a diferença de que focarei em microdata e mostrarei também como realizar a marcação semântica de conteúdo usando os vocabulários Schema.org.

Vocabulários do schema.org

No site schema.org podemos encontrar a lista completa de todos os tipos de esquemas (entidades) que já foram definidas. No momento em que escrevo este post, já encontram-se por volta de 450 entidades no site.

É importante observar que os vocabulários schema.org pertencem a uma hierarquia, exatamente como se fosse uma hierarquia de classes da nossa velha e conhecida orientação a objeto, em que cada classe pode estender outra classe, herdando assim todas as propriedades e comportamentos da classe pai. No schema.org temos apenas 2 tipos básicos de entidades: DataType e Thing.

DataType

Apenas define vários tipos de dados primitivos que servem para descrever os tipos de dados que serão usados para preencher um atributo qualquer em qualquer vocabulário. As entidades Boolean, Date, Number e Text estendem DataType, e Float e Integer por sua vez, estendem Number. Até hoje não vi nenhuma aplicação que utiliza estes vocabulários para definir dados semanticamente. Por exemplo, digamos que exista uma entidade Empresa a qual queremos especificar o número de funcionários. Para isto, não usaremos Integer, e sim uma propriedade numeroDeFuncionarios (que é do tipo Integer).

Então resumindo, nós não precisamos nos preocupar com estes tipos de dados para marcar código semanticamente.

Thing

É aqui que a coisa começa a ficar interessante. Thing é a entidade mais abstrata a nível semântico. Como o próprio nome já nos diz, Thing é qualquer coisa, é o nosso Object em Java (alô, JavaLovers). A partir de Thing, qualquer coisa pode ser definida. As 7 entidades que a estendem são: CreativeWork, Event, Intangible, Organization, Person, Place e Product. Dentro de CreativeWork temos Article, Blog, Movie, Recipe e por ai vai.

Identificando as entidades

Antes de querermos marcar conteúdo semanticamente, é necessário identificar as entidades presentes na página que desejamos descrever. Digamos que temos uma página que apresenta informações sobre filmes, e em um trecho tenhamos:

Avatar

Diretor: James Cameron (16 de agosto de 1954)

Ficção Científica

Veja o trailer

Para nós é muito fácil identificar qual entidade de que se tratam as informações acima, mas e as máquinas? Como elas saberão que “James Cameron” é o diretor do filme Avatar? Esta palavra “Diretor” também não tem o menor significado para uma máquina. E se “Diretor” estivesse em japonês ou em russo? Como elas saberiam dizer sequer o que é “Avatar”? Seria Avatar, o desenho, o filme, ou até mesmo uma entidade divina do mundo espiritual encarnada em uma pessoa? Quando você procura por Avatar no Google, como ele sabe pelo que você está procurando exatamente? Ele não sabe. O que o Google e os outros motores de busca atuais fazem é aplicar um monte de algoritmos super complexos que fazem uma porrada de associações pra tentar adivinhar do que seu conteúdo se trata (n teses de doutorado e muita matemática por trás), e assim poder melhorar sua indexação e classificação de conteúdo.

Propriedades microdata

Como vimos, os vocabulários schema.org definem entidades do mundo real, suas propriedades e seus relacionamentos com outras entidades. Agora vamos ver como utilizar de fato todos estes metadados em nosso código HTML. Primeiro certifique-se de que seu cabeçalho tenha a definição doctype correta, sendo microdata um padrão HTML5, a primeira linha do seu código deve ser <!doctype html>, apenas isso – sem nomes complicados de versões e/ou urls que ninguém tem paciência de ficar escrevendo.

Feito isto, vamos finalmente ao microdata de fato. Microdata define 5 diferentes atributos que podem ser adicionados a qualquer elemento HTML o qual você queira descrever semanticamente. Estes atributos são:

itemscope: Indica que o item é uma entidade semântica e que todas as propriedades que estiverem dentro dele contêm informações sobre ele;
itemtype: Indica a entidade (o tipo). Aqui você deve especificar a URL do vocabulário (por exemplo: http://schema.org/CreativeWork);
itemid: Um identificador único para o item (leia itemref);
itemprop: Indica que o item possui o valor da propriedade especificada (veja o exemplo abaixo);
itemref: Propriedades que estão em elementos fora do escopo (elemento com itemscope) podem ser associadas a este item. itemref deve conter seu valor preenchido com o itemid do elemento o qual se deseja fazer a associação.

Agora vamos voltar ao exemplo do Avatar. Digamos que o código HTML correspondente àquele trecho seja: (Este tutorial é basicamente o mesmo encontrado no getting started do site schema.org.)

<div>
    <h4>Avatar</h4>
    <p>Diretor: James Cameron (16 de agosto de 1954)</p>
    <p>Ficção Científica</p>
    <p><a href="http://www.youtube.com/...">Veja o trailer</a></p>
</div>

Começamos definindo a entidade Movie e adicionando as propriedades itemscope e itemtype ao elemento <div>, já que este elemento possui todo conteúdo relacionado ao filme Avatar.

<!-- adicionamos os atributos itemscope e itemtype -->
<div itemscope="itemscope" itemtype="http://schema.org/Movie">
    <h4>Avatar</h4>
    <p>Diretor: James Cameron (16 de agosto de 1954)</p>
    <p>Ficção Científica</p>
    <p><a href="http://www.youtube.com/...">Veja o trailer</a></p>
</div>

Agora identificamos as propriedades presentes deste filme e definimos cada uma com o atributo itemprop, no nosso caso estas propriedades são nome, diretor, gênero e trailer.

<div itemscope="itemscope" itemtype="http://schema.org/Movie">
    <!-- adicionamos o atributo itemprop ao nome do filme -->
    <h4 itemprop="name">Avatar</h4>
    <!-- adicionamos o atributo itemprop ao diretor do filme -->
    <p>
        Diretor:
        <span itemprop="director">James Cameron (16 de agosto de 1954)</span>
    </p>
    <!-- adicionamos o atributo itemprop ao gênero do filme -->
    <p itemprop="genre">Ficção Científica</p>
    <!-- adicionamos o atributo itemprop ao trailer do filme -->
    <p><a itemprop="trailer" href="http://www.youtube.com/...">Veja o trailer</a></p>
</div>

Temos um Filme cujo nome é Avatar, gênero é Ficção científica, trailer aponta para uma URL e o diretor é James Cameron. Numa representação gráfica da semântica deste trecho de código, teríamos algo parecido como:

Se for do nosso interesse, podemos refinar mais ainda a nossa marcação tentando identificar se uma destas propriedades pode ser definida como uma outra entidade. No caso da propriedade director por exemplo, um diretor é uma pessoa também, então vamos aplicar o vocabulário Person do schema.org:

<div itemscope="itemscope" itemtype="http://schema.org/Movie">
    <h4 itemprop="name">Avatar</h4>
    <!-- movemos o atributo itemprop do diretor para o wrapper (<p>) -->
    <!-- e adicionamos os atributos itemscope e itemtype ao diretor -->
    <p itemprop="director" itemscope="itemscope" itemtype="http://schema.org/Person">
        Diretor:
        <span>James Cameron (16 de agosto de 1954)</span>
    </p>
    <p itemprop="genre">Ficção Científica</p>
    <p><a itemprop="trailer" href="http://www.youtube.com/...">Veja o trailer</a></p>
</div>

E para terminar, vamos especificar as propriedades desta pessoa – que neste caso são nome e data de nascimento.

Observe que para data de nascimento criamos um novo elemento <time datetime="…">. Optei por fazer isto por quê <time> é uma nova tag que faz parte da especificação HTML5, e usamos seu atributo datetime para especificar o formato padrão de data usado pelo schema.org – na especificação do tipo de dados Date, o formato de data esperado é o ISO 8601 (AAAA-MM-DD).

<div itemscope="itemscope" itemtype="http://schema.org/Movie">
    <h4 itemprop="name">Avatar</h4>
    <p itemprop="director" itemscope="itemscope" itemtype="http://schema.org/Person">
        Diretor:
        <!-- adicionamos o atributo itemprop às seguintes propriedades da pessoa -->
        <span itemprop="name">James Cameron</span>
        <time itemprop="birthDate" datetime="1954-08-16">
            (16 de agosto de 1954)
        </time>
    </p>
    <p itemprop="genre">Ficção Científica</p>
    <p><a itemprop="trailer" href="http://www.youtube.com/...">Veja o trailer</a></p>
</div>

Agora temos um Filme cujo nome é Avatar, gênero é Ficção científica, trailer aponta para uma URL e o diretor é uma Pessoa cujo nome é James Cameron e sua data de nascimento é 16 de agosto de 1954. Com isso, uma representação gráfica da semântica passaria a ser algo como:

E não para por ai galera, você pode sair especificando qualquer coisa a adicional conforme achar necessário, mas acho isso aqui já é o necessário pra dar uma boa sacada na idéia né. Estou bastante satisfeito de ter finalmente terminado este post, pois além de tudo, minha dívida de Heinekens com Caio Gondim para de aumentar hoje (um dia explico essa história)!

No próximo post irei realizar a marcação semântica aqui no Loop Infinito e mostrarei o que mudou. Até lá!