How to integrate Rank Math SEO with Flatsome on WordPress? Complete 2021 Guide

To ensure good SEO performance many WordPress sites are equipping themselves with the Rank Math plugin. Learn about the opportunities of this all-in-one SEO solution combined with the professional theme Flatsome.

Are you a pro? Go directly to the integration section.

Introduction: what is Rank Math and Flatsome

A foundation on WordPress

When it comes to building a showcase or e-commerce site, more than 40% of Internet users choose the CMS (Content Management System) WordPress associated with a theme and some extensions.;

The simple yet flexible technological foundation that WordPress offers allows many brands and projects to build high-performance, well-referenced storefront and e-commerce sites.

What is the WordPress Rank Math SEO extension for?

There are many free and paid extensions on the WordPress store that allow you to improve your SEO score with the help of modules that are more or less easy to handle. The world leader in this specific market is called Rank Math SEO and it is this plug-in – in free version – in particular that we will study through this article.

To know: we use Rank Math on all WordPress sites produced by Programisto and Brumisphere: programisto.fr, brumisphere. com, lahorde.tech, bijouxcailloux.fr, aucomptoiriberique.com…

Rank Math is powerful, lightweight, comprehensive and easy to use. Moreover, the extension is updated very regularly by the tech team which gives it an unparalleled reliability and edge over its direct competitors.

Rank Math will serve you notably for:

• Build a publication architecture adapted to your SEO objectives
.
• Edit the appearance of your site in search results (text, images, links…)
• Build a powerful breadcrumb system to optimize the readability of your site structure by search engines
• Link the tools needed for webmastering and webmarketing for more data and traffic.

Why choose the WordPress theme Flatsome

Choosing a theme remains a determining point in the construction of your site on WordPress, whether it is simply a storefront or e-commerce or even specialized in an industry. To each theme its specificities, its SEO performance, its complexity and its exclusivities.

Flatsome is a theme specialized in e-commerce that adapts to many situations. Its built-in content builder and ultra-lightweight structure ensure flexibility and performance that is very attractive and fun to work with. 

With a fixed price of $59, Flatsome remains one of the #1 themes on WordPress and even more so when it comes to pairing the Woocommerce extension with your site.

How to install Rank Math on WordPress

Add the extension to my site

Installing Rank Math on your WordPress site takes just over 2 minutes.

In most cases, it’s best to download the plugin directly from the admin panel. This is the standard method and WordPress automates some of the steps for you.

There is only one drawback to installing via the panel: some servers are configured to reject downloads of files over a certain size. So you may get error messages when you try to install larger plugins this way.

This isn’t a big deal – if you can’t install Rank Math via WP Admin, you can switch to the method using FTP.

Setting up the extension after the first installation

The rest of the setup is both very simple and (almost) endless. Indeed, the extension is very complete and allows you to push positioning opportunities in a professional way.

A set-up can take between 3 days and several weeks depending on the size of the site and its content, its SEO strategy and its degree of customization and recurrence of updates.

Here are the main steps of this simplified startup with the configuration wizard:

• If you did not use the Setup Wizard when you first installed Rank Math, you can run it again by going to WordPress Dashboard > Rank Math > Dashboard > Setup Wizard tab. We recommend that you use the Advanced mode of the Setup Wizard. This will start by checking your site for compatibility with the extension.
• The Import tab shows all the data available on your website from other SEO plugins, which you can import into Rank Math. The extension makes sure you don’t lose anything when migrating to by importing data from other extensions.
• The your site tab allows you to indicate the industry of your site. Whether it’s a hobby blog, an online store, an organization’s website, or something else; based on your answer, Rank Math adds the appropriate code to your site so that Google will reference it accordingly.
• This same tab will allow you to add a generic logo to your site for Google; the minimum supported resolution is 160X90 px, and the maximum supported resolution is 1920X1080 px. If you have a square version of your logo, we recommend using that. You will also be able to set up a default social media sharing image; the one that will be displayed when sharing the link to your site on a social network like Facebook or Twitter for example. The setup is similar: simply click the Add or Upload button, and select or upload your image from the WordPress media manager. The recommended resolution is 1200X630 px.
• You can’t improve what you can’t measure. That’s why the Analytics tab will guide you to link your site to Google data tracking tools such as Google Analytics, Google Search Console, Google News… Via this control panel, you will also be able to choose to use Rank Math to automatically insert the Analytics tag on your site or even check it with Google Search Console.
• The Sitemaps tab is a first foot in more advanced use of the extension. Sitemaps are indexes that allow search engines to quickly find pages and articles on your website. They can be compared to the indexes found in a book. Rank Math has a built-in sitemap generator, according to Google standards, which automatically creates your site’s sitemap. We recommend that you activate the option on all of your site’s publications and add images, taxonomies, videos…
• Finally, in the optimization stage, some simple SEO parameters for your website that have a significant impact may or may not be applied.

The official Rank Math website presents this implementation in detail here.

Rank Math – Advanced Usage

This article only presents the basics of using the plugin. However, it is essential to keep in mind that such a powerful tool says to be monitored, adapted, updated recurrently by an operator such as a webmaster.

Advanced and regular use will allow you to observe evolutions in your website’s SEO positioning and target certain placement opportunities, adapt your content accordingly and rise in search results more quickly.

This tutorial presents an extremely specific case study; each SEO strategy must be finely tuned to the brand’s desired goals. The extension and solutions presented within this article represent only a tiny part of the endless world of SEO work.

The Programisto team are experts in these tools and will give you operational control worthy of a company taking control of its SEO and not the other way around!

Integrating Rank Math and Flatsome

After this quick overview from the installation of the extension to its first setting, let’s focus on its full integration with the Flatsome WordPress theme.

Warning: in order to perform these methods by yourself, it is necessary that the Flatsome theme is installed on your site. You can easily find it online for a small fee – well deserved.

Rank Math and Flastome: what SEO opportunities?

First of all, as previously mentioned, the association between WordPress, Rank Math and Flatsome makes it possible to go very far in terms of power and precision and this for any type of site – from e-commerce to showcase sites.

Benefits in terms of scalability and sustainability

• All tools are updated on a regular basis according to the latest recommendations and changing criteria issued by the major search engines such as Google and Bing from Microsoft.
• The price increases with your needs. WordPress is an open-source and free tool, Rank Math has a free and paid pro version and Flatsome is only $59 for life. As you move forward, your needs will grow and these tools can grow with you without costing you too much. Invest more in a webmaster, less in tools.
• Many other factors come into play for your website to grow healthy and fast, but these tools will remain a solid foundation on which you can trust.

Ergonomic and SEO benefits

• Flatsome natively integrates Rank Math breadcrumb trails, which are essential to ensure that search engines understand the structure of your site (and therefore the position of your pages in their results) – including e-commerce.
• The theme has a built-in UX builder that allows you to simply copy and paste Rank Math shortcodes wherever you want on your pages and in the preferred style.
• Finally, Flatsome is an extremely lightweight and well thought out theme, which will allow you to achieve high loading performance scores for your content right from the installation. This is a crucial point to ensure that your SEO work is successful: fast loading and good content structure above all.

Rank Math breadcrumbs on Flatsome: how to enable them

First, go to the Rank Math tab in the Back Office dedicated to breadcrumbs:

Rank Math > General Settings & Breadcrumb

And enable the option on your site. Then set the basic options.

Rank Math reference code

There are several lines of code you need to know to properly integrate Rank Math breadcrumb trails on Flatsome. Indeed, we noticed that some pages / articles were not displaying the right sequence of content and links. 

For example, Flatsome portfolios display by default only one level of content: the one you are navigating on. So the role of this navigation element no longer serves its purpose as a facilitator. In fact, the breadcrumbs of the Rank Math extension are not even present on these portfolio pages.

We will first present the generic code provided by Rank Math to manipulate breadcrumbs, before looking at specific examples on Flatsome later in this 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]);

Where to place your custom code on Flatsome

If you do not use the provided shortcodes, it is necessary to place the custom code in the right place within your theme.

Add the breadcrumb trail to the “Portfolio” and “Blog” post types

Portfolio and blog pages do not natively display the Rank Math breadcrumb trail. To replace them and display a relevant navigation element, you need some templates-parts by inserting the code #1 or the classic PHP method to add the shortcode.

You will have to add these new files via FTP.

Custom template to use the Rank Math breadcrumb trail in the information on single pages of portfolio publications on Flatsome

Custom template to use the Rank Math breadcrumb trail in the information on single pages of portfolio publications on Flatsome

Custom template to use the Rank Math breadcrumb trail in single page information for portfolio publications on Flatsome

Custom template to use the Rank Math breadcrumb trail in single page information for portfolio publications on Flatsome

Custom template to use the Rank Math breadcrumb trail in the archives of blog posts and search results on Flatsome

Custom template to use the Rank Math breadcrumb trail in the archives of blog posts and search results on Flatsome

Custom template to use the Rank Math breadcrumb trail in single page blog posts on Flatsome

Custom template to use the Rank Math breadcrumb trail in single page blog posts on Flatsome

Adjust changes (translations, levels…)

Once you have these file additions within Flatsome’s child theme, a few adaptations are necessary. Indeed, the embedded breadcrumbs will not directly reflect the desired content, and you will have to use the codes provided by Rank Math to permanently adapt your structure.

You will then need to add the custom code within the functions.php file of the child-theme.

Source :

Google Developers & schema.org

Advanced customization and concrete examples

The first example and necessary change to make when integrating Rank Math breadcrumb trails on Flatsome concerns the types of publications Portfolio.

In the example below:

• Let’s change the second level of the breadcrumb trail in French and in English (title displayed and redirection link)
• Let’s translate the first breadcrumb level into English (Accueil > Home) and change its link

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

Then, we add a second level to the Portfolio publication type archives in French and English as follows:

/**
 * 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: some tips & tricks with a use of WooCommerce 

Hide the first level of product archives – once portfolios are customized, an additional level is added to the product sheets that must be manually removed.

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

Work on Woocommerce My Account pages to show the homepage, My Account page and navigation details.

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

Use with an e-commerce site

Google requires the use of a specific Schema (structured data model) for products.

The Product Schema has mandatory properties including:

• Name
• Review, aggregateRating ou offers

And recommended properties:

• Aggregate rating
• Brand
• Description
• Image
• Offers
• Review
• GTIN
• SKU

Source :

Google Developers & schema.org

The referencing consists, in a sense, in providing the most information about its data. That is why the recommended properties are not to be neglected in order to obtain a good referencing on them.

Rankmath offers full compatibility between Woocommerce input and Product Schema input.

Rankmath > Dashboard > Schema (structured data)

A title

Image Box text

Settings > Products > Schema Type > Enable “Woocommerce Product”

A title

Image Box text

However, Schema Category data should be disabled to avoid a conflict with Flatsome which provides its own Schema Category data:

A title

Image Box text

It is possible to check the good use of its structured data on the following Google tool: https://search.google.com/structured-data/testing-tool/

A title

Image Box text

Exemple :

A title

Image Box text

Also, Search Console helps you identify and correct these Product Schema issues:

A title

Image Box text

A title

Image Box text

These good practices allow you a better referencing, as well as a better CTR thanks to the visual rendering of your products which becomes more attractive:

A title

Image Box text

Also, this good configuration allows you to be eligible for results on Google Shopping via product feed submission to Google Merchant Center.

Trick to fill in the “Brand” Field:

// Add Brand for Products.
add_filter( 'rank_math/snippet/rich_snippet_product_entity', function( $entity ) {$entity['brand'] = 'Bijoux Cailloux' ;return $entity;
});

Trick to de-index paged pages from Flatsome :

With Flatsome (especially if you use the infinite scroll), it is better to disable the indexing of paginated pages (/page/2) to avoid duplicate Title & Meta:

Rank Math > Titles & Metas > Other Pages

A title

Image Box text

100% technological experiences

Your issues are important to us, your target becomes ours and you can rely on a competent and responsive tech team. Shall we go?

Send a project Send a project

Back to blog Our expertise