Como os sites da B2W conquistaram as primeiras posições na busca orgânica durante a última Black Friday

Google, Microsoft, Yahoo e Yandex. Você sabe o que todas essas empresas tem em comum?

O desafio de interpretar a internet.

Como é possível colaborar com os serviços de busca na interpretação do conteúdo de uma página? Antes de responder essa pergunta, é necessário entender o seu funcionamento.

Usando uma analogia bem simples como referência, os motores de busca são uma biblioteca, enquanto os os livros são as páginas da internet. As informações das páginas são armazenadas em enormes bancos de dados (para posterior análise) e, quando uma pesquisa é realizada, eles verificam qual o melhor resultado para sua consulta, entregando o que consideram ser o melhor resultado possível para o usuário.

E como o Google obtém informações sobre as páginas?

Os dados são obtidos através de uma técnica chamada ‘crawling’, que coleta as informações dos códigos fontes das páginas através do uso de robôs. Alguns crawlers são capazes de renderizar o conteúdo JavaScript não presente no código fonte (html) e obter informações extras que serão adicionadas ao banco.

Quem quiser se aprofundar pode assistir este video bem explicativo, feito pelo Matt Cutts.

Agora que é possível entender que tudo isso é feito de forma automatizada, basta imaginar essa estrutura dentro de um e-commerce.

Ao acessar a página de um produto qualquer, encontra-se o preço próximo ao botão “comprar”, associando tal informação ao valor do produto.

Todavia, somente com os elementos do código fonte, o crawler terá diversos produtos para analisar e, consequentemente, vários preços em espaços como “produtos relacionados”, “aproveite e veja também”, por exemplo.

Entender qual é o produto principal e seu preço, dado que existem várias opções numa mesma página, não parece ser uma tarefa trivial para um robô.

Por isso, foi criado um padrão, organizado pela associação Schema.org, com o objetivo de facilitar a interpretação das páginas web, fornecendo o melhor resultado possível ao usuário final.

O que é o Schema.org?

O Schema.org, é resultado da colaboração entre Google, Microsoft, Yahoo!, Yandex e a comunidade. Seu objetivo principal é fomentar o uso de dados estruturados na internet, que fornecerão informações através de um vocabulário comum, possibilitando webmasters e desenvolvedores definirem um “esquema” para suas páginas, facilitando a interpretação dos mecanismos de buscas.

Mais informações podem ser encontradas no GitHub.

Atualmente, o schema.org tem, em sua documentação, três linguagens de programação compatíveis: JSON-LD, Microdata e RDFa. Inserindo qualquer uma delas no código HTML da página, é transmitida a mensagem de forma estruturada.

Em termos de performance, não há vantagens na utilização de nenhuma das linguagens em específico. O Google, através de seus guidelines, recomenda o JSON-LD que pode ser inserido em qualquer parte do seu código fonte.

Seguem três exemplos de Schema, nas diferentes linguagens, sobre uma página de um produto genérico:

JSON-LD

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Meu Produto",
  "image": [
    "https://url-da-imagem.com/imagem.jpg",
    "https://url-da-imagem.com/imagem2.jpg",
    "https://url-da-imagem.com/imagem3.jpg"
   ],
  "brand": {
    "@type": "Thing",
    "name": "Marca"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5.0",
    "ratingCount": "1"
  },
  "offers": {
    "@type": "AggregateOffer",
    "lowPrice": "99.99",
    "highPrice": "199.99",
    "priceCurrency": "BRL"
  }
}
</script>

Microdata

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="brand">Marca</span> <span itemprop="name">Meu Produto</span>
  <img itemprop="image" src="https://url-da-imagem.com/imagem.jpg" />
  <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    Average rating: <span itemprop="ratingValue">5.0</span>, based on
    <span itemprop="ratingCount">1</span> reviews
  </span>
  <span itemprop="offers" itemscope itemtype="https://schema.org/AggregateOffer">
    from $<span itemprop="lowPrice">99.99</span> to
    $<span itemprop="highPrice">199.99</span>
    <meta itemprop="priceCurrency" content="BRL" />
  </span>
</div>

RDFa

<div vocab="https://schema.org/" typeof="Product">
 <span property="brand">Marca</span> <span property="name">Meu produto</span>
 <img property="image" src="https://url-da-imagem.com/imagem.jpg" alt="Alt Imagem" />
 <span property="aggregateRating"
       typeof="AggregateRating">
  Average rating: <span property="ratingValue">5.0</span>, based on
  <span property="ratingCount">1</span> reviews
 </span>
 <span property="offers" typeof="AggregateOffer">
  from $<span property="lowPrice">99.99</span> to
  $<span property="highPrice">199.99</span>
  <meta property="priceCurrency" content="BRL" />
 </span>
</div>

Para saber o impacto da implementação na página de resultados, existe uma ferramenta que é o teste de resultados avançados. Caso a página não esteja no ar, é possível testar o seu código, já nos casos em que a página existe, basta inserir a URL.

Com os conceitos básicos do Schema apresentados, vem o seguinte desafio:

Como criar um schema para milhões de páginas, ou seja, de forma escalável, se temos cada uma das páginas com conteúdos completamente diferentes?

GRAFOS!

Através de um dos conceitos mais importantes da matemática, o Grafo, em uma de suas aplicações, que modela relações entre pares de objetos.

Para imersão no assunto, basta procurar por Teoria dos Grafos. Essa foi uma ideia proposta pelos desenvolvedores da Yoast SEO, discutida brevemente no vídeo abaixo, através do canal da Yoast, por Joost de Valk e Jono Alderson.

Desta maneira é permitido criar pedaços de schemas genéricos que podem servir para todas as páginas, como informações sobre a empresa, por exemplo. Por outro lado, não se abriu mão da liberdade de adicionar elementos que sejam significativos para um determinado grupo de páginas do site.

A definição do elemento de maior importância é feita através da propriedade ‘mainEntityOfPage’. Com isso, os buscadores conseguem interpretar de forma mais adequada todo o conteúdo exibido.

Também é possível inserir, de maneira programática, o schema em diversos tipos de páginas diferentes, usufruindo dos benefícios do mesmo. Na imagem abaixo, temos o número de reviews (767), a nota média (4,5) o preço e a disponibilidade em estoque.

Exemplo de resultado, do Google, com schema de uma página de produto da americanas

Caso de uso: Black Friday 2019

Durante a Black Friday, um dos eventos mais importantes para o e-commerce, foram anexados nas páginas de três marcas da B2W Digital (americanas, shoptime e submarino) o Schema de FAQPage, com o objetivo de exibir na SERP (Search Engine Results Page), resultados para perguntas comuns dos consumidores.

Exemplo de resultado, do Google, com schema de FAQPage em uma página do submarino

Com essa e outras otimizações, a B2W alcançou as primeiras posições para o termo “black friday” e ocupou um maior espaço da página de resultados, aumentando a interação do usuário , além de turbinar métricas como o número de cliques e, consequentemente, o CTR.

Como utilizar o Schema?

Os principais mecanismos de busca possuem guidelines sobre os dados estruturados suportados em sua plataforma:

Google Guidelines

Bing Guidelines

Yandex Guidelines

Além destes, existe também toda a documentação do Schema.org, contendo informações sobre os tipos de dados estruturados existentes e outra exclusiva para desenvolvedores.

Conclusões

A tarefa de indexar a internet, por parte das grandes empresas, é um processo incremental e totalmente inovador. Via Schema, é possível contribuir ativamente para uma melhor experiência do usuário final.

Pode parecer uma tarefa complicada entender como funciona a “linguagem estruturada”. Nestes momentos,basta recordar que ela é feita para facilitar o entendimento de todos.

Em pouco tempo você colocará em prática todas as ‘features’ disponíveis nos mecanismos de busca. E, mesmo que ainda não sejam suportados, o uso de outras informações presentes no Schema.org podem ser uma excelente oportunidade para obtenção de resultados inéditos na SERP.

Use sua criatividade e não limite seus ganhos ao que está “pré-determinado” em um guideline!

Eric Enge(@stonetemple), especialista em SEO, durante uma de suas palestras, na SMX West em 2019, disse que se o Google implementasse suas principais funções da busca baseado em implementações corretas de Schema, ele seria um mecanismo de busca muito vazio.

Quem tiver interesse no assunto e quiser continuar a discussão ou apenas contribuir para a comunidade, temos dois grupos no LinkedIn: SEO no RJ e SEO em SP.

Quer ter a oportunidade de trabalhar com tecnologias disruptivas e inovadoras, com grandes desafios e uma cultura orientada a resultados? Então se inscreve logo!

Espero que tenham gostado. Se o schema pode ajudar em seu negócio, eu adoraria receber algum feedback, fique à vontade para me enviar uma mensagem no LinkedIn!

Se quiser compartilhar esse conteúdo com pessoas de outras línguas, existe a versão do texto em inglês neste link.

Gostaria de agradecer ao Richard Fenning pela co-autoria na tradução do artigo; ao Marcos Leal por sua colaboração na realização do projeto de schema; Ao Rodrigo Padin pelas artes e aos colegas do Time SEO e da B2W pela leitura e revisão, em especial ao Tiago Andrade pelo apoio e sugestões. Obrigado!!