Micro-markup and SEO: what kind of micro-markup and when to use it? Guides on setting up

Micro-markup is used to mark up data on website pages in a search engine-friendly language, which allows search engines to use the marked-up data to display information in a snippet, which improves the answers to users’ questions, which is essentially the main task of the search engine.

Dictionaries or methods of micro-markup

Since the advent of markup, various vocabularies and syntaxes have been introduced. A vocabulary defines classes and properties that are used to transfer content from a page to the search results. The syntax contains tags and attributes for describing entities.

Schema.org.

This is the most popular way to micro-markup content. It has been supported since 2011 by search giants: Google, Bing, and others. It can be used to display various useful characteristics in a snippet. For example, rating, reviews, prices, etc.

Schema.org has three main attributes that are mandatory for use in every micro-markup:

• itemscope – indicates which object we are using;
• itemtype – always comes after itemscope and indicates what type of object will be marked;
• itemprop – indicates the properties of the selected object.

With the help of Schema.org markup, you can mark up not only products, but also articles, movies, recipes, etc. To check them on your website, you should use the service https://search.google.com/test/rich-results.

The marked-up code looks like this:

And here is the same code through the verification service:

Open Graph

Another popular markup vocabulary used to correctly display posts on social networks, messengers, and generally anywhere you can share a link. With Open Graph, a post will contain a title, image, and description.

For example, here is a snippet of a website page when shared in Telegram, where the site name, URL, title, and description are marked:

And here’s a snippet of a similar page with additional image markup:

Syntax tags are used to create markup code:

og:title – the title of the repost object;
og:description – description of the object;
og:image – image;
og:url – link to the location of the object;
og:type – object type.

An example of code with Open Graph markup:

Microformats

Microformats.org was created in 2007. It includes various types of objects and descriptions of their properties. This vocabulary describes products, events, companies, recipes, and other entities with a set of unique characteristics. Of the entire list of microformats, hCard is the most commonly used, describing contact details of people and organizations.

Some code using microformats will look like this:

Microdata syntax

In addition to the basic Schema.org attributes itemtype, itemscope, itemprope, you can use additional elements:

1. RDFa and RDFa Lite to describe different types of objects using the attributes xmlns:v=”http://rdf.data-vocabulary.org/#, property=”v:title”, typeof=”v:Breadcrumb” and others.
2. JSON-LD is used to describe linked data objects. In order to adapt the markup to search engines, they are contained in <script> tags. In RDFa and JSON-LD, data is represented in a key-value format.

Example:

Where:

“@type”: “Product” – specifying the type of micromarking
“sku”: “1548189” – product article
“name”: “Apple iPhone 7 32Gb” – product name
“image”: – link to the product image

Micro-markup for Google

The presence of microdata on the website is one of the officially confirmed ranking factors (as reported by Google representative Gary Illyes). In its recommendations, the search engine giant Google recommends using JSON-LD microdata (as stated in the official Google Guide).

We can roughly divide microdata into several types: for online stores, article sites, and general.

Basic microdata

BreadcrumbList (navigation bars)

Micro-markup of breadcrumbs on website pages. The correct microdata for breadcrumbs looks like this:

There are often cases of seemingly correct HC marking, but in fact not – this is when each bread crumb is marked separately.

Organization

General micro-markup of contact information for the site, suitable for all contacts and any type of site.

Example:

LocalBusiness

Micromarking for a single business or branch of an organization that has a precise physical location. Examples of LocalBusiness are a restaurant, restaurant chain, bank branch, club, bowling alley, etc.

Example:

ImageObject

The itemprop=”image” attribute allows robots to quickly recognize information about an image. It is enough to specify an image link, description, image title, caption, and image size.

Example:

Review

If you have reviews on your product pages, you can mark them using the Review property. As a result of Google search results, the rating and reviews will appear in the snippet. You need to specify the following attributes in the site code:

Article

Micro-markup of an article allows you to make the snippet more structured and understandable for the user. You need to find the file that is responsible for the article overview. For example, it can be: single.php. First, find the tag that is responsible for displaying the content and insert the required attribute.

Product

Using micro-markup on websites

What we mark up:

1. Bread crumbs
2. Contacts
3. Products
4. Categories
5. Reviews (included in products)
6. Rating (included in products)
7. Question and answer
8. Articles

Products

If everything is clear with the HC and contact markup, then it’s more interesting with product items. You need to mark everything for a product. There is, of course, a basic set of data that must be marked up for processing by search engines, but it is advisable to mark up everything, the more data you have, the better the snippet can be.

An example of an excellent product micro-markup is https://eplio.com.ua/bu -apple-iphone-8-plus-256gb-space-gray.html:

When marking up products, it is worth considering that if there are no reviews on the product, there will be a warning in the review service – this is not a mistake, it’s normal. Also, there are often other fields that are missing, and they can be given statically:

We recommend:

• “brand” – use the name of the site;
• “sku” – use the article;
• “description” – use a description;
• Global product identifier, such as GTIN, MPN or ISBN code – use the article;
• “priceValidUntil” – specify the date until which the price is valid. You can set it to auto-generate a month in advance. Or use the date
• specified on the website, if available;
• “url” – specify the URL of the product page;
• “availability” – product availability. Options:
  – in_stock – in stock
  – out_of_stock – out of stock
  – preorder – pre-order;
• The format of the price value for the “price” data element is unacceptable – the price should not contain spaces, dots, commas, etc. Only numbers.

If the product has characteristics, they can also be marked, for example:

By category micro-markup, we mean the markup of the number of products and the minimum/maximum price in a category that can be added to a page snippet. This markup is based on the aforementioned Product microdata.

An example is https://touch.com.ua/Telefony-iPhone/:

What a snippet looks like:

What does the markup consist of? If the main markup element for products is the offer tag, then for categories it is offers, which actually indicates the number of products and price range, plus you can display the average rating and number of reviews for category products:

• @type – Product
• name – specify the name of the category or H1
• aggregateRating
• @type – AggregateRating
• ratingValue – the average rating for all products in the category
• reviewCount – number of reviews
• bestRating – the best possible rating
• offers
• @type – AggregateOffer
• lowPrice – price of the cheapest product in the category
• highPrice – the price of the most expensive product in the category
• priceCurrency – specify the currency

Reviews (included in products)

There is nothing special about the reviews markup, especially since it is included in the default product microdata, but for general understanding in case of any errors, we will show it by microdata tags.

An example of the markup itself:

• @type – Review
• reviewBody – the text of the review
• datePublished – date of publication
• author
• @type – Person
• Name – who left the review
• reviewRating
• @type – Rating
• ratingValue – rating

Of course, this is not a complete list of tags for this microdata, there can be many more, but this is the basic set, which is quite enough for an extended snippet.

Frequently asked questions (FAQPage)

One of the latest innovations in microdata for Google. It allows you to significantly expand the snippet by displaying 2 to 4 frequently asked questions about the topic of the search query. Until July 2020, it worked in almost all cases, you could not bother and add a through block, but then Google apparently realized that this markup was being used to heavily manipulate search results (a snippet on 70% of the display on mobile devices) and severely limited the output of template blocks, and fixed the through blocks altogether (of course, there are exceptions, but they are rare, that’s what exceptions are for).
That’s interesting! For example, you have set up FAQPage microdata (all checks passed) for your pages and decided to check it as you usually do, and let’s see if it’s right to do so? Yes, but not quite. Let us explain:

1. Data during verification and reality are different things!
2. Always check the data and micro-markup via Google Search Console
3. The correctness of the microdata does not guarantee the output of data in the snippet

Example “Expectations”:

Reality (yes, the reality of a SEO is cruel):

So why doesn’t Google display the question and answer in a snippet if everything is done correctly? It’s all about the new algorithms that were updated in July 2020. If the question and answer are not related to the search query by relevance or intent, they will not be displayed. Accordingly, for different search queries, a snippet of the same page can be displayed with or without questions. Or 2 questions and answers will be displayed for one query, and 4 for another.
And the last important change was the elimination of emoji display for questions and answers in about 99% of cases.

How colorful the snippet looked:

And what happened:

So how do you customize your Q&A to have a chance at an extended snippet? Our way is as follows:
Content sites – write Q&As from the SNF queries, as a rule, most of these queries are questions about the topic you are describing. It is ideal to write a page-long text and a few questions and answers along with it to fully cover the topic.

Online stores – here you should definitely use an answer generator. What is most often of interest to users who are looking for something to buy:

1. Prices – cheap and expensive products;
2. Popular products – it is always interesting to know what others are buying;
3. Reviews – important, they also look for products with a lot of reviews;
4. Assortment – in general, the assortment of the store is important.

Articles

The Article markup allows Google to better interpret the content of pages and show the most relevant titles, images, and dates of publication of articles in the extended results of the Article type.
That’s what Google says!

What is it really about? In fact, you won’t get any noticeable improvements or advantages, but pages with this micro-markup will be much clearer for the search engine.

There are 3 options for such microdata:

1. https://schema.org/Article – A general scheme that applies to all textual materials.
2. https://schema.org/NewsArticle – A scheme for marking up news articles.
3. https://schema.org/BlogPosting – Scheme for marking up blog articles.

An example of universal micro-markup (replace the generic Article object with NewsArticle or BlogPosting and the validity will be preserved):

<div itemscope itemtype=”https://schema.org/Article”><link itemprop=”mainEntityOfPage” href=”https://example.ru/” /><link itemprop=”image” href=”image”>

<meta itemprop=”headline name” content=”Title of the Article”>

<meta itemprop=”description”

content=”A short description of the article is required, 50 to 150 characters long.”>

<meta itemprop=”author” content=”Author of the article”>

<meta itemprop=”datePublished” datetime=”2010-07-03″ content=”2010-07-03″>

<meta itemprop=”dateModified” datetime=”2018-09-15″ content=”2018-09-15″>

<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>

<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<img itemprop=”image url” src=”images/logo.png” alt=”Image description” title=”Image description” style=”display:none;”/>

<meta itemprop=”name” content=”site name”>

<meta itemprop=”telephone” content=””>

<meta itemprop=”address” content=”Russia”>

</div>

<p>Інтро</p>

<span itemprop=”articleBody ” content</span>

</div>

Let’s analyze it:

• itemprop=”mainEntityOfPage” – The main page of the object, you can specify a canonical link. This property is optional, but Google recommends filling it in.
• itemprop=”image” – A link to the image of the material, we pass it through the link attribute, so users will not see it in the content, but search robots will process it.
• itemprop=”headline name” – The title of the material.
• itemprop=”description” – A brief description of the material, preferably no more than 150 characters.
• itemprop=”author” – The author of the article.
• itemprop=”datePublished” – Date of publication of the material, specify in the format YYYY-MM-DD.
• itemprop=”dateModified” – Date of the material update, specify in the format YYYY-MM-DD.
• itemprop=”publisher” – For this property, you must use the schema.org/Organization object.
• itemprop=”logo” – URL of an image, for example, the site logo. For this property, use the schema.org/ImageObject object.
• itemprop=”url image” – URL of the logo.
• itemprop=”name” – Name of the site/organization.
• itemprop=”telephone” – Phone number can be left blank or filled in if you have one.
• itemprop=”address” – This is the country you specify.
• itemprop=”articleBody” – The body of the article.

Question and Answer Page (QAPage)

A question and answer page is a web page where one specific question is followed by answers. The following types of schema.org markup can be used for such pages: QAPage, Question, and Answer.

If the markup is implemented correctly, rich results can appear in search results to help attract the right audience to your site via Google Search. Below is an example of a result for the query “How do I remove a stuck cable from a USB port?” if the necessary markup is present on the page:

Content requirements:

1. The markup should be used for a question and answer page where there is an option to ask a question or leave an answer. If the question has been answered and there is no possibility to add other answers, you should use the FAQPage markup.
2. Do not use QAPage markup on all pages of a website or forum if not all content meets these requirements. For example, a forum may have many question topics for which the markup is suitable and unrelated pages for which it is not.
3. Do not use QAPage to mark up pages that contain answers to frequently asked questions or multiple questions. QAPage markup is intended for pages that are dedicated to a single question and its answers.
4. The Answer type is intended for answering questions only. Comments on questions or answers should not be marked up with the Answer type.
5. Questions and answers that contain obscene, rude, offensive, discriminatory statements, sexual material, scenes of violence, or calls for dangerous or illegal actions are not suitable for displaying in the form of extended results.

To summarize

Micro-markup is one of the main components of search engine optimization. It was created as a common language for understanding the content of web resources for search engines. When implemented correctly, it speeds up indexing, improves website CTR, and increases the number of conversions from social networks and search engines. It also improves behavioral factors and the overall technical condition of the site.

All work on implementing and customizing markup should be an organic part of the SEO strategy. Deciding which vocabulary or syntax to use should be based on where you want to get more traffic and how you want to distribute your site’s content. You need to customize the data structure taking into account the types of pages on your resource, its structure, and other features, and the analysis of competitors in your market niche will tell you all the information. Pay attention to how they build snippets and data on their websites. You can do this by comparing the source code of the pages in your browser. Remember that mechanically copied solutions may not work.

Oleksandr Romanenko

Team Lead/Senior SEO specialist

Author's page