La rédaction Web et le référencement naturel vont bien ensemble en raison du fonctionnement des moteurs de recherche qui indexent les textes depuis toujours. Il a fallu attendre 2001 pour les images en ce qui concerne Google, ce qui poussé les intégraphistes orientés SEO à mieux nommer leurs fichiers. Les visuels utilisés dans un article sont devenus un atout supplémentaire dans l’acquisition de trafic. Les textes et les images ont une incidence directe sur le référencement et le positionnement d’une page, mais ce n’est pas le cas du design, de l’apparence de cette page. Enfin, jusqu’à présent… La nouvelle fonction « Aperçus instantanés » (Instant Preview) de Google permet de prévisualiser la page de destination depuis les SERP’s, ce qui pourrait bien changer la face du Web et faire entrer le Webdesign dans une nouvelle dimension. Rien que ça.

Deux mots sur l’algorithme de Google

Le classement des pages par Google tient compte de nombreux critères. Grosso modo, plus les liens extérieurs qui pointent vers vos pages thématiques sont nombreux, plus vous aurez des chances d’apparaitre en bonne position sur ces mêmes thématiques. Le PageRank officialise les choses. A côté de ce principe général, Google pondère ses résultats avec, par exemple, le nombre de clics effectués sur une page par rapport au nombre de fois où elle apparait dans les résultats (consultez les outils Google pour Webmasters pour plus d’information).

Les composantes de l’algorithme de classement des pages par Google. Surveillez votre CTR !

Google utilise déjà une forme d’enchère similaire pour les Adwords : plus votre annonce est cliquée et plus elle apparait en haut des résultats avec un  coût par clic (CPC) à la baisse. Si votre annonce intéresse les visiteurs (qu’il s’agisse de la nature du produit ou de la manière dont vous présentez les choses) Google vous récompense pour vos efforts.

Lisez le blog de Patrice Albertus (Search marketer) pour en savoir plus sur les questions liées au marketing pour les moteurs de recherche.

Aperçu instantané

De la même manière, la fonction Aperçus instantanés va inciter les visiteurs à parcourir les différents aperçus proposés, et ce d’autant plus que l’affichage des aperçus est rapide et généreux, ce qui ne doit pas être un hasard quand on connait la hantise de Google concernant les performances d’affichage de sa page de résultats.

Le visiteur pourra donc faire son choix entre… Entre quoi, au juste ? Ah oui, entre :

• Le design qui lui semblera le plus cohérent avec ce qu’il s’attend à trouver,
• La page qui sera la plus lisible ou la plus avenante,
• La page qui proposera le plus de visuels allèchants,
• La page qui aura le logo ou le motto le plus accrocheur,
• La page dont le design sera plus ou moins moderne en fonction des goûts de l’utilisateur,
• Une site d’apparence institutionnel ou un blogzine,
• Un vrai site ou un MFA ^^
• etc.

C’est la petite loupe à côté du titre qui permet d’activer l’aperçu instantané (Instant Preview). Cliquez pour agrandir l’image.

Le Webdesign, ce n’est pas juste pour faire joli !

Avec la possibilité de comparer le design des pages directement dans les SERP’s, les clics des visiteur risquent d’influer fortement sur le positionnement des pages proposées en première intention par Google. Après la prise en compte de la qualité rédactionnelle, le design et la direction artistique pourraient devenir des éléments fondamentaux (comprendre : pas uniquement pour faire joli) qu’il faudra penser dès le départ pour optimiser l’expérience utilisateur avant même que le visiteur ne se soit rendu sur votre site. Encore une avancée qui devrait rapprocher les différents intervenants de la chaine de production Web !

Articles sur le même sujet

• Ecrire pour Google : des mots-clés au clickrank
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• Une solution CSS accessible pour remplacer du texte HTML par une image

La recherche intégrée à WordPress est l’une des plus calamiteuses qu’il m’ait été donné d’utiliser. Il est pour ainsi dire presque impossible de trouver ce que l’on cherche si les billets traitant d’un même sujet sont nombreux. Au point qu’il est souvent plus facile de passer par Google pour retrouver des articles anciens. La commande site:www.css4design.com "commentaires conditionnels" dans le champs de recherche de Google permet de retrouver les articles concernant les commentaires conditionnels avec beaucoup plus de pertinence que la même requête depuis le blog lui-même !

Je devrais pouvoir interroger Google depuis un champs de recherche situé sur mon blog et afficher les résultats sur une page du blog également, en reprenant si possible tout ou partie de ma charte graphique ! Je rêve, ou bien ?

En fait, c’est possible en créant un moteur de recherche personnalisé Google :

• Rendez-vous sur http://www.google.com/coop,
• Nommer votre moteur personnalisé, etc.
• Dans Sites à explorer, mettez uniquement l’URL de votre blog et assurez-vous d’avoir cocher l’option Uniquement les sites que je sélectionne au-dessus.

Quand le moteur de recherche personnalisé est créé, il faut le configurer pour l’adapter à votre blog :

• Cliquez sur Panneau de configuration -> Code,

• Choisissez Héberger les résultats sur votre site web

  Je vous laisse tester les versions iframe et superposition. Cette dernière peut ne pas s’intégrer correctement dans votre mise en page et nécessiter des adaptations (la div qui affiche les résultats passe par dessus le footer, par exemple).

J’ai opté pour la version iframe sur une seule page. Pour cela, j’ai copié le code du champs de recherche sur la même page que le deuxième code qui affiche les résultats.

A cette étape, il faut créer une nouvelle page WordPress pour y copier-coller le Code du champ de recherche et le Code des résultats de recherche en dessous. Notez la variable googleSearchFrameWidth qui gère la largeur de l’iframe. Enfin, normalement, car dans mon cas, le changement de la valeur n’a pas eu l’effet escompté vu que la largeur est gérée avec l’attribut width de la balise iframe.

Pour adapter la largeur de cette iframe à mon blog, j’ai utilisé la déclaration CSS :

#cse-search-results iframe {
    width: 667px;
}

Cette nouvelle fonction de recherche est accessible à l’adresse www.css4design.com/rechercher. N’hésitez pas à comparer avec le champs de recherche d’origine de WordPress !

Articles sur le même sujet

• WordPress — Une meilleure indexation avec Not at All in One SEO
• Quelques lignes de PHP pour protéger la SERP-diversité
• Mesure d'audience : des mots-clefs au ClickRank
• Le petit journal du web — WordPress, développement web, etc.
• Aperçu instantané de Google, Webdesign et référencement naturel

La multiplication des digg-like, des agrégateurs et autres aspirateurs de contenus nécessite une vigilance accrue quant aux redirections qui affectent les liens pointant vers nos blogs et nos sites web. A cause de Wikio, il faudra non seulement vérifier les redirections, mais aussi les fichiers robots.txt. Magneto !

Petits rappels concernant les redirections 301 ou 302

Contrairement à ce qu’on lit parfois sur les conséquences de l’utilisation des redirections 301 ou 302, une redirection permanente vers votre contenu n’est pas un problème : elle indique que la page de destination (la vôtre) est bien la page que les moteurs de recherche devront continuer d’indexer : c’est la page « officielle » pour le contenu associé. En revanche, les redirections 302 temporaires indiquent que la page de destination (toujours la vôtre) est là de manière temporaire : la page qui pointe vers elle est vue comme la page officielle par les moteurs de recherche.

Petit rappel Ottorisé :

Redirection 301 : Page web déplacée de façon permanente. Pas de soucis.

Redirection 302 : Page web déplacée de façon temporaire. Une redirection 302 entraine que la page du site qui fait la redirection remplace la page d’origine aux yeux des moteurs de recherche.

Comment voir les redirections ?

Vous l’aurez certainement remarqué, les redirections 302 sont un fléau difficile à contrer : n’importe qui peut faire une redirection 302 sur l’une de vos pages pour prendre votre place dans les SERP. Dans ce contexte, il est important de connaitre les outils pour visualiser les en-têtes HTTP pour surveiller les annuaires, les agrégateurs, et d’une manière générale tout ceux qui vous veulent du bien ;)

Voici quelques outils :

• Webmaster Hub,
• Web Rank Info,
• Yagoort — propose la liste des codes de retour ainsi que de nombreux autres outils.

La redirection 301 tombe à l’eau. Qu’est-ce qu’il reste ? (le petit robots.txt)

Bien. Vous avez fait quelques tests et les liens qui pointent vers votre site sont bien des redirections 301 permanentes. Tout va bien ? Pas si sûr : j’apprends via le twitter d’Otto que Wikio, par exemple, utilise un fichier robots.txt qui interdit à tous les moteurs de suivre certains liens. Par exemple, l’adresse :

http://www.wikio.fr/webinfo?id=67435763

qui renvoie les en-têtes HTTP…

HTTP/1.1 301 Moved Permanently
Location: http://www.css4design.com/css4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css

… devrait me garantir une visite de courtoisie de la part des moteurs de recherche. Or, le fichier robots.txt de Wikio précise :

User-agent: *

Disallow: /webinfo

… ce qui indique aux moteurs de recherche de ne pas suivre cette adresse.

Pour quel motif ? La seule (mauvaise) raison qui me vient à l’esprit, c’est de garder le Google Juice pour eux tout seul pour passer devant les blogs dans les SERP !

Conclusion provisoire

1. Wikio s’est déjà fait épinglé par Otto pour cause de redirections 302 sauvages,
2. Wikio s’est déjà fait épinglé par Aymeric pour cause de scraping de contenu,
3. Wikio se fait épinglé pour cause de fichier robots.txt antisocial,

Suite à la vigilance d’Otto, la redirection 302 avait été transformée en redirection 301. J’espère que les lignes scélérates du robots.txt seront supprimées rapidement et qu’en prime, pour se faire pardonner, Wikio accèdera à la demande générale d’avoir de vrais liens retour vers la source des contenus qui fait sa valeur, comme le suggère Aymeric.

Note : Je précise qu’il n’est pas dans mes intentions de faire du Wikio bashing gratuitement. Je suis convaincu que Wikio a sa place dans le paysage blogosphérique français, mais pas à n’importe quel prix.

Articles sur le même sujet

• Flux RSS tronqué pour cause de redirection 302 malveillante
• Aperçu instantané de Google, Webdesign et référencement naturel
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Ixquick : le métamoteur le plus puissant du monde ?
• WordPress de A à Z — E comme Extensions (les plugins)

Pour optimiser l’indexation de vos articles par Google, chaque article de votre blog doit sortir accompagné d’une courte description. Contrairement à ce qu’on lit souvent, WordPress n’est pas spécialement taillé pour le référencement : il ne propose pas de description ni de title adaptés à chaque billet. C’est là qu’intervient un plugin comme All in One SEO. Les plugins c’est bien, s’en passer, c’est mieux. Dans la série « sans plugin », après la création d’une page faisant office de version mobile du blog, voici l’astuce Not at All in One SEO.

À l’usage, les champs ajoutés par All in One SEO n’offrent pas vraiment d’avantages supplémentaires par rapport aux customs fields. Alors pourquoi continuer à utiliser un plugin au lieu de mettre les champs personnalisés à contribution ? D’autant plus que si vous avez déjà installé All in One SEO, vous devriez pouvoir le supprimer sans perdre les données title, description ou keywords déjà saisies puisque je reprends les mêmes noms de variables ;)

Quelque chose à déclarer ?

Pour arriver à nos fins, il faut éditer le fichier header.php depuis l’interface d’administration Apparence -> Éditeur de thème en sélectionnant En-tête (header.php) ou en téléchargeant le fichier sur votre poste de travail avec un client FTP (Filezilla) et en le modifiant avec un éditeur de texte (Notepad++). Je vous conseille la deuxième solution qui vous permettra de faire une copie de sauvegarde !

Les variables associées aux champs personnalisés

<?php
    $title = get_post_meta($post->ID, 'title', $single = true);
    $description = get_post_meta($post->ID, 'description', $single = true);
    $keywords = get_post_meta($post->ID, 'keywords', $single = true);
?>

Déclarons la variable $title qui remplira la balise title et les variables $description et $keywords qui prendront place dans l’attribut content des balises meta idoines.

Balise meta title

Le titre title fait partie des éléments les plus importants pour le référencement de votre page. Il est important d’optimiser les mots-clés qu’il contient.

<?php if ( is_home() ) { ?>
    <title><?php echo $my_title_home; ?></title>
<?php } else if ( is_single() ) { ?>
    <title><?php if($title !== '') { echo $title; } else { the_title(); } ?></title>

<?php } else if ( is_category() ) { ?>
    <title><?php echo $my_single_cat . ' '; single_cat_title(); ?></title>
<?php } else if ( is_tag() ) { ?>
    <title><?php echo $my_single_tag . ' '; single_tag_title(); ?></title>
<?php } else { ?>
    <title><?php echo $my_desc; ?></title>
<?php } ?>

• Accueil — Courte description du blog,

• Article — Contenu du champs personnalisé title ou titre du billet,

• Catégories et tags — Nom de la catégorie et du tag en cours précédé d’un texte personnalisé,

• Autres pages — Description alternative du blog différente du slogan renseigné dans les préférences du blog afin de placer des mots-clés supplémentaires.

J’ai placé les variables suivantes dans le fichier header.php :

$my_title_home = "Le blogzine de l'intégrateur web : HTML, CSS et design web";
$my_single_cat = "Tous les articles appartenant à la rubrique";
$my_single_tag = "Tous les articles partageant le tag";
$my_desc = "Blog consacré aux techniques de création de sites web : conception, intégration et référencement";

A priori, rien n’empêche de mettre ces variables dans un fichier mes-variables.php inclus dans header.php de la manière suivante (en supposant que vous avez créé un dossier includes à la racine de votre thème) pour simplifier les mises à jour :

<?php include (TEMPLATEPATH . '/includes/mes-variables.php'); ?>

Balise meta description

Après le titre, la balise meta description est essentielle au bon référencement de votre page : le contenu de cette balise est souvent repris par les moteurs de recherche comme descriptif dans les résultats.

<?php if ( is_single() ) { ?>
   <meta name="description" content="<?php if ($description !== '') { echo $description; } else { echo wp_html_excerpt($post->post_content, 170); } ?>" />
<?php } else if ( is_category() ) { ?>
    <meta name="description" content="<?php echo strip_tags( category_description() ); ?>" />
<?php } else if ( is_tag() ) { ?>
    <meta name="description" content="<?php single_tag_title(); ?>" />
<?php } else { ?>
    <meta name="description" content="<?php bloginfo('description') ?>" />
<?php } ?>

• Article — Champs personnalisé ou titre du billet. MàJ : suite à une remarque de Marie-Aude et à une intervention musclée de Julien, je n’affiche plus le titre du billet, mais les 170 premiers caractères du billet si le champs personnalisé description n’est pas renseigné, ce qui est bien plus judicieux ;)

  Par ailleurs, comme le fait à nouveau remarquer Julien, il est possible d’utiliser l’extrait optionnel en dehors de la boucle, ce qui en fait un bon candidat pour la description. En mixant toutes les possibilités, voici mon dernier mot pour générer une description digne de ce nom lorsque l’article est affiché seul :

  <meta name="description" content="<?php if ($description !== '') { echo $description; } else if ( $post->post_excerpt !== '') { echo strip_tags( $post->post_excerpt); } else { echo wp_html_excerpt($post->post_content, 170); } ?>" />
  

  En l’absence du champs personnalisé description, on affiche l’extrait optionnel. Sinon, on récupère les 170 premiers caractères du billet.

• Catégorie — Description de la catégorie (accessible dans Gérer -> Catégories -> clic sur la catégorie). C’est l’occasion ou jamais de remplir ce champs ! Comme il est possible de saisir du HTML dans cette description, j’utilise la fonction strip_tags pour supprimer les balises HTML le cas échéant,

• Tags — Tag en cours,

• Autres pages — Description renseignée dans le champs slogan des préférences du blog.

Balise meta Keywords

La balise meta keywords tombe peu à peu en disgrâce mais ça ne mange pas de pain de les ajouter. En l’absence du champs personnalisé keywords, j’affiche les mots-clés de l’article en utilisant la fonction st_meta_keywords() du plugin Simple Tags :

<?php if($keywords !== '') { echo '<meta name="keywords" content="' . $keywords .'" />'; } else { st_meta_keywords(); } ?>

utilisation des champs personnalisés pendant la rédaction des articles

Les champs personnalisés (Customs fields) sont une combinaison de clés/valeurs. Lors de la première utilisation, il faut renseigner la clé et la valeur. Dès la deuxième utilisation, on sélectionne les clés déjà saisies dans le menu déroulant clefs. Reste à saisir le titre alternatif, la description ou les mots-clés dans le champs Valeur.

Quel est l’intérêt de mettre un titre alternatif ?

Il se peut que vous ayez envie de mettre une pointe d’humour dans votre titre. Or, vous devez vous douter que Google n’a pas un sens de l’humour très développé. Ainsi, cette technique vous permettra de mettre un titre sous forme d’allusion dans votre billet tout en ménageant Google avec un title informatif.

Par ailleurs, il est conseillé d’utiliser des titres relativement courts et de mettre le maximum de mots-clés pertinent, ce qui n’est pas toujours facile. Cette technique vous permettra en quelque sorte d’avoir deux versions complémentaires.

Pourquoi une description ?

Si vos articles ne possèdent pas de description, Google va piocher dans votre contenu pour afficher le résumé placé sous le titre des SERP. Si les articles de votre blog ne se situent pas au plus près de la balise body, Google peut utiliser n’importe quelle portion de texte située entre le début du document et votre billet. Si ce texte est présent sur toutes les pages de votre blog, votre balise description ne sera pas optimisée et Google pourrait ne pas proposer ces pages aux visiteurs même si elles répondent parfaitement à la requête.

Pourquoi les mots-clés ?

Si votre thème WordPress affiche les mots-clés associés aux articles, il se peut qu’un trop grand nombre de mots-clés entraine plus de bruit qu’autre chose et vous incite à en mettre moins. Un affichage différents dans les meta keywords pourrait vous permettre de placer tous les mots-clés qui vous viennent à l’esprit dans la limite du nombre optimum pour cette balise.

Alléger votre table options

Conclusion. Cette solution n’offre pas toutes les options proposées par le plugin All in One SEO et ne prétend d’ailleurs pas le remplacer. Toutefois, elle va à l’essentiel tout en ménageant la table options qui prend du poids chaque fois que l’on installe un plugin.

Si vous voulez voir à quoi ressemble cette table options sans utiliser phpMyAdmin, rendez-vous à l’adresse suivante : xxx/wp-admin/options.php pour afficher l’ensemble des champs de cette table (via iptima).

Articles sur le même sujet

• Mesure d'audience : des mots-clefs au ClickRank
• Améliorer la recherche sur votre blog WordPress avec Google Coop
• Aperçu instantané de Google, Webdesign et référencement naturel
• 4 tutoriels SEO et quelques liens pour surveiller votre référencement
• Référencement de sites Web — Chassez le naturel, il revient au SEO !

Envie de changer la langue pour afficher les conseils et les messages du moteur de recherche Google dans le jargon des Hackers ou avec l’accent d’Elmer Fudd ? C’est possible :

1. Aller dans les Préférences,
2. Changer la langue pour le Japonais — validez,
3. Changer la langue à nouveau et choissez votre parfum dans le haut de la liste ;)

S’amusent bien chez Google ^^

Articles sur le même sujet

• Aperçu instantané de Google, Webdesign et référencement naturel
• Améliorer la recherche sur votre blog WordPress avec Google Coop
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Cuil, un moteur de recherche qui en a dans le slip ;)
• Cuil, un moteur de recherche rapide, pertinent et innovant

Il y a quelques jours, j’annonçai laconiquement l’existence du moteur de recherche Cuil en utilisant les adjectifs rapide, pertinent et innovant. Si la vitesse et l’originalité de la présentation des résultats en deux ou trois colonnes est au rendez-vous, la pertinence semble avoir raté le coche… A lire les très nombreux billets critiques sur le sujet, il semble que Cuil ne devrait plus se prononcer Cool, mais C*uille ^_^v

Quand j’ai rédigé ma petite note sur Cuil, je me suis contenté de tester une ou deux requêtes assez généralistes dont les résultats ne m’ont pas choqué outre mesure. Il faut garder à l’esprit que Cuil est avant tout un moteur de recherche généraliste pour les gens normaux, pas pour ceux qui possèdent des blogs ou qui passent leur temps à faire de l’égo-searching et à chercher une Cuil dans le potage ^_^

Des résultats corrects mais perfectibles

Pour des requêtes comme sushi ou dance, le moteur donne des résultats corrects. Même sur des requêtes comme CSS ou HTML, Cuil se débrouille plutôt bien, et le panneau d’exploration par catégories affine les résultats.

En revanche, dès qu’on attend des résultats en français, c’est une autre paire de manche : même sur des termes francophones, le moteur s’entête à  retourner une majorité de pages anglo-saxonnes ! Toutefois, je note des améliorations très rapides sur certaines requêtes égotistes comme bruno bichet qui me renvoyait n’importe quoi il y a deux jours, et qui semble avoir redresser la barre aujourd’hui. A noter qu’une version française du moteur devrait apparaitre à la fin de l’année.

Je dirais même que dans une optique de veille, Cuil se révèle assez « pertinent » puisqu’il a tendance à privilégier des outils non-francophones peu connus dans nos contrées. Car avouons-le, ce qui dérange dans Cuil, c’est qu’il nous offre un paysage auquel nous ne sommes pas habitués : Google a réussit à s’imposer dans les actes, mais il a aussi façonné notre imaginaire sur ce qu’est le web à travers les résultats qu’il nous donne à voir…

Ma conclusion

Cuil est loin d’être parfait, mais je pense qu’il faut laisser une chance au produit pour une fois qu’on a un service qui a les C*uilles de s’attaquer au monopole de Google :D Faites comme Ma.tt et moi et ajoutez donc Cuil à votre champs de recherche Firefox pendant quelques temps !

Articles sur le même sujet

• Aperçu instantané de Google, Webdesign et référencement naturel
• Améliorer la recherche sur votre blog WordPress avec Google Coop
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Google — Pwefewences ou PR3F3R3N(3Z ?
• Cuil, un moteur de recherche rapide, pertinent et innovant

Cuil. Ce nouveau venu dans l’univers des moteurs de recherche se pose en concurrent de Google. Créé par d’anciens cadres de Google, le moteur indexe trois fois plus de pages web que son concurrent. Premières bonnes impressions : rapidité, pertinence et innovation sur la présentation des résultats en plusieurs colonnes.

Articles sur le même sujet

• Aperçu instantané de Google, Webdesign et référencement naturel
• Améliorer la recherche sur votre blog WordPress avec Google Coop
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Google — Pwefewences ou PR3F3R3N(3Z ?
• Cuil, un moteur de recherche qui en a dans le slip ;)

Si certains blogueurs-entrepreneurs parviennent à gagner leur vie en bloguant, c’est loin d’être une généralité et l’arrêt de PointBlog n’est pas fait pour rassurer. Dans ces conditions, il peut être tentant de démarrer sa petite entreprise sur le web. Si le choix du E-CMS (pour E-Commerce Management System) pour présenter ses produits ou services est très important, il ne faut pas perdre de vue que la création d’une boutique en ligne revient à créer une boutique tout court…

le e-commerce : des fois, c’est facile, des fois… pas facile !

Les outils évoqués ici proposent des procédures d’installation et d’administration assez simples. Il est toutefois préférable d’avoir des compétences en création de sites web pour être autonome. Si ce n’est pas le cas, vous envisagerez peut-être la location d’une boutique hébergée chez un prestataire. Si le principe semble séduisant, la réalité l’est souvent moins. Par ailleurs, le prix à payer permettrait souvent de faire appel à un free-lance pour mettre en place votre boutique.

Je ne vise pas tous les prestataires : disons que vous devriez vous méfier de ceux qui proposent un financement sur 5 ans en n’ayant eux-mêmes qu’un an d’ancienneté dans le domaine…

Par ailleurs, si vous êtes en phase de recherche d’éléments de comparaison pour choisir un fournisseur ASP ou vous débrouiller avec une script opensource, je vous conseille vivement la lecture du billet très instructif intitulé Vous êtes plutôt Lego ou Playmobile ? Si une boutique en mode ASP vous attire, en voici une liste.

le e-commerce, c’est surtout du commerce

Même avec des connaissances en développement web, gérer une boutique en ligne ou un commerce en dur c’est kif kif. C’est peut-être même plus difficile online, car aux contraintes du commerce en général, s’ajoutent celles du commerce en ligne en particulier :

• rédaction des notices des produits (charte rédactionnelle),
• prises de vues des produits,
• référencement du site,
• choix du ou des modes de paiement,
• mise en place des conditions générales de vente,
• prise en compte des différentes législations en vigueur,
• emballage et expédition des commandes,
• etc.

Sans parler des contraintes propres à votre système de boutique qui ne manquera pas de vous faire perdre quelques cheveux tôt ou tard ;) Bref, même le meilleur E-CMS demandera du temps pour être maitrisé et adapté à vos besoins. Et oui, il ne suffit pas de lancer un script d’installation et remplir une base de données avec vos produits pour que les commandes s’emballent et s’expédient dans la foulée pendant que vous buvez une bière un thé un café sur votre canapé ;)

Quelques outils pour gérer votre boutique en ligne

Si vous être prêt à mettre les mains dans le camboui, voici un aperçu des outils que j’ai eu l’occasion d’utiliser :

osCommerce, le plus répandu

osCommerce est certainement l’outil le plus répandu en France et dans le reste du monde. Non sans raison, car le projet existe depuis longtemps et une communauté importante s’est peu à peu constituée pour répondre à vos questions, y compris en français, ce qui peut avoir son importance.

Le point fort d’osCommerce est cette forte communauté. Son point faible, c’est que sans cette communauté vous aurez des difficultés pour avancer tout seul à cause de la structure des fichiers : l’organisation du code fait passser n’importe quelle usine à gaz pour un modèle de clarté.

La critique est aisée mais l’art est difficile, j’en conviens : ce côté usine à gaz à sa raison d’être et si vous ne tentez pas de vous soustraire à l’organisation et à la logique de fonctionnement de l’outil, vous pourrez gérer de nombreux paramètres en quelques clics. Le plus difficile sera peut-être de trouver où cliquer car osCommerce disperse allègrement les options dans son interface d’administration.

Une fois les fonctions de base assimilées, vous trouverez sans peine une foultitude de plugins contributions pour étendre les fonctionnalités de votre boutique. Malgré les qualités d’osCommerce, il reste un point qui calme mon enthousiasme : l’utilisation abusive des tableaux pour la mise en page ; je ne veux pas faire le standardiste de service, mais là c’est vraiment exagéré… Toutefois, il semblerait que la prochaine version apporte quelques améliorations.

osCSS passe en version 1.2

Si vous n’avez pas envie de plonger dans une soupe de balise pour intégrer votre charte graphique, osCSS vient de passer en version 1.2 et reprend le coeur des fonctionnalités d’osCommerce en laissant de côté la couche de présentation en tableaux. Il devient possible de skinner sa boutique en ligne presque aussi facilement qu’un blog !

Quelques templates sont proposés à l’installation. Pour vous faire la main, je vous déconseille les thèmes qui utilisent jusqu’à une trentaine de feuilles de style importées. Pour en avoir fait l’expérience, il est préférable de partir de zéro ou du thème défault qui contient le minimum, quitte à garder un oeil sur les autres fichiers CSS pour s’inspirer de la liste quasi exhaustive des classes et des ID’s utilisées dans le code HTML.

Par rapport à la version osCSS 1.1 dont j’avais déjà dit quelques mots, cette nouvelle version propose une interface d’administration plus évoluée, à l’image de ce que l’on trouve dans les autres versions d’osCommerce.

Télécharger osCSS 1.2

osCommerce version CREloaded

Si osCSS peut être considéré comme une version light d’osCommerce, la version CREloaded en est la version bodybuildée ! De nombreuses contributions ont été intégrées pour en faire un package prêt à l’emploi. Cette version possède son propre écosystème avec une philosophie orientée business : si la version Standard est gratuite, il existe une version Pro à partir de 150$. Des modules supplémentaires, des templates et une aide à l’installation peuvent également être achetés.

Comme pour osCommerce, une communauté francophone existe pour vous guider dans toutes les étapes de la création de votre boutique avec CREloaded.

Autres systèmes pour vendre sur le web

Il n’y a pas que osCommerce et ses avatars pour tâter du e-commerce (Liste constituée d’après le blog kardamome) :

• Zen-Cart
• Thelia
• Peel
• Emencia Commerce Suite
• Magento
• PLICI

Certains CMS possèdent des plugins e-commerce :

• EZ publish
• Joomla + Virtuemart
• Drupal + Ubercart
• WordPress + WP-Commerce
• Dotclear 2 + 42Stores

En bref

Le nombre de solutions disponibles pour vendre sur internet augmente peu à peu. Il était temps car pour nombre de créateurs, les solutions osCommerce et CREloaded ne correspondent plus vraiment à ce que l’on est en droit d’attendre en terme de respect des standards du web. Pas pour les standards en eux-mêmes, mais parce qu’ils garantissent une maintenance aisée du code, ainsi qu’une plus grande facilité pour adapter vos templates à l’air du temps comme le font les boutiques faites de briques et de mortier qui réorganisent leurs vitrines plusieurs fois dans l’année.

Articles sur le même sujet

• Templates et boutique en ligne osCSS
• Boutique en ligne : osCSS vs osCommerce ?
• Aperçu instantané de Google, Webdesign et référencement naturel
• Conventions de nommage pour les CSS — identifiants et classes — de votre site web
• Le Design serait inutile dans 80% des cas

Donkiz, moteur de recherche pour l’immobilier

Du nouveau dans le monde grandissant des moteurs de recherche verticaux avec Donkiz. Ce projet spécialisé dans l’immobilier a été dévoilé par donkeyword. Franck a su garder le secret jusqu’au bout sur son projet ultra-secret (bien que j’ai l’impression qu’Eric a eu la primeur, m’enfin…). Les principaux atouts du moteur sont :

• Recherche de maisons et d’appartements, de bureaux, d’entrepôts, de lieux de vacances, de terrains, etc. grâce à un système d’intelligence artificielle et une navigation par tableau de critères dynamiques (drill-down), le tout avec un design épuré,
• Alerte mail, envoi à un ami, sauvegarde et prise de notes sur les annonces sans être obligé de s’enregistrer,
• Cartographie pour visualiser les résultats,
• Index de plus de deux millions d’annonces et plus à venir.

Le soin apporté à l’ergonomie et à la clarté de l’interface font de cet outil un modèle du genre : les résultats s’affinent peu à peu en fonction de vos envies.

Compte-rendus Paris Web 2007

De nombreux blogs ont évoqué l’événement de cette fin d’année dans le domaine du développement web et des bonnes pratiques : Paris Web 2007. Si les avis et impressions ne manquent pas, les compte-rendus systématiques sont rares.

Heureusement que les nouveaux venus dans la blogosphère ont à cœur de partager leurs notes. C’est le cas de Thibault qui se propose de mettre en ligne sur Jour de pluie une douzaine de compte-rendus.

Yahoo! : un design élastique

Pour voir un bel exemple de page web élastique (dont le texte et la mise en page supportent l’agrandissement), faites un tour sur Yahoo! puis faites tourner la molette avec la touche Control.

Merci à Thanh pour l’info (et le café à l’O2Sources ;) )

Flock, le navigateur social

Suite à mes interrogations existentielles sur le navigateur web idéal, j’ai essayé Flock. Ce navigateur est basé sur le moteur de rendu Gecko qui équipe aussi Firefox avec en prime des fonctions d’aggrégation de sites web 2.0 tels que Twitter, Flickr, Facebook, Youtube.

Possibilité de synchroniser les signets entre ma.gnolia et Flock.

Combien de balises HTML pouvez-vous citer en 5 mn ?

Petit quizz bien sympa à faire. Attention le compte-à-rebours démarre dès le chargement de la page ^^ Via xuxu.

Articles sur le même sujet

• Mise à jour de la grosse grosse liste #2
• 13 outils pour l'intégrateur web
• 7 liens utiles pour l'intégrateur web : le retour
• Quelques notes — Programme de formation HTML & CSS
• 7 outils en ligne pour l’intégration HTML & CSS

Un billet à cheval entre le En vrac et le C’est du buzz, faites tourner, voici ce qui a retenu mon attention ces dernières semaines : la blogoshère s’enrichit de nouveaux blogs que je vous invite à découvrir, et je fais un peu d’auto-promo pour mes groupes sur Facebook et mon profil Viadeo gonflé à 100%. Le tout, agrémenté de plein de capture d’écran ;)

Suivez le Cap’tain Gloo sur Glooland

Glooland, c’est le tout nouveau blog d’Aymeric ! C’est qui ? C’est quoi ? Aymeric est le webdesigner qui est derrière l’AJblog où il partage avec nous ce qui le fait réagir en ce qui concerne les aspects techniques (CSS, HTML, Javascript) et commerciaux de sa pratique du design web en tant que freelance. Si vous ne connaissez pas son blog, votre cas n’est pas totalement désespéré, mais pourrait le devenir ;)

Glooland, c’est un joyeux mélange fruité.

Aymeric lance donc un nouveau blog multi-rédacteurs et multi-thèmes : vous avez des idées de billets que vous ne publiez pas sur votre blog parce que le thème ne s’y prête pas ? (si je publiais les contines que je raconte à mon fils ici, ça ferais un peu bizarre, non ?) Pas de panique Glooland est là pour ça !

USearch : l’actualité des moteurs de recherche

USearch, le nouveau blog d’Arkan sur l’actualité des Search Engine.

Toujours parmi les petits derniers des blogueurs que j’aime lire, il y a USearch le nouveau blog d’Arkan consacré aux moteurs de recherche. Vous avez bien lu : moteurs avec un « s » car il n’y a pas que Google dans la vie ;)

Way2.be : faites un geste pour la planète

Sauvez la planète et luttez contre le réchauffement climatique.

Toujours dans l’actualité liée aux moteurs de recherche, voici Way2.be, qui nous propose de faire un geste contre le réchauffement climatique en aidant une des principales fondations pour la lutte contre le réchauffement climatique : United Nation Foundation en reversant à la fondation 100% des bénéfices tirés des revenus de la publicité contextuelle affichée sur le moteur (reprend les résultats de Google).

Un petit clic sur ce nouveau moteur pour faire un geste pour la planète, c’est si simple ;)

Notorious Blog : mon blog consacré… aux blogs !

Ce n’est plus vraiment une nouveauté, mais je rappelle l’existence de mon dernier blog lancé début septembre qui traite des sujets liés au blogging en général et aux blogs d’entreprise en particulier.

Blog consacré à la blogosphère, aux blogueurs et au blogging en général. Avec une pensée particulière pour les blogs d’entreprise, événementiels et commerciaux

Les sujets liés à la rédaction web ne sont pas oubliés, de même que le référencement des blogs, les réseaux sociaux comme Facebook, Twitter, le mouvement brownien du web… OK, OK, OK… (Boite de Jazz inside) j’arrête, car j’en vois au fond qui baillent déjà… Toujours les mêmes collés au radiateur !)

Facebook : si vous ne créez pas votre groupe, quelqu’un d’autre s’en chargera ;)

Aperçu de la page d’accueil du groupe css4design sur Facebook. Inscrivez-vous, c’est sans danger ;)

Et oui, la création de groupes sur le réseau social et/ou communautaire qui a le vent en poupe ne cesse de prendre de l’ampleur. Pourquoi faire ? A nous d’inventer la vie qui va avec ! N’hésitez donc pas à vous inscrire sur le groupe css4design et pourquoi pas sur Notorious Blog pendant que vous y serez ?

Remplissage de profil à 100% sur Viadeo ? Fait !

Pfff… remplir un profil Viadeo à 100% des fois, c’est facile… des fois, pas facile ;) Après avoir fait le tour des différents réseaux sociaux professionnels, je crois que mon choix est fait : Viadeo pour la région France et un soupçon de LinkedIn (un peu en friche pour le moment) pour le reste du monde ;)

Après réflexion, s’inscrire sur tous les réseaux existants pour assurer la visibilité de son égo-laser-au-poing, c’est bien, mais assurer la maintenance derrière, ça craint. Du moins tant qu’il ne sera pas possible de microformater et de centraliser notre profil numérique une bonne fois pour toutes !

PS : Si vous n’êtes pas encore inscrit sur Viadeo, je vous invite (en vous parrainant de la sorte, je bénéficie d’un mois offert. Merci d’avance)

Articles sur le même sujet

• Journalistes vs Blogueurs (Gladiators inside)
• BAW Auto Shortener — Raccourcisseur d’URL pour WordPress
• Le prêt-à-bloguer bride-t-il la créativité ?
• Ma vie et mes avis numériques sur la blogosphère «people», le «web beuh zéro» avec parfois beaucoup de recul
• Sites de contenus vs sites commerciaux ?