Comment ajouter les balises meta description et meta title dans WordPress ?

Quel est l’intérêt d’ajouter les balises meta title et meta description sur WordPress ?

Vous le savez sûrement, un bon site web est un site qui récolte du trafic et remplit ses objectifs. Un des moyens d’obtenir du trafic est le référencement naturel, c’est à dire, le fait d’être indexé dans les moteurs de recherche (surtout Google qui domine avec près de 90% de parts de marché).

Le fonctionnement d’un moteur de recherche est relativement simple. Il scanne les pages des sites web et évalue ensuite leur pertinence pour des mots clés donnés. Deux des critères les plus importants pour mieux se positionner sont les balises meta title et balises meta description de la page.

La première permet aux moteurs de connaître le thème d’une page en une phrase et la deuxième permet d’apporter plus de contexte et surtout, elle s’affiche dans le classement des pages de ces moteurs et influe sur le taux de clic.

Par défaut, WordPress ne gère pas ces deux balises, il faut les ajouter via un plugin (comme Yoast SEO par exemple) ou via le fichier « functions.php ». Nous allons prendre la deuxième option et commencer dès maintenant !

Création des fonctions permettant d’ajouter la balise meta description et meta title sur WordPress

Voici ce que nous allons faire concrètement pour installer ces balises :

1. Ajouter une « meta box » sur nos articles et pages
2. Dans cette « meta box » nous ajouterons les deux champs : title, description
3. Nous sauvegarderons les données dans des « post meta » (données rattachés à un post ou une page)
4. Nous gérerons l’affichage des balises sur le site

Création d’une meta_box dans les articles et pages WordPress

Pour commencer, ouvrez votre fichier « functions.php » et ajoutez le code suivant pour ajouter une meta box dans les articles et les pages :

// On créer une fonction qui va ajouter une meta_box dans les posts et les pages
function tutowp_meta_tags_meta_boxes() {
    add_meta_box('tutowp_meta_tags_meta_boxes', 'Référencement naturel', 'tutowp_meta_tags_meta_boxes_callback', ['post', 'page']);
}
// On accroche notre fonction au hook "add_meta_boxes", hook qui permet de charger les meta_boxes (d'où son nom !)
add_action('add_meta_boxes', 'tutowp_meta_tags_meta_boxes');

Si vous vous rendez dans l’un de vos articles, vous remarquerez qu’une meta box « Référencement naturel » apparaît maintenant en bas de l’écran. La meta box est vide mais nous allons y remédier. Voici comment ajouter du contenu dans notre meta box, en l’occurence, nous allons ajouter deux champs : un pour le titre et un pour la description.

Ajoutez ce code à la suite de l’autre :

// On créer une fonction pour afficher la meta_box dans les pages et posts
function tutowp_meta_tags_meta_boxes_callback($post){
    $tutowp_meta_tag_title = get_post_meta($post->ID, 'tutowp_meta_tag_title', true);
    $tutowp_meta_tag_description = get_post_meta($post->ID, 'tutowp_meta_tag_description', true);
    ?>
        <table class="form-table">
            <tbody>
                <tr>
                    <th><label for="tutowp-meta-tag-title">Balise "title"</label></th>
                    <td><input id="tutowp-meta-tag-title" class="regular-text" type="text" name="tutowp_meta_tag_title" placeholder="Entrez votre balise title" value="<?php echo $tutowp_meta_tag_title; ?>"/></td>
                </tr>
                <tr>
                    <th><label for="tutowp-meta-tag-description">Balise "description"</label></th>
                    <td><textarea id="tutowp-meta-tag-description" class="large-text" rows="6" type="text" name="tutowp_meta_tag_description" placeholder="Entrez votre balise description"><?php echo $tutowp_meta_tag_description; ?></textarea></td>
                </tr>
        </table>
    <?php
}

Vous noterez l’utilisation des fonctions « get_post_meta » qui permettent de récupérer les données que nous allons enregistrer. Pour le moment, ça ne récupère aucune information (car nous ne les avons pas sauvegardé) mais par la suite, elles permettront de récupérer la valeur inscrite dans chaque champ.

Désormais, les deux champs s’affichent dans votre meta box. Mais une meta box qui ne sauvegarde pas les données ne sert à rien ! Nous allons maintenant créer une fonction permettant l’enregistrement des données et de les relier à nos articles et pages.

Ajoutez le code suivant à la suite :

// On créer une fonction pour sauvegarder les balises en base de données
function tutowp_meta_tags_save_postdata($post_id){
    if(isset($_POST['tutowp_meta_tag_title']) && isset($_POST['tutowp_meta_tag_description'])){
        update_post_meta($post_id, 'tutowp_meta_tag_title', $_POST['tutowp_meta_tag_title']);
        update_post_meta($post_id, 'tutowp_meta_tag_description', $_POST['tutowp_meta_tag_description']);
    }
}
add_action('save_post', 'tutowp_meta_tags_save_postdata');

Ici, on créer une fonction qui se chargera de vérifier si nous avons envoyé les données : si c’est le cas, on les sauvegardera grâce à la fonction « update_post_meta », sinon, on ne fera rien.

A ce stade du tutoriel, vous pouvez maintenant voir une meta box « Référencement naturel » dans vos articles et pages WordPress, remplir les champs titre et description ainsi que sauvegarder les données inscrites dans ces champs.

Gestion de l’affichage des balises meta title et meta description sur votre site WordPress

Maintenant que nous avons gérer la mise en place de ces balises en backoffice, il faut maintenant les afficher dans la balise « head » de votre site pour qu’elles puissent être scannées par les moteurs de recherche.

Ajoutez le code suivant à la suite :

// On créer une fonction pour afficher le titre dans WordPress
function tutowp_wp_title_filter(){
    if(is_singular()){
        $post = get_queried_object();
        $post_title = get_post_meta($post->ID, 'tutowp_meta_tag_title', true);
        return $post_title;
    }
}
// On accroche cette fonction au filtre "wp_title"
add_filter('wp_title', 'tutowp_wp_title_filter', 20, 2);

// On créer une fonction pour afficher la meta description dans WordPress
function tutowp_meta_description_action(){
    if(is_singular()){
        $post = get_queried_object();
        $post_meta_description = get_post_meta($post->ID, 'tutowp_meta_tag_description', true);
        echo '<meta name="description" content="'.$post_meta_description.'">';
    }
}
// On accroche la fonction au header de WordPress
add_action('wp_head', 'tutowp_meta_description_action', 1);

Vous pouvez maintenant gérer les balises title et meta description dans WordPress sur l’ensemble de vos articles et de vos pages. Il n’y a plus qu’à optimiser votre référencement naturel !

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !