Archives du mot-clef title

Liste de meta tags

Gran­de­ment ins­piré de Meta Tags Explai­ned.

Balises Dublin Core
C’est une ten­ta­tive de for­ma­li­sa­tion des meta par des docu­men­ta­listes. Il y a 27 (15 + 12) balises, cer­taines fai­sant dou­blon avec des exis­tantes. Ce n’est pas un pro­blème, car les 15 valeurs sont pré­fixées code>DC. et l’objectif est de ne pas avoir à se repo­ser sur les balises « anciennes ». Ren­trer dans le détail de ces balises dépasse le cadre de cet article. Sachez juste que c’est une bonne idée de ren­sei­gner les valeurs Dublin Core.
abstract
Sur­tout uti­lisé dans les cercles uni­ver­si­taires, c’est une courte des­crip­tion (10 mots). C’est entre description (pour une vraie phrase) et keywords (pour la conci­sion). Indexé uni­que­ment par les moteurs de recherche universitaires.
author
Pré­nom et nom de l’auteur (pas du web­mas­ter qui a mis en ligne). Pas indexé.
http-equiv="bla
Il rem­place l’entête HTTP idoine, il est donc à évi­ter si vous pou­vez vous-même chan­ger les entêtes HTTP. Le seul cas où il est tou­jours utile est content-language (voir plus bas).
content-language
Il rem­place l’entête HTTP idoine, il est donc à évi­ter si vous pou­vez vous-même chan­ger les entêtes HTTP. Pas indexé.
content-script-type
Il rem­place l’entête HTTP idoine, il est donc à évi­ter si vous pou­vez vous-même chan­ger les entêtes HTTP. Pas indexé, même les navi­ga­teurs l’ignorent.
content-type
Il rem­place l’entête HTTP idoine, il est donc à évi­ter si vous pou­vez vous-même chan­ger les entêtes HTTP. Cepen­dant, et contrai­re­ment à tous les autres http-equiv, il reste per­ti­nent (et même indis­pen­sable) dans un cas de figure : la vali­da­tion HTML d’une page Web hors-ligne (quand vous écrivez votre HTML sur votre machine, sans pseudo-serveur) écrit en autre chose que de l’US-ASCII (dit autre­ment, pour que vos é et Ç ne pro­duisent pas une erreur). En effet, comme il n’y a pas de flux réseau, il n’y a pas d’entête HTTP et ce meta est donc la seule manière de connaître l’encodage de votre fichier. Pas indexé.
copyright
Pas indexé.
description
Des­crip­tion de la page (pas du site). Pour des rai­sons de cata­lo­gage, ne devrait pas com­por­ter plus de 250 carac­tères (les moteurs de recherche, eux, recom­mendent même moins de 200 carac­tères). Elle est des­ti­née à des humains, donc faites-là accro­cheuse (ce qui peut avoir des sens variés, selon votre lec­to­rat). Tâchez de réuti­li­ser les mots-clés de keywords.
designer
Sert aux desi­gners comme moyen de rap­pe­ler que c’est eux qui ont conçu la page. Ne marche bien sûr que pour du pom­page de très bas niveau (qui reste cepen­dant très popu­laire, Open­Web peut en attes­ter). Pas indexé (et limite pas pertinent).
distribution
Accepte trois valeurs : global, local et IU. Pas indexé (et limite pas per­ti­nent). Si vous vou­lez réser­ver l’usage des pages, il y a beau­coup mieux (robots.txt, .htaccess et carrément du mot de passe ou un intranet).
expires
Quand est-ce que la page sera mise à jour. Plus indexé.
generator
Comme designer (ou, dans les cour­riels, X-Mailer) elles servent de pub pour le concep­teur – ici, le logi­ciel uti­lisé – et, à mon avis, décri­di­bi­lisent le site. Pas indexé.
googlebot
Comme robots, mais uni­que­ment pour Google. Indexé par Google. Ne pas uti­li­ser, car ce serait reve­nir au temps du opti­misé pour….
icbm
Pour don­ner une adresse phy­sique. C’est assez vague : est-ce l’adresse phy­sique du ser­veur (faible inté­rêt) et dans ce cas, il faut la chan­ger quand le ser­veur change de place, l’adresse de la rési­dence prin­ci­pale de l’éditeur prin­ci­pal, le lieu d’où est écrit une page pour un blog iti­né­rant, le lieu dont parle la page… Ça res­semble plus à une mode qu’à autre chose. Quoiqu’il en soit, vous pou­vez connaître la valeur à entrer en allant sur geourl.org/add.html.
keywords
Le plus connu et aussi le plus abusé, il n’est du coup par­ti­que­ment plus utilisé.
language
Fait la même chose que content-language, mais avec le vrai nom, en anglais, de la langue (English au lieu de en). Ne pas uti­li­ser, car html xml:lang (ou html lang si vous êtes encore en HTML) fait la même chose, en mieux — d’une manière géné­rale, une balise meta est tou­jours la moins bonne des manières for­ma­li­sées de faire quelque chose). Indexa­tion incon­nue, mais, comme j’ai dit, mieux vaut ne pas l’utilser.
mssmarttagspreventparsing
Un temps, Micro­soft envi­sa­geait un sys­tème de smart tags qui, selon la com­mu­nauté des déve­lop­peurs Web, ferait plus de mal que de bien (sauf à Micro­soft, bien sûr). Micro­soft avait prévu de se reti­rer de leur « pro­gramme » d’opt-in avec cette valeur meta mise à true. Du fait du très mau­vais retour dans la presse, Micro­soft a annulé la chose, mais plus d’un site méfiant conserve cette valeur, au cas où. Cepen­dant : d’une part, rien n’empêche Micro­soft de n’en avoir cure (même pro­blème que pour les robots, d’ailleurs) et d’autre part, si on com­mence comme ça, ça peut aller loin (les meta spécifiques aux moteurs de recherche). Indexa­tion inconnue.
msn
A une seule valeur, noodp où la des­crip­tion de dmoz/ODP sera rem­pla­cée par celle de MSN Search. Indexé par MSN.
publisher
Comme generator. Pas indexé, ne pas utiliser.
rating
Noter le site, un truc pour les États-Uniens pudi­bonds et les Chiennes de garde. Pas indexé, ne pas uti­li­ser — un RDF de l’ICRA a plus de sens et, encore une fois, une balise meta et la moins banne manière for­ma­li­sée de faire quelque chose.
refresh
Il rem­place l’entête HTTP idoine, il est donc à évi­ter si vous pou­vez vous-même chan­ger les entêtes HTTP (une redi­rec­tion 301, ou par­fois une 302). Indexa­tion inconnue.
reply-to
Pré­sent dans le brouillon de HTML 3, qui n’est jamais sorti et qui était bien). Mal­he­reu­se­ment, un para­dis à spam, uti­li­sez donc plu­tôt link contact. Indexa­tion incon­nue, ne pas utiliser.
resource-type
Double-emploi avec la DTD.
revisit-after
Même objec­tif que expires. Pas indexé.
robots
Gère le com­por­te­ment des robots. Valeurs : index (indexer la page), follow (suivre les liens de la page), noindex, nofollow, all (valeur par d

Les exclusivités d’Opera

Ini­tia­le­ment publié le 17 avril 2006 à 19:03:41

Exclu­si­vi­tés

  • Titres numé­ro­tés Gecko en fait désor­mais autant
  • Espaces fines insé­cables Gecko en fait désor­mais autant
  • Sélec­tion de texte autogénéré
  • Retours cha­riot CSS (\a, de mémoire)
  • Le seul à pou­voir cor­rec­te­ment uti­li­ser run-in avec du display:after (les der­nières com­pi­la­tions noc­turnes de Web­kit ont réglé le pro­blème ; mais pas la dernière nocturne de Gecko 1.9)
  • La meilleure gestion de l’attribut cite à ce jour grâce aux liens en cascade (CLink)

Exemples

Sur ce blog

Démonstration de la puissance d’Opera
Démons­tra­tion de la puis­sance d’Opera
Le texte cité est une liste de défi­ni­tions (en gras, les dt). Les deux_points et espaces les pré­cé­dants sont auto­gé­né­rés (quand on y pense, c’est de la pré­sen­ta­tion, tout ça). Si vous cli­quiez sur le texte vio­let en bas, ça vous emmè­ne­rait sur la page de source. Et vous pour­riez aussi le sélec­tion­ner, quand bien même il est auto­gé­néré depuis l’attribut title. Bien entendu, il n’a pas le pro­blème de Safari avec les guille­mets, qu’il loca­lise comme demandé (Firefox le fait aussi correctement). Soyons honnêtes : Opera a du mal avec les enrichissements typographiques et surexploite les déliés (vous le voyez en bas). D’une manière générale, Opera a du mal avec Mac. Il n’empêche, c’est bien, tout ça.

Autre

Un autre exemple que je compte bien (re)mettre en action dans la nouvelle version du site Web, les compteurs (counter, conter-increment) :
h3:before	{ 	content:counter(thetitre3) "."; 	counter-increment:thetitre3; 	}
Un exemple simple
Un exemple simple
Un exemple plus évolué
Un exemple plus évolué
Le fichier HTML Notez que dans le dernier exemple, les astérisques peuvent tout à fait être rendus par une autre navigateur ; en effet, il n’y a aucune numérotation derrière. Notez également que les postulats des titres (h*), qui ne sont pas des blocs, mais des lignes, ont été totalement revus en XHTML 2.0 (à l’avenir cepen­dant incer­tain). Les comp­teurs ne devraient donc plus être néces­saires (pour cette uti­li­sa­tion) dans cette nou­velle mou­ture du lan­gage par excel­lence du Web.

Voir aussi

  1. Télé­char­ger Opera
    • en ver­sion stable. Pré­fé­rez la ver­sion anglaise, la ver­sion fran­çaise étant très en retard
    • en ver­sion beta. La ver­sion 9 est en bêta, j’en ai fait une revue (pour la bêta 1) et c’est celle que j’utilise, preuve de sa stabilité
  2. D’autres articles sur Opera, sur ce blog
  3. Le blog de Laurent Denis, chantre francophone d’Opera et spécialisé dans l’accessibilité
  4. Wikipédia — Opera et Wikipédia — Liste des fonctionnalités du navigateur Opera
  5. Les pri­meurs d’Omniweb, où je glo­ri­fie un autre navigateur
  6. Des caption pour les listes, où je traite d’un autre pro­blème lié aux énumérations

Un (beau) titre et rien d’autre…

J’avais déjà signalé il y a quelques années com­bien je n’aime pas voir les h1 être uti­li­sés comme titre (le titre d’un cha­pitre, n’est pas le titre du livre, à la fin !) : Un title dans la page.

Rien de nou­veau, sauf une superbe mise en forme de la chose.

Title très bien mis en forme
  • un titre
  • du texte bidon
  • une mise en forme sur le titre (police Didot, bor­dure infé­rieure, letter-spacing, opacity, text-shadow)
  • un Mac pour affi­cher ça (il paraît que Linux s’améliore, et passe même devant Windows)

Si vous regar­dez atten­ti­ve­ment, vous ver­rez que der­rière le titre, ce n’est pas uni­forme ; eh oui, c’est le texte en trans­pa­rence (un demi-pourcent de trans­pa­rence ; ça n’a l’air de rien, mais en mou­ve­ment, ça se voit assez sans gêner la lecture).

J’avoue sans ver­gogne être assez fier de moi, pour le coup.

HTML
<title>Un titre, et rien d’autre</title>
CSS
head, head title {display:block} head title { 	background:white; 	border-bottom:10px solid #ddd; 	font:200% Didot,serif; 900 small-caps; 	left:0; 	letter-spacing:.2em; 	opacity:.95; 	margin-bottom:2em; 	padding:.6em 0; 	position:fixed; 	right:0; 	text-align:center; 	text-shadow:.1em .1em .1em #000 } body	{ 	font-family:Hoefler Text,Times New Roman,serif; 	line-height:1.6em; 	margin:0 2em; 	margin-top:8em }

On doit pou­voir virer cer­taines choses, mais je n’ai pas envie de chercher.

J’espère que ça vous plaît. Et que l’on ne me dise plus qu’un title, c’est moche !

Afficher le titre (title) dans la page

Vous viendrait-il à l’idée de ne pas mettre de chaus­settes1 sous pré­texte que les gens ne voient que les chaus­sures ? Ou d’inscrire Pre­mier cha­pitre dans un article qui n’en contien­dra jamais qu’un seul ? Lire la suite