Speaking of semantics, we mentioned the micromarking markup format earlier, which is used by search engine crawlers to analyze information on the page. Proper page markup with micromarking helps to display not only the link to the site and its description in the search query results, but also additional information:
- Name of organization
- Opening hours
- Phone number
Micromarking is a tool that is implemented using the additional attributes of HTML tags.
Developers have created several variants of micromarking, the most common of which is Schema.org with a wide range of vocabularies to describe the information on the page.
A vocabulary is a set of rules that describe the blocks on the page. Movie theater screenings, sales department information, product prices, and article reviews are all presented in small vocabularies.
To create a micromarking you should:
- Choose the vocabulary. You can check the documentation to find out if your search engine supports a given vocabulary
- Determine the block to be marked up. It can be more than a block; it can even be an entire page of a site
- Highlight information. For example, the markup for contact information is the name of the organization, phone number, email address, physical address
- Specify attributes depending on the type of information and vocabulary
It is impossible to give a complete explanation on micromarking in one lesson. This is a big topic, with many different nuances. As you gain experience, you'll learn to quickly identify the information you need and mark it up. Micromarking has a huge range of abilities, both in terms of visual presentation of information in a search engine, and for search engine promotion, and it's simple to use.
Contact details micromarking
For example, let's take the contact information from the fictional company Proud, and mark up the contacts using Schema.org. Initially, the contact block looks like this:
<section> <h1>The Boring Company</h1> <p>Address: Austin, Texas</p> <p>Phone: 8 (8765) 333-00-00</p> <p>Email: firstname.lastname@example.org</p> </section>
First, you have to choose a vocabulary. The Google search engine offers several options for this. We'll take the Organization vocabulary. A full description of this vocabulary can be found at https://schema.org/.
The goal of this lesson is not to teach you how to mark up data completely. The purpose is to show an example of micromarking.
Two attributes are specified to tell the search engine that the data is marked up with a vocabulary:
itemscope- a pointer to the fact that the block is a single entity in which the data is linked. It's specified only in the main block and has no value of its own
itemtype- specifies which vocabulary will be used. For example, for example, the Organization vocabulary is selected for describing contacts. Full attribute type:
<section itemscope itemtype="http://schema.org/Organization"> <h1>The Boring Company</h1> <p>Address: Austin, Texas</p> <p>Phone: 8 (8765) 333-00-00</p> <p>Email: email@example.com</p> </section>
Now the search engine will know that inside this block is information about an organization. Let's start marking up the address. Schema.org allows you to specify a street, house, building, and so on separately, but we'll generalize it and use only one value,
itemprop="address", to represent the address of the business. Note that markup elements are specified using the itemprop attribute.
<section itemscope itemtype="http://schema.org/Organization"> <h1>The Boring Company</h1> <p>Address: <span itemprop="address">Austin, Texas</span></p> <p>Phone: 8 (8765) 333-00-00</p> <p>Email: firstname.lastname@example.org</p> </section>
Mark out the rest of the data: name, phone number, and email, just like with the address. Each of them has its own itemprop attribute value. Note that only the data is marked, leaving the name of the field "overboard" as it were. To do this, the required data should be wrapped in
<span> and you specify an attribute for it.
<section itemscope itemtype="http://schema.org/Organization"> <h1 itemprop="name">The Boring Company</h1> <p>Address: <span itemprop="address">Austin, Texas</span></p> <p>Phone: <span itemprop="telephone">8 (8765) 333-00-00</span></p> <p>Email: <span itemprop="email">email@example.com</span></p> </section>
You can use tools from popular search engines to check that the micromarking is correct:
Try inserting a test case into these tools and take a look at the result. You can try to break the micromarking and look at the error output.
Create an organization markup in which you specify:
- Organization name
- Organization email
You can use tags at your discretion. All semantics are built at the micro-marking level. Use
http://schema.org/Organizationas the vocabulary
The exercise doesn't pass checking. What to do? 😶
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
My code is different from the teacher's one 🤔
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
I've read the lessons but nothing is clear 🙄
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.