Pour assurer une bonne performance en SEO de nombreux sites WordPress s’équipent du plug-in Rank Math. Découvrez les opportunités de cette solution SEO tout-en-un associée au thème professionnel Flatsome.
Vous êtes un pro ? Allez directement à la section intégration.
Introduction : qu’est-ce que Rank Math et Flatsome ?
Un socle sur WordPress
Lorsqu’il s’agit de construire un site vitrine ou e-commerce, plus de 40% des internautes choisissent le CMS (Content Management System) WordPress associé à un thème et quelques extensions.
Le socle technologique à la fois simple et flexible que propose WordPress permet à de nombreuses marques et projets de se doter de sites vitrines et e-commerce performants et bien référencés.
🙋♂️ Qu’est-ce que c’est, un « bon référencement » ?
Le web est large et les sites sont nombreux. Les moteurs de recherche comme Google et Bing de Microsoft permettent aux internautes de naviguer dans cette masse d’informations à l’aide de mots-clés et expressions.
En effet, quand vous tapez « Programisto Bordeaux » par exemple, vous trouverez plus d’informations sur nous qu’en tapant « Tech Bordeaux« .
La pertinence du positionnement de votre site sur ce marché de mots-clés est cruciale : c’est ce qu’on appelle le SEO pour Search Engine Optimization.
À quoi sert l’extension WordPress Rank Math SEO ?
Il existe de nombreuses extensions gratuites et payantes sur le store WordPress permettant d’améliorer votre score SEO à l’aide de modules plus ou moins simples à manipuler. Le leader mondial de ce marché spécifique se nomme Rank Math SEO et c’est ce plug-in – en version gratuite – en particulier que nous étudierons à travers cet article.
À savoir ; nous utilisons Rank Math sur l’ensemble des sites WordPress produits par Programisto et Brumisphère : programisto.fr, brumisphere.com, lahorde.tech, bijouxcailloux.fr, aucomptoiriberique.com…
Rank Math est à la fois puissant, léger, complet et simple à utiliser. De plus, l’extension est mise à jour très régulièrement par l’équipe tech ce qui lui confère une fiabilité et une avance sans pareille versus ses concurrents directs.
Rank Math vous servira nottament pour :
- Construire une architecture de publications adaptée à vos objectifs SEO
- Éditer l’apparence de votre site dans les résultats de recherche (texte, images, liens…)
- Construire un système de fils d’Ariane puissant permettant d’optimiser la lisibilité de la structure de votre site par les moteurs de recherche
- Lier les outils nécessaires au webmastering et au webmarketing pour plus de données et de trafic
Pourquoi choisir le thème WordPress Flatsome ?
Choisir un thème reste un point déterminant de la construction de votre site sur WordPress, qu’il soit simplement vitrine ou e-commerce voire spécialisé dans un secteur. À chaque thème ses spécificités, sa performance SEO, sa complexité et ses exclusivités.
Flatsome est un thème spécialisé dans le e-commerce qui s’adapte à de nombreuses situations. Son builder de contenus intégré et sa structure ultra-légère assurent une flexibilité et une performance très attirante et agréable à manipuler.
Avec un prix fixe de 59 $, Flatsome reste l’un des thèmes #1 sur WordPress et encore plus lorsqu’il s’agit d’associer l’extension Woocommerce à votre site.
Comment installer Rank Math sur WordPress ?
Ajouter l’extension à mon site
Installer Rank Math sur son site WordPress prend à peine plus de 2 minutes.
Dans la plupart des cas, il est préférable de télécharger le plugin directement à partir du panneau d’administration. C’est la méthode standard et WordPress automatise certaines des étapes pour vous.
Il n’y a qu’un seul inconvénient à l’installation via le panneau : certains serveurs sont configurés pour rejeter les téléchargements de fichiers dépassant une certaine taille. Il se peut donc que vous receviez des messages d’erreur lorsque vous essayez d’installer des plugins plus volumineux de cette manière.
Ce n’est pas un gros problème – si vous ne pouvez pas installer Rank Math via WP Admin, vous pouvez passer à la méthode utilisant le FTP.
Accédez à l'ajout d'extensions
Recherchez et installez Rank Math
Activez le plugin
Et voilà, vous utilisez Rank Math
Paramétrer l’extension après la première installation
La suite du paramétrage est à la fois très simple et (presque) sans fin. En effet, l’extension est très complète et permet de pousser les opportunités de positionnement de manière professionnelle.
Un set-up peut prendre entre 3 jours et plusieurs semaines selon la taille du site et de son contenu, de sa stratégie SEO et de son degré de personnalisation et récurrence de mise à jour.
Voici les étapes principales de ce démarrage simplifié avec l’assistant de configuration :
- Si vous n’avez pas utilisé l’assistant de configuration lorsque vous avez installé Rank Math pour la première fois, vous pouvez l’exécuter à nouveau en vous rendant sur WordPress Dashboard > Rank Math > Dashboard > onglet Setup Wizard. Nous vous conseillons d’utiliser le mode Avancé de l’assistant de configuration. Ce dernier commencera par vérifier la compatibilité de votre site avec l’extension.
- L’onglet Importer montre toutes les données disponibles sur votre site web à partir d’autres plugins SEO, que vous pouvez importer dans Rank Math. L’extension s’assure que vous ne perdez rien lors de la migration vers en important les données des autres extensions.
- L’onglet votre site vous permet d’indiquer le secteur d’activité de votre site. Qu’il s’agisse d’un blog de loisir, d’une boutique en ligne, du site d’une organisation ou d’autre chose ; sur la base de votre réponse, Rank Math ajoute le code approprié à votre site afin que Google le référence en ce sens.
- Ce même onglet vous permettra d’ajouter un logo générique à votre site pour Google ; la résolution minimale prise en charge est de 160X90 px, et la résolution maximale prise en charge est de 1920X1080 px. Si vous avez une version carrée de votre logo, nous vous recommandons de l’utiliser. Vous pourrez également mettre en place une image de partage sur les réseaux sociaux par défaut ; celle qui s’affichera lors du partage du lien vers votre site sur un réseau social comme Facebook ou Twitter par exemple. La mise en place est similaire : cliquez simplement sur le bouton Ajouter ou Télécharger, et sélectionnez ou téléchargez votre image depuis le gestionnaire de médias de WordPress. La résolution recommandée est de 1200X630 px.
- On ne peut pas améliorer ce que vous ne pouvez pas mesurer. C’est pourquoi l’onglet Analytics vous guidera pour lier votre site aux outils Google de suivi de données tels que Google Analytics, Google Search Console, Google News… Via ce panneau de configuration, vous pourrez également choisir d’utiliser Rank Math pour insérer automatiquement le tag Analytics sur votre site ou même vérifier ce-dernier auprès de la Search Console de Google.
- L’onglet Sitemaps est un premier pied dans une utilisation plus poussée de l’extension. Les sitemaps sont des index permettant aux moteurs de recherche de trouver rapidement les pages et les articles de votre site Web. Ils peuvent être comparés aux index que l’on trouve dans un livre. Rank Math dispose d’un générateur de sitemap intégré, conforme aux normes de Google, qui crée automatiquement le sitemap de votre site. Nous vous recommandons d’activer l’option sur l’ensemble des publications de votre site et d’y ajouter les images, taxonomies, vidéos…
- Enfin, dans l’étape d’optimisation, certains paramètres simples de référencement de votre site Web qui ont un impact important peuvent être appliqués ou non.
Le site officiel de Rank Math vous présente cette mise en place en détails ici.
Rank Math – Utilisation avancée
Cet article ne présente que les bases d’utilisation du plugin. Il est cependant essentiel de garder en tête qu’un outil aussi puissant se dit d’être monitoré, adapté, mis à jour de manière récurrente par un opérateur tel qu’un webmaster.
Une utilisation avancée et régulière vous permettra d’observer les évolutions du positionnement SEO de votre site web et de viser certaines opportunités de placement, d’adapter votre contenu en conséquence et de remonter dans les résultats de recherche plus rapidement.
Ce tutoriel présente un cas pratique extrêmement précis ; chaque stratégie SEO doit être finement adaptée aux objectifs recherchés par la marque. L’extension et les solutions présentées au sein de cet article ne représentent qu’une infime partie du monde sans fin du travail de SEO.
L’équipe Programisto est experte de ces outils et vous confèrera une maîtrise opérationnelle digne d’une entreprise qui prend la main sur son SEO et non l’inverse !
Intégrer Rank Math et Flatsome
Après cette présentation rapide de l’installation de l’extension à son premier paramétrage, concentrons-nous sur son intégration complète avec le thème WordPress Flatsome.
Attention : pour pouvoir réaliser ces méthodes par vous même, il est nécessaire que le thème Flatsome soit installé sur votre site. Vous pourrez le trouver facilement en ligne pour une modique somme – bien méritée.
Rank Math et Flastome : quelles opportunités SEO ?
Tout d’abord, comme évoqué précédemment, l’association entre WordPress, Rank Math et Flatsome permet d’aller très loin en terme de puissance et précision et ce pour tout type de site – du e-commerce au site vitrine.
Avantages en terme de scalabilité et durabilité
- L’ensemble des outils sont mis à jour très régulièrement suivant les dernières recommendations et critères changeants diffusés par les principaux moteurs de recherche comme Google et Bing de Microsoft.
- Le prix augmente avec vos besoins. WordPress est un outil open-source et gratuit, Rank Math dispose d’une version gratuite et pro payante et Flatsome ne coûte que 59 $ à vie. Plus vous avancerez, plus vos besoins seront importants et ces outils peuvent grandir avec vous sans vous coûter trop cher. Investissez plus dans un webmaster, moins dans les outils.
- De nombreux autres facteurs entrent en jeu pour que votre site web grandisse sainement et rapidement, mais ces outils resteront un socle solide sur lequel vous pourrez avoir confiance
Avantages ergonomiques et SEO
- Flatsome intègre de manière native les fils d’Ariane de Rank Math, essentiels pour garantir la bonne compréhension de la structure de votre site par les moteurs de recherche (et donc une bonne position de vos pages dans leurs résultats) – e-commerce compris.
- Le thème possède un UX builder intégré qui vous permet de copier-coller simplement des shortcodes Rank Math ou vous le souhaitez sur vos pages et dans le style préféré
- Enfin, Flatsome est un thème extrêmement léger et bien pensé, qui vous permettra d’atteindre des hauts scores de performance de chargement de votre contenu dès l’installation. C’est un point crucial pour assurer que votre travail en SEO soit probant : un chargement rapide et une bonne structure du contenu avant-tout.
Les fils d’Ariane Rank Math sur Flatsome : comment les activer ?
D’abord, rendez-vous dans l’onglet Rank Math du Back Office dédié aux fils d’Ariane :
Rank Math > Réglages Généraux > Fil d’Ariane
Et activez l’option sur votre site. Paramétrez ensuite les options de base.
Code référence de Rank Math
Il existe plusieurs lignes de codes à connaître pour bien intégrer les fils d’Ariane Rank Math sur Flatsome. En effet, nous avons remarqué que certaines pages / certains articles n’affichaient pas le bon enchainement de contenu et liens.
Par exemple, les portfolios de Flatsome n’affichent par défaut qu’un seul niveau de contenu : celui sur lequel vous naviguez. Le rôle de cet élément de navigation ne sert donc plus son objectif de facilitateur. En réalité, les fils d’Ariane de l’extension Rank Math ne sont même pas présents sur ces pages portfolio.
Nous allons d’abord présenter le code générique fournit par Rank Math pour manipuler les fils d’Ariane, avant d’aller chercher des exemples précis sur Flatsome plus bas dans cet article.
Code #1 : ajouter le fil d’Ariane Rank Math dans une archive (articles de blog et portfolio)
Il n’est pas possible d’ajouter proprement les fils d’Ariane sur les contenus structurés de WordPress comme les articles de blog, les portfolios ou leurs archives (tags, catégories, résultats de recherche) via l’éditeur classique de WordPress.
En effet, il est nécessaire d’éditer directement le template de ces éléments, présents dans le thème.
Rank Math fournit donc ce code à insérer – au bon endroit – au sein de votre thème :
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
Code #2 : filtrer un fil d’Ariane et ajouter le niveau de votre choix
Sur certaines pages, il est nécessaire d’ajouter manuellement un niveau sur le fil d’Ariane, que ce soit au début au centre ou à la fin de ce-dernier et ce avec n’importe quel lien.
Rank Math fournit donc ce code à insérer – au bon endroit – au sein de votre thème :
/**
* Allow changing or removing the Breadcrumb items
*
* @param array $crumbs The crumbs array.
* @param Breadcrumbs $this Current breadcrumb object.
*/
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
//Adding to single posts
if(is_singular('post')){
//pass an array containing the name of the crumb, URL and
//hide_in_schema option
$value[] = array(
'Accueil',
'https://programisto.fr',
'hide_in_schema' => false
);
//add this value as the second item in array
array_splice( $crumbs, 0, 0, $value );
return $crumbs;
}
return $crumbs;
}, 10, 2);
Pour choisir le niveau où vous souhaitez placer le nouveau niveau de fil d’Ariane, changez le premier chiffre au sein de cette ligne :
array_splice( $crumbs, 0, 0, $value );
Par exemple, pour le placer au second niveau, le code serait :
array_splice( $crumbs, 1, 0, $value );
Code #3 : supprimer un niveau dans le fil d’Ariane Rank Math
Nous avons remarqué que certains changements opérés sur des archives de produits ont également un impact sur les pages « Mon Compte » de Woocommerce en utilisant Flatsome et son fil d’Ariane.
Il faut garder à l’esprit qu’en customisant votre structure via le code, il est nécessaire de bien assigner les changements au bon contenu. Des filtres existent pour cela, ils sont utilisés dans nos exemples au débuts du code ; ils commencent par « IF ». Le code ne se déclenche alors que sur le contenu spécificié après ce « IF ». Manipuler le code et votre thème reste une manoeuvre risquée – rapidement effectuée par des pros. N’oubliez jamais de faire un backup et de bien tester l’ensemble de votre site après tout changement !
Cas d’usage : voici un exemple de code permettant de supprimer le deuxième élément du fil d’Ariane au sein des pages produits de Woocommerce ; code à insérer – au bon endroit – au sein de votre thème.
/**
* Allow changing or removing the Breadcrumb items
*
* @param array $crumbs The crumbs array.
* @param Breadcrumbs $this Current breadcrumb object.
*/
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
if(is_product() || is_product_category()){
unset($crumbs[1]);
$crumbs = array_values($crumbs);
return $crumbs;
}
return $crumbs;
}, 10, 2);
De la même manière que dans le cas du code #2, si vous souhaitez changer le niveau visé utilisez cette ligne et changez le chiffre 1 :
if(is_product() && isset($crumbs[1])){unset($crumbs[1]);
Par exemple pour enlever le premier niveau (homepage) :
if(is_product() && isset($crumbs[0])){unset($crumbs[0]);
Où placer son code personnalisé sur Flatsome
Si vous ne passez pas par les shortcodes fournis, il est nécessaire de placer le code customisé au bon endroit au sein de votre thème.
Ajouter le fil d’Ariane sur les types de posts « Portfolio » et « Blog »
Les pages de type portfolio et blog n’affichent pas de manière native le fil d’Ariane de Rank Math. Pour les remplacer et afficher un élément de navigation pertinent, il faut certaines templates-parts en y insérant le code #1 ou la méthode PHP classique pour ajouter le shortcode.
Il faudra ajouter ces nouveaux fichiers via FTP.
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les pages archives des publications portfolios sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les informations des pages simples des publications portfolios sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les informations des pages simples des publications portfolios sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les informations des pages simples des publications portfolios sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les archives des publications blog et des résultats de recherche sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les archives des publications blog et des résultats de recherche sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les pages simples des publications blog sur Flatsome
Template personnalisée pour utiliser le fil d’Ariane Rank Math dans les pages simples des publications blog sur Flatsome
Ajuster les changements (traductions, niveaux…)
Une fois ces ajouts de fichiers au sein du child theme de Flatsome, quelques adaptations sont nécessaires. En effet, les fils d’Ariane intégrés ne reflèteront pas directement le contenu souhaité, et vous devrez utiliser les codes fournis par Rank Math pour adapter définitivement votre structure.
Il vous faudra alors ajouter le code personnalisé au sein du fichier functions.php du child-theme.
Source :
Personnalisation avancées et exemples concrets
Le premier exemple et changement nécessaire à apporter lors de l’intégration des fils d’Ariane de Rank Math sur Flatsome concerne les type de publications Portfolio.
Dans l’exemple ci-dessous nous :
- Changeons le second niveau du fil d’Ariane en français et en anglais (titre affiché et lien de redirection)
- Traduisons le premier niveau de fil d’Ariane en anglais (Accueil > Home) et changeons son lien
/********************************************************/
// Change Portfolio Name in Rank Math Breadcrumbs + redirect URL + translations
/********************************************************/
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
$currentlang = get_bloginfo('language');
if ( is_singular( $post_types = 'featured_item' )) {
if ($currentlang=="fr-FR" ) {
$modifiedCrumb = array(
"0"=>esc_html('Réalisations'),
"1"=>esc_url('/realisations/'),
"hide_in_scheme"=>false
);
$crumbs[count($crumbs)-3] = $modifiedCrumb;
}
elseif ( $currentlang=="en" ) {
$modifiedCrumb = array(
"0"=>esc_html('Achievements'),
"1"=>esc_url('/en/achievements/'),
"hide_in_scheme"=>false
);
$crumbs[count($crumbs)-3] = $modifiedCrumb;
$modifiedCrumb1 = array(
"0"=>esc_html('Home'),
"1"=>esc_url('/en/'),
"hide_in_scheme"=>false
);
$crumbs[count($crumbs)-4] = $modifiedCrumb1;
}
}
return $crumbs;
}, 10, 2);
Puis, nous ajoutons un second niveau aux archives des types de publications Portfolio en français et en anglais comme il suit :
/**
* Add second level in portfolio-archive breadcrumbs
*/
function is_featured_item_archive () {
return ( is_archive()) && 'featured_item' == get_post_type();
}
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
$currentlang = get_bloginfo('language');
if(is_featured_item_archive() && $currentlang=="fr-FR"){
$value[] = array(
'Réalisations',
'/realisations/',
'hide_in_schema' => false
);
array_splice( $crumbs, 1, 0, $value );
return $crumbs;
}
elseif (is_featured_item_archive() && $currentlang=="en") {
$value[] = array(
'Achievements',
'/en/achievements/',
'hide_in_schema' => false
);
array_splice( $crumbs, 1, 0, $value );
return $crumbs;
}
return $crumbs;
}, 10, 2);
Bonus : quelques tips & tricks avec une utilisations de WooCommerce
Cacher le premier niveau des archives produits – une fois les portfolios customisés, un niveau supplémentaire s’ajoute aux fiches produit qu’il faut manuellement retirer.
/**
* Hide first level in product-archive breadcrumbs
*/
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
if(is_product() && isset($crumbs[1])){
unset($crumbs[1]);
$crumbs = array_values($crumbs);
return $crumbs;
}
return $crumbs;
}, 10, 2);
Travailler les pages Mon Compte de Woocommerce pour y faire apparaitre la homepage, la page Mon Compte et les détails de navigation.
/**
* Work on woocommerce my account breadcrumbs
*/
add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {
global $wp;
$request = explode( '/', $wp->request );
if ( ! ( end($request) == 'compte' ) && is_wc_endpoint_url() ) {
$endpoint = WC()->query->get_current_endpoint();
switch ($endpoint) {
case "downloads":
$endpoint_title = "Mes téléchargements";
break;
case "orders":
$endpoint_title = "Mes commandes";
break;
case "edit-address":
$endpoint_title = "Mes addresses";
break;
case "edit-account":
$endpoint_title = "Tableau de bord";
break;
case "payment-methods":
$endpoint_title = "Moyens de paiement";
break;
default:
$endpoint_title = "";
break;
}
$modifiedCrumb = array(
"0"=>esc_html(''.$endpoint_title.''),
"1"=>esc_url(''),
"hide_in_scheme"=>false
);
$crumbs[count($crumbs)-1] = $modifiedCrumb;
$value[] = array(
'Mon compte',
'/compte/',
'hide_in_schema' => false
);
array_splice( $crumbs, 1, 0, $value );
return $crumbs;
}
return $crumbs;
}, 10, 2);
Utilisation avec un site e-commerce
Google demande l’utilisation d’un Schema (modèle de données structurées) spécifique pour les produits.
Le Schema Produit a des propriétés obligatoires dont :
- Name
- Review, aggregateRating ou offers
Et des propriétés recommandées :
- Aggregate rating
- Brand
- Description
- Image
- Offers
- Review
- GTIN
- SKU
Source :
Le référencement consiste, dans un sens, à fournir le plus d’informations sur ses données. C’est pourquoi les propriétés recommandées ne sont pas à négliger afin d’obtenir un bon référencement sur ceux-ci.
Rankmath propose une compatibilité complète entre les données saisies de Woocommerce et celles du Schema Produit.
Rankmath > Tableau de bord > Schéma (données structurées)
A title
Image Box text
Réglages > Produits > Type de Schéma > Activer « Produit Woocommerce »
A title
Image Box text
Cependant, les données Schema Category sont à désactiver pour éviter un conflit avec Flatsome qui fournit ses propres données de Schema Category :
A title
Image Box text
Il est possible de vérifier le bon emploi de ses données structurées sur l’outil Google Structured Data Testing Tool
A title
Image Box text
Exemple :
A title
Image Box text
Également, la Search Console vous aide à identifier et corriger ces problèmes de Schema Produit :
A title
Image Box text
A title
Image Box text
Ces bonnes pratiques vous permettent un meilleur référencement, ainsi qu’un meilleur CTR grâce au rendu visuel de vos produits qui devient plus attrayant :
A title
Image Box text
Également, cette bonne configuration vous permet d’être éligible aux résultats sur Google Shopping via la soumission de flux produits vers Google Merchant Center.
Trick pour remplir le Champ « Brand » :
// Add Brand for Products.
add_filter( 'rank_math/snippet/rich_snippet_product_entity', function( $entity ) {$entity['brand'] = 'Bijoux Cailloux' ;return $entity;
});
Trick pour désindexer les pages paginées de Flatsome :
Avec Flatsome (surtout si l’on utilise l’infinite scroll), il vaut mieux désactiver l’indexation des pages paginées (/page/2) pour éviter du duplicate de Title & Métas :
Rank Math > Titres & Méta > Pages Diverses
A title
Image Box text
