What is semantics in HTML
The word "semantics" came to HTML from ordinary linguistic (linguistic) disciplines. There, the concept of "semantics" refers to sections that study the meaning and purpose of human language units. Unlike real human languages, language units do not need to be learned in HTML. In HTML, language units are called "tags" and their purpose is already spelled out in the HTML specification - a single document for all web developers. At the moment, there are several variations on the theme of the HTML specification (depending on the version of the language), but that's not the point. Now, us and this article - something else is important. This is the presence of a clear and intelligible explanation for each language unit - the HTML tag, in the corresponding HTML specification. Thus, if in real human language linguistics, semantics is the study of the purpose of incomprehensible words and concepts, then in HTML, on the contrary, semantics is the correct application and use of ready-made and explained tags.
Semantic layout of a web document
The semantic layout of a web page or the semantic code of an HTML document is a layout with the correct use of HTML tags in accordance with their purpose (semantics). In addition, semantic layout assumes a logical and consistent hierarchy for building the entire web page, in accordance with the laws of the HTML document.
What is the difference between semantic layout and regular layout
The semantic layout of a web document is opposed to the usual one, in which the writing of HTML code is determined only by the appearance of the web page. With semantic layout, a number of page elements have their own tags that directly display their purpose. This is the "semantics" in HTML. So, for example, the structure of a simple web page with a normal layout might look like this:
Then, as with semantic layout, the structure of the same web page will look like:
As you can see from the example, the corresponding tags are used to designate and define the corresponding standard elements of the web page. Other than that, the code is much simpler. At the same time, the appearance of such a page for the human eye will remain absolutely unchanged. A reasonable question arises - why then do we need semantic layout and markup of a web page if it is not visible to people?
Why semantic layout is needed
The semantic layout and markup of a web page is visible to the browser and robots. Semantic layout and markup allows you to more accurately determine the significance of individual elements of a web page and the entire text as a whole. Therefore, first of all, semantic layout is needed to improve the robotic functionality of the site and, as a result, its better search indexing. Isn't that what we all dream about?
Semantic layout in HTML5
The complete furor and revolution of the concept of web semantics occurred with the advent of HTML5.
In HTML4, things were pretty simple. To design web pages written in accordance with semantics, it was enough to use external cascading style sheets (CSS) and a couple of simple innovations, such as replacing tags And on the And . HTML5 is not an example of "more semantic" and this can be seen from the above example.
New popular HTML5 semantic tags
First of all,- a simple and understandable doctype for everyone.
HTML5 and XHTML compatibility issues
Fundamentally, there are no problems in HTML5 and XHTML compatibility. All newer browsers support and execute HTML5 tags perfectly. The only disappointment awaits lovers of valid code. Because, most sites are not laid out in HTML, but in XHTML. And now, it turns out a strange situation - the doctype is from XHTML, and the tags are from HTML5. The validator "hangs up and writes in red". At the moment, everyone turned a blind eye to such a “inconsistency”. So what to do? After all, XHTML has always been just a derivative of HTML.
So the main web language is still HTML5. In the near future, compatibility issues between HTML5 and XHTML are likely to be resolved, either by simply ignoring the issue in favor of HTML5, or by simply adding HTML5 tags to the XHTML specification. In any case, it will be a simple solution, without a fundamental restructuring of the state of affairs. It's too hard-won, this HTML5, to start messing with XHTML5 in earnest now.
Smooth template transition from XHTML to HTML5
According to experts, HTML5 is not one big thing, it's a set of different features. Therefore, you can start moving from XHTML to HTML5 gradually, piece by piece adding the necessary code to your template. The XHTML validator will swear and everything will soon be formed. After all, everyone else - "on the drum", HTML5 tags work everywhere and everything. For starters, you can change the overall structure of your template by simply replacing the CSS classes with semantic tags from the “What is the difference between semantic layout and regular layout” example.
HTML5 | Semantic site markup
(The main thing is to start)
Again, as well-known experts say, “upgrading” to HTML5 can be done by simply changing the doctype. Elementin HTML5 has an extremely simple form:. After such an “update”, absolutely nothing will happen, because all the tags defined in HTML4 are also supported in HTML5. As for the transition from XHTML to HTML5, then I did not dare to change so drastically on my site, I decided only to gradually replace some of the tags and change the structure of the page.
One of the hottest and most relevant topics among web programmers and owners of Internet resources today is seo-optimization. In order for the site to get on the first pages of Yandex or Google search queries, it is necessary to carry out tremendous work on its creation and promotion.
What is semantic markup for?
You can adapt the resource for an ordinary user with the help of relevant and interesting content. But in order for the user to be able to find this resource, it is necessary to optimize the site for a search engine. How to do it?
Unlike a person, he cannot recognize what is being discussed on the site without certain prompts. He analyzes the content, reveals certain patterns, defines keywords, but, having no human intelligence, he cannot understand the meaning of what is written. To simplify his task, the programmers came up with semantic or micro-markup for Yandex and Google. Just as hypertext tells the machine what to place where, semantic markup explains who or what the resource is about. Thanks to this understanding, the site is better ranked among competitors and has a greater chance of getting to the first lines of search queries.
An example of semantic markup
Yandex and Google markup is especially effective in promoting commercial sites offering goods and services. The following example will explain it best.
It is necessary to create microdata for a business card site for the provision of hairdressing services for dogs. It will look like this:
Itemtype - barbershop,
Name - hairdresser for dogs.
The first line specifies the area of the site, and the second - a specific object. A page with such a script will appear higher on the search ladder than a similar one without it, since the search engine will consider it more relevant to the concept of “dog hairdresser” and not just “hairdresser”.
The micro-markup created with the help of Yandex.Webmaster allows you to specify many parameters - points 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, micro-markup is actively used today:
- Commercial sites to promote goods and services.
- Online directories and encyclopedias for the formation of multi-level links between articles.
- Social networks for detailing profiles, events and other content.
Single Standard Schrema.org
The creation of semantic markup led to the need for a single standard for all search engines. They became the micro-markup "Yandex" and Google - schrema.org. It simplifies the process of creating a short description (snippet) that we see when a page is displayed in search results. This information can include important information about the site that 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
In addition to Google and Yandex search engines, micromarking of goods, services, multimedia and information content is also required for social networks. For them, Facebook came up with a single Open Graph standard. This markup allows you to control how the site will be presented in the news feed of the social network. And today you can create beautiful links with it not only on Facebook, but also on Google+, VKontakte, Twitter. For a beautiful display of the latter, by the way, Twitter Cards are also used.
What microdata to choose?
In fact, when ranking a site, neither Yandex nor Google give any standard more preference. The classic use case, schrema.org, is the most complete, up-to-date, and actively developing.
Microdata dictionaries
We have determined what Yandex markup is. How can I make it show the right information? For this, such a concept as a microdata dictionary is used. It is a set of elements, tags, and syntax that draws the attention of a search engine to something.
Each standard has its own dictionaries and elements. Schema.org has several key vocabularies with their own huge hierarchy and display types. For example, the Thing dictionary allows you to represent information in 3 main properties:
- alternateName - for an alias (alias) of the object;
- description - for text description of the object;
- image - for an image or a link to it.
Or the Good Relations dictionary, which will be especially useful for online trading platforms. It allows you to post data about prices, places of purchase, availability, etc.
Dictionary FOAF - micro-markup of contacts "Yandex" and Google. This is a questionnaire that you have filled out millions of times on various sites - your name, coordinates, social network page, mail, date of birth, etc. This knowledge will allow you to persuade the user to click on the link, offering him something that may interest him. Thus, the site can increase traffic.
For a detailed description of audio and video information - artist, album name, duration - the VideoObject markup is used.
There is also markup for email messages that allows the user, without going to another page, to agree to a meeting or leave a comment under an article, for example.
What is a validator
Any promotion on the Internet requires a thorough and in-depth analysis of effectiveness. You can check Yandex markup using a validator - software that recognizes metadata on web pages. Documents of any format can be checked for correctness - HTML, XHTML, RSS, XML, in any language.
Yandex microdata is checked by any validator that supports Schema.org formats, HTML microdata, Open Graph, RDF.
How to check google markup
Find out how your site is in Google search in several ways. For an experienced user who is fluent in the hidden settings of Google webmasters, the Rich Snippet Tool, available only by reference, is suitable.
Another way is to install the Seo by Yoast plugin. It is easy to use and will be available after installation in the webmaster's top panel.
The third way is to select “Other Resources” on the Google Developers site in the toolbar, click on the “Structured Data Validation Tool” button and specify the 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 for them.
How to check Yandex markup
With this search engine, everything is somewhat simpler. The Yandex markup validator is located in webmaster tools, in the “My Sites” tab. Here you need to click the “Check markup” button and enter the website URL, and the validator will start calculating errors. After a few minutes, you will receive one of three response options:
- Micromarking not found.
- There are mistakes.
- Micromarking fully complies with the standard.
In what cases does information about incorrect markup appear?
"Yandex.Webmaster" - microdata validator - displays an error message in two situations:
- When it doesn't recognize markup.
- When microdata does not meet the standard.
In any case, the program will give error details, which can be used to judge which required fields in the markup were omitted or which attribute was omitted.
It may also give a message - "page cannot be loaded". It indicates a server error or a non-existent page.
If the Yandex markup was completed with an unknown error or you don't know how to fix it, you can always ask Yandex.Webmaster for help.
After the validation is completed, the new markup will appear within 2 weeks.
How microdata affects website ranking?
You marked up your resource according to all the rules, and the Yandex 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 the relevance, and it is impossible to name the exact number of positions to which it will raise the site. However, micro-markup is one of the key factors influencing user attention. An interesting and attractive snippet will bring more visitors, and the position of the site will grow. The rest will depend on the fullness and relevance of the resource.
Benefits of microdata
In addition to the visibility of the resource, micro-markup significantly increases the weight and quality of the site among competitors. It is worth highlighting the following markup advantages:
- It increases the credibility of the search engines, it is easier for the search robot to highlight the main elements of the page, which means that 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 inner secrets, to him, and his confidence in us increases.
- In the eyes of the consumer, sites with snippets look not only more noticeable, but also of better quality. Accordingly, such resources are clicked more often, which means that the CTR in the SERP or clickability increases.
- The owner has a unique opportunity to show information that will be noticed even if the user has not gone to the site.
- The snippet information can always be changed without affecting the resource's position in the list.
But, of course, with SEO promotion, you should not focus only on the development of microdata. It is extremely important to have useful and unique content, but not only. There are many other factors that affect the site's increase in the ranking of the search engines "Yandex" and Google.
Other ways to promote the site
Internal promotion, which includes Yandex and Google microdata, has several directions:
- use of keywords in the domain and site headers;
- the presence of keywords on the page itself, their uniform distribution throughout the text, location in subheadings, tags;
- correct, error-free HTML markup (checked using Yandex Webmaster tools);
- the presence of mega tags (keywords, description, etc.) that indicate the essence of the page to the search engine;
- relinking - i.e. links to other pages of the site;
- a simple site structure that allows you to navigate to the main page in a click;
- memorable and understandable design;
- work with social networks, the ability to recommend the information you like to others;
- the presence of a site map;
- unique, interesting and regularly updated content that is useful and relevant to 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 the site are displayed on other resources, how weighty and authoritative this link mass is (this process is determined using thematic and weighted).
According to recent studies, one of the most effective ways to promote is to discuss or mention 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. It cannot be said that any of the above methods is absolutely correct, and it is he who will bring your site to the top. To be on the top lines of search queries is possible only with complex work on all aspects of SEO promotion, in particular, a huge role should be given to microdata.
It is very important to convey to the search engine that you are trying in every way to simplify its selection and do this not only for the sake of a high rating, but also for the convenience of the user, or rather, first of all, so that a person finds this information on the net.
Yandex and Google are directly interested in the user receiving the necessary information, which means that the more loyal your resource is, the greater his chances of taking a place in the top.
It doesn't matter what kind of markup you use - OpenGraph, schrema.org or some other, the main thing is that it is executed without errors and highlights the key points of the resource pages. Check it regularly with a validator, conduct an in-depth analysis of every aspect of your activity, and then great results await you!
Search engines know tens of billions of web pages. These pages contain a variety of data: texts, pictures, videos, maps, links to other pages. When you need to search for something on the web, you turn to a search engine, and it finds web pages with the information you need based on the keywords in the query.
Search engines are smart enough to understand what language a query is in; they are able to take into account the morphology of the language and select synonyms for words from the query. However, machines are not able to fully understand what exactly is being discussed on the found web page.
Imagine, for example, a polyclinic website with the ability to make an appointment with a doctor via the Internet. Among all the pages of the site, the search robot can easily find the right one - the one where the recording is being made - but then difficulties will arise. A person can easily guess that “Ivanov”, “Petrov” and “Sidorov” are the names of doctors, “oculist”, “neurologist” and “therapist” are their specializations, and “9:00”, “9:30” and “ 10:00" - possible start time. A computer cannot draw such conclusions on its own.
And if a machine could “read” pages in the same way that a person does, it could help solve much more complex problems. Let’s say, not just “Make an appointment with a doctor at polyclinic No. 2”, but “Make an appointment with an ophthalmologist, who speaks well, at a polyclinic no further than five kilometers from my work, on September 12-13, in the morning, but no later than 11 :00".
However, it is quite possible to explain to the computer what the web page is about. To do this, you need to give him a hint. Such a hint is semantic markup or micro-markup. In essence, micro-markup is a separate language with its own vocabulary and syntax, the task of which is to help machines (in particular, search robots) understand the concepts used by people.
Microdata is added to the HTML code of a web page. To the human eye, marked up and unmarked pages look exactly the same, but for a search engine, the difference is very large.
To understand how microdata works, consider a simple phrase: “Peter has a son, Ivan.” Despite the simplicity, a person can draw many conclusions from it: Peter is the father (and also the parent) of Ivan, Ivan's patronymic is Petrovich, Peter and Ivan are men and relatives, Peter is older than Ivan. All these facts are obvious, because life experience tells us them. The machine has no such experience, so it can only perceive the phrase in its current formulation.
This is the same phrase, but with micro-markup. Now the computer understands that Ivan and Peter are the names of people between whom there is a family relationship (Ivan is a child, Peter is a parent), and it will not be difficult for him to answer questions like “Who is Ivan's parent?”. In addition, if you add unique identifiers to the markup (for example, links to pages on social networks), the machine will be able to distinguish specific Ivan and Peter from their namesakes.
Micro-markup is used not only when it comes to people. Similarly, you can mark up music, videos, events, products, and much more.
There is no single microdata standard yet. There are different syntaxes and different vocabularies. For example, social networks collect data about sites using the Open Graph dictionary developed by Facebook, while search engines, including Yandex, are more likely to use the Schema.org dictionary. You can read more about how dictionaries and syntaxes work in the Yandex tech blog on Habrahabr.
In one form or another, microdata is used by about 30% of web pages known to Yandex. The absence of microdata does not affect the page's ability to appear in search results, nor its position in the search results. However, in some cases markup can make life much easier for both sites and users.
Make a visual snippet
One of the main advantages of microdata is that it gives the search engine the ability to build beautiful "snippets" - short descriptions of sites. For example, you play the guitar and search Yandex for [blood type chords]. If the webmaster of a site publishing chords has added semantic markup to their resource, then you can view the lyrics of the song with chords right on the search results page.
Among the huge number of sites that exist in the Russian-speaking segment of the Internet, not all users can find what they need. Of course, search engines allow you to attract the target audience to a specific web resource, but they will not be able to keep people on your site if you do not make an effort yourself. A separate problem is the information about the site that the user sees in the search results. Unfortunately, it is far from always compiled adequately and competently.
That is why semantic data markup has emerged to help structure information for search robots. Initially, there were several semantic markup formats, and all of them competed with each other. First of all, webmasters who had to choose between competing formats suffered from this state of affairs. However, since 2011, everything has changed, after the largest search engines (Google, Microsoft's Bing search engine and Yahoo!) have chosen a single Schema.org standard.
Practical benefits of Schema.org and features of work
Schema.org is required if you want your site snippet (basic information about the web resource that is shown in the search results) to attract the attention of the target audience. By default, the search robot structures the data on its own, but the quality of the information in the snippet leaves much to be desired. For example, instead of the normal text about what interests him, the user will see the usual informational garbage that does not speak about the content of the site or its subject matter. On the other hand, if there is a site using Schema.org on the next line in the search results, then the user is guaranteed to go there, because the site snippet will contain useful and readable information.
In a word, Schema.org markup will undoubtedly increase the relevance of the site, as well as an adequate description of the web resource in the search results. You can mark up almost everything, but it is important to remember that search engines do not use all the markup. However, what was not taken into account earlier may begin to be taken into account in the future, so there can be no trifles here. The vast majority of webmasters first mark up reviews, various ratings, products, people, companies, videos, events, recipes, etc. Of course, in each case, the markup system is different, so any site requires an individual approach.
You should also pay attention to the type hierarchy in order to convey to the user the most important information about the site. You can view them on the official website at http://schema.org/docs/schemas.html (knowledge of English is required). The choice of markup technique depends primarily on the subject of the site and, of course, the wishes of the webmaster himself. For example, if you have an information resource with many different topics, you can choose the Article markup. Articles posted on a personal blog are marked up with BlogPosting, while technical materials are marked up with TechArticle, etc. Within any of these schemas, there can be any number of other schemas, you just need to follow the correct hierarchy.
If you have already created an HTML layout for your site without adding semantic markup, then you will have to redo it, because this is the only way to correctly and efficiently implement it. This is not to say that this is a huge amount of work, but you still have to try. As a result, the code may increase significantly, but your site will benefit in the long run. For example, after the successful implementation of semantic markup, any search engine will be able to accurately understand the content of your site, distinguish articles from user comments, identify keywords and phrases in the text, highlight important and secondary information, etc. This is really very useful for promoting the resource.
For those who want to increase the conversion and popularity of the site with the help of Schema.org, there are also recommendations. For example, if a page has a lot of interactionCount (various reposts, likes, tweets and much more), as well as comments, the search robot automatically designates such a site as more priority and significant compared to others (the same Yandex has something like " happiness scales. Of course, this seriously affects the attendance of the resource, so you should not neglect this opportunity. For example, you can mark up each comment with a schema (UserComments designation) within a single schema already posted on the article resource (TechArticle). The method is very common and, importantly, really works. If there are a lot of comments and other signs of user activity on a web resource, the search engine will display it as useful and important.
Schema.org can also be used by webmasters who are accustomed to using microformats, microdata, and RDF systems. Absolutely everything that could be done with these formats can be done in Schema.org.
Principles of markup and code construction
To introduce semantic markup on a particular page of the site, you first need to place a description in a separate container, which indicates the selected markup scheme (for example,
Tools for the job
Popular search engines have their own tools for working with semantic markup. For example, the same Yandex offers its own markup validator (located in the Webmaster service). In addition, there are special plugins designed for use with web resource management systems. They are designed to facilitate the webmaster's routine actions and automate many processes, so it will not be superfluous to familiarize yourself with them. A service such as http://schema-creator.org/ deserves special attention, which helps to embed markup in the site code much faster.
Of course, these are far from all the tools that can help a webmaster. The list of useful plugins and services is constantly updated as Schema.org develops and popularizes, so it is advisable to always be aware of trends and implement them in your work.
Subscribe to newsletter
Markup can make your site more visible in Yandex Search and thus attract more visitors who belong to the target audience. However, semantic markup does not directly affect rankings.
I read about the Schema.org standard. How to set it up on your site?
Check out our help sections and use the markup tools. If standard implementation methods do not suit you (for example, due to complex layout), write to the Search club. Most likely, you will need the help of a programmer.
Schema.org describes many different data types, are they all supported by Yandex?
No, we do not currently support all Schema.org data types. For a complete list of types that can be processed, see What data can be passed.
I set up on my site Schema.org. How to make sure everything worked?
First, make sure that the tagged data is recognized correctly and without errors. If the markup is correct and the markup data is used by Yandex services, then after some time (usually two weeks), this data will appear on the corresponding pages.
If the markup is correct, but the data does not pass manual moderation, you will receive a message from the moderator in the Ya.Webmaster interface. The moderator will explain why the data provided cannot be used and suggest changes.
Why are snippets not showing even though my markup is successfully recognized by your validator?
Make sure Yandex can use your data in snippets. All snippets that can be composed of your data are described in the What data can be transferred section.
Before appearing in snippets, the data must be:
correctly labeled;
indexed;
moderated.
If all Yandex requirements are met, then the moderator approves the use of data from your site. After some time (about two weeks), snippets with your data will appear in the Search.
Which is better to use - microformats or Schema.org? How will the robot process the site if I use both?
Our algorithms do not favor any one type of markup. This means that you can use whichever format you feel most comfortable with. However, we recommend using Schema.org as a more up-to-date, complete, and actively evolving standard.
