Les plus assidus se souviennent peut-être de ma participation au concours de positionnement organisé par concours-seo en septembre dernier dont l’objectif était de placer le terme loupanthère sur le moteur de recherche Exalead lancé en octobre 2006 auprès du grand public.

Quelques mots sur Exalead

L’interface de recherche de ce moteur de recherche rappelle celle de Google tout en proposant une fonction d’ajout de raccourcis sous la forme de vignettes affichant la miniature de la page d’accueil sous le champ de recherche.

La sauvegarde de ces raccourcis nécessite l’ouverture d’un compte qui vous permet ensuite de personnaliser votre page d’accueil. Bon, ce genre de fonctions se généralisant un peu partout, je ne m’attarderais pas sur le sujet.

Ce qui est intéressant dans Exalead se trouve dans les résultats : à côté du résumé, on trouve une vignette de la page retournée, ce qui est bien utile et qui manque cruellement lorsqu’on retourne sur Google (qui garde quand même l’avantage de la rapidité). Sur la droite, on peut observer un encart qui rappelle les termes associés à votre recherche.

le concours, le concours !

Les concours de positionnement sont l’occasion de tester les stratégies et les algorithmes d’indexation des moteurs : importance accordée aux balises keywords, description et title, présence du mot-clé dans le nom de domaine ou sa répétition dans la page, etc.

Pour assurer une bonne place à ma loupanthère, j’ai misé sur la création du sous domaine loupanthere.css4design.com et sur la mise en place de quelques pages dans lesquelles le mot loupanthère sert de prétexte à des jeux de mots potaches comme Loupanthères-ta-gueule-à-la-récrée afin de tester les capacités humoristiques du moteur :)

Le journal détaillé des aventures de ma loupanthère commence le 26/09/07 pour finir le 30/11/2006, soit un peu plus d’un mois avant la fin du concours prévu le 2 janvier 2007.

Jusqu’à mi-octobre environ, ma page-concours s’est située grosso modo à la 16ème place. Content de ce résultat pour lequel je ne m’étais au final pas trop fatigué, je décidais de faire un break et de laisser ma loupanthère se débrouiller seule.

Presque un mois plus tard je lance le lien de contrôle et là… le cauchemar : à la 15ème position, l’annonce de ma loupanthère sur wikio a pris la place de ma page-concours. Arrgh !

Optimiste, je cherche un peu plus bas dans la page, puis dans les pages suivantes pour ne retrouver (aux alentours de la 64ème page) que la page journal de ma loupanthère et le billet écrit sur css4design pour annoncer ma participation au concours… snif snif…

Dépité, je décidais néanmoins de rebondir en écrivant un courrier à Exalead pour demander, sinon des explications, mais au moins un coup de pouce pour faire remonter un peu ma page dans les résultats… Heu… non, en fait c’est l’inverse ;)

Moins de 48 heures plus tard, j’ai la surprise de recevoir une réponse personnalisée qui m’explique que le nombre de loupanthères ayant augmenté, ma page s’est naturellement retrouvée dans les limbes de l’index…

Il n’empêche que personne ne m’enlèvera de l’idée que Wikio est un sacré coucou ! Et La prochaine fois que je fais un concours de positionnement en SEO, je ne l’annoncerais pas sur ce bidule ;)

Je remercie tout ceux sans qui…

Je profite de ce billet pour remercier celles et ceux qui ont boosté ma loupanthère en mettant un lien sur leur site : ma page loupanthère présente un PR5 de bon aloi qu’il serait dommage de gâcher : je la laisse donc sur le serveur.

Les sponsors

• Gameplayer Ascii Art Blog
• Le Blog Des Bois
• le blog de CAP°
• Barbablog, politique et webdesign
• Il est bien beau, le Barbayellow
• Le site perso d’Amaury
• Loupanthère de Ced’
• sonnerie loupanthere
• referencement gratuit
• Référencement instantané

globalwarming awareness2007

Je profite de la fin de ce billet pour donner un coup de pouce à Jan de Best Viewed With Googlebot qui participe au concours globalwarming awareness2007. Souhaitons-lui le meilleur car il le vaut bien ;)

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide téléologique concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100^ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

… ou comment sortir « téléologique¹ » du même chapô que « mashup² »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}

La position: relative n’est pas indispensable pour le centrage, mais permet d’initialiser les valeurs top et left à partir du point situé en haut et à gauche de notre container, et non plus à partir du coin supérieur gauche de la fenêtre du navigateur, comme c’est le cas par défaut, avec bien sûr, des différences entre les navigateurs.

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple »

De temps en temps, des webmasters s’affrontent pour placer un site en bonne position sur un moteur de recherche sur un mot-clé plus ou moins farfelu. Cette automne, l’objectif est de placer le plus haut possible le terme loupanthère sur le nouveau moteur de recherche Exalead. Ce moteur possède des fonctionnalités très intéressantes. Ce concours est l’occasion de les découvrir. Les détails du règlement sont disponibles sur Concours SEO ; les inscriptions s’effectuent sur Forum SEO, et la dead-line est prévue pour le 02/01/2007. Voici ma page pleine de Loupantères-iennes.

Jolie, cette loupanthère, non ?

En ce qui me concerne, j’ai mis tout mon kung fu en matière de SEO au service de la victoire dans une modeste page qui a comme intérêt de comporter le mot loupanthère, bien évidement ;). Voici le lien de contrôle officiel pour vérifier de temps à autre le placement des participants.

Si vous ne voulez pas vous inscrire, vous pouvez tout de même participer : sponsorisez ma loupanthère en mettant un lien sur votre meilleure page et en suivant les résultats bien au chaud. Ce lien serait de la forme loupanthère pointant sur http://loupanthere.css4design.com.

Mais rien n’interdit d’utiliser des mots composés, de la forme loupanthère-hyène, marie-loupanthère… Je vous fait confiance pour trouver mieux ;).

En échange, je vous inscris comme sponsor sur la page en question et vous ferais part des petits secrets qui font les bons ou les mauvais référencements lors de la remise des prix… Tout pour vous et tout pour rien, ou presque !