Optimiser l’ergonomie des formulaires web

August 16th, 2011

Les formulaires sont très fréquents sur les sites web et parfois complètement incompréhensible. Il existe une multitudes d’astuces pour améliorer la compréhension de ceux-ci, éviter que les utilisateurs fassent des erreurs et optimiser le durée nécessaire pour les remplir. Cet article présente plus de 60 astuces et recommandations avec des explications.

Structurer le formulaire

  • Dans le cas d’un formulaire pour se connecter, il est possible de faire apparaître le formulaire au survol ou avec un clic de souris. Si le design possède assez de place il est aussi possible de placer les champ pseudo + mot de passe directement dans le design d’un site web. Ça fait gagner du temps aux utilisateurs.
  • Lorsque le formulaire est long il est possible de le décomposer en plusieurs partie et de faire plusieurs pages distinctes.
  • Faire un nombre de pages réduit au minimum sur les formulaires qui font plusieurs pages. Ceci afin d’éviter de perdre du temps lorsque le formulaire est souvent utilisé et dans le cas où l’utilisateur à une faible connexion internet.
  • Les éléments liés doivent être proches les uns des autres. Si le formulaire est sur plusieurs pages, les éléments qui dépendent les uns des autres doivent être sur la même page. Si le formulaire est sur une page, les éléments liés doivent être visible sur le même écran sans avoir à scroller la page.

Choix des éléments à insérer

  • Ne pas utiliser le bouton “reset” (bouton pour réinitialiser le formulaire). Ce n’est pas parce que ce bouton peut exister qu’il doit forcément exister. Souvent les designers place ce bouton à côté de celui de validation du formulaire. Il en reste que l’utilisateur doit déterminer avec certitude quel bouton utiliser, car l’un valide le formulaire tandis que l’autre bouton détruit tout et il faut tout recommencer.
  • Ne pas utiliser de bouton “annuler” pour la même raison. Si c’est vraiment nécessaire il faut plutôt utiliser un bouton “retour”. Attention à ne pas confondre le bouton “retour” et “annuler” sur un formulaire de plusieurs pages. Si c’est vraiment nécessaire il faut songer à mettre un message de confirmation au cas où l’utilisateur clique dessus par erreur.
  • Si on utilise un bouton “retour”, il faut le mettre sous la forme d’un lien d’action secondaire. Le bouton d’action primaire reste le bouton d’envoi du formulaire. Il faut veiller à ce que le bouton d’envoi soit un bouton, tandis que l’action secondaire est un lien.
  • Afficher un minimum de champ à compléter. Voici une liste d’exemple possible:
    • Pour inscrire une date de naissance il est préférable d’avoir un seul champ à remplir (exemple au format JJ/MM/AAAA) plutôt que 3 champs distincts (pour le jour, le mois et l’année). Pour une date il est même conseillé d’afficher un calendrier pour choisir la date.
    • Utiliser un seul champ pour remplir le nom et le prénom (mais ça dépends des cas bien sûr).
  • Ne pas doubler les champs. Par exemple des formulaires demandent de re-écrire l’email pour s’assurer qu’il n’y a pas eu d’erreur (idem pour le mot de passe). Il est préférable d’afficher une fois chaque champ.
  • Sur un site d’ecommerce, permettre de pré-remplir l’adresse de livraison à partir de l’adresse de facturation d’un simple clic.
  • Lorsqu’il faut demander l’age d’un visiteur (cf. pour du contenu pour adulte), le plus simple et rapide consiste à demander l’age du visiteur en utilisant un champ où l’utilisateur entre son age à la place de la date de naissance. Tous les formulaires qui demandent une date de naissance sont trop fastidieux.

Positionnement des éléments

  • Lister les champs les uns au dessus des autres. De même il convient de placer le label du champ juste au dessus de la zone à compléter. Un tel placement des éléments permet de scanner plus facilement et rapidement le formulaire pour les raisons suivantes:
    • L’utilisateur vois clairement s’il a oublié de remplir des champs.
    • L’œil n’a pas besoin de faire de zig-zag.
    • Ça respecte plus facilement la loi de proximité (cf. les éléments proches sont en rapport les uns des autres).
    • Ça respecte mieux la loi de Fitts.
comparatif de placement des éléments sur un formulaire
Comparatif de placement des éléments sur un formulaire web.
  • Placer le bouton d’envoi en bas à droite si c’est un formulaire de plusieurs pages ou de plusieurs sections. C’est mieux car l’œil du visiteur parcours la page en formant un “Z”. De plus, nous lisons de la gauche vers la droite et de haut en bas, donc le bouton d’envoi est la dernière chose qui est vu par l’utilisateur. Si le bouton est situé à gauche (par exemple) le regard de l’utilisateur est obligé de retourner en arrière pour revenir sur ce bouton (ce qui fait perdre du temps).
  • Aligner à gauche le bouton d’envoi si c’est un formulaire simple d’une seule page. Ça associe le bouton avec les champs (qui sont aussi alignés à gauche) et ça évite que le visiteur perde du temps à chercher le bouton sur l’écran.
  • Centrer le bouton d’envoi n’est pas recommandé, sauf s’il fait toute la largeur du formulaire.
  • Si possible, placer tout le formulaire au dessus du pli et mettre le bouton d’envoi au dessus du pli également.
  • Dans le cas où il s’agit d’un formulaire important (exemple: formulaire pour acheter un produit) il faut placer le call to action au dessus et en dessous du pli.

Call to action

  • Le bouton de validation doit avoir un intitulé personnalisé (exemple: “s’inscrire”, “créer un compte”, “envoyer le message”, “commander”, “valider ma commande” …). Un bouton intitulé “Ok” ou “Envoi” ne veut pas signifier grand chose. Indépendamment du formulaire un bouton “ok” ne peut même pas être compris par les utilisateurs. Ils doivent même réfléchir avec attention pour prédire ce que le bouton va faire afin d’éviter d’effectuer une mauvaise manipulation.
  • Utiliser un poids visuel sur le bouton primaire. Différencier ce poids visuel entre le bouton primaire (exemple: “envoyer”) et le bouton secondaire (exemple: “retour”). Il est possible d’utiliser une couleur sur le bouton principal et du gris (ou autre couleur neutre) sur le bouton secondaire.
Exemple de poids visuel sur le bouton primaire
Exemple de poids visuel sur le bouton primaire.
  • Si le bouton primaire est une action irrémédiable qui peut causer du tort (exemple: supprimer son compte utilisateur), il est préférable de mettre le poids visuel sur le bouton secondaire (le bouton “retour” ou “annuler”) plutôt que sur le bouton primaire (bouton “supprimer”).
  • Utiliser des liens pour désigner les actions qui font l’inverse d’un bouton. Par exemple pour publier du contenu: faire un bouton “Publier ce contenu” et un lien “Supprimer ce contenu”. Placer le bouton et le lien à proximité, mais pas trop proche pour éviter les erreurs si l’utilisateur clique par inadvertance sur le lien.
  • Désactiver un bouton lorsqu’il n’est pas utilisable. Par exemple le bouton d’envoi ne peut pas être utilisé si certains champs requis ne sont pas rempli (évite indirectement certains problèmes de spam).
  • Ne pas cacher un bouton inactif. Ça surprend l’utilisateur lorsque le bouton apparaît, celui est susceptible de se demander s’il doit relire toute la page pour voir si d’autres éléments sont apparut et il arrive que l’utilisateur ne vois même pas le bouton apparaître (car il avait déjà scanné la page).
  • Utiliser un design spécifique pour montrer lorsqu’un bouton est inactif. Cette astuce est pratique pour ne pas afficher un bouton d’action de la même façon si on peut l’utiliser ou non. Le plus souvent il convient d’utiliser une couleur saturé ou neutre pour désigner le bouton en mode inactif.
  • Faire des boutons qui ressemblent à des boutons. Utiliser un effet de 3D, une ombre et des coins arrondis pour que ça paraisse plus réel.
  • Faire de gros boutons (mais pas trop gros non plus) avec des couleurs à fort contraste comparé au reste du design.
  • Utiliser des mots qui expriment le côté urgent et important (exemple: “S’inscrire immédiatement”, “Demander un devis gratuit”, “Acheter maintenant” …). Autoriser des mots plus modérés dans certains cas pour éviter de faire fuir un visiteur (exemple: “Essayer la démo gratuitement”, “Tester sans engagement pendant 5 jours” …)
  • Si l’intitulé du bouton fait 1 ou 2 mots: utiliser des majuscules au débuts des mots. S’il y a plus de 2 mots ou 3 mots, utiliser une majuscule pour le premier mot puis que des minuscules.
  • Utiliser une icône dans le bouton (en plus de l’intitulé du bouton) pour illustrer le résultats de l’action (exemple: petit flèche vers la droite si le bouton envoi l’utilisateur sur une autre page, petite enveloppe si ça envoi un email …).

Compléter le formulaire

  • Pré-remplir les champs lorsque c’est possible. Par exemple, si l’utilisateur a entré son code postal, il est possible de pré-remplir la ville et le pays. Il est aussi possible de pré-remplir le pays grâce à l’adresse IP du visiteur (voir le tutoriel “Connaître le pays d’un visiteur avec son adresse IP“).
  • Suggérer une liste de résultats à l’aide des premiers caractères déjà entrés par l’utilisateur. Très pratique pour gagner du temps et éviter les erreurs lorsqu’il faut remplir un champ “ville” ou “pays”. Sinon, faire une liste déroulante (un peu moins bien). Il faut éviter de laisser l’utilisateur entrer lui-même un tel champ. Si l’utilisateur entre lui-même ce champ, il faut vérifier s’il y a une erreur (notamment les erreurs de frappes).
Capture de Google suggest
Utilisation de Google suggest qui suggère une liste de mots-clés vis-à-vis des premiers caractères entrés.
  • Sur un formulaire pour se connecter: autoriser l’utilisateur à se connecter avec une adresse email ou un pseudo. S’il se souvient de l’un mais pas de l’autre, c’est un gain de temps pour lui.
  • Sur un formulaire pour se connecter: autoriser l’utilisateur à se connecter avec ses identifiants Facebook, Google, Twitter, OpenID …

Utilisation du formulaire

  • Pré-sélectionner le premier champ du formulaire automatiquement.
  • Utiliser la balise HTML label. Cette balise permet de faire en sorte que si l’ont clique sur le texte qui labellise un champ, ça sélectionne automatiquement le champ associé ou coche la case associée.
  • Ajouter un effet au survol de la souris sur les boutons. Permet de mieux comprendre qu’un bouton est un bouton et que c’est un élément dynamique qui va effectuer une action.
  • Ajouter un effet au survol de la souris sur les champs à remplir (champ texte, case à cocher …). Permet de mieux associer les labels avec leurs champs associés. Dans le cas d’une case à cocher, c’est aussi pour mieux définir la zone cliquable (cf. le label de la case).
  • Afficher en surbrillance un champ lorsqu’il est sélectionné. C’est pratique pour visuellement voir quel champ est actif, notamment lorsque le visiteur navigue sur le formulaire avec un clavier. Si l’utilisateur quitte des yeux le formulaire puis retourne dessus, il perd moins de temps à savoir où il était rendu et déterminer quel champ était actif.
  • Afficher une aide pour chaque champ qui le nécessite. Le petit message d’aide doit être situé à proximité du champ concerné. S’il le faut, il ne faut pas hésiter à afficher un schéma ou une petite image. Par exemple pour les trois chiffres aux dos d’une carte bleu, il est possible d’afficher un schéma qui indique où sont situé ces chiffres sur la carte bancaire.
  • L’aide associé à un champ peut s’afficher automatiquement lorsque celui-ci est sélectionné. Il est aussi possible de placer un lien “aide” ou une icône “icône aide” et d’afficher les explications au survol de la souris. Il ne faut pas faire de lien cliquable car l’utilisateur peut avoir peur de perdre les informations déjà remplis si le lien ouvre une nouvelle page. Certes, certains liens ouvrent des pop-up, mais l’utilisateur ne peut pas le prédire et par défaut il a peur de perdre tout le travail qu’il viens juste de faire en remplissant chaque champ un à un.
  • Remplacer les captcha anti-robot par d’autres solutions plus ergonomiques. Il est possible d’afficher une case à cocher “je ne suis pas un robot”. Cette case peut être générée en javascript pour éviter que les robots ne la lise. Il est aussi possible de cacher un champ intitulé “nom” au visiteur avec du CSS. Les visiteurs ne voient pas le champ qui est caché donc le laisse vide. En revanche les robots voient un champ intitulé “nom” donc il le remplisse par un nom aléatoire par défaut. Il suffit ensuite de valider le formulaire que si le champ reste vide (sinon c’est forcément un robot). Enfin, pour renforcer la sécurité pour éviter le spam il est possible d’empêcher a validation d’un formulaire si celui-ci est rempli en moins de 2 secondes (par exemple).
  • Possibilité d’indiquer l’intitulé des zones textuelles à l’intérieur du champ à compléter. Il faut que le nom du champ soit en gris sur fond blanc (ou texte avec couleur saturé selon le design). De plus, ce nom doit disparaître lorsque le champ est sélectionné et ré-apparaître si le champ est vidé.
comparatif de placement des libellés d'un formulaire
Comparatif de placement des libellés sur un formulaire web.
  • Si le nom du champ est à l’extérieur de la zone de texte, à l’intérieur il est possible d’indiquer la façon dont le texte doit être formaté. Voici des exemples:
    • S’il faut écrire une date, il est possible d’écrire en gris dans le champ: “JJ/MM/AAAA”.
    • Si l’utilisateur doit entré un numéro de téléphone d’une certaine façon, à l’intérieur du champ il est possible d’inscrire en gris: “+33 212345678″.
  • Si l’intérieur du champ est vide, il est possible d’écrire dedans si le champ est optionnel.
  • Ne pas utiliser d’astérisque rouge pour désigner les champs obligatoire. Ça rempli le formulaire de bruit visuel et parfois il n’y a même pas de légende pour expliquer à quoi ça correspond. A la place il est suggéré d’écrire avec du texte si les champs sont requis ou non. La meilleure solution consiste plutôt à indiquer seulement lorsque les champs sont optionnels (cf. voir astuce précédente).
  • Le formulaire ne devraient pas attendre le dernier moment pour vérifier l’intégrité des informations de chaque champs. Si l’utilisateur indique un nom d’utilisateur qui existe déjà, le formulaire devrait lui indiquer une erreur juste après avoir rempli le champ (avant qu’il ne soit trop loin sur le formulaire). Pour cela il est possible de vérifier les champs juste au moment où le champ est dé-selectionné (c’est-à-dire lorsque l’utilisateur passe au champ suivant). Chaque élément devrait alors avoir une petite indication visuelle pour savoir s’ils y a une erreur ou non (exemple une icône Famfamfam icône ok ou icône erreur).
  • Choisir judicieusement les intitulés des éléments et les types de champs (bouton “radio” différent des checkbox”).
  • Afficher un calendrier lorsqu’il faut choisir une date. Ça évite tout problème de mauvaise saisie de la date et c’est plus facile et rapide à utiliser.
  • Ne pas masquer les mots de passe par des étoiles. C’est plus compliqué de se rendre compte d’une erreur. A la place, faire un bouton pour que l’utilisateur cache son mot de passe quelque seconde après l’avoir entré. Ou alors afficher les caractères pendants quelques millisecondes puis les remplacer à l’écran par des étoiles.

Design

  • Bien utiliser la loi de proximité pour montrer aisément les éléments qui sont en rapports et ceux qui sont complètement différents.
  • Éviter trop de bruit visuel. Garder un design sobre pour ne pas distraire inutilement les utilisateurs. Faire en sorte que le formulaire soit lisible: bon contraste, police d’écriture adapté au format web avec une taille de caractère raisonnable.
  • Lorsque le formulaire est découpé en plusieurs zones, penser à utiliser une ligne de séparation ou des couleurs distinctes pour bien délimiter les zones.
  • Idéalement il faut grouper les champs par petit groupe de 5 éléments environ. L’accroche visuelle est ainsi mieux réalisée.
  • Adapter la taille des champs à ce qu’ils peuvent contenir. Un champ “age” contient 1 à 3 caractères, donc il faut faire un petit champ. A l’inverse le champ “nom” doit être plus long car il peut parfois contenir plus de 20 caractères. Éviter de faire un champ trop petit par rapport à ce qu’il va contenir car c’est agaçant de devoir “scroller” à l’intérieur d’un champ texte. C’est aussi bien valable pour les champs une ligne (input text) que les champs de plusieurs lignes (textarea). Par exemple sur une page de contact, le champ qui contient le message doit être assez grand au cas où le visiteur souhaite écrire un long message.
comparatif de la taille des champs sur un formulaire
Comparatif de la taille des champs sur un formulaire.
  • Sauvegarder automatiquement les informations déjà saisie ou proposer une option pour le faire. Afficher cette option lorsque le visiteur souhaite quitter le formulaire. C’est particulièrement pratique lorsque les formulaires font plusieurs pages.
  • Faire des cases à cocher assez grandes. Au mieux il faut les faire plus grandes que la souris.
  • A la place d’une simple case à cocher pour s’inscrire à la newsletter, proposer à l’utilisateur l’aperçu d’une newsletter pour qu’il sache à quoi s’attendre. Si vous souhaitez être un site de qualité, il ne faut pas pré-cocher la case d’inscription à la newsletter.

Avant/pendant/après l’envoi

  • Si c’est un formulaire important qui n’est pas modifiable après (exemple: demande de visa, paiement sur un site d’e-commerce …) alors faire une page qui récapitule les informations avec la possibilité de modifier et/ou de retourner sur les pages précédentes.
  • Afficher un message après l’envoi du formulaire pour savoir si l’action à bien été réalisée. Dans le cas d’un formulaire important, ré-afficher les informations saisies avec possibilité d’imprimer la page.
  • Dans certains types de formulaire, tel qu’un formulaire pour se connecter à un site, il faut rediriger le visiteur automatiquement sur la page où il était avant de se connecter. Si le formulaire de connexion redirige le visiteur sur la page d’accueil alors l’internaute est perdu et doit essayer de retrouver lui-même la page où il se situait (ce n’est pas pratique).
  • Sur un formulaire d’inscription il est possible de demander un pseudo d’utilisateur après que celui-ci se soit inscrit.

Gestion des erreurs

  • Faire des formulaires les plus intelligents possible pour éviter des petites erreurs courantes. Il est par exemple possible de comprendre lorsqu’un numéro de téléphone n’est pas entré dans le bon format (exemple: “06.12.34.56.78″, “06-12-34-56-78″, “06 12 34 56 78″, “0612345678″ ou même “+33(0)6.12.34.56.78″)
  • Penser à toujours afficher les erreurs et à les expliquer. Ne pas afficher de messages en anglais ou de messages techniques.
  • Indiquer visuellement où se trouve l’erreur si ça concerne un champ en particulier. Et donner des explications pour résoudre le problème à proximité du champ erroné. Par exemple, si la date n’est pas entrée au bon format, alors indiquer quel format il faut utiliser.
  • Ne pas vider tout le formulaire lors d’une erreur. Les développeurs web doivent aussi penser à retirer les backslashs avant les guillemets (ils comprendront).

Bon courage pour la réalisation de vos formulaires. Vous n’avez maintenant plus d’excuses pour faire des erreurs d’utilisabilités sur ce type de pages. Et n’hésitez pas à partager cette page à vos collègues.

Article original: Optimiser l’ergonomie des formulaires web.


Balise canonical: éviter le contenu dupliqué

August 16th, 2011

Pour optimiser le référencement d’un site, il faut éviter le contenu dupliqué. C’est-à-dire éviter d’afficher le même contenu sur plusieurs pages (ou plusieurs URL). Pour lutter facilement contre ce phénomène il existe une balise dites canonique qui est lue par les moteurs de recherche.

L’intérêt de cette balise c’est d’indiquer à Google et Bing quel est l’adresse unique d’un contenu. De cette façon, même si un contenu est dupliqué, les moteurs savent quels pages privilégier parmi tout une liste de contenu identique (ou similaire).

Problèmes du contenu dupliqué

Le contenu dupliqué, aussi appelé “duplicate content” est un véritable cauchemar pour les moteurs de recherche. Chaque contenu dupliqué fait perdre inutilement de la place dans leurs bases de données. Sachant que Google indexe plusieurs milliers de milliards de pages, le soucis est réel!

En plus du problème de place, les moteurs ont pour devoir de proposer des résultats pertinents à leurs visiteurs. Or, ils est très difficile pour eux de déterminer quels pages doivent être présentées aux visiteurs s’il existe des dizaines de version d’un même contenu. D’autant plus qu’il n’y a aucun intérêt à présenter 20 fois le même contenu dans les résultats de recherche.

Solutions pour éviter le duplicate content

Avant même de parler de la balise canonical, il convient de limiter en amont les causes du contenu dupliqué. Il faut par exemple éviter de copier volontairement un même gros contenu à afficher sur plusieurs pages. Chaque page d’un site doit avoir un contenu unique et pertinent.

S’il y a pour une raison ou pour une autre une page qui est disponible sur plusieurs adresse, il faut choisir qu’une version et effectuer une redirection permanente de toutes les versions dupliquées vers la version unique de ce contenu. Cette solution est à privilégier avant même de vouloir utiliser la balise canonical.

Il n’y a que certains cas où il n’y a pas d’autres possibilités que d’utiliser la balise canonical. Cela inclue les scénarios suivants:

  • Si les identifiants de session sont passés en paramètre.
  • S’il y a des paramètres pour le tracking des visiteurs. C’est le cas pour certains agrégateurs RSS qui ajoutent des paramètres aux URLs pour que les sites web savent que le visiteurs est venu à partir de tel ou tel agrégateur. Si un internaute fait un lien vers l’article avec le paramètre de tracking ça deviens une nouvelle URL. Mais aux yeux des moteurs de recherche, s’il y a la balise canonical il n’y a qu’une seule adresse.
  • Si pour une raison technique il n’est pas possible d’utiliser une redirection permanente. C’est le cas notamment pour certains logiciels de création de site web.
  • S’il y a un tableau (exemple: pour afficher des produits) et qu’il y a plusieurs URLs pour trier les résultats de façons différentes. Par exemple pour classer par ordre croissant ou décroissant ou pour choisir la colonne sur lequel s’effectue le tri.

Pour tous ces cas, la balise canonical est l’allier de force pour optimiser le référencement des pages web concernées.

A savoir: il convient de lire l’article pour éviter le duplicate content simple afin de limiter l’utilisation abusive de la balise canonical dans certains cas.

Utiliser la balise canonique

L’utilisation de cette balise est simple. Il suffit d’insérer le code suivant dans le des pages web concernées par le duplicate content:

Code:
<link rel=”canonical” href=”http://www.example.com/ma-page.html” />

L’adresse en rouge doit être l’URL de la page avec le contenu unique. Quelques petites règles à savoir sur cette URL:

  • Il est possible d’inscrire l’URL d’un site externe. C’est pratique par exemple pour éviter le duplicate content entre plusieurs versions d’un site (différents noms de domaine ou sous-domaine, site disponible avec sans le sous domaine “www” …).
  • L’URL peut être relative ou absolue. C’est à dire commencer par “http://” ou faire le lien selon l’emplacement du répertoire (exemple: “../../dossier/ma-page.html”. Il est toutefois recommandé d’utiliser une URL absolue (commencer par http://).

Erreur à ne pas faire

Attention, il convient de bien comprendre l’utilisation de cette balise car utilisée à mauvais escient elle peu nuire au référencement. Il faut bien comprendre que pour les moteurs de recherche, la balise fait en quelque sorte une redirection vers l’URL indiquée dans la balise. Voici une liste d’erreurs à éviter:

  • Faire pointer toutes les balises canonical d’un site sur une seule page (exemple: la page d’accueil). Ca serait désastreux pour le référencement de tout le site (sauf la page d’accueil).
  • Insérer une URL qui n’existe pas.
  • Indiquer l’URL d’un mauvais site externe. Cela aurait pour effet d’optimiser le mauvais site! Pour cette raison, il ne faut pas se faire duper par un webmaster ou référenceur qui vous demande d’insérer l’URL d’une de ses pages. Et il faut aussi éviter de se faire pirater son site web, car des petits malins place des balises canonical avec l’URL de leurs sites web!

Pour obtenir d’autres conseils sur le référencement, il est possible de consulter le dossier sur le référencement disponible sur ce site. Bonne lecture.

Article original: Balise canonical: éviter le contenu dupliqué.


SyntaxeHl 1.1.3

October 1st, 2010

Cette nouvelle version de SyntaxeHl corrige les différents bug qui subsistaient dans la précédente version. Elle a également été mise en conformité avec le nouveau système de settings de Dotclear 2.2 et embarque la dernière version de Geshi (1.0.8.8).

Vous la trouverez sur le dépôt de plugins de code-web.org et sur dotaddict.org.

Pour le… Lire SyntaxeHl 1.1.3

DotPoll 1.0.7

October 1st, 2010

Cette nouvelle version corrige le problème de l’identification par IP qui ne pouvait pas être activée par l’interface de configuration du plugin.

Le système de publication / dépublication des sondages a, pour le moment, été retiré. Il avait été implémenté en prévision de futures fonctionnalités mais il n’a, en attendant, aucun sens. Tous les… Lire DotPoll 1.0.7

La Pyramide Inversée

October 1st, 2010

La pyramide inversée est un concept, utilisé en rédaction, qui consiste à placer les informations générales en haut de pages et au fur et à mesure de page les informations deviennent plus précises et détaillées. Cette méthode rédactionnelle est particulièrement adaptée au format web. Cet article présente ses avantages et les méthodes pour la mettre en pratique.

pyramide inversée

Intérêts

Initialement emprunté au monde journalistique, la méthode la pyramide inversée à trouvée sa place sur le web pour diverses raisons:

  • Les internautes sont pressées et veulent l’information rapidement. Placer les informations importantes en haut de l’article permet de donner rapidement les informations à ceux qui les veulent. Au fil d’un article, les internautes peuvent quitter la page, ils auront tout de même saisie les informations importantes
  • Le visiteur n’a pas besoin d’arriver en bas d’une page pour savoir si c’est la page qui l’intéressait. Dans le cas où l’internaute provient de Google, la page ne correspond peut-être pas à ce qu’il désire. Grâce à la pyramide inversée il saura tout de suite s’il doit poursuivre sa lecture ou non
  • Sur le web, quelques rares utilisateurs ne scroll pas (ou pas souvent). Pour cette raison, il est judicieux de placer les informations importantes au dessus du pli
  • En général il faut expliquer les généralités avant d’élaborer un sujet. Cela permet de s’assurer que tout le monde a les bases requises pour comprendre le contenu présenté sur la page (particulièrement vrai sur les pages associé à une thématique spécifique)
  • Meilleur accessibilité du contenu. Le premier paragraphe (chapeau) explique facilement et simplement le contenu. Les visiteurs qui utilisent un lecteur d’écran peuvent zapper dès le début s’il s’avère que ce n’est pas le contenu qu’ils désiraient

Principes de bases

L’idée fondamentales consiste à classer le contenu du plus général au plus détaillé, de l’essentiel au négligeable. Métaphoriquement, il est ainsi possible d’organiser le contenu en trois parties principales:

  • Chapeau: texte court qui résume l’article. Doit donner envie de lire le reste de l’article. Idéalement ça réponds aux questions: Qui? Quoi? Où? et Quand?
  • Corps du contenu: présente les informations. A l’intérieur du corps du contenu, il est toujours possible d’organiser du plus général au plus précis. Peut répondre plus en détail aux questions “Qui? Quoi? Où? et Quand?”. Si cela s’applique, peut répondre à: Comment? Combien? et Pourquoi?
  • Détails: petites informations accessoires qui sont relatifs au contenu mais qu’il n’était pas nécessaire de placer au milieu de la page. Peu inclure les sources liées à l’article, la présentation de l’auteur, les articles relatifs, les liens pour promouvoir l’article …
Schéma pyramide inversée
Schéma de la pyramide inversée

Applications à différentes échelles

Le concept de la pyramide inversée peut être appliqué à divers niveau. Cela ne concerne pas nécessaire un article ou une page, mais peu s’appliquer à une échelle plus large ou au contraire plus petite.

Site web

Un site utilise souvent la pyramide inversé pour présenter son contenu. La page d’accueil est très généraliste, puis plus une page est profonde dans la hiérarchie et plus le contenu sera détaillé et spécialisé (exemple: accueil > catégorie > sous-catégorie > page de contenu).

Page ou article

Au sein d’une page ou d’un article, la structure de la pyramide inversée peut être utilisée. Certains considèrent que c’est en quelque sorte la conclusion qui est écrit au début de l’article. Pour cette raison, il est intelligent d’écrire un article et de finir par le chapeau (qui est similaire à une conclusion).

Phrase

A l’intérieur même des phrases il est possible d’utiliser le principe de la pyramide inversée, en plaçant les mots importants au début. Ceci est particulièrement important pour les messages courts tels que les titres ou les textes d’introduction.

Cela est recommandé car les internautes ont tendance à scanner les informations. Dans une foule de d’informations (exemple: liste d’articles) seuls les premiers mots peuvent être regardé.

Conseil: il peut être recommandé d’utiliser la forme active plutôt que la forme passive.

Limite

Bien que ce concept soit souvent utilisé sur les sites d’actualités, cela ne s’applique pas à tous les types de site et de leur contenu. Les cas les plus fréquents auxquels la pyramide inversée ne s’applique pas sont les suivants:

  • Les pages où l’ordre est important (tutoriel, forum …). Par exemple, cet article ne suit pas vraiment les propres conseils évoqués
  • Les pages qui présentent les informations sous forme de récit
  • Les contenu qui présente l’information sous un ordre bien définit, tel que l’ordre alphabétique (glossaire, dictionnaire …), l’ordre chronologique (exemple: liste de mises à jour) ou l’ordre antéchronologique (exemple: blog)

Article original: La Pyramide Inversée.


Comment fonctionne un moteur de recherche?

October 1st, 2010

Le web est constitué de plusieurs milliards de documents. Les internautes peuvent utiliser les moteurs de recherche pour trouver une ressource parmi cette jungle. La méthodologie utilisée par les moteurs de recherche est présenté d’une manière simple dans cet article.

Comment un moteur de recherche trouve les pages web?

Loupe qui cherche les informations

Les moteurs de recherche (Google, Yahoo ou encore Bing) utilisent des robots, intitulés crawlers ou spiders dans la langue de Shakespeare. Ces robots sont des processus informatiques qui se contentent de lire une page web, d’y extraire les liens et d’aller visiter ultérieurement les liens trouvés. En suivant les pages, de liens en liens, ces robots sont capables de visiter pratiquement tout le web.

Malgré la puissance de ces crawlers, il y a certaines limitations:

  • Il n’est normalement pas possible pour ces robots de trouver une page orpheline (page qui ne reçoit aucun lien)
  • Le web étant si grand, les robots ne peuvent tout indexer et mettre à jour rapidement. Selon le moteur de recherche et la méthodologie qui lui est associé, une page peut être revisitée quelques heures après sa publication ou plusieurs mois après

A titre d’exemple, le moteur de recherche Google utilise un principe simple lorsqu’il découvre des nouvelles pages: s’il découvre une page lambda il l’a met dans une file d’attente et ira la visiter quand il aura le temps. Si ce même robot trouve un autre lien vers cette page, alors il met l’adresse de la page dans une liste d’attente prioritaire. Le robot se contente ensuite de visiter les pages prioritaires et les autres pages ne sont visitées qu’ultérieurement lorsque le spider à un peu plus de temps.

En vue de ces raisons, il est possible de faire un petit constat:

  • Un site qui ne reçoit aucun lien sera plus difficilement trouvé par les moteurs de recherche
  • Les modifications apportées sur un site web ne sont pas répertoriées instantanément sur les résultats d’un moteur de recherche. Il faut alors une autre visite des robots (peut-être une semaine plus tard)

Comment les pages sont sauvegardées?

Engrenage d'une machine

Une fois qu’un robot à visité une page, il va l’enregistrer dans des énormes data-center. Ces derniers enregistrent ainsi des milliards et des milliards de pages web.

L’étape suivante consiste pour le moteur de recherche d’extraire les informations et des les indexer. Sachant que les robots ne sont que ces processus information, ils sont en général capables de lire uniquement le contenu textuel. Il est compliqué et fastidieux pour un processus informatique d’essayer de lire le contenu textuel incluant sur une image ou de reconnaitre les mots d’une bande son.

Le processus qui consister à enregistrer les informations dans un index est fort simple à comprendre. En langage informatique, un index est similaire au principe des index utilisé dans les livres. L’index recense les mots et l’endroit où ils sont présents. Par exemple, l’index peut indiquer que le mot “bonjour” est utilisé sur les pages 12, 34, 35 et 57. Cela sera ultérieurement utilisé pour gagner du temps lorsqu’un visiteur effectuera un requête.

Les index ne listent cependant pas tous les mots. Les skip words (ou “stop words) désignent des petits mots très souvent utilisés, qui ne sont pas indexé en raison de leur utilisation très commune. Parmi ces petits mots, il y a par exemple: “le”, “la”, “du”, “à” et plusieurs autres du même genre.

Il est aussi important de savoir que le moteur de recherche Google possède deux index. L’un est consacré aux pages principales de confiance et le second est un index supplémentaire concernant des pages avec un contenu dupliqué, un contenu insignifiant, un contenu peut-être de très mauvaise qualité (possibilité que ce soit du spam) ou diverses raisons. Sans nul doute, ce sont les pages présentes sur l’index principal qui seront les plus visibles dans les résultats de recherche.

Pour finir, il est judicieux de savoir que toutes les pages ne seront pas sauvegardées. Certaines pages provenant de site illégaux ou pratiquant de très mauvaises pratiques, seront tout simplement blacklistés. Dans ce cas de figure, un moteur de recherche mémorise l’adresse de la page (ou du site) pour l’ignorer s’il découvre un lien vers le site ultérieurement. Pour cette raison, il faut faire attention lors de l’achat d’un nom de domaine que ce nom de domaine ne soit pas “blacklisté“.

Comment un engin de recherche classe les résultats?

Lorsqu’un internaute effectue une recherche, il y a souvent des millions de pages qui possèdent le mot recherché. Pour cette raison, les moteurs doivent classer les résultats par pertinence. Les utilisateurs d’un moteur de recherche doivent facilement trouver le résultat qui répondra à leurs attentes.

Il y a deux grands critères qui influent le classement des résultats: la pertinence de la page vis-à-vis des mots recherchés et la popularité de la page. Des centaines de critères peuvent être pris en compte, tous ne seront pas décrit, voici juste une petite liste de certains critères:

  • Évaluer la pertinence: le mot-clé est-il présent dans le titre? dans l’URL? dans le contenu? Y’a t-il des synonymes du mot recherché dans le contenu? …
  • Évaluer la popularité: est-ce que la page reçoit beaucoup de liens? Ces liens proviennent-ils de pages elles-mêmes populaires? Les pages faisant des liens ont-elles la même thématique? Les sites qui font des liens vers cette page sont-il dans la même langue? Sont-ils des sites de confiance? …

Malgré ces deux principaux facteurs influant sur les résultats, des critères alternatifs font leurs apparitions. Par exemple, le moteur de recherche Google base maintenant ses résultats selon la localité du visiteur et selon l’historique des précédentes recherches effectuées par l’internaute.

Pourquoi les pages de résultats sont si rapides?

Il y a quelques petites choses à savoir sur le fonctionnement d’un moteur de recherche lors d’une requête. La première chose à savoir c’est que le moteur de recherche ne cherche pas sur le web, mais cherche plutôt sur ce qui est connu des moteurs de recherche et indexé. Ensuite, le moteur de recherche utilise le principe des index. Pour utiliser une analogie, c’est comme s’il utilisait l’index d’un livre pour chercher les pages qui contiennent le(s) mot(s) recherchés.

Contrairement à une pensée commune, certains moteurs de recherche tel que Google, n’utilisent pas un super ordinateur. A la place, c’est un réseau de très nombreux ordinateurs à capacités normales qui est utilisé. Les performances sont beaucoup plus notables. Pour faire une analogie, c’est comme si Google demandait à un groupe de 20 personnes de regarder l’index d’un livre chacun. C’est plus efficace que de demander à une seul personne (aussi brillante soit-elle) de lire seul l’index de chacun des 20 livres.

Finalement, les moteurs de recherche ont une astuce secrète pour fournir des résultats encore plus rapide. Sachant que certaines requêtes sont très populaires (exemple: “Facebook”, “Youtube”, “Vidéo”, “TV”, “Jeux” …), les moteurs préparent à l’avance les résultats. Ainsi, ils donnent directement les résultats sans nécessairement avoir à chercher dans l’index.

Comment un moteur de recherche gagne de l’argent?

La méthode la plus commune pour un moteur de recherche pour gagner de l’argent, consiste à afficher des résultats sponsorisés lors d’une recherche. Des sites web payent donc les moteurs pour que leur site soit en tête de certains résultats, mais uniquement dans la partie réservée aux résultats sponsorisés.

Le moteur de recherche Google affiche des annonces à droites des résultats de recherches dits naturels et parfois en haut des résultats, comme le montre la capture d’écran ci-jointe:

Résultats naturels et résultats sponsorisés sur Google
Résultats naturels et résultats sponsorisés sur Google

Comment améliorer la visibilité d’un site sur un moteur?

Il y a deux manières d’obtenir une bonne visibilité sur les moteurs de recherche. La première consiste à utiliser des méthodes de référencement naturel. Cela consiste à utiliser des méthodes de bonnes pratiques pour qu’un site obtienne un bon positionnement dans les résultats de recherche. Ces techniques mettent du temps à porter leurs fruits mais sont avantageuses sur le long terme.

La deuxième manière consiste à payer pour avoir une page dans les résultats sponsorisés. Pour le moteur de recherche Google, il faut utiliser le service Google AdWords. Le positionnement des annonces dans les résultats sponsorisés est basé sur un système d’enchère.

Il est également possible d’utiliser des méthodes de référencement dites black hat. Cela consiste à exploite les failles des algorithmes des moteurs de recherche pour tenter d’être bien placé dans les résultats de recherche. Ces techniques ne sont pas appréciées par les moteurs. Dès lors, si un moteur arrive à détecter une méthode de référencement black hat, il peut pénaliser le site (certains sites peuvent être blacklistés).

Article original: Comment fonctionne un moteur de recherche?.


Optimiser le chargement des images web

October 1st, 2010

Les images sur un site web peuvent tout aussi bien embellir les pages web, que ralentir la vitesse de chargement des pages. Cet article présente une série d’astuces permettant d’accélérer l’affichage des pages web en optimisant le poids des images ou en utilisant des astuces avancées.

Raisons pour optimiser les images

Optimiser le poids des images et optimiser la vitesse de chargement des pages sont des bonnes pratiques pour plusieurs raisons:

  • Personne n’apprécie d’attendre qu’une page se charge
  • La vitesse de chargement est un critère sur le positionnement des sites dans les résultats de recherche
  • Certains visiteurs ne possèdent par de connexion internet rapide. Cela est particulièrement vrai pour les internautes qui utilisent un appareil utilisant la 3G
  • Ça évite de faire fuir les visiteurs et les ventes. En effet, c’est indéniable, le temps de chargement à un impact sur les visiteurs:
    • Plus le temps de chargement est long et plus le taux de sorties l’est aussi
    • Sur le site d’Amazon: 100 ms de temps chargement supplémentaire fait perdre 1% des ventes
    • Sur Google: 500 ms supplémentaire réduit le nombre de recherche de 20%
  • Moins de trafic utilisé sur l’hébergement web car les pages sont moins lourdes

Ne jamais redimensionner dans le code

Certaine pages web décident d’utiliser des grosses images (exemple: 800 x 600 pixels) et de les insérer sur une page web en tant que miniature (exemple: 80 x 60 pixels). Cette méthode à deux inconvénients majeurs:

  • Les images sont très lourdes à charger alors qu’il faut seulement afficher une petite miniature
  • Les navigateurs web ne sont pas des logiciels de graphismes. L’image redimensionné par un navigateur web sera de moins bonne qualité qu’une image redimensionné par un logiciel spécialisé (exemple: Gimp ou photoshop). La photographie ci-dessous montre la différence de qualité d’une image selon qu’elle soit redimensionnée avec Firefox ou Gimp.
aperçu d'une miniature selon le logiciel où elle a été redimensionné
Aperçu d’un redimensionnement avec Firefox et Gimp

La solution simple consiste de toujours utiliser les dimensions exact de l’image que l’ont souhaite ajouter à son site. Le redimensionnement d’une image est quelque chose de très facile que pratiquement tous les logiciels de retouche photo possèdent.

Choisir le bon format

Certains formats d’images sont plus lourds que d’autres. Utiliser le format d’image approprié permet de réduire le poids des images d’une manière assez facile. Il suffit d’utiliser un logiciel photo et d’enregistrer dans le format approprié.

Conseil: il ne faut jamais utiliser le format “.bmp”. C’est le format le plus lourd qu’il puisse exister.

Gif

Ce format d’image numérique est limité à 256 couleurs, ce qui en fait un format relativement léger. Ce format est connu et apprécié pour pouvoir afficher des images animées. Malheureusement, lorsqu’il convient d’afficher une belle photographie, la limitation à 256 couleurs réduit nettement la qualité de l’image. De ce fait, ce format est à privilégier pour: les logos, les petites icônes et les petites images animées.

Jpg

Le JPEG est une norme définissant un format compressé d’image numérique. Le degré de compression peut être choisi. Plus la compression est importante et moins l’image sera lourde, mais en contrepartie l’image perd de sa qualité. Il convient alors de choisir le meilleur compromis entre qualité et poids de l’image. Cela dépend notamment du type de site (site web d’un photographe?) et du but des photos (simple photo d’illustration ou photographie importante?). En clair, dans la majorité des cas, le JPEG est à utiliser pour les photographies sur le web.

Png

Le format PNG a spécifiquement été conçu pour le web. Une image PNG est généralement plus légère qu’une image GIF. Toutefois, la qualité n’est pas aussi performante qu’avec le format JPG. Sachant que PNG accepte la transparence, son utilisation sur le web est à privilégier lorsqu’il faut afficher une image qui possède de la transparence.

Attention: les vieilles versions d’internet explorer ne gèrent pas la transparence. Pour une bonne compatibilité avec différents navigateurs, il faut donc faire attention à son utilisation.

Exceptions

En dépit des conseils énoncés précédemment, il se peut qu’à certains moments une photographie soit plus légère en PNG qu’en JPEG. Idem pour un icône. Par conséquent, pour véritablement optimiser le poids des images, la solution consiste à enregistrer une image dans différents formats pour tester lequel est le plus léger.

Compresser les images

En plus du choix du format, il est judicieux de compresser judicieusement les illustrations. Comme cela a été dit précédemment, le format JPG permet de faire un choix entre qualité et poids de l’image. L’exemple ci-dessous permet de comparer la qualité d’une image par rapport à son taux de compression dans le logiciel Gimp:

aperçu d'images avec différent taux de compression
Images avec différent taux de compression

Personnellement, j’opte pour une qualité de 85% pour mes images JPG, car je considère que c’est un bon compromis. Pour aller plus loin, il y a deux techniques:

  • Cocher l’option “image pour le web” dans son logiciel de retouche d’image
  • Utiliser un service de compression d’image tel que Smushit pour comprimer encore plus le poids des images

CSS Sprite

aperçu d'une image utilisant CSS sprite
Image pour faire du CSS sprite

La technique des CSS sprites consiste à utiliser une seule image qui contient plusieurs autres petites images, les unes au dessus des autres, comme dans l’exemple de droite. Ce n’est qu’avec du code CSS que le webdesigner sélectionne l’image qu’il souhaite utiliser. Cette technique, réservé aux personnes qui connaissent le CSS permet de ne charger qu’une image (plus rapide). Utilisé à mauvais escient, cela peut toutefois poser des problèmes de compatibilité.

D’un point de vue CSS, cette technique consiste à exploiter la propriété “background-position“.

Paralléliser les chargements

Astuce réservé aux développeurs web qui savent ce qu’ils font, la parallélisation des chargements permet d’aider un navigateur à lancer plusieurs chargements à la fois. Cette technique permet de contrer le protocole HTTP, qui stipule que les navigateurs web ne devraient pas télécharger plus de 2 fichiers à la fois en provenance d’un même domaine. En d’autres mots, si une page possède plusieurs éléments (fichiers CSS, fichiers javascript, images …), ceux-ci seront téléchargés les uns à la suite des autres, avec un maximum de 2 éléments en parallèle. C’est bien, mais si l’utilisateur possède une connexion à internet rapide, il peut être judicieux de lancer le téléchargement de plus d’éléments en parallèle. Pour cela il suffit de tromper le navigateur web en installant les images (par exemple) sur un autre sous-domaine (ou un autre nom de domaine).

Cette astuce peut être très judicieuse mais elle possède ces inconvénients:

  • Augmentation de l’utilisation du processeur sur le poste de l’internaute. C’est donc à déconseiller si les visiteurs ont des ordinateurs peu puissants (exemple: téléphone qui se connecte à internet)
  • Ajoute des allers-retours supplémentaires pour chaque nouvelle TCP connexion
  • La recherche des DNS peut largement varier selon la localisation du visiteur. Si le serveur est aux États-Unis et que les visiteurs sont en France, la technique ne sera peut-être plus aussi avantageuse

Pour conclure

Les méthodes pour réduire le poids d’une page web à partir des images ont été évoquées. Il ne faut pas perdre de vue qu’il y a d’autres méthodes envisageable, mais celles-ci sont les plus souvent utilisées. Pour finir, il ne faut pas oublier non plus, qu’il est possible de supprimer des images d’une page web si elles sont inutiles.

Article original: Optimiser le chargement des images web.


Améliorer l’impact des commentaires sur blog

October 1st, 2010

Rédiger des commentaires sur des articles de blogs est un moyen simple et rapide d’obtenir des liens. Commenter les blogs dofollow permet en plus d’améliorer son référencement. Pour en tirer le meilleur, il y a des astuces à essayer. Cet article présente certaines de ces astuces.

statistiques grandissantes

Thématique similaire

Les liens entre les pages de thématiques différentes ne sont pas aussi intéressant que les liens entre deux pages de thématique proche. Lorsqu’un blog sur la cuisine fait un lien vers un boutique de téléphonie mobile, ce n’est probablement pas un lien naturel, ou tout du moins ça ne risque pas d’intéresser les lecteurs du blog.

Puisqu’il est plus naturel que le lien présent dans les commentaires soit en rapport avec la thématique de l’article, il est judicieux de chercher en priorité les blogs consacré au thème du site à promouvoir.

Chercher les blogs importants

En plus de chercher les blogs à thématique similaire, il est judicieux de chercher en priorité les blogs ayant un pagerank élevé, un fort trafic et ayant peu de commentaires. La quantité de commentaire doit idéalement être basse, car plus il y a de commentaires et moins les liens auront de potentiel.

Pour chercher un blog dofollow, il y a deux options à privilégier:

  • Utiliser une liste de blog dofollow disponible sur certains sites
  • Faire une recherche en utilisant le mot-clé “dofollow” (les blogs dofollow écrivent généralement un article pour expliquer qu’ils ont retirés le nofollow)

Astuce: Créer une liste de blog dofollow à classer selon la popularité ou la thématique des blogs.

Chercher les articles de qualités

Un article populaire sera obtiendra plus facilement des liens (et donc sera plus intéressants). Il convient alors de dénicher des articles intéressants. Pour cela il y a deux techniques: chercher des anciens articles populaires (qui ont un fort pagerank et peu de liens sortants) ou partir à la recherche de nouveaux articles qui ont du potentiel.

Pour chercher les articles de blogs populaire il y à plusieurs moyens:

  • Consulter les archives des digg-like
  • Essayer des requêtes sur Google en limitant sa recherche aux blogs
  • Chercher un article sur BlogSearch de Google en précisant une ancienne date de publication (voir dans les recherches avancées)
  • Visiter les archives de Yoolink

Pour ce qui est de la recherche d’article récent qui vont probablement devenir populaire il y a encore plusieurs techniques, dont voici une liste non-exhaustive:

  • Utiliser les digg-like (dans les catégories “presque promus”)
  • Faire de la veille sur Wikio, Yoolink, Stumbleupon …
  • Faire de la veille sur certains comptes Twitter
  • Faire de la veille Google Reader

Promouvoir les articles commentés

Il y a tout intérêt à ce que les articles commentés ait un fort PageRank et soit bien visité (ça bénéficiera indirectement les liens en commentaires). De ce fait, il est possible de faire la promotion des articles commentés. Tout en évitant les liens réciproques (qui diminueront l’impact du lien dans les commentaires), il est possible de populariser des articles à l’aide de méthodes suivantes:

  • Réseaux sociaux habituels (Twitter, Facebook …)
  • Digg-like, bookmark …
  • Utiliser un blog (ou mini-blog) consacré à promouvoir certains articles (indirectement ça peut être un support pour suivre sa veille technologique)

Il faut noter au passage que ça fait un peu égoïste de toujours promouvoir uniquement SES articles sur les réseaux sociaux. Donner le lien vers un article provenant d’une autre source plaira à son réseau.

Commenter rapidement

Un lien présent tôt sur un article est préférable pour deux raisons:

  • Google va lui donner un peu plus de poids (car il sera au milieu de la page et qu’il à plus d’ancienneté que les liens des derniers commentaires)
  • Les visiteurs commencent à lire les commentaires mais se fatiguent rapidement (où cliquent sur les premiers liens et ne reviennent pas)

Astuce: Ajouter les flux RSS des blogs dofollow à un agrégateur RSS tel que Google Reader. Cela permet de voir facilement et rapidement les nouveaux articles publiés.

CommentLuv

CommentLuv est un plugin pour WordPress. Ce plugin récupère le flux RSS de l’URL du commentateur et ajoute le lien vers le dernier article dans ce flux. Ainsi une fois installé, les commentateurs d’un blog reçoivent un lien supplémentaire et qui plus est un lien profond. Par ailleurs, l’ancre du second lien utilise le titre de l’article en question, donc sera automatiquement un lien avec de bons mots-clés dans son ancre (alors que le premier c’est le pseudo et il n’est pas toujours autorisé d’utiliser des mots-clés).

Il y a donc tout intérêt à chercher les blogs qui possèdent ce plugin et qui sont en dofollow. Pour cela, effectuer une recherche sur Google France en utilisant la requête suivante:

"s last blog"

Diversité

Il faut éviter de laisser de baser une campagne de commentaires uniquement sur une quelques blogs ou sur une seule plateforme de blog. Si la plateforme de blogs décide d’ajouter un nofollow ou de supprimer les liens, c’est une grande perte pour le référencement d’un site. L’idéal est donc de varier la provenance des liens.

Pour finir

Attention: ces méthodes sont indiquées à titre indicatif. L’auteur de cet article ne cautionne pas toutes ces méthodes et n’invite pas à (toutes) les utiliser. A vous d’utiliser votre propre sens moral pour les utiliser ou non.

Article original: Améliorer l’impact des commentaires sur blog.


Commenter les blogs dofollow

October 1st, 2010

Dans une campagne de référencement il est important d’avoir de nombreux liens de qualités vers le site à promouvoir. L’une des méthodes simples pour obtenir des backlinks consiste à commenter les articles de blog dofollow. Cet article présente les multiples intérêts de laisser des commentaires et introduit les limites de cette méthode.

écrivain rédigeant à la plume

Intérêts

Les avantages de commenter les blogs sont variés. Certes le référencement est l’effet recherché en priorité, mais même les commentaires sur des blogs en nofollow peuvent être bénéfiques, comme cela va être expliqué plus bas.

Référencement

Les personnes qui s’intéresse au référencement savent qu’obtenir des liens vers sont site est intéressant pour son référencement grâce au pagerank qui en découle et aux ancres de lien optimisées. Par conséquent, lorsque l’ont sait que commenter un blog permet d’obtenir un lien, il devient judicieux d’intégrer cette pratique dans une campagne de référencement.

Le seul soucis est toutefois de trouver des blogs qui utilisent le dofollow (dans le cas contraire, cela n’apporte pas de jus).

Trafic

En dépit de l’aspect référencement pur, les liens peuvent apporter du trafic direct. Au minimum, un blogueur qui modère les commentaires pourra aller visiter votre lien pour s’assurer que votre site est légal. Au mieux, de nombreux visiteurs vont visiter votre lien. Cela est peut-être d’autant plus vrai si votre commentaire est pertinent et qu’il engendre une discussion.

Notoriété

Que le lien soit visité ou non, votre commentaire est en ligne et sera peut être lu par d’autres personnes. Cela peut assoir votre expérience sur un sujet. Indirectement votre nom (ou marque) aura été vu. Un visiteur se souviendra peut être votre nom (ou la marque) s’il la voie ultérieurement. Jusqu’à éventuellement devenir client.

A titre d’exemple, en ce qui me concerne, j’ai découvert des sites/blogs à partir de commentaires laissé sur mon blog. Et pour certains d’entre eux, je suis devenu un visiteur régulier.

Limite

Malgré ces avantages, il ne faut pas perdre de vue qu’il y à des limites. Les liens dans les commentaires n’est pas LA technique ultime à elle-seule.

interdit au spam

Pas de spam

Il n’est pas rare de croiser des spammeurs qui tentent de laisser un message tout simple, tel que “je suis d’accord avec cet article”. Ce type de commentaire n’est pas toujours apprécié. Bon nombres de blogueurs supprime illico ce type de commentaire qui n’apporte rien du tout.

Non seulement un commentaire trop “spammy” peut être supprimé (et donc vous faire perdre votre temps) mais en plus il peut dégrader votre réputation. Certains blogueurs spécialiste du référencement sont même prêt à faire du référencement négatif.

Intérêt du lien

Qu’on soit bien clair, un lien est un lien. Dans une campagne de référencement (presque) tous les liens sont bon à prendre. Mais il ne faut pas oublier que certains liens obtenu via cette méthode ne sont pas très intéressant. Voici une liste non-exhaustive des raisons à cela:

  • Certains articles populaire ont plus d’une centaine de liens externes, ce qui diminue l’impact de ces liens
  • La thématique de l’article n’est pas toujours liée à celle du site liée
  • Je ne suis pas sur qu’un lien dans les commentaires soit aussi pertinent que les liens dans les articles eux-mêmes
  • Certains blogs (ou plate-forme de blogs) sont en dofollow un jour et du jour au lendemain passe en nofollow
  • Cette technique peut demander du temps s’il faut les articles avant de publier. Toutefois, après avoir lu un article, ça ne prend pas beaucoup de temps supplémentaire de rédiger un article. En conséquent, si vous lisez des articles profitez-en toujours pour laisser un commentaire

Faire en sorte que le commentaire ne soit pas supprimé

Les blogueurs choisissent souvent de modérer les commentaires pour éviter les commentaires ressemblant trop à du spam. Voici une liste d’astuce pour éviter que ça arrive

  • Pseudo:
    • Ne pas utiliser un mot-clé en tant que pseudo. Le pseudo est souvent utilisé en tant qu’ancre du lien (donc un pseudo possédant des mots-clés est censé être préférable) mais les blogueurs n’apprécient pas toujours ça
    • Utiliser un nom féminin. Pour la même raison que dans certains jeux-vidéos en ligne, des joueurs utilisent des personnages et pseudo féminin dans le but d’attirer la sympathie des autres joueurs (principalement masculin)
  • Email:
    • Utiliser une adresse email personnalisée (en rapport avec le pseudo). Certaines adresses révèlent la vrai nature du commentateur
    • Varier l’adresse email lorsqu’il faut commenter beaucoup de blogs (ou plusieurs fois un même blog). Cela est d’autant plus vrai lorsqu’une adresse email à été bannis par un logiciel ou plugin anti-spam
  • URL:
    • Utiliser le lien d’une page d’accueil. Le plus intéressant pour un référenceur est d’obtenir un lien vers une page profonde, mais si le blogueur à des compétences en référencement il saura qu’un commentaire avec une l’URL d’une page profonde est uniquement créé pour son aspect SEO
    • Utiliser une URL raccourci pour éviter que le blogueur voit illico le site qui se cache derrière un commentaire et (peut-être) duper les logiciels anti-spam
  • Commentaire:
    • Faire un commentaire construit et personnalisé à l’article et/ou répondre à un autre commentaire
    • Féliciter et remercier le blogueur
    • Rédiger plusieurs commentaires (l’un répondant à un autre). Cela évite que le premier commentaire soit supprimé
  • Utiliser un proxy pour (peut-être) duper les logiciels anti-spam et pour éviter qu’un blogueur décide de supprimer d’un coup tous les commentaires associé à une adresse IP

Certains de ces conseils sont issus de l’excellent article “comment bien spammer les blogs dofollow” de Seoblackette.

Astuce: le plugin Firefox Autofill Forms permet de pré-remplir des champs de formulaire sur les pages web. Cela fait gagner du temps en évitant de toujours taper les mêmes choses dans les champs “pseudo”, “email” et “site web”. Il est juste un peu compliqué à utiliser la première fois, mais une fois paramétré il suffira d’un clic pour pré-remplir les champs des commentaires.

Pour finir

L’article Améliorer l’impact des commentaires sur blog permet de booster convenablement l’impact des commentaires lors d’une campagne de référencement.

Attention: ces méthodes sont indiquées à titre indicatif. L’auteur de cet article ne cautionne pas toutes ces méthodes et n’invite pas à (toutes) les utiliser. A vous d’utiliser votre propre sens moral pour les utiliser ou non.

Article original: Commenter les blogs dofollow.


3suisses FRANCE change, mais qu’en est il du reste du monde ?

June 28th, 2010

En ce moment, je reste assez concentré sur les VADistes ; ma région d’origine, et mes amis qui y travaillent me poussent à y jeter un oeil de temps en temps.

Bref, vu sur Facebook via @Frederic Van Cauwenberge, 3suisses France a mis en ligne la nouvelle version de son site Web ! Enfin, 3suisses fait un effort et lance un site assez bien pensé (assez en tout cas pour contenir les milliers de produits du VADiste), même si on n’a ici qu’une couche graphique assez lourde, pleine de Javascript et d’animation.

Je reste assez septique face à leur nouvelle base line :

logo-3suisses.gif

Car de mon coté, j’ai l’impression de reconstruire le site à chaque chargement, et même de me retrouver quelques années en arrière !

Un petit coup d’oeil à la home ?

Home 3 suisses FR

perso je trouve que ça change beaucoup ! L’intérieur du site n’est pas mal non plus !

Mais qu’est ce que ça donne dans les autres pays ? 3suisses est implanté dans de nombreux pays et je me suis amusé à en faire le tour. On trouve différentes orientations graphique, communicatives… Un petit tour du monde des Homes à Découvrir.

Coté Bénélux : un style sobre, très proche de l’ancien design Français. Une zone de promo prononcé sous le bandeau de menu, et de nombreux encarts promo.

3suissesBE

3suissesLU

Coté Allemand : un style très épuré, et très proche des VADistes allemand, ces sites sont à mon gout très pros. J’ai eu vraiment un coup de coeur sur ceux là.

3suissesDE

3suissesCH

3suissesAutriche

Coté 3suisses.com, un Bof assez général, on est sur des sites qui datent, avec une navigation peu claire.

3suissesCOMes

Coté Europe de l’Est (grand est) : 3suisses Grêce, 3suisses Italie, 3suisses Russie, et 3suisses Roumaine ; on est sur un mix des benelux pour la navigation, et sur 3suisses.com pour le design.

3suissesCOMes

3suissesRO

Coté Sénégal, le site se démarque assez bien, il est proche des sites allemands, en gardant pour autant une identité culturelle assez forte.

3suissesSENEGAL

Coté Chine ! On a pu l’impression d’être sur un site Français ! Le site est vraiment très proche des portails chinois, énormément d’attraits visuels et énormément d’informations disponibles. Mais je pense une bonne adaptation au marché Chinois. (je me demande ou se trouve la centrale colis ) ).

3suissesChine

La reflexion que l’on peut se faire à ce moment précis… c’est QUEL BORDEL, ça doit être super compliqué de gérer autant de version de site différentes, impossible à analyser entre elles, et difficilement évoluable. De plus il semble que chaque couche graphique est pluggé sur le même SI… un beau bordel.

Et vous qu’elle est votre avis ?