DEV Community

Gabriel Gomes de Oliveira
Gabriel Gomes de Oliveira

Posted on

Melhore os resultados de pesquisa do seu site com Dados Estruturados

O que são Dados Estruturados?

Sabe quando dá aquela vontade de comer um doce maneiro e você joga no Google "receita bolo de cenoura" e vários resultados com foto, avaliações e tempo de preparo aparecem? Tipo assim:

Resultado da pesquisa 'receita bolo de cenoura' no Google demonstrando a formatação em que os resultados são mostrados quando utilizam-se dados estruturados

Os dados estruturados são uma formatação específica na qual essas informações precisam ser colocadas para que os resultados das pesquisas tenham um certo destaque, um embelezamento, igual esses cards de receitas.

Por que utilizar Dados Estruturados?

Como podemos ver acima, utilizar essa ferramenta faz com que os resultados sejam apresentados de maneira mais chamativa e acertiva para o nosso usuário.
Ele não é um fator que fará seu site aparecer nos primeiros resultados de pesquisa, mas existem estudos que demonstram uma melhora no posicionamento das páginas que utilizam o formato.
Segundo a própria Google:

  • O Rotten Tomatoes adicionou dados estruturados a 100 mil páginas únicas e mediu uma taxa de cliques 25% maior nas páginas aprimoradas com dados estruturados, em comparação às páginas sem esse recurso.
  • O Food Network converteu 80% das páginas deles para ativar os recursos de pesquisa e registrou um aumento de 35% nos acessos.
  • A Rakuten descobriu que os usuários passam 1,5 vez mais tempo acessando páginas com dados estruturados do que em páginas sem dados estruturados. Além disso, há uma taxa de interação 3,6 vezes maior em páginas AMP com recursos de pesquisa.
  • A Nestlé identificou uma taxa de cliques 82% mais alta nas páginas que exibem pesquisas aprimoradas em comparação às que não apresentam o recurso.

Ou seja, é sem dúvida algo essencial para aprimorar o SEO da suas páginas e facilitar a vida do usuário para que ele encontre as respostas corretas para a busca que fez.

De onde vem os Dados Estruturados?

Essa formatação foi criada pela organização Schema.org para padronizar os dados nas páginas web e oferecer uma melhor experiência para os usuários. A organização foi fundada e é mantida por um grupo de empresas compostas pela Google, Microsoft, Yahoo e Yandex.
O projeto é open-source e pode ser encontrado no Github.

Tipos de Dados Estruturados

Anteriormente vimos que receitas são um dos tipos de dados estruturados que faz com que a Google apresente o resultado com uma formatação diferenciada. Além de receitas, livros, produtos, perguntas frequentes, filmes, anúncios de emprego e vídeos, também aparecem de forma diferenciada nos resultados quando formatados com dados estruturados.
Apesar do Schema.org ter criado um formato para praticamente tudo o que existe, não é todo tipo de conteúdo que será "estilizado" pelo Google. Há uma lista que pode ser encontrada na documentação da Central de Pesquisa que mostra tudo o que é possível fazer com essas formatações.
De qualquer forma, ainda que você atue com um dado não tratado pelo Google, é interessante já deixar a formatação de acordo com o que o Schema.org propõe, uma vez que a ferramenta de pesquisa está em constante atualização e novas formas podem ser acrescentadas ao longo do tempo.

Formatação dos Dados Estruturados

Há três tipos de formatação de dados estruturados propostos no site da Schema.org e aceitos pelo Google: Microdata, RDFa e JSON-LD. Eu particularmente utilizei apenas o formato JSON-LD e ele é o mais recomendado pela Google atualmente, mas você vai ter que julgar, dependendo da linguagem de programação ou framework que utiliza, qual é a forma de implementação mais vantajosa para seu projeto.

Utilizando Dados Estruturados

Vamos pegar o exemplo dos dados estruturados para uma receita. Ao entrar na Schema.org, encontramos a entidade "Recipe": https://schema.org/Recipe
Temos uma tabela imensa com todas as possíveis propriedades que essa entidade pode possuir, mas podemos pular lá para o final da documentação e seguir os exemplos que ela propõe.
Se você tiver um site ou blog de receitas, por exemplo, vemos que todas as informações necessárias para criar os dados estruturados, em tese, já estariam em seu site, você apenas teria que criar uma tag <script type="application/ld+json"> na tag <head> do seu HTML preenchendo as informações necessárias no formato correto, como o da receita de bolo de cenoura, retirado no site da "Tudo Gostoso":

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
    "@type": "Recipe",
    "name": "Bolo de cenoura",
    "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html",
    "image" : {
        "@context": "http://schema.org",
        "@type": "ImageObject",
        "author": {
                    "@context": "http://schema.org",
                    "@type": "Organization",
                    "name": "TudoGostoso"
                },
        "url": "https://static.itdg.com.br/images/1200-675/d290bc79bcad112ee9095604e45eb262/365326-original.jpg"
    },
    "author": {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "TudoGostoso"
    },
    "datePublished": "2019-04-01",
            "description": "Confira como fazer essa receita de bolo de cenoura simples e f&amp;aacute;cil, nossa campe&amp;atilde; de acessos! Uma receita pr&amp;aacute;tica, feita com aux&amp;iacute;lio do liquidificador e perfeita para o caf&amp;eacute; da manh&amp;atilde; e para a hora do lanche!",
        "aggregateRating": {
        "@type": "AggregateRating",
        "reviewCount": "156",
        "ratingValue": "4.7",
        "ratingCount": "14387",
        "bestRating": 5,
        "worstRating": 1
    },        "keywords" : "Receita de Bolo de cenoura",            "prepTime": "PT40M",                "totalTime": "PT40M",    "recipeYield": "8 porções","recipeCategory" : "Bolos e tortas doces",
            "recipeIngredient": ["1\/2 xícara (chá) de óleo","3 cenouras médias raladas","4 ovos","2 xícaras (chá) de açúcar","2 e 1\/2 xícaras (chá) de farinha de trigo","1 colher (sopa) de fermento em pó","1 colher (sopa) de manteiga","3 colheres (sopa) de chocolate em pó","1 xícara (chá) de açúcar","1 xícara (chá) de leite"],        "recipeInstructions": [{
                "@type": "HowToStep",                    "name": "Massa",
                "text": "Em um liquidificador, adicione a cenoura, os ovos e o &amp;oacute;leo, depois misture.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step1"
            },{
                "@type": "HowToStep","text": "Acrescente o a&amp;ccedil;&amp;uacute;car e bata novamente por 5 minutos.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step2"
            },{
                "@type": "HowToStep","text": "Em uma tigela ou na batedeira, adicione a farinha de trigo e depois misture novamente.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step3"
            },{
                "@type": "HowToStep","text": "Acrescente o fermento e misture lentamente com uma colher.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step4"
            },{
                "@type": "HowToStep","text": "Asse em um forno preaquecido a 180&amp;deg; C por aproximadamente 40 minutos.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step5"
            },{
                "@type": "HowToStep",                    "name": "Cobertura",
                "text": "Despeje em uma tigela a manteiga, o chocolate em p&amp;oacute;, o a&amp;ccedil;&amp;uacute;car e o leite, depois misture.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step6"
            },{
                "@type": "HowToStep","text": "Leve a mistura ao fogo e continue misturando at&amp;eacute; obter uma consist&amp;ecirc;ncia cremosa, depois despeje a calda por cima do bolo.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step7"
            }]
}
</script>

Enter fullscreen mode Exit fullscreen mode

Observando a estrutura acima, vemos todas as informações necessárias para que o robô da Google chegue em nosso site e mostre em seus resultados o que ele oferece, no caso, a receita de bolo de cenoura. Temos ali o tipo de dado estruturado (receita), o autor da receita, a descrição da receita, links para imagens, o passo a passo, os ingredientes.
Também vemos que dentro de uma mesma entidade temos algumas outras entidades, como imagem (ImageObject), autor (Author), avaliação agregada (AggregateRating), "passo a passo de como fazer" (HowToStep).
De início pode parecer muita coisa, mas esse tipo de informação não precisa ser decorada ou lembrada, cada estrutura segue um padrão e há diversos exemplos tanto no site do Schema.org, quanto no próprio guia de recursos da Google, que inclusive é um local de consulta recomendado justamente para você ver quais são as informações mais importantes de cada estrutura que a Google usa nas pesquisas.

Validando os Dados Estruturados

Supondo que fizemos tudo isso do 0 e queremos validar essa estrutura de receita, podemos pegar essa estrutura e jogar no site de teste de pesquisa aprimorada que a própria Google oferece:

Teste de dados estruturados do exemplo de receita de bolo de cenoura

Ali temos nosso código e cada dado estruturado é um "item" que a ferramenta vai validar. Se esquecermos ou omitirmos alguma informação, por exemplo os ingredientes da receita, isso faz com que a estrutura seja inválida. Nesse caso, precisaríamos ajustar essa informação.

Teste de dados estruturados do exemplo de receita de bolo de cenoura com informações inválidas

Na imagem acima temos uma lista com 1 erro crítico e 17 erros não críticos. É essencial solucionar o crítico, mas como os não críticos são opcionais, fica de acordo com as suas prioridades, pois não necessariamente são fatores que atrapalhariam o ranqueamento, ainda que sejam informações úteis aos usuários.

Resumo da ópera

É tudo bem simples para falar a verdade. Acho que podemos resumir isso em um passo a passo:
Identificar os dados -> encontrar a estrutura -> preencher a estrutura com os dados necessários -> validar.
Se na validação surgir algum problema, é só fazer os ajustes necessários.

Ferramentas úteis

Você certamente não vai validar esses dados "à mão"! Sem dúvida alguma isso tudo é muito trabalho para ser feito sem ajuda! Para isso, há diversas ferramentas que podem nos ajudar a criar, validar e até a verificar quais dados estruturados outros sites utilizam para que possamos nos inspirar.

Ferramentas para criação

Ferramentas para validação

Ferramentas de verificação

Há diversas extensões para diversos navegadores que vasculham o site que você precisar verificar. Essas são algumas que eu utilizei:

  • OpenLink Structured Data Sniffer muito útil para analisar quais dados estruturados estão presentes e em qual formato eles foram colocados no site que você ativar a extensão. Porém a sua interface não é tão bacana;
  • Detailed SEO Extension é uma extensão delicinha que não só vai te mostrar dados estruturados como diversos outros aspectos de validação de SEO, como a utilização de meta tags, headings, estrutura HTML, etc.

Finalização

Os dados estruturados são uma de muitas ferramentas relacionadas ao SEO de uma página web. Se você não sabe o que é SEO, eu tenho uma publicação a respeito disso aqui mesmo:

Esse é um assunto bem extenso, mas caso você queira se aprofundar nele eu recomendo fortemente a leitura do Centro de Pesquisas da Google, lá você vai encontrar vários exemplos e tudo o que o motor de busca leva em consideração quando o robozinho deles passa no seu site.

Cabe lembrar que não existem métodos de fazer com que sua página apareça em 1° lugar nas pesquisas imediatamente. Esse é um trabalho que demora meses e possivelmente anos. Seguir todas as recomendações ajuda muito, mas não há receita mágica para isso (apesar dos gurus de SEO estarem tentando descobrir algo assim desde sempre).

De qualquer forma, é uma área em constante mudança e que requer estudo, como todos os outros assuntos da programação!

Bom, tudo isso posto, agradeço a atenção de vocês e tô indo ali comer meu bolinho de cenoura

Bolo de cenoura com muita cobertura de chocolate e granulê

(Eu juro que tem cenoura embaixo de toda essa cobertura)

Top comments (0)