Le hreflang Manager

Rubrique Développement Web

Si vous avez Firefox ou un tout autre navigateur qui comprend la propriété CSS content, vous avez sûrement déjà vu des sites où les liens était marqués d’un « [fr] » ou d’un « {en} ». Il s’agit une utilisation assez intelligente de l’attribut hreflang des balises <a>. Et j’ai voulu pousser l’utilisation un peu plus loin…

Publié il y a déjà trop longtemps…

Dans la série : « Ca ne sert pas à grand chose, mais je me suis bien amusé à le faire », voici mon piti outil pompeusement nommé hreflang Manager.

L’attribut hreflang indique la langue de la page sur laquelle vous allez être dirigé et il s’utilise comme ceci :

[html] <a href="/wp-content/images/developpement-web/le-hreflang-manager/monlien.html" hreflang="fr">Mon Lien</a>

De nombreux webmasters, notamment ceux qui utilise Dotclear couplent cet attribut avec la propriété content. Pour plus de détails concernant cette propriété CSS, je vous invite à lire l’un de mes articles sur la propriété content et les pseudos classes :before & :after.

Sans CSS, le lien ci-dessus sera simplement souligné comme tout lien standard. Par contre, avec un petit bout de CSS semblable à celui ci-dessous on obtient automatiquement un texte supplémentaire après le lien qui est le contenu de l’attribut hreflang entouré de crochets :

[css] a[hreflang]:after {content: "[" attr(hreflang) "]";

Au lieu d’utiliser uniquement du texte dans cette méthode, je me suis dit qu’il serait tout aussi utile de mettre un drapeau représentant la langue.

C’est pourquoi, j’ai créé à l’aide des images de drapeaux contenus dans l’excellente extention de statistiques BBClone de Dotclear un petit outil. Il permet de gérer dynamiquement presque toutes les langues et les pays existants.

Voir le hreflang Manager

L’arborescence se présente comme ceci :

Elle contient un dossier contenant près de 260 drapeaux, la feuille de style CSS dynamique, ainsi que le fichier de configuration extensions.php.

Ce fichier de configuration est un tableau PHP contenant environ 235 pays et il se présente de cette façon :

[php] <?php   $ext['ad'] = "Andorre";   $ext['ae'] = "Émirats Arabes Unis";   $ext['af'] = "Afghanistan";   //etc. ?>

Il vous suffit de garder les pays qui vous semblent convenir à votre utilisation. Un conseil n’en gardez qu’une dizaine car si vous les conservez tous, votre feuille de style affichera un poids d’environ 100Ko !

L’utilisation est simple :

Téléchargez le fichier zip (97Ko)
Configurez le fichier hreflang-style.php
Et liez votre feuille CSS avec ce code :

[html] <link rel="stylesheet" type="text/css" href="/wp-content/images/developpement-web/le-hreflang-manager/hreflang-style.php" />

Attention à vos chemins !

Si quelqu’un se sent motivé pour me filer un coup de main pour en faire un plugin Dotclear, je suis preneur !

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Shemu

L’inconvénient majeur est le poids de la feuille CSS générée.
Mais le but est d’avoir une base assez complète pour ensuite "tailler dans le gras" et ne conserver qu’un dizaine de langues… ;)
FREUD

Bon moi je dis qu’il faut quelques explication en plus, sans quoi, on voit pas trop…
Donc : une fois dans le hreflang Manager, qu’on voit la liste des pays avec les drapeaux, il faut regarder la source de la page et LA[!], là on voit toute la puissance du truc car chaque lien est un simple <li><a href="javascript:void(0);" hreflang="jp">Japon</a></li> , on voit donc que tout est ‘automatisé’ et qu’il n’y a pas d’appel aux images.

Bref, de la boulish ;)
Paul

Salut,
Un intéressant détournement ! Néanmoins, comment gérer par ton système les attributs du genre hreflang="en-us", hreflang="fr-ch" ?

L’attribut hreflang indique la langue ou la variété de langue utilisée sur la page distante et ne signale donc pas dans l’absolu la localisation géographique du site web. Ton serveur peut très bien être localisé en Birminie mais que ton site soit rélaisé en langue française.

Voir à ce propos la discussion suivante :
blog-and-blues.org/weblog…
Shemu

Tout à fait !
Pour cela il suffit de créer une image adéquate et rajouter l’extension dans la config.

Par exemple, pour un hreflang="fr-ch" on peut créer une image avec un drapeau français et suisse nommée "ext_fr-ch.png" et rajouter la ligne suivante dans le fichier de config :
$ext['fr-ch'] = "Français-Suisse";
L’adaptation n’est pas trop complexe même pour un non-programmeur je pense ;-)
Paul

Salut Shemu,
Je me doutais bien que l’adaptation n’est pas trop complexe, mais comme Daniel Glazman l’indique ( daniel.glazman.free.fr/we… ), sémantiquement il reste incorrect de spécifier la localisation géographique de la page en utilisant l’attribut <hreflang> qui sert, notamment à indiquer à un synthétiseur de parole la langue utilisée.
Comme le conclut Glazman "we should use language names or identifiers but certainly not flags"…
Shemu

Re tout à fait !
Comme je l’indique dans mon post, le hreflang indique la langue de la page et non le pays où est stockée la page.
Le problème se pose pour les pays où la langue principale à été importée : Argentine (es), Brésil (pt), Australie (au), Nigéria (en), etc.
Mais j’estime personellement que, par exemple, la langue française au Canada n’est pas tout à fait la même que celle en France. C’est pourquoi un drapeau français et québécois s’impose (fr-ca-qc).
jesus2099

Bonjour,
pour certains drapeaux, il y a confusion entre code pays et code langue.
"vi" est le code langue à deux lettre du vietnamien (la langue: "Tiếng Việt"). Le code à trois lettres étant "vie".
"vn" est le code du PAYS.
hreflang="vi" est un lien vers un document en langue vietnamienne. Je ne crois pas qu’il existe une langue correspondant à "vn".

Les commentaires sont clos.