Tutorial: Como utilizar o Schema.org para melhorar o SEO do seu site

Para quem nunca trabalhou com o Schema.org, o tema pode parecer um tanto complicado e sinuoso, devido à extensão de seu vocabulário. O objetivo deste artigo é explicar da forma mais simples possível a ideia por trás desta “ferramenta” e desembaraçar a tarefa de implementá-la em seu site. Pois, acredite, o esforço é mínimo perto das vantagens que o seu site pode obter em termos de SEO.

O que é o Schema.org?

Criado em 2011, conjuntamente pelo Google, Yahoo! e Bing, o Schema.org não é uma nova linguagem, nem um framework, plugin ou coisa do tipo. É apenas um incremento à linguagem HTML5, que visa adequá-la ao conceito de dados estruturados e torná-la mais “semântica” (um dos principais esforços da chamada Web 3.0). Ou de forma mais simples: visa facilitar a interpretação do conteúdo de uma página web pelos computadores. As novas tags do HTML5 (<article>, <aside>, <header>, <footer>, <nav> etc.) já deram um passo nessa direção, mas são insuficientes para que os sistemas de busca possam distinguir um site do outro e seus conteúdos e oferecer resultados mais relevantes e informativos.

Resultados de busca incrementados como esses são possíveis graças ao Schema.org

Como implementar?

Para implementar o vocabulário do Schema.org em seu site não é necessário carregar nenhum arquivo extra, nem fazer grandes alterações na estrutura HTML já existente. Tudo que você precisa fazer é adicionar alguns atributos especiais em determinadas tags e, talvez, acrescentar um ou outro <span> quando necessário. Simples assim.

Você pode adicionar esses atributos em todo o seu site ou apenas em alguns trechos. Não há nenhuma regra ou exigência quanto a isso. Mas quanto mais estruturados forem os dados de suas páginas, melhor elas serão compreendidas pelos buscadores e melhor será seu rankeamento. Recomenda-se fazer a marcação sobretudo nos conteúdos mais relevantes.

Mas que atributos são esses?

Bem, isso depende de qual formato você optar para fazer a marcação. O mais utilizado é o microdata e é apenas dele que vou falar aqui (os outros são o RDFa e o JSON-LD, mas você realmente não precisa conhecê-los se não quiser). Portanto, os atributos com os quais trabalharemos são os seguintes: itemscope, itemtype e itemprop. E isso é quase tudo que você precisa saber para entrar no mundo do Schema.org.

Os valores desses atributos são escolhidos de uma listagem pré-definida, de acordo com o conteúdo que está sendo marcado (com exceção do itemscope, que é um atributo booleano, sem valor).

Vamos a um exemplo simples para explicar a aplicação de cada atributo.

Exemplo

Neste exemplo, mostrarei a aplicação de um schema em um trecho de código fictício de um anúncio de produto numa loja virtual. Vamos por partes, começando pelo atributo básico, o itemscope.

Itemscope

Quem mexe com programação, já está familiarizado com a palavra scope (escopo): um trecho delimitado de um código dentro do qual certas expressões serão válidas (uma variável, uma função ou, neste caso, um schema). O escopo de um schema começa quando o atributo itemscope é declarado em um elemento e termina quando a tag do mesmo elemento é fechada. E como já disse acima, este é um atributo booleano, que deve ser declarado sem nenhum valor associado (seu valor implícito é true). Veja no exemplo abaixo:

<section itemscope class="produto">
    <!-- Começo do escopo -->
    <span class="nome">iPhone 7</span>

    <img src="iphone7.jpg" alt='iPhone 7' class="imagem" />

    <div class="preco">R$ 3200.00</div>

    <span class="descricao">O iPhone 7 tem o melhor desempenho, a maior duração de bateria, novas cores, sistema de som estéreo e é resistente à água.</span>   
    <!-- Fim do escopo -->
</section>

Você pode ter quantos itemscopes quiser em uma mesma página, sempre acompanhado de um itemtype, como explicarei na sequência.

Itemtype

Na mesma tag em que é declarado o itemscope, você deve declarar um itemtype. O valor desse atributo será sempre uma URL do tipo http://schema.org/XXXX. Você encontra a lista com todos os valores possíveis neste link. Porém, como essa lista não é nada curta, essa talvez seja a parte um pouca chata do processo. Mas ganhando um pouco de experiência, você passará a achar com facilidade os “tipos” que precisa.

Esses “tipos” são divididos em dois grupos mais gerais: “Thing” e “DataType”, ambos subdividos em diversos “subtipos”. O DataType é um grupo menor usado basicamente para marcar dados como datas, horários e URLs. O Thing é um grupo bem grande, que abrange oito subtipos (Action, CreativeWork, Event, Intangible, Organization, Person, Place, Product), que por sua vez possuem outras tantas subdivisões (“CreativeWork”, por exemplo, possui os subtipos Book, Blog, Game, Recipe, TVSeries, entre muitos outros). Portanto, se a sua página está falando sobre um livro, você pode usar o itemtype “CreativeWork”. Mas se usar o itemtype filho “Book”, a compreensão que os buscadores terão do seu conteúdo será ainda maior. Busque sempre o itemtype mais específico possível que se enquadre ao seu conteúdo. Se o itemtype desejado não existir (acontece, apesar da quantidade de opções disponíveis), então adote um mais genérico.

No nosso exemplo, o “tipo” mais apropriado é Product. Portanto, o itemtype deve ser declarado da seguinte forma:

<section itemscope itemtype="http://schema.org/Product" class="produto">
    <!-- Começo do escopo -->
    <span class="nome">iPhone 7</span>

    <img src="iphone7.jpg" alt='iPhone 7' class="imagem" />

    <div class="preco">R$ 3200.00</div>

    <span class="descricao">O iPhone 7 tem o melhor desempenho, a maior duração de bateria, novas cores, sistema de som estéreo e é resistente à água.</span>
    <!-- Fim do escopo -->
</section>

Itemprop

Agora vamos à última etapa, que é a adição das propriedades do itemtype escolhido. Cada itemtype possui uma página própria no site do Schema.org, onde estão listadas suas propriedades específicas, assim como as propriedade que ele herda do itemtype do qual ele descende. Por exemplo, o itemtype “Product” possui propriedades como brand, color e model, mas também herda as propriedades do itemtype “Thing”, como name, image e description. Para adicionar essas propriedades basta você seguir a estrutura HTML dentro do escopo definido, marcando os conteúdos que achar relevantes e que tiverem uma propriedade correspondente.

O código do nosso exemplo ficaria assim:

<section itemscope itemtype="http://schema.org/Product" class="produto">
    <!-- Começo do escopo -->
    <span itemprop="name" class="nome">iPhone 7</span>

    <img itemprop="image" src="iphone7.jpg" alt='iPhone 7' class="imagem" />

    <div itemprop="offers" class="preco">R$ 3200.00</div>

    <span itemprop="description" class="descricao">O iPhone 7 tem o melhor desempenho, a maior duração de bateria, novas cores, sistema de som estéreo e é resistente à água.</span>
    <!-- Fim do escopo -->
</section>

Mas se você observar na tabela de propriedades de cada “tipo”, verá que existe uma coluna chamada “Expected Type”. Essa coluna indica o itemtype que deverá ser usado caso você queira iniciar um novo escopo (dentro do escopo atual) para dar ainda mais detalhes sobre determinado conteúdo. Sim, isso é possível! No nosso exemplo, o preço pode ser mais bem explicado, para que os buscadores saibam o que é o símbolo da moeda e o que é o valor do produto em si.

<section itemscope itemtype="http://schema.org/Product" class="produto">
    <!-- Começo do escopo -->
    <span itemprop="name" class="nome">iPhone 7</span>

    <img itemprop="image" src="iphone7.jpg" alt='iPhone 7' class="imagem" />

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="preco">
        <!-- Aqui saímos do escopo do itemtype "Product" e entramos no escopo do itemtype "Offer" -->
        <span itemprop="priceCurrency" content="BRL">R$</span>
        <span itemprop="price">3200.00</span>
        <!-- Fim do novo escopo -->
    </div>

    <!-- Voltamos ao escopo do itemtype "Product" -->
    <span itemprop="description" class="descricao">O iPhone 7 tem o melhor desempenho, a maior duração de bateria, novas cores, sistema de som estéreo e é resistente à água.</span>
    <!-- Fim do escopo -->
</section>

Você viu que tudo que fizemos foi abrir um novo itemscope na <div> do preço, com o itemtype “Offer”, e adicionar duas tags <span> para marcar o símbolo da moeda (com a propriedade “priceCurrency”) e o valor do produto (com a propriedade “price”). Você deve ter notado também que o primeiro <span> leva um atributo extra content. Este atributo serve para formatar o conteúdo da tag em um padrão convencionado (isso é necessário apenas em alguns casos, como na marcação de tipos de moedas, cujo padrão adotado é o ISO 4217).

Agora basta repetir esse processo para todo o conteúdo do seu site que você achar relevante e você já terá páginas com um SEO super aprimorado e prontas para ganharem um rankeamento e um formato de exibição muito melhores nos resultados de busca. Fácil, não?

Validação

Caso você queria conferir se fez tudo certo na marcação dos schemas em seu site, basta usar uma das ferramentas de validação disponibilizadas pelos próprios buscadores. A minha favorita é a do Yandex (o “Google da Rússia”, também membro do projeto). O Google também possui a sua, mas pelas minhas experiências, ela possui um defeito que é o de acusar erros de marcação inexistentes.

Leia também
Comentários