Como usar marcação Schema.org em seu site e por que você deve fazer

Os motores de busca são incrivelmente poderosos. Eles podem interpretar a linguagem comumente obscura que usamos para descobrir o que procuramos, determine o melhor recurso para responder às nossas perguntas e nos mostrar dentre de alguns segundos.

O Google está realmente ficando realmente bom em responder perguntas na página de resultados da pesquisa, evitando a necessidade de clicar em todos os resultados. Ele mesmo personaliza os resultados da pesquisa. E isso ajuda as pessoas a encontrar as informações que estão procurando mais rapidamente. Mas os motores de busca não podem fazer isso por conta própria – eles precisam de ajuda de proprietários e desenvolvedores de sites. E a marcação de esquema é uma maneira pela qual você pode ajudar no seu próprio site.

O que é Schema Markup?

Schema markup (Esquema de marcação) é uma maneira de destacar partes específicas de dados estruturados. Quais são os dados estruturados? É a informação organizada e marcada para que possa ser melhor compreendida pelas máquinas. Em suma, a marcação do esquema é uma informação que ajuda os motores de busca a encontrar tipos específicos de informações em sua página da web. É mais fácil olhar para um exemplo.O Google tem seu próprio exemplo interativo de marcação de esquema que detalha uma receita de torta de maçã:

Acima, você pode ver o JavaScript que define o tempo de preparação, o tempo total, o rendimento da receita e vários fatos de nutrição para a receita. Deve-se notar neste ponto que existem duas maneiras principais de marcar os dados estruturados: com JSON ou com tags HTML in-line. O Google recomenda o método JSON, mas iremos falar sobre os dois mais abaixo.

Veja como o Google extrai as informações nutricionais especificadas:

Schema.org tem milhares de diferentes tipos de marcações que você pode usar para mostrar melhor os mecanismos de pesquisa as informações em sua página. O tipo TechArticle, por exemplo, inclui, entre outras coisas, os seguintes atributos:

• proficiencyLevel (nível de proficiencia)
• wordCount (contagem de palavras)
• audience (audiência)
• creator (criador)
• dateCreated (data de criação)
• dateModified (data de modificação)
• datePublished (data de publicação)
• publishingPrinciples (princípios da publicação)
• typicalAgeRange (faixa de idade típica)

Há um esquema completo para bibliotecas, empresas de hospedagem, apartamentos, eventos de artes visuais, canais de transmissão, métodos de entrega, status do servidor de jogos e muito mais.

A idéia é garantir que os motores de busca saibam o que cada informação da página realmente representa, para que possa mostrar essas informações às pessoas que as estão procurando.

Os Benefícios do Esquema de Marcação

ESTÁ BEM. A marcação de esquema diz aos motores de busca o que está em sua página – qual é o problema?

O Google coloca assim:

“Quando a informação é altamente estruturada e previsível, os mecanismos de pesquisa podem organizar e exibir de forma mais fácil de forma criativa”.

Por exemplo, você pode ver datas de turnê para a próxima turnê do Slayer exibida diretamente nos resultados da pesquisa:

Ou obter informações específicas sobre um filme quando você procurá-lo:

O Google está melhorando o tempo todo para encontrar esta informação por conta própria, mas o uso correto da marcação de esquema torna o processo mais fácil e torna mais provável que as informações em sua página sejam apresentadas.

E quando os motores de busca sabem exatamente o que está em sua página, eles podem mostrá-lo às pessoas que estão procurando por dentro dos resultados da pesquisa. E isso é bom para todos.

Começando com dados estruturados

Agora que você viu os benefícios de usar a marcação Schema.org, é hora de começar a mergulhar. Começaremos com a ferramenta mais fácil ao redor: o Marcador de dados do Google.

Você precisará do seu site para estar conectado ao Google Search Console (anteriormente conhecido como Ferramentas para webmasters). Se você precisar de ajuda para configurá-lo, confira o guia útil da Yoast.

Em seguida, você precisará inserir o URL de uma página que deseja marcar e selecionar o tipo de marcação que você estará fazendo. Neste caso particular, usaremos o tipo de marcação de artigos.

Porque estou destacando um artigo em um site que publica muitos artigos, vou manter Tag nesta página e outros como ele verificaram.

Agora você verá uma tela dividida: sua página à esquerda e os campos de marcação disponíveis à direita.

É realmente simples a partir daqui. Basta começar a destacar! Sempre que você realce o texto (ou clique em uma imagem), um pequeno menu aparecerá onde você pode selecionar o tipo de informação que você destacou.

Aqui, destaquei o título da página. Tudo o que tenho a fazer é clicar em “Título” no menu.

Agora o título é preenchido no painel direito.

Continuarei, destacando o autor, data publicada, imagem principal e categoria (destaquei as tags na parte superior do artigo e as três foram importadas como categorias).

E acabamos! Isso é tudo aí.

Quando você atinja Done, Data Highlighter irá ajudá-lo a aplicar esta marcação a outras páginas similares em seu site.

Adicionando mais detalhes

O Marcador de Dados apenas permite que você arrase a superfície da marcação de dados estruturados. Como você viu acima, eu só consegui adicionar um punhado de atributos a esse artigo. O tipo de artigo do Schema.org contém muito mais atributos que podem ser definidos.

O que fazemos se quisermos adicionar mais detalhes à marcação de esquema?

Você terá que mergulhar no código neste momento. Como mencionei anteriormente, existem duas maneiras principais de representar os dados estruturados: com JSON e com tags HTML inline. Como as tags HTML são um pouco mais intuitivas, vamos examinar as primeiras.

Colocando Schema.org diretamente no HTML

Como exemplo, vamos marcar uma frase simples: “Eu vivo em Denver”. Em HTML, isso será representado simplesmente, assim:

<p>I live in Denver.</p>

Para iniciar a marcação, precisamos especificar que esta frase específica é sobre uma pessoa (mostrada pelo tipo de item Pessoa). Veja como fazemos isso:

&lt;div itemscope itemtype="http://schema.org/Person"&gt;<br />
&lt;p&gt;I live in Denver.&lt;/p&gt;<br />
&lt;/div&gt;

Agora, um mecanismo de pesquisa saberá que tudo o que contido nesta tag <div> tem a ver com uma pessoa.

Em seguida, adicionaremos um atributo markup: homeLocation. Schema.org define HomeLocation como “Um local de contato para a residência de uma pessoa”.

Precisamos adicionar esse atributo específico ao HTML. Veja como fazemos isso:

&lt;div itemscope itemtype="http://schema.org/Person"&gt;<br />
&lt;p&gt;I live in &lt;span itemprop="homeLocation"&gt;Denver&lt;/span&gt;.&lt;/p&gt;<br />
&lt;/div&gt;

Agora, “Denver” é identificado como a propriedade homeLocation, e o Google sabe que a pessoa identificada neste parágrafo vive lá.

Se mudarmos a frase para “Eu vivo e trabalho em Denver”, podemos mostrar isso também:

&lt;div itemscope itemtype="http://schema.org/Person"&gt;<br />
&lt;p&gt;I live and work in &lt;span itemprop="homeLocation workLocation"&gt;Denver&lt;/span&gt;.&lt;/p&gt;<br />
&lt;/div&gt;

Denver agora é identificado como HomeLocation e jobLocation. (Thanks to Lloyd Bank and unor at Stack Exchange neste exemplo.)

Este é um caso bastante simples de marcação de esquema, mas você consegue a ideia. Ao usar as tags <div> e <span>, você pode adicionar atributos e propriedades a qualquer coisa em sua página.

Schema.org Markup com JSON

O Google recomenda o uso de JSON-LD (Notação de objeto JavaScript para dados vinculados) para a marcação de esquema. A maior vantagem deste método é que ele mantém seu HTML muito mais limpo. Se você voltar para editar uma página e ver dezenas de páginas de código com marcação, você não vai ficar feliz.

A marcação JSON ainda requer muito espaço, mas é separada do seu HTML, facilitando a manutenção.

Digamos que você tenha uma livraria chamada Harker e você incluiu as seguintes informações na sua página de contato:

Phone number: 555-8710<br />
Address: 749 Stoker St., Boulder, Colorado<br />
Hours: 10–9 Monday through Friday, 11–8 Saturday, 12–5 Sunday

Veja como você representaria isso com JSON-LD:

&lt;script type="application/ld+json"&gt;<br />
{<br />
"@context": "http://schema.org",<br />
"@type": "BookStore",<br />
"telephone": "555-8710",<br />
"address": "749 Stoker St., Boulder, Colorado",<br />
"openingHours": [ "Mo-Fr 10:00-21:00", "Sa 11:00-20:00", "Su 12:00-17:00" ],<br />
}<br />
&lt;/script&gt;

Isso vai no cabeçalho da sua página. Como você pode ver, isso vai ocupar muito espaço, porque este conteúdo certamente também será exibido em sua página em HTML. Então, tudo o que você deseja marcar será escrito duas vezes.

Apesar dessa duplicação, no entanto, o método JSON é muitas vezes preferível, pois separa a marcação de esquema e o seu HTML. Muitas práticas recomendadas de HTML parecem um pouco estranhas até que você perceba que elas facilitam a manutenção de sites. Esse é o mesmo.

Adicionando o marcação do esquema ao seu site

Agora que você viu algumas maneiras diferentes de adicionar notação de dados estruturados ao seu site, você pode começar! É uma boa idéia começar com o Marcador de dados, e seguir a partir daí. A documentação Schema.org é o recurso final, mas é um pouco difícil de descrever.

Não importa se você quer ir pelo básico ou começar a marcar tudo à vista, agora você tem os recursos necessários para começar!

Você usou Schema.org markup em seu próprio site? Você tem dicas para proprietários de sites ou desenvolvedores que procuram começar? Compartilhe seus pensamentos nos comentários abaixo!