Devenez votre propre Webmaster

la hCard, la carte de visite sur Internet

hcard la carte de visite du netDans la série des articles sur les données enrichies et pour faire suite à l'article sur l'identification des auteurs de contenu par les moteurs de recherche, je vous propose aujourd'hui la création d'une carte de visite au format Internet, la hCard.

La hCard permet de publier les données sur une personne, une société ou une organisation dans le langage sémantique microformat que je vous ai présenté dans l'article sur les contenus structurées. Le fait d'utiliser un langage reconnu par les moteurs de recherches, permet d'être certains que ces derniers comprendront parfaitement le contenu de la hCard. Les réseaux sociaux commencent eux aussi à utiliser ce standard microformats.

La vCard quand à elle forme la base microformat de hCard. On encapsule les données de la hCard dans une classe vCard.

Je vous renvois vers les deux articles précédemment cités pour comprendre l'utilité du microformat et plus spécialement des contenus structurées dans les pages de vos sites et de vos blogs.

Que peut-on mettre dans une hCard ?

J'aurais envie de dire simplement la même chose que sur une carte de visite. La hCard est à envisager comme carte de visite numérique. Vous pouvez l'utiliser très facilement sur les pages de vos sites ou les articles de vos blogs.

L'avantage est que la hCard est un des standards microformats ouvert, adapté pour le codage dans les page HTML/HTML5, Atom/RSS/XHTML et autre XML. Ce qui veut dire que vous pouvez les coder dans les pages de vos sites et blogs sans difficulté si vous possédez une base du langage HTML. Il utilise une représentation 1:1 des propriétés et des valeurs comme la plupart des bornes HTML ou XML.

L'identification de la personne dans la hCard

Toutes les données qui suivent sont reconnues par les moteurs de recherches et de plus en plus de réseaux sociaux comme facebook. Il n'est pas obligatoire de renseigner la totalité des données pour créer la hCard. Souvent utilisée pour présenter une personne elle ne contient que le nom et prénom de la personne et l'url de la page de contact de la personne.

La hCard permet de faire apparaitre,

  • le titre,
  • le nom,
  • prénom
  • les titres honorifiques

L'adresse dans la hCard

Rien de bien extraordinaire :

  • la rue de domiciliation
  • la localité (ville ou village)
  • la région
  • le code postal
  • le Pays

Les autres informations dans la hCard

  • Le nom à afficher (je conseille de mettre la compilation du nom et prénom)
  • Alias ou pseudonyme (ex. : IRC philippe)
  • Le nom de la société
  • Le lien vers la photo ou logo de l'identité
  • l'url de la page de contact
  • email du contact
  • le téléphone
  • la date d'anniversaire
  • la catégorie du contact (le métier ou corps de métier par exemple)
  • un texte (note) de quelques mots pour présenter la personne.

Comment se présente la hCard dans le code de ma page ?

Comme je vous l'ai dit plus haut la hCard est un langage sémantique conçu pour l'embarquement dans le HTML, HTML5 et tous les formats XML comme Atom, RSS, ...

Une hCard est souvent encapsulée dans une classe vCard qui est identifiée par la borne :

<div class="vcard"></div>

La forme minimaliste d'une hCard dans une classe vCard pour présenter une personne :

<div class="vcard">
   <a class="url fn" href="http://tantek.com/">Alexandre Dumas</a>
</div>

Une hCard doit contenir au minimum la propriété "fn" pour le nom de la personne. Les autres options sont facultatives. Vous pouvez aussi faire apparaitre plusieurs fois la même propriété comme par exemple le téléphone si vous souhaitez en faire apparaitre plusieurs, idem pour l'entité "adresse" si votre société possède plusieurs établissements.

Je vous joins ici les propriétés de la hCard à l'intérieur d'une class vCard pour mon site I.M.C. :

Propriétés Exemples
Encapsulation dans classe vcard
fn - nom, formaté/complet. requis
n - conteneur pour structure nom
honorific-prefix (Ms., Mr., Dr.)
given-name - le prénom
additional-name - autre nom
family-name - nom de famille
honorific-suffix (Ph.D., Esq.)
fin de la structure nom
nickname - pseudo (IRC Benito)
org - société/organisation
photo - photo, icône, avatar      :
url - page personnelle pour le contact
email - addresse e-mail pour le contact :
tel - numéro de téléphone
adr - adresse structurée, conteneur pour :
street-address - rue #+nom, appart./suite
locality - ville ou village
region - état ou province
postal-code - code postal par ex. U.S. ZIP
country-name - non du pays
fin adresse
bday - anniversaire. date ISO.
category - pour taguer le contact
note - notes concernant le contact
fin d'encapsulation de la classe vcard
<div class="vcard">
   <span class="fn">Benoit Thibaudeau</span>
   (<span class="n">
      <span class="honorific-prefix">Mr.</span>
      <span class="given-name">Benoit</span>
      <abbr class="additional-name"></abbr>
      <span class="family-name">Thibaudeau</span>
      <span class="honorific-suffix"></span>
   </span>),
   <span class="nickname">I..C.</span>
   <div class="org">Benoit Thibaudeau</div>
   <img class="photo" src="http://example.com/bnt.jpg"/>
   <a class="url" href="http://www.informatique-moins-cher.com/">www</a>,
   <a class="email" href="mailto:contact@informatique-moins-cher.com/">e-mail</a>
   <div class="tel">+33.1.47.35.90.25</div>
   <div class="adr">
      <div class="street-address">27 bis rue Louis Rolland</div>
      <span class="locality">Montrouge</span>,
      <abbr  class="region" title="Haut de Seine">Haut de Seine</abbr>,
      <span class="postal-code">92120</span>
      <div class="country-name">FRANCE</div>
   </div>
   <time class="bday" title="1971-11-02">Nov. 1971</time> Anniversaire
   <div class="category"></div>
   <div class="note">Bientôt maître du monde ;).</div>
</div>

Implanter une hcard dans les pages votre blog ou votre site

Si le concepteur de votre blog ou votre site n'a pas prévu l'utilisation de données structurées, il n'a certainement pas prévu l’insertion d'une hCard dans votre contenu. A défaut d'avoir un shortcode pour implanter votre hcard où vous le souhaitez dans vos pages et d'avoir une interface permettant de sélectionner les données que vous placerez dans celle-ci , comme je le propose pour tous les blog/sites que je développe, je vous propose de générer le code de votre hCard avec l'outil que je vous propose juste en dessous et de l'implanter dans votre contenu.

Il n'est pas nécessaire d'utiliser une hCard sur chacune de vos pages ou article. La hCard n'a pas été créé pour l'identification de l'auteur d'un contenu. Elle est plutôt conçu pour se trouver sur la page de contact, les mentions légales et/ou sur la page d'accueil de votre site.

Si par exemple vous utilisez WordPress pour votre blog, vous pouvez coller votre hcard directement dans les widgets. Pour cela rien de plus simple. Utilisez l'outil juste en dessous pour générer le code de votre hCard, puis copiez/collez le code html généré dans un widget de type texte. Ensuite modifiez le Css de votre blog ou votre site pour l'apparence en créant un style pour les "class" de votre hCard.

Sur ce blog par exemple, vous pouvez voir une hcard en haut de la barre des widgets à droite de cet article.

[ Haut de page ]

Outil de génération de hCard

Comme pour l'article sur l'analyse de vos campagnes e-maketing où je vous avais créer un outil de génération d'url avec les codes de traking, cette fois-ci je vous met à disposition un outil de création de hCard dans une classe vCard.

Pour l'utiliser remplissez les champs avec vos données, puis cliquez sur le bouton "génération" et faites un copier/coller du code dans les pages de votre site ou votre blog. Ne remplissez que les champs que vous souhaitez utiliser dans votre hCard.


Structure du nom :






Structure de l'adresse :















[ Haut de page ]

Si vous avez aimé cet article, n'hésitez pas à le partager

Posts Similaires
Optimisez vos titres

Dans cette troisième partie du dossier sur le référencement naturel (SEO) de votre site professionnel, je vous explique comment utiliser au mieux les titres h1, h2 et h3 de votre contenu

Comment choisir les mots clés de votre site / blog ?

Dans cet article je vous propose une méthodologie pour sélectionner au mieux les mots clés pour votre site web. Cette étape et cruciale et déterminante pour le positionnement de votre site dans les moteurs de recherche.

Dois-je prendre un nom de domaine .fr pour mon site marchand ?

Beaucoup d'entreprises se posent la question de prendre ou non un nom de domaine en ".fr". Quels sont les impacts sur leur positionnement dans les moteurs de recherche. Est-ce nécessaire pour les entreprises locales de posséder un nom de domaine correspondant à leur pays ?

A propos de

Consultant en informatique et concepteur de sites Internet.

Il a travaillé pendant plus de quinze ans pour une multinationale dans le secteur de l'ingénierie Informatique.

Durant ces années, il a participé à des projets sur les systêmes de facturation et la conception des sites Internet de différentes Banques et opérateurs téléphonique à travers le monde

Senior Analyst Programmer/Team Leader, il a participé et dirigé des projets sur les plus gros clusters d'Europe.

Il habite à Paris, en ile de France .

Le Site :

Le Blog :

Vos Commentaires pour "la hCard, la carte de visite sur Internet"