How we achieved the first available position in the organic search during Black Friday

Google, Microsoft, Yahoo, and Yandex. Do you know what all these companies have in common?

The challenge of interpreting the internet.

In this article, we are going to talk about how to collaborate with search engines in order to interpret website content. However, first, we need to understand how search engines work.

Search engines are like a library. The books are internet web pages. The information from the pages is stored in huge databases and, when a search is performed, they verify what is the best result to answer your search query, delivering what they believe to be the best result possible for the user.

And how does Google gather information about web pages?

Information is gathered through a technique called ‘crawling’, which consists of collecting information about the source code of these pages by using robots. Some crawlers are capable of rendering JavaScript content, which isn’t present in the source code (HTML), and and they can draw extra information from the database.

Whoever wants to learn more about this topic, can watch this explanatory video, from Matt Cutts.

Now that we understand that crawling is done in an automated manner, imagine that you are on an e-commerce website. When you access any product page, you will find the price of the product next to the “buy” button that associated the price with the value of the product.

However, using only the information from the source code, the crawler will have several products to analyze and, consequently, several prices — in areas such as “related products” and “you may also be interested in”, for example.

Understanding which is the main product and its price, once we have a list with ’N’ products, is not a trivial task for the crawler. Thus, it is necessary to create a pattern — organized by the association Schema.org — that eases interpreting webpages, and improves the delivery of the best possible results for the end-user.

Schema.org is the result of a collaboration between Google, Microsoft, Yahoo!, and Yandex with the internet community. It’s main goal is to increase the use of structured data on the internet, which provides information through a common vocabulary, allowing webmasters and developers to define a “scheme” or “pattern” for their web pages that makes it easier for search engines to crawl pages.

You can find more information on GitHub.

Nowadays, schema.org has, three compatible programming languages: JSON-LD, Microdata, and RDFa. All one needs to do is insert one of these languages in the HTML code of the webpage and it is possible to display the code in a structured manner.

Regarding performance, there are no advantages of specifically using one of one these languages. Google, in its guidelines, recommends JSON-LD, which can be inserted in any part of the source code.

Here you can find three examples of Schema, using different the different Schema languages, from the product page of a generic product:

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>

While performing the implementation, you can test your code if the page is not yet published, or you can use the URL directly. Therefore, you can easily identify errors and structured data warning that were found on your webpage by the crawler.

If you want to know the impact of the implementation, there is a tool, the advanced results test, provided by Google.

Now that we understand the basic concepts of Schema, here is the following challenge:

How to create a schema for millions of pages or, in a scalable manner, if every page has completely different content?

GRAPHS!

That’s right! Graphs are one of the most important concepts in mathematics. One of their uses is to model the relationships between pairs of objects. If you want to learn more about this topic, check out Graph Theory.

That idea was proposed by the developers of Yoast SEO, which is discussed in a on the Yoast channel, by Joost de Valk and Jono Alderson.

In this way, we can create pieces of generic schemas that can be useful to all pages, such as company information, for example. In addition, we don’t lose the freedom of adding elements that are significant for a certain group of pages on the website.

The definition of the most important element is made via the propriety ‘mainEntityOfPage’, here search engines can interpret exhibited content in a more robust manner.

It is also possible to automatically insert scheme in several different kinds of pages. For example, in the image below, we have the number of reviews (767), the average score (4,5), the price, and the stock availability.

Example result from Google, with the schema of a product page from americanas.

Use case: Black Friday 2019

During Black Friday, one of the most important dates in the e-commerce calender, FAQ Page schema was inserted into the pages of the three B2W Digital brands (americanas, shoptime, and submarino), in order to enhance the SERP (Search Engine Results Page), using results from the most common questions from consumers’ queries.

Example result, from Google, with the FAQPage schema page from Submarino

With this and other optimizations, we achieved the first organic positions for the term “Black Friday”, as well as occupying more real estate in the results page and increasing user interaction; because users have a better experience while, we can also improve key metrics such as total clicks and CTR.

How to use the Schema?

The main search engines have guidelines about how structured data is supported on their platforms:

Google Guidelines

Bing Guidelines

Yandex Guidelines

There is also the entire documentation from Schema.org that contains information about the types of existing structured data and the exclusive for developers documentation.

Conclusions

The task of indexing the internet, performed by these search engines, is an incremental and innovative process. Through Schema, it is possible to actively improve the web experience of the final user. Ultimately, creating a richer and more diverse internet which will benefit everyone.

Initially, it seems complicated to understand how this “structured language” works but remember it is here to help us. Therefore don’t give up! Read and read again, and search for more information.

In no time, you will be using and mastering all the features made available by search engines in order to achieve your business goals. Furthermore, although some other information that is present on Schema.org is not yet supported, it still represents an excellent opportunity to obtain wins in the SERPs. Use your creativity and don’t limit your ambition to what is mentoned in the guidelines!

I would like to share a quote by Eric Enge(@stonetemple), an SEO expert, during one of his talks, at SMX West in 2019

“If Google were to implement major search functions solely based on people implementing Schema correctly, it would be a very empty search engine.” Eric Enge @SMX19

Anyone who is interested in this topic or wants to continue the discussion or simply to contribute to the community, we have two LinkedIn groups: SEO in RJ (Rio de Janeiro) and SEO in SP (São Paulo).

Do you want the opportunity to work with innovative and disruptive technologies. Do you enjoy big challenges and thrive in a results-oriented culture? Then check out our open positions here: Apply

I hope you enjoyed this article and that schema can help your business. I would love to hear your feedback, feel free to send me a message through LinkedIn!

As we consider important not only to disseminate content in english but also in our native language, for those who prefer, we have a copy of the following article in brazilian portuguese here.

I would like to thank Richard Fenning for the co-authorship of the translation of this article; to Marcos Leal for his collaboration for the creation of the above Schema Project; To Rodrigo Padin for the arts and to my colleagues from the SEO Team here in B2W for reading and reviewing this article, and especially to Tiago Andrade for his support and suggestions. Thank you!!

If you are looking for a development opportunity, working with innovation in a high-impact business, visit the B2W Careers portal! In it, you can access all available positions. Come join our team!