Search engines are constantly improving the algorithms by which robots rank sites in search results. New factors that affect this process appear every year. Recently, markup has joined these factors. In this article we tell you what the online store owner need to know about markup, so as not to lose to competitors. At the end of the article we give specific solutions for the CS-Cart platform.
What does markup mean, and how do structured snippets look in search results
Data markup is the marking of the page elements with special tags and attributes, which helps search robots more clearly understand the content of Internet resource pages. As a result, the content is correctly displayed in the search results.
For example, a product’s card markup will allow search robots to understand where the price of the product is indicated, where is the description, and where is the image. Then it will be able to correctly analyze the information, determine how relevant the information to the user’s request and display the data when generating snippets.
When a user enters a query into the search bar, the search engine displays a snippet with the page content. If the page uses data markup, then the snippet will be structured. So the user will understand what awaits him when going to the site. This increases the resource attractiveness in search results.
Here’s what the product card snippet with markup looks like:
What else is marked with data markup in the online store:
- a blog,
- a quick search.
This is how the online store main page with the correct markup looks like in the search results:
Why will an online store be unsuccessful without data markup?
There was the Pubcon conference in 2017, where Google speaker Gary Ilsh confirmed that the data markup affects the ranking. In addition to a positive impact on search results, data markup makes the site more customer-oriented. A structured snippet shows part of the page content so that the user can get important information about goods and services without even having to go to the online store. This always catches the user’s eye and makes a resource stand out among competitors.
From a commercial point of view, an attractive snippet contributes to an increase in click-through in search results, and this is one of the behavioral factors that is also taken into account by search engines.
So if there is no data markup on your online store pages, firstly, it will be ranked by search engines worse than other stores. And secondly, the user simply skips your uninformative snippet in the flow of information and clicks on the competitor’s snippet. You will miss out on potential customers, and in the end, profit.
What types of data markup are suitable for an online store?
Please, take into account that we reviewed not only Google but the russian search engine Yandex, too.
Data markup is added using tags in the HTML code of the page. There are several syntax markup schemes that can be used. Each schema has dictionaries that contain a set of attributes for the data.
The dfferent dictionaries are used for the different purposes. There are RDFa, microformats, Open Graph, Schema.org.
RDFa and microformats are losing their popularity, although they are still supported by search engines. The Schema.org standard and Open Graph are the most popular and promising, as they are created and developed by the largest giants: Google and Facebook, respectively. In 2010, the JSON-LD format was developed, which tags content using dictionary objects of related data and integrates perfectly with Schema.org.
And now let’s speak about all the formats in more detail.
In fact, Schema.org is a site that publishes various markup schemes recognized by the largest search engines in the world, including Yandex and Google. Schemas are HTML tags that describe various entities and their properties. Schema.org is the most common markup scheme. Schema.org-based snippets are called “rich snippets”.
You can read more about Schema.org in the Google Guide.
There are more than 100 types of markup schemes in the dictionary for the main online store objects. The list of schemes is constantly updated. It can be viewed on Schema.org. There are also ways to implement markup schemes for different objects.
In CS-Cart, by default, Shema.org markup is implemented only for product cards. The markup of other objects can be done either by installing the special add-on, or manually according to the recommendations of the Schema.org website.
JSON-LD is a way of describing page content using a language of related data. The information described in this way is visible to robots, but hidden from humans. By the way, in 2013 schema.org included JSON-LD in the list of formats recommended. The recommendation says that JSON-LD has a positive effect on the distribution of structured data on the Internet.
Data tagged using JSON-LD is recognized by search engines. This facilitates indexing and increases the visibility of the site in the search thanks to rich snippets. At the same time, JSON-LD is compatible with schema.org, which allows the site owner to use the semantics of this dictionary.
You can read more about JSON-LD in Google Guides.
If schema.org and JSON-LD are compatible, why you have to use a new format? JSON-LD is much easier to use, and you can implement it faster.
A feature of JSON-LD is its implementation not in the page code, but in a separate tag, there is no need to enter the scheme in the content of the page. So even a person who is far from programming can do this.
In practice, using the JSON-LD format improves the website’s positions in search results. Using JSON-LD, you can mark up data for a knowledge panel, display the site search in SERP and mark up events.
Google recommends using JSON-LD for displaying organizations phone numbers in search results and for marking up pages announcing or describing any events: conferences, presentations, etc. With the help of markup, information about the publication’s author and the publisher gets to the knowledge panel.
What does this format additionally give the online store? Entries from your blog may appear in the Google news carousel along with a headline and accompanying thumbnail. When you mention your company’s name in a search query, your contacts are more likely to appear in the Google Search knowledge panel.
Using Schema.org markup with JSON-LD syntax allows you to correctly and quickly mark up the necessary data that is perceived by Google. Yandex does not yet support JSON-LD (the exception is Yandex.Mail). But pages with JSON-LD are validated both by Yandex and Google.
3. Do I need to implement JSON-LD or it’s enough to use Schema.org?
- JSON-LD is advantageous to use if you don’t have any markup at all, and the main traffic goes from Google.
- If the audience is evenly distributed between Yandex and Google, then Schema.org is enough, since Yandex does not yet support JSON-LD.
- You can implement JSON-LD and Schema.org at the same time.
4. Open Graph
Open Graph is a special standard created by Facebook. Then he was picked up also by Vkontakte, Twitter, Google+, LinkedIn, Pinterest and everyone else. Used to display a preview of the entry in the user’s news feed. Most often, this dictionary is used to optimize information portals and blogs. Using the Open Graph meta tags, you yourself determine which elements of your page should be shown when someone shares your page. This forms a beautiful link for social networks. You can specify the desired preview, your own headings and page descriptions, which are attached to the link.
You can read more about Open.Graph in the Google Guides.
By implementing Open.Graph markup, you get:
- simplified repost process. The link snippet will look like a finished post that can be posted on the social network, and not like a link to which you need to add a description and picture;
- additional traffic from social networks. The links look better and generate more clicks.
If your online store is closely integrated with the online community, you can not do without Open Graph.
How can you implement the data markup?
As we already mentioned, Shema.org only for product cards is implemented in CS-Cart by default. There are two ways to mark up the remaining online store objects: manually and automatically.
If you want to learn how to do markup manually, you should start by studying the information presented in the Google Guides, for example here. The article reveals the basic principles of the syntax of this language and explains how to start using it. Markup schemes are available at Schema.org.
If you want to save time and effort when implementing markup, then tools for automating the markup implementation are suitable for you:
- Schema App — a set of paid tools that allow you to use the Schema.org language without learning them.
- Microdata Generator Using Schema.org + JSON-LD — tools that allow you to structure information according to the principles of Schema.org.
- Different plugins and add-ons for your online store platform. You can find them in online stores or order custom development.
For CS-Cart, there are two add-ons that will solve all your problems with data markup:
- JSON-LD markup. This add-on will mark up all the necessary objects of the online store so that the snippets are informative and attractive. This is good for SEO and lead new buyers.
- Open Graph markup. Using this add-on, it will be possible to configure the information that is displayed in social networks and get high clickability posts. So you will attract additional traffic from social networks.
After enabling the add-ons check your code with the Google Structured Data Testing Toolto make sure everything is working correctly. It may take some time for search engines to add structured data to the index. Typically, the results become visible within the first month after the introduction of data markup.