Semantic markup is one of the most powerful - but, oddly enough, rarely used - tools search engine optimization... In essence, it is a way to make it easier for search engines to extract and process data for a more informative presentation in search results. This increases the click-through potential of your links in the search results.
When shoppers search for something on Google, Yandex, or Bing, they are likely to get a long list of advertisements and organic search results. If your page is well ranked for finding a specific product, a link to it will appear in the results. But this is only part of the task, because someone else has to click on the link.
Semantic markup makes search results more informative
One way to stand out in the search results list is to add more relevant information to it, such as product ratings, pricing, and reviews and availability.
In the picture below, you can see the Google search result for June 20, 2016. This is the so-called snippet - short description site pages in the search results. As you can see, the PHILIPS ProCare curling iron on Rozetka.com.ua was rated by four buyers, giving them five stars. The price of the product is 999 hryvnia, and it is in stock.
This google search result yields structured data.
Google understands and displays this Additional information thanks to structured data markup on this specific page goods. This extra work, which was done in Rozetka.com.ua, will not directly affect the ranking results. But if a page ends up in search results for a user like this, it has a much higher chance of getting a click. Therefore, in the end, semantic markup improves the position of the page in the SERP.
Semantic Markup and Microdata Vocabulary
So there is a certain standard semantic markup Data on the Schema.org network, created jointly by Google, Bing and Yahoo in 2011. It is a consistent semantic markup scheme that allows search engines to figure out what to do with information on your site.
The Schema.org vocabulary is used in conjunction with microdata, a web standard for semantic markup for HTML pages that allows you to describe the meaning of information in HTML elements using special machine-readable attributes. In other words, you add special tags to the HTML code of their pages - and it becomes clear to search engines what is on them in question, and what to do with it.
In order for the search engine to recognize your additional product data, mark up the corresponding pages according to the Product, Offer and AggregateRating schemes.
Applying a Schema.org microdata dictionary to a product page in an online store starts with external element framing product information. In this example, we are using a div.
…
Using the itemscope attribute, we add additional information about the product.
Some cool product
It's just a great product. You will be very pleased.
123456789
Semantic Markup and JSON-LD
Recently, Google began to give more preference JSON for Linking Data or JSON-LD, not microdata. There are indeed several advantages to the JSON-LD format. For example, you don't need to include HTML in the body of the page to use it. It is enough to insert the script into. First, we set the type:
The key concept for this type of markup is context (@context). With it, you can, for example, indicate that the markup uses schema.org semantics:
{
"@Context": "http://schema.org/",
"@Type": "Product",
"Name": "Some cool product",
"Image": "some-cool-product.png",
"Description": "This is just a great product. You will be very happy. ",
"Sku": "123456789",
"AggregateRating" :(
"@Type": "AggregateRating",
"RatingValue": "4",
"ReviewCount": "1,987"
},
"Offers": (
"@Type": "Offer",
"PriceCurrency": "UAH",
"Price": "999",
"Availability": "http://schema.org/Available"
}
}
Semantic markup - be it microdata or JSON-LD - will allow you to better represent your products in the results search results, thereby significantly increasing their click-through rate and, accordingly, their sales.
In today's article it will be about a rather hackneyed topic discussed on many forums, blogs and other sites for a long time. As our practice shows, more than 50% of site owners do not understand what semantic data markup is and what it is for. They use it either with errors, or just to be. You can read about the types of semantic markup.
What is Semantic Markup?
I could not find a suitable definition on the Internet, so I decided to make it up from the 4 most suitable definitions.
Semantic markup is a way to formalize values using different standards(dictionaries) about a variety of entities (events, organizations, people, products, and so on) using syntax (a way of using a dictionary) on resource web pages.
It turned out a little tricky ... However, from this definition we understand that semantic markup is a kind of rules that obey certain standards or vocabularies. Which, in turn, are designed to help search engines (and not only) understand the content of the pages of sites.
Let's list the most famous standards (dictionaries) and dwell in more detail on only two of them, but more on that later.
Types of data markup
Data Vocabulary- the data markup standard that developed Google until June 2011.
Development of the standard has been suspended due to the creation of the Schema.org dictionary. Search google robot can use the data obtained using this markup, but the recommendations are reduced to changing the standard on Schema.org.
Dublin Core, or Dublin Core is a standard developed in 1995. The semantics of the Dublin Core was created by an international, interdisciplinary group of librarians and museum professionals, computer science... It is a set of meta tags, 15 basic and 3 additional properties.
Signs of using data from this standard in search engines ah not found.
FOAF, or Friend of a Friend- "each other" - a standard created by Libby Miller and Dan Brickley in 2000. Used mainly for home pages and social networks. Solves the problem of building connections between people and uniting them.
Microformats, or microformats- a standard created in 2005 by the community of interested enthusiasts from WC3.
This standard was very popular before the advent of Schema.org and is still used on many sites. At the time of this writing, Yandex supports the following Microformats: hCard - a format for marking up contacts (addresses, phone numbers, etc.); hRecipe - description format culinary recipes; hReview - review markup format.
It seems that we have decided on the standard, and the syntax too.
First, let's decide what the main purpose of the markup is. If you read the article that with the markup you are guaranteed a place in the top 10, then this is not the case. The goal of micro-markup is to improve the understanding of the site in the eyes of the robot, send information to the knowledge base of search engines, increase the CTR of your snippet (which can indirectly increase your traffic and positions). But we must understand that these are all indirect indicators. Websites with and without micro-markup are ranked the same.
Now let's take a look at what data on the site should be marked up and what is supported by search engines on this moment(since there are more and more supported entities every day).
Let's take a closer look at the three most common examples:
Schema.org product card markup
Product cards - we mark it by the Product entity. Implementation of this type will help us get the following snippet in Yandex:
Not to be confused with the product snippet in Yandex search results obtained by using the .yml file from Yandex.Market or the “Products and Prices” service of the Yandex webmaster.
How can I get this snippet?
Who has similar problem on culinary sites, you may have the same reason. Every time I am convinced that the help is our everything.)) I would also like to note the quality of Yandex support, to express my gratitude for the prompt answers - the correspondence took place almost in real time.
Now let's move on to implementing the markup for culinary sites.
40 minutes
Recipe name
Servings 6
6 pcs.
Eggs br>
400gr.
Granulated sugar
…………………… Etc. Ingredients ……………………………
100gr.
Cocoa
The Turtle cake is not difficult to prepare, besides, it will undoubtedly become a favorite cake for your children, since it looks like a cute turtle.
Victory
.....
On Google, our beautiful snippet:
We will post a screenshot of the snippet in Yandex when the information is updated (approximately in two weeks).
UPD from 06/05/2017: As promised, we add a screen from Yandex:
Useful resources about schema.org
- Micro-markup validators:
- Validator from Yandex https://webmaster.yandex.ru/tools/microtest/
- Validator from Google https://search.google.com/structured-data/testing-tool/
- Supported Yandex standards and formats: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
- The "" tool will help you speed up the appearance of tagged information on Google.
- See how it looks specific page in the search results, the site operator will help you: the URL of the page being checked. Works at both Google and Yandex.
- Also from Google there is an excellent tool "Structured Data Markup Wizard" - https://www.google.com/webmasters/markup-helper/?hl=ru
- For the Open Graph standard from Facebook:
One of the most acute and urgent topics among web-programmers and owners of Internet resources today is seo-optimization. In order for the site to get to the first pages search queries"Yandex" or Google, it is necessary to carry out colossal work on its creation and promotion.
What is semantic markup for?
You can adapt the resource for an ordinary user using the current and interesting content... But for the user to be able to find this resource, it is necessary to optimize the site for the search engine. How to do it?
Unlike a person, he cannot recognize what the website is about without certain prompts. He analyzes content, identifies certain patterns, identifies keywords, but without human intelligence, he cannot understand the meaning of what is written. To make it easier for him, programmers have invented semantic or micro-markup for Yandex and Google. Just as hypertext tells the machine what to place and where, semantic markup explains who or what a resource is about. Thanks to this understanding, the site ranks better among competitors and has a better chance of getting to the first lines of search queries.
An example of semantic markup
The micro-markup "Yandex" and Google is especially effective in influencing the promotion of commercial sites offering goods and services. The following example will explain it most clearly.
It is necessary to create a micro-markup for a business card website for the provision of hairdressing services for dogs. It will look like this:
Itemtype - BarberShop,
Name - a hairdresser for dogs.
The first line contains the area of operation of the site, and the second - specific object... A page with such a script will be higher on the search ladder than a similar one without it, since the search engine will consider it more relevant to the concept of "barber for dogs", and not just "barbershop".
The micro-markup created with the help of Yandex.Webmaster allows you to prescribe many parameters - places of sale, opening hours, contacts, brief or services, and much more.
Where is semantic markup used?
More and more resources are striving to provide the user with high-quality processed material. The closer in meaning it will be to the desired one, the more efficiency it will bring to the site. Therefore, today micro-markup is actively used:
- Commercial sites for promoting goods and services.
- Online reference books and encyclopedias to form multilevel links between articles.
- Social media for detailing profiles, events and other content.
Schrema.org uniform standard
The creation of semantic markup resulted in what was required uniform standard for all search engines. It is the micro-markup "Yandex" and Google - schrema.org. It simplifies the process of creating a short description (snippet) that we see when the page is displayed in search results. This information can include important information about the site, which will help the user decide whether or not to go to this page.
By the way, the number of elements and dictionaries in schrema is huge, so it can be used for sites of almost any subject.
Open Graph Standard
Besides search Google systems and Yandex, micro-markup of goods, services, multimedia and information content is also required by social networks. For them, Facebook came up with a single Open standard Graph. This markup allows you to control how the site will be presented in news feed social network. And today to create beautiful links it can be used not only on Facebook, but also on Google+, VKontakte, Twitter. For a beautiful display of the latter, by the way, Twitter Cards is also used.
Which micro-markup to choose?
In fact, neither Yandex nor Google gives more preference to any standard when ranking a site. The classic use case is schrema.org, which is the most complete, modern, and actively evolving.
Micro-markup dictionaries
We have defined what Yandex micro-markup is. How to make it appear in it necessary information? For this, such a concept as a micro-markup dictionary is used. This is a set of elements, tags and syntax, with the help of which attention is focused on something. search engine.
Each standard has its own vocabularies and elements. There are several keywords arey with its huge hierarchy and display types. For example, the Thing dictionary allows you to represent information in 3 main properties:
- alternateName - for the alias (alias) of the object;
- description - for text description object;
- image - for an image or a link to it.
Or the Good Relations Dictionary, which will be especially useful for online marketplaces. It allows you to post data on prices, locations of purchase, availability, and more.
Dictionary FOAF - micro-markup for Yandex and Google contacts. This is a questionnaire that you have filled out millions of times on various sites - your name, coordinates, page in in social networks, mail, date of birth, etc. This knowledge will persuade the user to follow the link, offering him something that may interest him. Thus, the website traffic can be increased.
For detailed description audio and video information - artist, album name, duration - the VideoObject micro-markup is used.
There is also markup for mail messages, allowing the user, without going to another page, agree to a meeting or leave a comment under the article, for example.
What is a validator
Any promotion on the Internet requires a thorough and in-depth analysis of its effectiveness. You can check the Yandex micro-markup using the validator - software that recognizes metadata on web pages. Documents of any format can be checked for correctness - HTML, XHTML, RSS, XML, in any languages.
The Yandex micro-markup is checked by any validator that supports the Schema.org, HTML, Open Graph, RDF microdata formats.
How to check Google's micro-markup
Find out how much your site is in google search can be done in several ways. For experienced user who is fluent hidden settings webmasters "Google", the Rich Snippet Tool, available only from the link, will do.
Another way is to install Seo plugin by Yoast. It is easy to use and will be available after installation in top panel webmaster.
The third way - on the Google Developers site in the toolbar, select "Other Resources", click on the "Structured Data Validation Tool" and specify html page you want to check. When the robot calculates the given script, you will receive a detailed report with errors, if any, and explanations to them.
How to check the Yandex markup
With this search engine, everything is somewhat simpler. The Yandex micro-markup validator is located in the webmasters' tools, in the “My Sites” tab. Here you need to click the "Check markup" button and enter the site URL, and the validator will start calculating errors. In a few minutes, you will receive one of three response options:
- Microdata not found.
- There are mistakes.
- Micro-markup fully complies with the standard.
In what cases does information about incorrect markup appear?
Yandex.Webmaster, a micro-markup validator, displays an error message in two situations:
- When it doesn't recognize the markup.
- When the micro-markup doesn't meet the standard.
In any case, the program will display the details of the error, by which you can judge which required fields were omitted in the markup or which attribute was missing.
It may also give a message - "the page could not be loaded." It indicates a server error or a non-existent page.
If the Yandex micro-markup is executed with unknown error or you do not know how to fix it, you can always contact Yandex.Webmaster for help.
After completion of validation, new markup will appear within 2 weeks.
How does micro-markup affect the ranking of a site?
You marked your resource according to all the rules, and the Yandex micro-markup validator showed that everything was done without errors. How many points will your site climb up the search ladder?
Semantic markup only indirectly affects relevance, and you cannot say the exact number of positions to which it will raise the site. However, micro-markup is one of key factors influencing the attraction of the user's attention. An interesting and attractive snippet will lead more visitors, and the position of the site will grow. The rest will depend on the content and relevance of the resource.
Benefits of micro-markup
In addition to the visibility of the resource, micro-markup significantly increases the weight and quality of the site among competitors. Worth highlighting following benefits markup:
- It increases the credibility of search engines, search robot it's easier to highlight the main elements of the page, which means it becomes easier for them to index us. If we describe this process in a very simplified way, then we can say that the search engine is pleased that we open the heart of the site, our internal secrets to him, and his trust in us increases.
- In the eyes of the consumer, sites with snippets look not only more noticeable, but also of higher quality. Accordingly, such resources are more often clicked, which means that the CTR in the search results or the click-through rate increases.
- The owner has unique opportunity show information that will be noticed even if the user did not go to the site.
- The snippet information can always be changed, and this will not affect the position of the resource in the list.
But, of course, when seo-promotion, you should not dwell only on the development of micro-markup. It is imperative to have a useful and unique content, but not only. There are many more factors affecting the rise of a site in the ranking of the search engines "Yandex" and Google.
Other ways to promote your site
Internal promotion, which includes the micro-markup "Yandex" and Google, has several directions:
- the use of keywords in the domain and site headers;
- the presence of keywords on the page itself, their even distribution in the text, location in subheadings, tags;
- correct error-free HTML-markup (checked using Yandex Webmaster tools);
- the presence of megatags (keywords, description, etc.), indicating the essence of the page to the search engine;
- linking - that is, links to other pages of the site;
- simple site structure that allows you to move to the main page in a click;
- memorable and clear design;
- work with social networks, the ability to recommend the information you like to others;
- sitemap availability;
- unique, interesting and regularly updated content, useful and relevant for the reader;
- optimized CMS for fast and error-free page loading.
In addition to internal promotion, work should be carried out with external factors... A web programmer should regularly monitor whether links to a site are displayed on other resources, how significant and authoritative this link mass is (this process is determined using thematic and weighted ones. advertising banners resource.
According to the latest research, one of the most effective ways promotion is the discussion or mention of the site on social networks. The search engine sees the active movement of this information and perceives it as relevant and in demand, thus increasing the rating of the resource.
For online stores, it is effective to use comments and customer reviews, both on the site itself and on thematic forums, portals with reviews, etc.
Instead of a conclusion
Online promotion is a complex multifaceted process that requires intensive work on various external and internal factors. This is not to say that any of the above methods is absolutely correct, and it is he who will bring your site to the top. Find yourself on top lines search queries is possible only with complex work on all aspects seo promotion, in particular, a huge role should be given to micro-markup.
It is very important to convey to the search engine that you are trying in every way to simplify its selection and that you are doing this not only for the sake of high rating, but also for the convenience of the user, more precisely, in the first place, for a person to find this information on the network.
Yandex and Google are directly interested in the user receiving necessary information, which means that the more loyal your resource is, the greater its chances of taking a place in the top.
It doesn't matter what markup you use - OpenGraph, schrema.org or some other, the main thing is that it is executed without errors and highlights key points resource pages. Check it regularly with a validator, carry out deep Scan every aspect of your business, and then great results await you!
The array contains strings - the elements of the list. The HTML page itself contains a tag- , in order to add items to the list, you must:
- create item programmatically< li>;
- add created HTML element- content code;
- add an item to the list.
Programmatically, it will look like this:
var list = document.getElementById ("list"); for (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }
Thus, when the function is called, the contents of the list with id = "list" will be formed.
It is a little more difficult to form a group of links, because in addition to the link text, the element must contain the address of the transition. To do this, we need an array of the following form:
var links =; links = (name: "first", href: "document1.html"); links = (name: "second", href: "document2.html"); links = (name: "third", href: "document3.html"); links = (name: "fourth", href: "document4.html");
The HTML page defines a container
