Comment intégrer Rank Math SEO à Flatsome sur WordPress ? Guide 2021 complet

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. 

À 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.

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

/**
 * 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);

array_splice( $crumbs, 0, 0, $value );

array_splice( $crumbs, 1, 0, $value );

/**
 * 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);

	if(is_product() && isset($crumbs[1])){unset($crumbs[1]);

	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 :

Google Developers & schema.org

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 :

Google Developers & schema.org

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 suivant : https://search.google.com/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

100% expériences numériques

Vos enjeux nous importent, votre cible devient nôtre et vous pourrez vous appuyer sur une équipe tech compétente et réactive. On y va ?

Soumettre un projet Soumettre un projet

Retour aux articles Notre expertise