Comment ajouter une page de sitemap HTML dans WordPress (2 méthodes)

La plupart des sites WordPress n'ont pas une seule page qui liste tout au même endroit, obligeant les visiteurs à utiliser les menus ou la recherche pour trouver le bon contenu.

Un sitemap HTML résout ce problème en regroupant tout votre contenu important sur une seule page. Dans ce guide, nous vous montrerons comment en créer un avec un plugin et sans extraits de code.

Quelle est la différence entre les plans de site XML et HTML ?

Un sitemap XML est un fichier qui répertorie tout le contenu de votre site Web dans un format que les moteurs de recherche comme Google peuvent lire. Vous pouvez le soumettre dans Google Search Console pour aider les moteurs de recherche à trouver et à explorer vos pages plus rapidement.

Un sitemap HTML fonctionne différemment. Pensez-y comme à un panneau d'affichage dans un centre commercial.

Au lieu de guider les moteurs de recherche, il guide vos visiteurs, répertoriant vos articles et vos pages sur une seule page organisée afin que les gens puissent trouver rapidement ce qu'ils cherchaient.

Maintenant que vous connaissez la différence, regardons comment ajouter un sitemap HTML à votre site WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Ajouter une page de sitemap HTML dans WordPress avec All in One SEO

Utiliser un plugin SEO WordPress, comme le plugin gratuit All in One SEO, est le moyen le plus simple d'ajouter une page de sitemap HTML en quelques clics.

Étant donné que le plugin gère déjà votre sitemap XML et vos paramètres SEO de base, vous pouvez les gérer tous les deux depuis le même endroit au lieu d'installer un outil séparé juste pour cela.

Tout d'abord, vous devez installer et activer le plugin. Après l'activation, l'assistant de configuration s'ouvrira, où vous pourrez cliquer sur le bouton « Commencer ».

Si vous souhaitez une présentation complète de chaque paramètre, consultez notre guide sur comment configurer All in One SEO pour WordPress.

Une fois que vous avez terminé, allez dans All in One SEO » Sitemaps et cliquez sur l'onglet « Sitemap HTML ». Ensuite, activez le bouton « Activer le Sitemap ».

Ensuite, choisissez comment vous souhaitez afficher votre sitemap. Pour ce tutoriel, nous sélectionnerons l'option « Page dédiée ». Alternativement, vous pouvez l'ajouter sous forme de shortcode, de bloc ou de widget.

Une fois que vous avez fait cela, entrez l'URL où vous souhaitez que votre sitemap apparaisse, et le plugin créera automatiquement cette page pour vous.

Remarque : Comme All in One SEO crée cette page dynamiquement, elle n'apparaîtra pas dans votre liste de pages dans l'interface d'administration de WordPress. Vous pouvez toujours revenir à cet écran de paramètres pour apporter des modifications.

Ensuite, faites défiler jusqu'à la section « Paramètres du sitemap HTML ». Ici, vous pouvez choisir quels types de publication et quelles taxonomies, comme les catégories et les étiquettes, s'affichent dans votre sitemap.

Si vous souhaitez plus de contrôle, les « Paramètres avancés » vous permettent d'exclure des articles, des pages ou des termes spécifiques de la liste.

Vous pouvez également activer « Archives compactes » si vous préférez afficher votre sitemap sous forme d'archive de dates compacte plutôt que d'une liste complète. Une fois que vous êtes satisfait de vos paramètres, cliquez sur « Enregistrer les modifications ».

Votre sitemap HTML est maintenant en ligne. Si vous avez choisi l'option « Page dédiée », vous pouvez le consulter en cliquant sur le bouton « Ouvrir le sitemap HTML ».

Méthode 2 : Ajouter une page de sitemap HTML dans WordPress avec du code

Si vous ne souhaitez pas utiliser All in One SEO car vous n'avez pas besoin de ses autres fonctionnalités, vous pouvez créer un sitemap HTML en ajoutant du code personnalisé au fichier functions.php de votre thème enfant.

Cependant, la moindre erreur peut faire planter tout votre site et provoquer l'écran blanc de la mort de WordPress.

C'est pourquoi nous vous recommandons d'utiliser un plugin d'extraits de code comme WPCode. Sa version gratuite vous permet d'ajouter et de gérer votre code en toute sécurité sans toucher aux fichiers de votre thème.

La première chose à faire est d'installer et d'activer le plugin WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois qu'il est actif, allez dans Extraits de code » + Ajouter un extrait depuis votre tableau de bord WordPress. Survolez « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur « Utiliser l'extrait ».

Sur le nouvel écran, sélectionnez « Extrait PHP » comme type de code, et donnez un titre à votre extrait pour pouvoir le retrouver plus tard. Il peut s'agir de quelque chose comme « Sitemap HTML ».

Ensuite, collez le code suivant dans la boîte « Aperçu du code ».

function custom_html_sitemap() {
    $out = '<ul class="custom-sitemap">';

    // Pages
    $pages = get_pages(
        array(
            'sort_column' => 'menu_order,post_title',
            'post_status' => 'publish',
        )
    );

    foreach ( $pages as $page ) {
        $out .= sprintf(
            '<li><a href="%s">%s</a></li>',
            esc_url( get_permalink( $page->ID ) ),
            esc_html( get_the_title( $page->ID ) )
        );
    }

    // Recent posts
    $recent_posts = get_posts(
        array(
            'posts_per_page'      => 50,
            'post_status'        => 'publish',
            'orderby'            => 'date',
            'order'              => 'DESC',
            'post_type'          => 'post',
            'ignore_sticky_posts' => true,
        )
    );

    foreach ( $recent_posts as $p ) {
        $out .= sprintf(
            '<li><a href="%s">%s</a></li>',
            esc_url( get_permalink( $p->ID ) ),
            esc_html( get_the_title( $p->ID ) )
        );
    }

    $out .= '</ul>';

    return $out;
}

add_shortcode( 'custom_html_sitemap', 'custom_html_sitemap' );

Ce code liste d'abord toutes vos pages publiées, puis vos 50 articles les plus récents, et encapsule le tout dans un shortcode appelé [custom_html_sitemap] que vous pouvez placer sur n'importe quelle page.

Une fois que vous avez terminé, basculez l'interrupteur en haut de « Inactif » à « Actif », puis cliquez sur « Enregistrer l'extrait ».

Maintenant, créez une nouvelle page en allant dans Pages » Ajouter, ou ouvrez une page existante où vous souhaitez afficher votre sitemap. Ajoutez un bloc « Shortcode » et collez-y le shortcode suivant :

[custom_html_sitemap]

Une fois la page publiée, vos visiteurs verront une simple liste de vos pages et de vos articles récents, tous liés et prêts à être parcourus.

FAQ sur le sitemap HTML

Un sitemap HTML est-il bon pour le SEO ?

Oui. Un sitemap HTML ajoute un lien interne vers chaque page importante de votre site, ce qui aide les moteurs de recherche à découvrir votre contenu. Il rend également votre site plus facile à naviguer pour les visiteurs.

Le sitemap HTML se met-il à jour automatiquement lorsque j'ajoute du nouveau contenu ?

Oui. Que vous utilisiez All in One SEO ou la méthode de code personnalisé ci-dessus, votre sitemap se met à jour automatiquement chaque fois que vous publiez un nouvel article ou une nouvelle page. Vous n'aurez rien de plus à faire pour le maintenir à jour.

Où dois-je placer mon sitemap HTML ?

L'endroit le plus courant pour lier votre sitemap HTML est le pied de page de votre site web. Cela le rend accessible depuis n'importe quelle page sans encombrer votre menu de navigation principal.

Un autre bon endroit est votre page d'erreur 404. Si un visiteur tombe sur un lien brisé, un lien vers votre sitemap HTML peut l'aider à trouver ce qu'il cherchait.

Comment ajouter ma nouvelle page de sitemap HTML à mon menu de navigation ?

Une fois votre sitemap publié, allez dans Apparence » Menus dans votre tableau de bord d'administration WordPress pour l'ajouter à n'importe quel menu. Si vous avez utilisé la méthode de code personnalisé, cochez la case à côté de votre nouvelle page.

Cependant, si vous avez utilisé All in One SEO, votre page créée dynamiquement n'apparaîtra pas dans la liste des pages. Vous devrez cliquer sur l'onglet « Liens personnalisés » pour coller l'URL de votre sitemap.

Si vous utilisez un thème bloc, vous devrez ajouter le lien via l'Éditeur de site à la place.

Tutoriel vidéo

Nous espérons que cet article vous a aidé à apprendre comment ajouter une page de sitemap HTML dans WordPress. Vous voudrez peut-être aussi voir comment afficher la navigation par fil d'Ariane dans WordPress et notre guide complet sur le référencement WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.