You, too, are already tired of understanding the structure of the Schema.org site and how to use its monstrous list to create micromarking on your own site? Then this detailed and intelligible article will clarify everything for you once and for all, and there will be no more questions. I guarantee!
I myself have approached micro-markup several times, and every time I threw it to hell, because the Schema.org site is absolutely stupidly arranged. Yes, there is an extensive list of entities and types, and a whole bunch of descriptions for it. There is even a partial translation of the site into Russian - ruschema.org. But one hell - nifiga is not clear.
Well, see for yourself: here I want to figure out how to add microdata to my article page. I go to the Schema.org site, go to the Schemas section, follow the link Full list of types, shown on one page and get a huge list of entities (Thing):
So, what is next? Among these six properties, something is clearly missing, namely: the title of the article, the author, the date of writing, etc. There are some vague articleBody , articleSection , pageEnd , etc. Well, what should I do about it? If you click on the property, you will not find anything new:
And so on throughout the list. Absolutely not a friendly interface, sharpened, perhaps, under the labor of programmers, to whom everything is clear from a half-word, and non-Russian.
Good! Let's figure out what is here and what they eat with on this Schema.org. So that all misunderstandings disappear, and search engines pat us on the head for using microdata on our site, because it is kosher.
Let's start with the basics. This is for those who generally hear about micro-markup for the first time. The rest can scroll the article further and read about the practical use of microdata.
Why do we need micro-markup and what does Schema.org have to do with it
Micro-markup was invented by cunning web marketers. Otherwise, this thing is called semantic markup and means that the site pages are marked with special tags so that search bots can better understand what exactly these site pages are about and what exactly they offer.
On the Yandex.Webmaster page, dedicated to micro-markup, a very clear example of a piece of a site page without markup and with markup is given:
Feel the difference, as they say. If you don’t feel it, I’ll explain: without micromarking, a search engine bot cannot determine for itself what exactly is being discussed on the site page. The word "avatar" can have a lot of meanings. To make it clear to the crawler that the article is about a particular movie, we add special tags and declare that they all belong to an entity of type Movie (Movie).
A bunch of neutral span tags have been added to the markup document with various attributes like itemprop="" . There are also two obscure attributes here: itemscope and itemtype, and a link to the Movie section of the same schema.org site has been added. OK! Let's go to this link and see what's there:
Another list of properties (Properties), but among them there are only two of those used in the Yandex example - director and trailer . Where are the rest: name and genre ? Yandex, or what, he invented them?
The fact is that schema.org has a certain hierarchy, and it can be seen just on the page with a general list of all entities (Thing). Here it is time to explain what it is - the essence.
Thing in Schema.org means some specific thing, and the word Thing itself can denote any of the possible things. All other types of things are nested in it. Not everything in the world, of course, but most often used to describe on the Internet: articles, news, events, personalities, books, programs, etc.
Each of the nested things can contain its own "set" of entities of a similar type. For example, an entity named Event (Event) can include events of various types: business events, children's events, festivals, music parties, etc.
It is clear that if entities have a hierarchy, that is, a kind of nesting, then they may well adopt properties (Properties) from their parents. The Festival entity adopts properties from the Event entity, and also adopts the properties of the most important entity in the list - Thing .
Now do you understand where Yandex got the missing name and genre properties for the example of micro-film markup? The genre property is on the CreativeWork parent entity, which has a Movie nested within it; and the name property is on the main Thing entity, which includes the CreativeWork entity. Everything is simple!
Thus, we can use the properties of both a particular entity and its parents. In fact, on the page of any nested entity on the Schema.org site, a list of properties is laid out not only for itself, but also for its parents. Just scroll down the page and you will see them in sequence.
Now it becomes clear how to use the Schema.org site: you select the properties of an entity and describe them in your own words. In addition, many entities have examples of use at the very bottom of the page. They clearly help to understand how all this can be applied.
Why Schema.org?
So why Schema.org and not anyone else? Who are these guys anyway? According to Wikipedia, this is an initiative group of comrades from the largest search engines Google, Yahoo!, Bing and Yandex, who in 2011 decided to add to a special set of semantic metadata, which should improve search results.
As the main format for marking up a web page with metadata, schema.org developers suggest micromarking- tags and attributes for marking up structured information on web pages that appeared in the HTML5 standard.
What is itemscope and itemtype and what are they for?
C itemprop - Property (Properties), I hope you have already figured it out. For those who have not yet understood, this is the smallest detail of the micro-markup, denoting a specific property of an object. For example:
James Cameron
This line simply says that a friend named James Cameron is not a loader from Privoz, but a real Director.
itemtype - means a specific entity that we describe using microdata. For example, Film (Movie).
itemscope - means an Entity in general. This attribute simply tells the search engines that there is some kind of micro-markup entity here and they, the search engines, should pay attention to this.
Usually these two attributes are written one after the other and added both or two to some DIV block on the site. Itemscope comes first, followed by itemtype + a link to the specific entity section in Schema.org:
Entities can be nested one inside another. For example, the larger Article entity can contain other entities like NewsArticle , Report , etc. Often, global entities like Article are added directly to the body tag on the site page:
Other entities are added as they appear on the page. Each particular entity is also prefixed with the itemscope itemtype attributes. Accordingly, there can be several such structures on a site page, and they must be nested - everything is the same as with regular HTML tags.
How to use microdata on a website
You can add micro-markup directly to the HTML code of the page, or you can use third-party plugins for CMS like WordPress, etc.
To bind the itemscope , itemtype , and itemprop attributes, you can use existing HTML tags for blocks, paragraphs of text, links, and lists, or you can add neutral span tags.
If you need to add the url (link) property to the micromarkup, but not depict it as a link, you can use the link tag. Visitors will see it just as text, and the search bot will read it as it should.
Some cunning webmasters use the meta tag in the body of the page. Meta tag, Carl!!! I don't recommend doing this. Firstly, this is the head tag of the page and it belongs there. And secondly, the search engines do not favor it, so watch out.
In addition, sometimes the same cunning webmasters advise hiding part of the text marked with micromarking from visitors using CSS. I highly recommend not doing this! This is typical cloaking, for which search engines can easily ban you.
How detailed should microdata be done on the site?
Don't feed some webmasters with bread - just let them drive something extra on the site. The same applies to micromarking. You should not be like graphomaniacs and sculpt micro-markup attributes for each squiggle on the site. Everything should be in moderation. Otherwise, a good deed will turn into mania, and useful content itself will be lost behind a forest of micro-markup attributes.
Search engines are commendable about micro-markup, but they also closely monitor page loading speed. If the amount of your microdata is 5 to 10 times the amount of useful content on the page, then the loading speed can be significantly reduced. After all, each itemscope itemtype construct sends to the schema.org site and drags the necessary instructions from there.
Therefore, have fun with micromarking, as you like, but know when to stop!
How to check the correctness of microdata
You can get into the code such that the devil himself will break his leg. Therefore, there are convenient microdata validators from Google and Yandex. Moreover, each of them relates to the correctness of microdata in its own way, keep this in mind.
If you messed something up, then the validator will issue the appropriate message(s). Either an Error, or a Warning, or both. Read them, understand and correct them immediately. Errors should be corrected necessarily, warnings can be scored, but it’s better to fix it too, away from sin.
How to make microdata in a WordPress template
For WordPress, there are several ready-made plugins for adding microdata. I am not a supporter of extra plugins, especially since they often work on their own, which is not always obvious and understandable. Therefore, I am in favor of adding everything to the template with my playful pens.
Adding microdata to a WordPress template is not easy, but very simple! Take, for example, a page with individual posts, which is usually rendered by the single.php template. All you need is to inject the following pieces of code in place:
itemscope itemtype=http://schema.org/Article - add to a DIV tag with a post or entry attribute;
itemprop="name" – add to h1 or h2 tag;
itemprop="url" - add to the h1 or h2 tag along with the link tag. Example:
itemprop="author" - add to a piece of code that displays the name of the author. Example:
itemprop="datePublished" – publication date in "Y-m-d" format. Example:
itemprop="articleBody" – insert into the article text output block;
itemprop="articleSection" – rubric output;
itemprop="image" – link to the image for the post;
etc.
More sensibly the whole process is painted I recommend!
I hope you can now easily understand Schema.org microdata.
On the Internet, of course, there is not only this type of microdata. In fact, there are several of them, for different tasks. Next time we'll talk about Open Graph - the second most popular version of micro-markup from the Facebook social network. It is designed to adequately display the pages of the site in social networks.
Stay in touch!
We have released a new book, "Social Media Content Marketing: How to get into the head of subscribers and make them fall in love with your brand."
In the opening tag add the attribute itemscope. This means that this tag contains some entity. Let's denote the entity type with the itemtype attribute, immediately after itemscope. Type names are in the form of a URL. The designation of microdata types can be found on the official Schema.org website. We have a name like http://schema.org/Article.
After declaring an entity, let's denote its properties. The syntax of entity properties can be found on the official Schema.org website. An attribute is used to declare properties. itemprop. Similarly, we find on the page a tag containing the title of our article. Now let's add an attribute with the name of the property. We have a property name - the title name.
CMS in terms of SEO
All entity properties are declared similarly. We list below:
December 3, 2014 CMS
After we have defined the entity and its properties, we need to make the appropriate changes in the page code, that is, we add additional attributes to the tags. As a result, we get the semantic markup of the blog page. It's easy, right?
If you have any questions or doubts, always refer to the official website. It contains all the necessary information on entities and their properties, as well as examples of Schema.org semantic markup used in different situations.
As a matter of fact, HTML is called "hypertext markup language". It can be called the language of "macro markup" - the markup of the content of all the contents of a web page.
Search engines, Yandex and Google, also have their own markup requirements. The requirement can be formulated as follows: the organization of content that facilitates the analysis of the page. The stricter the content is organized, the more accurate and faster the search robot does its work, the more successful the indexing and promotion of the site.
All requirements of this kind are collected in the microdata of the site.
For the user, the result of the successful use of microdata is a more complete snippet (site preview) in the search results. Well-marked sites have a higher click-through rate (CTR) in search results. This means that you will receive more organic traffic and your positions will grow due to this.
To implement the markup, special attributes are used within the HTML code. All the necessary information is collected in one html file without the involvement of external resources. Here is an example of micro-markup offered by Google (here the theme of the site is “Pictures”):
Yandex uses a slightly different micro-markup system from Google:
Compare the same page code, but without the markup:
5 popular markup formats:
All formats are in constant development, and so far unique markup does not exist for all areas.
The main purpose of microdata is to transfer data about the content of the site. Based on this data, search engines create snippets in the search results, and also index the site.
How to implement microdata?
The mechanism for applying micro-markup on the example of the Schema.org format. Three steps:
- The description is enclosed in a container - it is given a name and a type:
…
- Inside the container, a description of a particular property occurs.
- Outside the container, at specific application points, information is marked up with reference to a specific schema property:
Alexander Pushkin, 114
Interestingly, there is no unified algorithm for processing the received data, it all depends on the specific topic of the site.
Since the amount of information on each topic is quite wide, it becomes necessary to check it for compliance with standards. Yandex and Google have special validators for checking microdata on the site.
Checking microdata in Yandex Webmaster
We have all the necessary information for the analysis:
Now, in the multi-page input field under the two-color heading "Document URL or insert a fragment of HTML code" we place the address of the page to be checked.
There is only one problem here - the page must contain this very micro-markup. If there is no micro-markup, then a message is simply displayed under the heading “Check result” that no markup was found on the page.
The check is started by the "Check" button or the hot key combination Ctrl + Enter.
If markup is used on the site, then the result of the check will be reflected in the multi-page field below:
If you just entered the HTML code of the page, then the result of the work will be represented by the address of the local host:
If you have any questions about the Yandex markup validation service, you can refer to the help pages that the service hosts at: https://yandex.ru/support/webmaster/yandex-indexing/validator.xml
The Yandex validator, in addition to fully checking the five listed microdata formats, will also check the format of specially marked data and special snippets.
The validator provides six results of its work regarding the detected parsing errors:
- The page could not be loaded for analysis;
- No micromarkup detected - it can happen for two reasons - either there really is no markup, or it is incorrectly formatted;
- The absence of a required field is already an element of verification, for example, when describing a picture, its address is not indicated;
- It is not possible to determine what some fields belong to - they usually go beyond their markup;
- The conditions for organizing snippets are not met;
- The "content" property of the meta tag contains a link, which is not allowed.
In addition, three warnings may appear in the results window:
- Incorrect field value - for example, incorrect date format;
- The data type is set incorrectly - please note that along with the standard types defined by the W3C, Yandex also defines some of its own types;
- Lack of markup that should be used in conjunction with the current one.
As a result of the validation successfully carried out by Yandex, the page will be presented as a structured snippet in the Yandex search results. This usually happens after 10-14 days.
Checking microdata in Google
Google microdata is validated in a similar way: https://developers.google.com/structured-data/testing-tool/
The microdata layout schema that Google focuses on is called Schema.org. In many ways, the idea of the “American” work is no different from the work of the Russian version of validation.
As you can see, here it is also possible to enter the address of the page to be checked or directly the html code.
The test is started by clicking the "Run Test" button. Despite the fact that both validators work according to the same Schema.org scheme, the results of their work are somewhat different. Here is the output from Google:
Practice shows that the Google validator imposes less stringent markup requirements and finds fewer errors. Moreover, Google does not inform the site owner after what period of time the markup will take effect and be visible in search results.
It is necessary, if possible, to use both validators and draw conclusions based on double checking.
26.05.2017 Reading time: 30 minutes
One of the deepest desires of site owners and SEOs is to make their site stand out in the search results so that it stands out from the competition and users visit it more often. The most effective way to achieve this goal is to work with structured data. In this article, we will try to figure out what structured data is and how you can embed it on your site.
How did it all start?
The unified scheme of formats for semantic markup of sites, which we all know and use now, appeared in 2011 with the support of such giants as Google, Yahoo! and "Microsoft" (later a fourth player joined - "Yandex"). Prior to this, data markup existed in different formats and there was no single structure. For example, Yahoo! there was a service called "SearchMonkey", which already in 2008 allowed you to mark up data on the page and form unique snippets in the search results of your search engine.
Corporations had a global goal - to develop a common structured data format that would improve the display of sites in search engines and improve the quality of search. The initiators achieved the set goals, as a result of which the schema.org dictionary was born, which combines a huge number of rules for microdata markup on the site.
What is structured data?
Structured data is information that is presented in a single and correct form in compliance with a certain set of rules.
We will not describe the principles of working with each dictionary, we will analyze in more detail only three of them: Json-ld, Opne Graph and schema.org.
Let's start with the popular schema.org microdata dictionary. The result of the collaboration between Google, Yahoo!, Microsoft and Yandex is actively developed and regularly updated to this day. At the time of writing the entry, the dictionary contains descriptions for 589 types of documents, 860 object properties, and 114 specific values. A complete list of all properties is listed in a branched hierarchy on this page.
The main top entity type in the schema.org dictionary is Thing , which in turn is divided into several other subtypes. Some of them:
- CreativeWork - a general set of rules for describing creative activity: articles, books, films, photographs, software, etc.;
- Event - a set of rules for events that have occurred or will occur in a certain period of time: meetings, concerts, exhibitions, etc.;
- Intangible - a service class that includes several intangible things, such as sizes, ratings, descriptions of job vacancies, services, etc.;
- Organization - a set of rules for marking organizations, a full list of different types of business is listed on the localBusiness page. You can also see this list in Yandex help https://yandex.ru/support/webmaster/supported-schemas/address-organization.html ;
- Person - an entity is used to describe living, deceased, fictional persons or characters;
- Place - a set of rules for something that has a fixed physical location (building, park, monument, etc.);
- Product is anything that is created to sell. For example, a pair of shoes, a ticket, or a car.
Each subtype includes a large number of tags for description, so almost any type of business will find the necessary type of markup.
Most of the tags in the dictionary have applications in the form of a sample piece of HTML code or JSON-LD script. Below we will look at examples of page layouts with an article (article), a product (product) and an organization (organization).
Article microdata template using schema.org
Most often, microdata such as URL, datePublished, dateModified, headline, image, author, publisher, etc. are marked up. Let's look at a specific example:
H1 HEADING
"https://schema.org/ImageObject">Most of the marked-up articles adhere to a similar scheme. It is worth noting that in this example, some of the tags are indicated in the section
(meta description and link to the author in g+), and the rest is written in the body of the HTML document. Some tags are optional, for example, an article will feel great even without markup with articleBody or publisher tags, but then it is unlikely to pass the validity check in Yandex or Google tools.Image 3. An example of a page in the SERP with micro-markup of an article in Google. The publication date is displayed next to the article.
Image 4. An example of a page in the search results for the same query as in Image 3, only in Yandex. The date appears to the right, with the date it was published or created at the top and the date it was modified below.
Product card microdata template using schema.org
The next type of microdata that we will look at will be product or, in other words, the semantic markup of a product card.
CONTENT H1
Pay special attention to the price format, since most of the errors in the micro-markup of product cards lie there. We can write any value in text in any format, and directly in the price tag itself, we indicate the price strictly in monetary format, otherwise search engines will ignore this line.
Image 5. An example from the Google search results showing the price in the format "FROM" and "TO".
Organization microdata template with schema.org
The last template we'll look at is organization markup. Typically, this markup is used to structure information on a contact page.
schema.org has a very large vocabulary. Because of this, while working with it, difficulties may arise, but not all tags in the markup are required and most can be omitted. In the examples given, I have listed the most basic tags that can be used while working with schema.org markup, but there can be many more.
Google has a special tool to mark up pages according to the schema.org dictionary. It makes creating page layout much easier.
Image 6. Example from Yandex. Additional information about the organization is displayed under the page description and can be embedded either manually, using markup, or using the Yandex.Directory service.
Pros and cons of schema.org microdata
- Large dictionary that is constantly updated;
- Supported by all popular search engines;
- The code is not hidden by scripts and is entirely within the content of the page;
- Improves the display of snippets in search results;
- You can find markup for almost every site;
- There are plugins for automating the generation of microdata;
- Actively developed and supplemented.
- A large number of micro-markup schemes can scare off an unprepared user;
- Basic knowledge of layout and page code changes are required;
- Complicates the HTML code, which slows down the development of the site;
- All official help documentation in English;
- Not all properties have usage examples on the official website.
Schema.org Markup Tools
When working with schema.org microdata, services such as:
- Structured data validation tool from Google;
- Assistant according to micro-page markup according to the schema.org dictionary from Google. As a result, we get the HTML code of the page with the micro-markup already embedded;
- Checking semantic markup from Yandex;
- Official markup site;
- Unofficial translation of the schema.org website into Russian;
- “All In One Schema.org Rich Snippets”, “Wprichsnippets.com”, “Schema App Structured Data” - plugins for WordPress that generate schema.org semantic markup automatically;
- Notepad++ - or any other text editor.
This protocol was developed by Facebook to improve the display of link snippets from external sites in social networks. This is probably one of the simplest and smallest microdata dictionaries. You can start markup implementation with four main properties:
- og:title - page title.
- og:type - object type, for example, "music.album" (album). Other properties are supported depending on the type. All possible characteristics of the type tag are listed on the official website.
- og:image - URL of the image.
- og:url - the canonical URL of the object.
All "Open Graph" markup tags are written in the container
.In addition to the main properties, you can also specify additional ones that will improve the display of links in social networks:
- og:audio - URL to an audio file if music is playing when the page is opened.
- og:determiner is the word that appears before the name of this object in a sentence. enum type (a, an, the, "", auto). If auto is selected, the data consumer must choose between "a" or "an". The default is " " (blank). The tag is most relevant for the English segment due to the use of various articles like "a", "the", "an", etc.
- og:description - description of the page, allowed number of characters from 160 to 295 characters.
- og:locale - language and country. The display format is language_TERRITORY, the default is en_US. For the Russian-speaking segment, the ru_RU tag is prescribed.
- og:locale:alternate - alternate language or country.
- og:site_name - site name.
- og:video is the URL of the video.
Open Graph Page Layout Template
Below is an example of an HTML code with all possible properties; in practice, some of these tags are not specified and the standard four properties are enough:
Pros and cons of Open Graph microdata
The last type of markup and data structuring that we will look at is JSON-LD. This terrible name stands for "JavaScript Object Notation Linked Data". The "World Wide Web Consortium" or, in other words, "W3C" is responsible for developing the format. This format performs the same function as schema.org, but in a slightly different way: it structures the data using JavaScript, which makes work several times easier.
One of the advantages of this format is that the schema.org dictionary is used to describe the data. Thus, with the help of JSON-LD scripts, we can describe any kind of entities and improve the display of our site in search results, spending the minimum amount of time on this. Moreover, this can be done without introducing HTML tags into the body of the page, you just need to specify.
For clarity, let's compare schema.org and JSON-LD markup:
Sneakers
Article markup template with JSON-LD
I took an example of markup using JSON-LD based on the micro-markup of an article in schema.org from the same material above. All the same properties are used.
