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 !

Les champs personnalisés permettent d’ajouter des informations avant ou après le contenu de votre billet (dans la boucle WordPress) sans quitter l’interface de rédaction. Il s’agit d’associer une valeur (le contenu) à une clé choisie librement (ou parmi celles que vous avez déjà définie) et d’utiliser la fonction get_post_meta() dans votre thème.

De nombreux thèmes à tendance « magazine » se servent des champs personnalisés pour afficher une image au-dessus d’un billet. Pour cela, on crée la clé illustration et on met l’URL de l’image dans le champs valeur.

Voici un exemple concret :

<?php $image = get_post_meta($post->ID, 'illustration', $single = true); ?>

Le contenu de la clé llustration est placée dans la variable $image pour l’afficher plus loin :

<img src="<?php echo $image; ?>" />

C’est déjà fini ?

Les problèmes commencent

Maintenant, il faut saisir l’URL de votre image dans la section Champs personnalisés en bas de l’interface d’édition du billet.

Oui, mais voilà, cette URL, vous ne l’a connaissez pas encore. En effet, WordPress s’occupe lui-même de l’emplacement de votre image dans un dossier du genre /wp-content/uploads/2008/08/...

1ère solution : télécharger l’image via un client FTP

Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l’usage, ça reste très lourd au point d’enlever presque tout intérêt à l’affichage d’images par ce moyen.

<img src="mes-images/<?php echo $image; ?>" />

Toutefois, il existe une option sous forme de case à (dé)cocher (organiser mes fichiers envoyés dans des dossiers mensuels et annuels) pour mettre toute les images en vrac dans le dossier /uploads. Comme ça, il suffit d’ajouter le nom du répertoire dans le thème et de saisir le nom de l’image dans le champ valeur :

<img src="uploads/<?php echo $image; ?>" />

Toutefois, ces images en vrac ne sont pas une solution satisfaisante : on risque de créer plus de problèmes sur le long terme que ça en a réglé sur le court terme. Et puis, il est toujours nécessaire de télécharger les images à part, même si l’on économise la création d’un dossier ;)

2ème solution : utiliser la boite de dialogue prévue…

En réfléchissant un peu à la question, j’ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans /uploads

1. Ajouter une image comme vous le feriez si vous vouliez l’afficher dans le billet,
2. Copier l’adresse de l’image qui apparait dans la boite de dialogue.
3. Fermer la fenêtre d’importation
4. Coller l’adresse de votre image dans le champ valeur à côté de la clé llustration dans les Champs personnalisé.

Voilà, c’est simple, efficace et sans bavure ;)

MAJ : Dans la version 2.7, l’adresse n’apparait plus dans la boite de dialogue d’importation. Il est nécessaire d’incorporer l’image pour obtenir l’url.

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Quelques notes sur un thème magazine de A à Z — E comme épure

Pour savoir pourquoi et comment vous lisez mon blog, j’ai installé quatre scripts de mesure d’audience : Google Analytics, phpMyVisites, MyBlogLog et HitTail. Sans compter Webalizer… Ce billet est découpé en deux parties qui devaient faire chacune l’objet d’un article séparé. Or, les statistiques fournies par les outils présentés dans la partie Quatre outils de mesure d’audience, sont utiles parce qu’elle fournissent des éléments objectifs et quantifiables pour faire évoluer un site : améliorer le design ou encore réorganiser les rubriques. Dans une optique de positionnement dans l’index de Google, les stats peuvent également contribuer à optimiser ce qui fait l’intérêt d’un site : son contenu. Attention à la longueur du billet qui pourrait heurter la sensibilité des plus jeunes :)

Contrairement à ceux qui affichent un désintérêt suspect dès qu’on parle d’audience, les statistiques concernant la fréquentation de css4design m’intéressent beaucoup.

D’abord, parce que vous le valez bien. De plus, la connaissance des pages que vous consultez le plus, les sites d’où vous venez, ou encore les requêtes que vous formulez pour arriver jusqu’à ce blog, me donnent une idée sur vos motivations à me lire ou à rebondir ailleurs dès l’atterrissage… De toutes les données disponibles, le nombre de visites n’est peut-être pas le plus important, mais c’est celui que je consulte en premier :)

Le choix des mots en fonction des chiffres étudiés sera abordé dans la partie Quelques mots sur les moteurs de recherche et l’écriture pour Google. Un seul article, donc, vu que les deux sujets s’articulent plutôt bien : les choix rédactionnels dépendent de l’analyse en amont des données statistiques, de même que les chiffres dépendent étroitement de l’intérêt porté ou non au contenu par les visiteurs…

Comme un esprit Shadok peut aussi carburer au Cosmogol 999, je tiens à préciser d’emblée que certaines extravagations sur l’algorithme de Google, (clusters, ClicRank et autres suppositions) sont encore en version Bêta :)

Articles sur le même sujet

• WordPress — Une meilleure indexation avec Not at All in One SEO
• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• Adriana K, Google et balises meta dans DotClear
• Aperçu instantané de Google, Webdesign et référencement naturel
• 4 tutoriels SEO et quelques liens pour surveiller votre référencement

Comment ça y dit qu’y voit pas l’rapport…

La particularité d’un bon système de publication de blog comme DotClear ou WordPress est, entre autre, d’opérer une séparation entre les données et leur affichage. Comme le fait une bonne page web avec le contenu et le design grâce à XHTML et CSS. Cela se traduit souvent par l’existence d’un dossier themes qui contient généralement un fichier template.php. Ce fichier regroupe les parties communes de votre site, dont notamment les balises meta. Ce qui peut avoir des conséquences sur la visibilité de vos pages dans Google. Voyons comment…

Bon, c’est quoi le problème avec les meta ?

La balise meta name= »description » retiendra plus particulièrement notre attention. En effet, son contenu fournit souvent le résumé qui suit l’URL du site dans les résultats des principaux moteurs de recherche. (Notez toutefois que ces derniers peuvent aller chercher ces informations dans l’annuaire dmoz).

Je trouvais ce système simple et performant jusqu’au jour où une discussion sur outil-référencement m’a permis de comprendre le sens du message suivant que l’on rencontre assez souvent à la fin d’une liste de résultat :

Pour limiter les résultats aux pages les plus pertinentes (total : 48), Google a ignoré certaines pages à contenu similaire. Si vous le souhaitez, vous pouvez relancer la recherche en incluant les pages ignorées.

Il arrive donc parfois que Google annonce plus de résultats qu’il n’en apparaît à première vue. Alors, comme ça, des pages sans doute très intéressantes pour l’internaute sont traitées comme quantité négligeable par le moteur pour la recherche en cours ?

Pourtant, j’ai remarqué à plusieurs reprises que de nombreux résultats ainsi ignorés se seraient bien vu apporter leur contribution…

C’est pas moi, c’est la faute au template !

Il semble que ce message apparait lorsque les descriptions sont identiques pour l’ensemble des pages d’un site retournées par le moteur. En gros, Google considère que si le contenu de votre balise meta name= »description » se retrouve à l’identique dans les résultats, c’est que le contenu des pages en question est le même, ou tout au moins suffisamment similaire pour être écarté d’une pichenette googlienne !

Tout ça à cause d’une description pas dynamique pour un sou qui ne veut pas s’adapter au monde moderne.

Et PHP dans tout ça ?

Ce qu’il nous faudrait, c’est un moyen d’avoir une description différente lorsqu’on affiche un billet ou la page principale du blog. Je décidais courageusement de m’atteler à la tâche quand le mail d’un spécialiste du référencement attira mon attention : le webmaster d’outil-referencement.com himself venait à mon aide et me fournissait les éléments du code PHP dont j’avais besoin pour DotClear. Qu’il en soit publiquement remercié ;)

 <?php
     $baseLine = " | Intégration XHTML, CSS et JavaScript. Ergonomie, référencement,
     design et développement web. Nombreux articles et tutoriaux accompagnés d'exemples fonctionnels.";
     if ($GLOBALS['mode'] == 'post') { ?>
         <meta name="description" content="<?php $metaDesc=dcPostTitle();
         echo $metaDesc." ".$baseLine;?>" />
     <?php } else { ?>
         <meta name="description" content="Intégration XHTML, CSS et JavaScript. Ergonomie, référencement,
         design et développement web. Nombreux articles et tutoriaux accompagnés d'exemples fonctionnels." />
     <?php } ?>

Pour utiliser ce script dans DotClear (version 1.2.5 en ce qui me concerne), il suffit de le coller à la place de votre balise meta description dans le fichier template.php de votre dossier theme. Si vous utilisez un autre système de blog, vous aurez au moins l’essentiel pour vous dépatouiller ;)

Comme je viens tout juste de faire le changement dans le template, il est encore trop tôt pour en ressentir les effets en terme de visibilité dans les résultats des moteurs. Mais c’est promis, je vous tiens au courant.

P.S. : la suppression pure et simple de cette balise donne aussi d’excellents résultats puisque le moteur affichera des extraits des textes situés en haut de la page. Néanmoins, je trouve que l’ajout du script permet de mieux contrôler les mots-clé. Pensez seulement à bien choisir vos titres ;)

Articles sur le même sujet

• Améliorations cosmétiques et ergonomiques sur ce blog
• Menu HTML et CSS, sliding doors et item current en PHP
• Mesure d'audience : des mots-clefs au ClickRank
• Exercice de style CSS et HTML : table vs div
• Quelques notes — Programme de formation HTML & CSS