Optimiser TwentyTwelve sans plugin

Twenty TwelveLe thème WordPress TwentyTwelve, sorti avec la version 3.5 du CMS, est, il faut le dire, plutôt bien optimisé pour le référencement. Mais comme toujours, rien n'est parfait et il faut mettre un peu les mains dans le cambouis pour  avoir les meilleures bases possibles.

C'est pourquoi je vous propose aujourd'hui quelques codes à mettre en place dans plusieurs fichiers du thème pour que TwentyTwelve se rapproche un peu plus de la perfection du point de vue optimisation SEO. N'ayez pas peur, tout est expliqué le plus simplement possible, vous n'aurez qu'à faire des copier/coller. Tout le monde est prêt ? Votre éditeur préféré est ouvert ? C'est parti !

Optimiser et personnaliser les Title et Description

En ce qui concerne les balises Title, c'est surtout celle de l'accueil qui est à revoir puisque celle-ci affiche le nom du site en premier et que celles des tags et catégories sont plutôt bien construites (nom de la catégorie + nom du blog). Ça peut être une bonne chose dans le cas où on veut travailler le branding, mais je prends le parti de dire qu'ici nous cherchons plutôt à optimiser une expression générique pour la page d'accueil. Nous allons en profiter pour ajouter une petite boite dans la page de création des Pages et Articles qui nous permettra de personnaliser le Title et la Description (comme WordPress SEO by Yoast ou All In One SEO).

Nous allons donc ouvrir le fichier header.php, repérer ce code (ligne 24) :

<title><?php wp_title( '|', true, 'right' ); ?></title>

Et le remplacer par celui-là (c'est surtout important pour la suite) :

<title><?php if ( is_404() ) : ?><?php _e('Not Found') ?><?php elseif ( is_home() ) : ?><?php bloginfo('description') ?><?php elseif ( is_category() ) : ?><?php single_cat_title(); ?><?php elseif ( is_tag() ) : ?><?php single_cat_title(); ?><?php else : ?><?php wp_title() ?><?php endif ?> - <?php bloginfo('name') ?></title>

Ensuite, nous allons mettre en place la box au sein de l'administration pour modifier le Title et la Description lorsqu'on crée ou modifie une page ou un article. Nous allons ouvrir le fichier functions.php et, tout en bas de celui-ci, coller ce code :

function meta_box_title_description() {
add_meta_box( 'parametres_seo_metabox', 'Param&egrave;tres SEO', 'parametres_seo_metabox_content', 'post', 'side', 'high' );
add_meta_box( 'parametres_seo_metabox', 'Param&egrave;tres SEO', 'parametres_seo_metabox_content', 'page', 'side', 'high' );
}
add_action( 'add_meta_boxes', 'meta_box_title_description' );

function parametres_seo_metabox_content($post) {
$val_title = get_post_meta($post->ID,'_parametres_seo_title',true);
$val_description = get_post_meta($post->ID,'_parametres_seo_description',true);
?>
<p><strong>Title</strong></p>
<input id="parametres_seo_title" name="parametres_seo_title" type="text" style="width:100%;" value="<?php echo $val_title; ?>" />
<p><strong>Meta description</strong></p>
<textarea id="parametres_seo_description" name="parametres_seo_description" style="width:100%; resize:none;"><?php echo $val_description; ?></textarea>
<?php
}

function save_parametres_seo_metabox($post_ID){
if(isset($_POST['parametres_seo_title'])){
update_post_meta($post_ID,'_parametres_seo_title', esc_html($_POST['parametres_seo_title']));
}
if(isset($_POST['parametres_seo_description'])){
update_post_meta($post_ID,'_parametres_seo_description', esc_html($_POST['parametres_seo_description']));
}
}
add_action('save_post','save_parametres_seo_metabox');

function modify_description_from_metabox() {
global $wp_query;
if ( get_post_meta($wp_query->post->ID,'_parametres_seo_description',true) ) {
echo '<meta name="description" content="';
echo get_post_meta($wp_query->post->ID,'_parametres_seo_description',true);
echo '" />';
}
}
add_action( 'wp_head', 'modify_description_from_metabox' );

function modify_title_from_metabox($title) {
global $wp_query;
if ( get_post_meta($wp_query->post->ID,'_parametres_seo_title',true) ) {
return get_post_meta($wp_query->post->ID,'_parametres_seo_title',true);
} else {
return $title;
}
}
add_filter( 'wp_title', 'modify_title_from_metabox' );

Voilà pour ce qui est des balises Title et Meta Description, facile non ?

Mettre en place un fil d'ariane

On ne va pas réinventer la roue ici, on va prendre le code créé (et régulièrement mis à jour) par Daniel Roch. L'avantage de ce code réside dans le fait qu'il inclut des microdonnées : lorsque votre page sera proposée dans les moteurs de recherches, le fil d'ariane sera présent entre le Title et la Description.

Pour mettre en place ce code, retournez dans votre fichier functions.php, allez à la dernière ligne et collez ce code :

 //***Fil d'arianne
//Récupérer les catégories parentes
function myget_category_parents($id, $link = false,$separator ='/',$nicename = false,$visited = array()) {
  $chain = '';$parent = &get_category($id);
    if (is_wp_error($parent))return $parent;
    if ($nicename)$name = $parent->name;
    else $name = $parent->cat_name;
    if ($parent->parent && ($parent->parent != $parent->term_id ) &&!in_array($parent->parent, $visited)) {
        $visited[] = $parent->parent;$chain .= myget_category_parents($parent->parent, $link, $separator, $nicename, $visited );}
    if ($link) $chain .= '<span typeof="v:Breadcrumb"><a href="' .get_category_link( $parent->term_id ) . '" title="Voir tous les articles de '.$parent->cat_name.'" rel="v:url" property="v:title">'.$name.'</a></span>' . $separator;
    else $chain .= $name.$separator;
    return $chain;}

//Le rendu
function mybread() {
  // variables gloables
  global $wp_query;$ped=get_query_var('paged');$rendu = '<div xmlns:v="http://rdf.data-vocabulary.org/#">';  
  $debutlien = '<span id="breadex">Vous &ecirc;tes ici :</span> <span typeof="v:Breadcrumb"><a title="'. get_bloginfo('name') .'" id="breadh" href="'.home_url().'" rel="v:url" property="v:title">'.get_bloginfo('name') .'</a></span>';
  $debut = '<span id="breadex">Vous &ecirc;tes ici :</span> <span typeof="v:Breadcrumb">Accueil de '. get_bloginfo('name') .'</span>';

  // si l'utilisateur a défini une page comme page d'accueil
  if ( is_front_page() ) {$rendu .= $debut;}

  // dans le cas contraire
  else {

    // on teste si une page a été définie comme devant afficher une liste d'article 
    if( get_option('show_on_front') == 'page') {
      $url = urldecode(substr($_SERVER['REQUEST_URI'], 1));
      $uri = $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
      $posts_page_id = get_option( 'page_for_posts');
      $posts_page_url = get_page_uri($posts_page_id);  
      $pos = strpos($uri,$posts_page_url);
      if($pos !== false) {
        $rendu .= $debutlien.' &raquo; <span typeof="v:Breadcrumb">Les articles</span>';
      }
      else {$rendu .= $debutlien;} 
    }

    //Si c'est l'accueil
    elseif ( is_home()) {$rendu .= $debut;}

    //pour tout le reste
    else {$rendu .= $debutlien;}

    // les catégories
    if ( is_category() ) {
      $cat_obj = $wp_query->get_queried_object();$thisCat = $cat_obj->term_id;$thisCat = get_category($thisCat);$parentCat =get_category($thisCat->parent);
      if ($thisCat->parent != 0) $rendu .= " &raquo; ".myget_category_parents($parentCat, true, " &raquo; ", true);
      if ($thisCat->parent == 0) {$rendu .= " &raquo; ";}
      if ( $ped <= 1 ) {$rendu .= single_cat_title("", false);}
      elseif ( $ped > 1 ) {
        $rendu .= '<span typeof="v:Breadcrumb"><a href="' .get_category_link( $thisCat ) . '" title="Voir tous les articles de '.single_cat_title("", false).'" rel="v:url" property="v:title">'.single_cat_title("", false).'</a></span>';}}

    // les auteurs
    elseif ( is_author()){
      global $author;$user_info = get_userdata($author);$rendu .= " &raquo; Articles de l'auteur ".$user_info->display_name."</span>";}  

    // les mots clés
    elseif ( is_tag()){
      $tag=single_tag_title("",FALSE);$rendu .= " &raquo; Articles sur le th&egrave;me <span>".$tag."</span>";}
      elseif ( is_date() ) {
          if ( is_day() ) {
              global $wp_locale;
              $rendu .= '<span typeof="v:Breadcrumb"><a href="'.get_month_link( get_query_var('year'),get_query_var('monthnum') ).'" rel="v:url" property="v:title">'.$wp_locale->get_month(get_query_var('monthnum') ).' '.get_query_var('year').'</a></span> ';
              $rendu .= " &raquo; Archives pour ".get_the_date();}
      else if ( is_month() ) {
              $rendu .= " &raquo; Archives pour ".single_month_title(' ',false);}
      else if ( is_year() ) {
              $rendu .= " &raquo; Archives pour ".get_query_var('year');}}

    //les archives hors catégories
    elseif ( is_archive() && !is_category()){
          $posttype = get_post_type();
      $tata = get_post_type_object( $posttype );
      $var = '';
      $the_tax = get_taxonomy( get_query_var( 'taxonomy' ) );
      $titrearchive = $tata->labels->menu_name;
      if (!empty($the_tax)){$var = $the_tax->labels->name.' ';}
          if (empty($the_tax)){$var = $titrearchive;}
      $rendu .= ' &raquo; Archives sur "'.$var.'"';}

    // La recherche
    elseif ( is_search()) {
      $rendu .= " &raquo; R&eacute;sultats de votre recherche <span>&raquo; ".get_search_query()."</span>";}

    // la page 404
    elseif ( is_404()){
      $rendu .= " &raquo; 404 Page non trouv&eacute;e";}

    //Un article
    elseif ( is_single()){
      $category = get_the_category();
      $category_id = get_cat_ID( $category[0]->cat_name );
      if ($category_id != 0) {
        $rendu .= " &raquo; ".myget_category_parents($category_id,TRUE,' &raquo; ')."<span>".the_title('','',FALSE)."</span>";}
      elseif ($category_id == 0) {
        $post_type = get_post_type();
        $tata = get_post_type_object( $post_type );
        $titrearchive = $tata->labels->menu_name;
        $urlarchive = get_post_type_archive_link( $post_type );
        $rendu .= ' &raquo; <span typeof="v:Breadcrumb"><a href="'.$urlarchive.'" title="'.$titrearchive.'" rel="v:url" property="v:title">'.$titrearchive.'</a></span> &raquo; <span>'.the_title('','',FALSE).'</span>';}}

    //Une page
    elseif ( is_page()) {
      $post = $wp_query->get_queried_object();
      if ( $post->post_parent == 0 ){$rendu .= " &raquo; ".the_title('','',FALSE)."";}
      elseif ( $post->post_parent != 0 ) {
        $title = the_title('','',FALSE);$ancestors =array_reverse(get_post_ancestors($post->ID));array_push($ancestors,$post->ID);
        foreach ( $ancestors as $ancestor ){
          if( $ancestor != end($ancestors) ){$rendu .= '&raquo; <span typeof="v:Breadcrumb"><a href="'. get_permalink($ancestor) .'" rel="v:url" property="v:title">'. strip_tags( apply_filters('single_post_title', get_the_title( $ancestor ) ) ) .'</a></span>';}
          else {$rendu .= ' &raquo; '.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'';}}}}
    if ( $ped >= 1 ) {$rendu .= ' (Page '.$ped.')';}
  }
  $rendu .= '</div>';
  echo $rendu;}

Une fois ce code en place, rendez-vous dans vos fichiers single.php, page.php, category.php, tag.php, bref tous les modèles dans lesquels vous souhaitez intégrer le fil d'ariane, et repérez ce code (ligne 18 dans page.php par exemple) :

<div id="content" role="main">

Effectuez un retour chariot (pour la lisibilité du code) et intégrez cette ligne :

<?php if (function_exists('mybread')) mybread();?>

De cette manière, il s'affichera au dessus du titre de la page. Un petit coup de CSS sera sûrement nécessaire pour régler son affichage ;-)

Supprimer les liens inutiles

Vous avez pu remarquer sur la home, dans les catégories et dans les articles que des données sont affichées : la catégorie dans laquelle est présent l'article ainsi que la date de publication.

On retrouve le lien vers l'article sur la date de publication : celui-ci ne sert à rien puisque le titre de l'article contient déjà un lien. Autant le supprimer non ? Pour ça, ouvrez à nouveau le fichier functions.php et repérez ce code, à la ligne 337 :

$date = sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><time datetime="%3$s">%4$s</time></a>',

Remplacez-le par celui-ci :

$date = sprintf( '<time datetime="%3$s">%4$s</time>',

Le titre du blog sur la page d'accueil effectue un lien vers... La page d'accueil ! Vous reconnaitrez que ce n'est pas l'idéal, d'autant que c'est le premier lien qui sera vu par les crawlers. On va donc s'atteler à supprimer ce lien. Ouvrez le header.php, rendez-vous à la ligne 38 pour trouver ce code :

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

Et remplacez-le par celui-ci :

<?php if ( is_front_page() ) : ?><h1><?php bloginfo( 'name' ); ?></h1><?php else :? ><H1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></H1><?php endif ?>

Astuce : pour éviter une requête inutile, vous pouvez noter le nom et l'URL de votre blog "en dur"

Les plus observateurs d'entre vous auront noté que sur les pages autres que la home, ce titre reste en H1, ce qui fait donc deux balises H1 sur ces pages (puisque le titre de l'article, de la page, de la catégorie, etc. est aussi en H1). Si je suis partisan du H1 unique, j'ai pris le parti de ne pas m'en soucier ici. En effet, il semblerait que le H1 unique soit amené à être dépassé.

Si vraiment vous souhaitez supprimer ce H1 sur les autres pages, remplacez les deux derniers "H1" (ceux qui sont en majuscule) par un "span", faites les ajustement nécessaires en CSS et le tour est joué ;-)

Tant que vous êtes dans le header.php, profitez-en pour insérer votre code de tracking Google Analytics juste avant la balise </head>, ça vous évitera un plugin supplémentaire ;-)

Conclusion

Nous voilà (déjà !) à la fin de cet article. Si vous avez mis en place les quelques modifications de base conseillées ici, vous pouvez désormais partir du bon pied pour améliorer le positionnement de votre site sur les moteurs de recherches.

Plus d'articles sur WordPress :
Optimiser les balises d'en-tête sur WordPress
Thème WordPress référencement : Noviseo2012

Catégorie Référencement | Thématique .

24 réponses à Optimiser TwentyTwelve sans plugin

  1. Cédric says:

    Vraiment sympa ce petit tuto et suffisamment détaillé pour que les novices comme moi soient en mesure de l’appliquer. J’espère simplement être capable de repérer les bons modèles de pages sur le FPT et surtout être capable de placer les balises au bon endroit… à suivre :)

  2. Pierre says:

    Le multiple H1 n’est pas en soi contraire à un bon balisage sémantique mais de mon côté j’ai fais le test sur plusieurs blogs par exemple et il en est ressorti que le h1 unique était bien meilleur en terme de ranking … tu as des retours à ce sujet ?

    Sinon pour les modifs il faut faire attention car à chaque mise à jour du thème elles vont sauter, il faudrait peux être plus partir sur un thème enfant.

  3. Placier says:

    Voilà un tutoriel comme je les aime : partir de la base pour optimiser un thème sans installer 10 plugin ! Moins de risque au niveau sécurité / malware (voir http://reseau.dumac.free.fr/dumaciens/article.php3?id_article=159) moins de dépendance et un pas de plus vers l’autonomie, merci !

  4. Anonyme says:

    Oui bravo pour le tutoriel c’est très bien détaillé. Autre astuce si je peut me permettre c’est d’inclure un chiffre dans l’url des articles cela permet de mieux positionner les articles liés à l’actualité et gagner en positionnement rapidement.

  5. Richard says:

    J’ai capturé le code pour le fil d’ariane ca me servira forcément :)

    Sinon, oui je suis parano mais je me dis que seul un SEO pousserait à fond l’optimisation de son site donc qu’au final ca finira par paraître louche….à panda 258 non? ;)

  6. Jérôme says:

    Décoche l’option d’affichage des smileys sur ton WordPress, tu as des smiley dans tes blocs de code :(
    Cf le dernier. Bon après c’est relativement rare ^^

  7. Lionel says:

    Les modifications que tu donnes sont essentiels, je ne comprends toujours pas pourquoi elles ne sont pas dans wordpress par défaut, en particulier le h1 sur la page d’accueil. Les modifs que tu donnes servent à tous et prennent 1h à implémenter, cela me dépasse. Merci pour les bouts de code.

  8. Guillaume says:

    J’avais trouvé Twenty Twelve vraiment sympa, il est simple mais j’ai tendance à utiliser des plugins plutôt que de me développer ce dont j’ai besoin. Avec ça on a de quoi se préparer un bon petit thème tout prêt pour du MFA :p

  9. Alex says:

    Ça m’a toujours étonné de voir que 99% des thèmes WP (payants ou gratuits) ne sont pas du tout optimisés pour le SEO ! D’un autre côté ça laisse un avantage à ceux qui savent mettre les mains de le cambouis pour les modifier… Mais quand même, le thème de base WP !! Ils auraient pu faire un effort…

  10. Eric says:

    Tres costaud ce tuto Sylvain , chapeau… Après, même si tu détailles extrêmement bien l’ensemble des actions à mener pour optimiser notre thème favori à tous ;) je pense que l’installation de certaines plug-in, notamment pour le fil d’Ariane peuvent éviter au newby de toucher son code.

    Bien sur, l’accumulation de plug-in peut rapidement devenir très lourde, d’où la nécessité de mettre un peu les mains dans le cambouis ;)

  11. Le Juge says:

    Mince j’avais raté l’article de Daniel sur le breadcrumb avec les micro data – je vais me pencher dessus tout de suite! merci pour le heads up

  12. Grégory says:

    Pourquoi ne pas proposer directement le code de Twenty Twelve incluant directement ces modifications ?

    Bon, je chipote …

    En tout cas, merci beaucoup pour cec modifs. Je m’en vais les installer sur un de mes blogs pour créer mon thème TwentyTwelve corrigé Noviseo :-)

    D’autres ajustements sont prévus :-)

  13. Christian says:

    Je l’adore ce thème Twentytwelve, j’ai un blog qui tourne avec. Un de mes ami a fait quelques optimisations dessus pour le SEO, mais il n’a pas eu le temps de tout faire, je vais donc pouvoir reprendre la main, notamment pour le fil d’ariane, bien content d’être tombé sur l’article :)

  14. Dams says:

    Hello,
    L’article contient d’excellentes remarques.
    Merci pour ce partage !
    PS : Je rejoins aussi la suggestion de Grégory, une archive prête à l’emploi ne serait pas une mauvaise idée.

  15. Bernard says:

    Bonjour,

    Merci bien pour ces codes ! Ta méthodes est simple, efficace et surtout rapide ! Oui, tu va à l’essentiel à ça j’apprécie ;)

    Est-ce que ces codes fonctionnent avec un autre thème ??

    Merci de votre réponse

  16. flexman says:

    Wha merci bien pour ce tuto, ca va me servir pour optimiser un autre thème seo, après on peut aussi prendre tes petits « hack » WordPress et les appliquer à d’autres thèmes pour rester dans sa thématique ;)

    Du coup merci bien pour le partage que ce soit pour ton thème spécialement optimisé SEO ou ces astuces.

    Au plaisir.

  17. Bernard says:

    Du coup, j’ai ma réponse avec @Flexman :)

    Merci

  18. Mathilde says:

    Salut et merci pour cet excellent article. Je mettrais ces quelques pratiques en place très rapidement sur mon site.

    J’avais juste une petite question pour le fil d’ariane. Personnellement j’utilise le fil d’ariane prévu dans le plugin « WordPress SEO », je le trouve très bien construit, on peut mettre les paramètres qu’on veut et le placer n’importe où sur la page. Je trouve aussi qu’il n’est pas trop lourd. Qu’en penses-tu ? Est-ce que tu l’as déjà testé ?

    En tout cas, merci pour ces quelques astuces.

  19. Antoine says:

    Hello,
    La partie sur la suppression des liens inutiles, très bonne idée, je vais pourvoir faire un peu de ménage, ça ne fera pas de mal à mes blogs! Merci pour les conseils ;)

  20. Geraldine says:

    Merci pour ce tuto très précis et parfait pour ceux qui ont peur de mettre les mains dans le cambouis (moi un peu). Je m’en vais suivre pas-à-pas ces reco.

    Personnellement, j’ai une question que je n’arrive pas à résoudre, au sujet des commentaires en dofollow ou en nofollow. Tantôt j’ai l’un, tantôt l’autre, de façon a priori tout à fait aléatoire. Je ne trouve pas la solution pour tout passer en dofollow, et ça me fatigue ;-) Voilà, je râle, au cas où quelqu’un aurait un conseil judicieux.

    Merci et bonne journée !

  21. roberto says:

    bonjour!
    j’ai tout suivi a la lattre, merci bcp pour ce tuto limpide!
    seul hic pour moi en tant que newbie, je n’arrive pas a modifier le css pour effacer le recapitulatif : « vous etes ici : tralalalala »

    pourriez vous me donner un coup de main??

    merci d’avance!

  22. roger says:

    Bonjour,

    Je suis novice mais j’ai essayé de suivre vos recommandations.

    Résultat message d’erreur :
    Parse error: syntax error, unexpected ‘?’ in /homez.706/monpoelej/www/wp-content/themes/twentytwelve/header.php on line 38

    Que faire ? Merci

  23. Sylvain says:

    Bonjour Roger,

    Normalement il ne devrait pas y avoir d’erreur à cet endroit là, d’autres modifications ont-elles été réalisées ?

  24. Tamistrians says:

    Bonjour,
    merci beaucoup pour ce tuto. Du coup, est ce qu’il vaut mieux utiliser le thème de base de wordpress et faire ces modifications. Ou bien utiliser le NoviSEO2012 (qui est moins récent) … ?
    Merci d’avance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Veuillez utiliser votre nom ou votre pseudo. Tout commentaire ne respectant pas cette règle verra son lien supprimé.