How the hcard concept works in HTML

Question

I recently read a book called Adaptive Webdesign, and I came across something called hcard, hcalendar, and I went to the corresponding page. Now the question is, I don’t understand how it works? It is used to represent people .. and the markup is as follows

<div class="vcard"> <a class="url fn" href="http://tantek.com/">Tantek Çelik</a> </div> 

Now I know that these classes have values, such as url , indicates that this link takes the user to a web page, and fn means a formatted name and so on ...

Similarly, these classes indicate to search engines that the content is hCard or it is rendered differently, etc. Can someone explain to me how this works, what are the advantages of doing this, and does it matter from an SEO point of view and are these classes predefined?

Edit: so are these classes reserved? What if I use them for other elements? And is there any javvascript that I can call the onclick buttons to save the vcard on the computer / user device?

Answer 1

vCard is the standard for electronic business cards. hCard takes these labels and uses them as class names around the data in HTML. Each hCard starts inside the block with class = "vcard".

Some of these types have sub-properties. For example, the value "tel" contains "type" and "value". Thus, you can specify separate home and business phone numbers. The adr type has many sub-tasks (mailbox, extended address, street address, locale, region, postal code, country name, type, value).

 <div class="vcard"> <div class="fn">xxxxx</div> <div class="adr"> <span class="locality">yyyy</span>, <span class="country-name">zzzzz</span> </div> </div> 

Class names should not mean anything on your page. However, you can always use them to create your contact information. You can also create them in your custom style sheet in a browser so that you can find them while browsing the Internet. ( Source )

Regarding SEO aspects, please see this article Local Search Engine Optimization Tips for Your Website

Answer 2

This concept allows machines to receive detailed information about the content. It's pretty simple, you know what a name is. Cars are not ... :)

So, you need a way to tell the machine what data is contained in your html.

For example:. You can enrich your data as shown below and possibly enable the Adressbook-Application to get detailed information about which fields should be filled out.

 <div class="vcard"> <a class="url fn" href="http://tantek.com/"> <span class="family-name">Tantek</span> <span class="given-name">Çelik</span> </a> </div> 

This snippet allows the adressbook-app. It's easy to find a given name and set it in the correct field. The order here does not matter.

Check your Rich Snippets ": http://www.google.com/webmasters/tools/richsnippets

Answer 3

If you have not yet announced that you are using hCard syntax (using the vcard class), then you're free to use any class names you want. Even if you started using hCard microformat, no styles will be applied implicitly, since microformats are not related to the display style.

The purpose of using microformats is to open an interface for displaying metadata. By providing data in a standardized microformat, any parsing of your site can use microformat to search for relevant information.

Search engines especially benefit from this, as it allows them to provide more information about a particular resource on the results page.

Answer 4

I don’t know exactly hcard and hcalendar , but, for example, look at the issue of stack overflow on Google, you will see that the time when it was placed next to the content, for many sites it also displays the name of the author.

In other words, Google will use these microformats to improve the search by providing metadata for the search, since they were analyzed from the page.

You help Google, they help you.

Answer 5

I would recommend using http://schema.org/ for microformats. Google officially recommends using it, and it is also fully supported by Bing and many other search engines. When you use schema.org microformats, search bots will retrieve data objects from your markup and will appear accordingly in the search results.

So, there are advantages to using microformats. Using them, you can improve the behavior of search robots, your content will be correctly indexed and, more importantly, it will be correctly classified, so it will appear in user searches.