How to Avoid Duplicate Content Errors When Using Visual Portfolio and Rank Math

I was having trouble with my clients’ websites when using Visual Portfolio and Rank Math. The main issue was that whether enabling deep linking or not, each page containing a VP gallery/feed with a pagination or filter was being crawled and indexed by search engines multiple times due to Rank Math improperly setting the canonical URLs.

Problem:

For example, if this page example.com/page/ has a Visual Portfolio instance with any pagination or filter, search engine crawlers will see these additional pages (they will vary based on your gallery/feed configuration):

example.com/page/?vp_page=2

example.com/page/?vp_page=3

example.com/page/?vp_page=4

example.com/page/?vp_filter=category:uncategorized

The problem is that each is considered an individual (separate) page with the same page content (the Visual Portfolio gallery content is the exception). Rank Math, by default, is unable to distinguish these pages and sets each one with its unique canonical URL corresponding to the URL parameters, as represented above.

(For example, example.com/page/?vp_filter=category:uncategorized would be assigned a canonical URL of example.com/page/?vp_filter=category:uncategorized even though it should be assigned example.com/page/ since it is ultimately the same page and the only one we want search engines to crawl and display in search results).

When it comes to SEO, duplicate content is a huge no-no because it essentially means each of these pages is competing with the other ones. Search engines like Google will get confused when deciding which to show in search results, making ranking incredibly difficult. So, to fix this issue, I wanted to share my solution in the event that it might help someone else using Rank Math and Visual Portfolio who is unable to fix their duplicate content issue.

Solution:

All you need to do is either add the following code to your theme’s functions.php file OR use a code editor plugin like Advanced Scripts, making sure it runs no later than the plugins_loaded hook:

/**
 * Modify the canonical URL to exclude Visual Portfolio filtering parameters.
 *
 * This function hooks into Rank Math's canonical URL filter to check for and 
 * remove specific query parameters (those starting with 'vp_') from the canonical URL.
 * This approach aims to prevent potential duplicate content issues by ensuring that 
 * search engines see a single, authoritative version of each page, even when 
 * Visual Portfolio's deep linking feature is used to create unique URLs for filtered gallery views.
 *
 * @param string $canonical The original canonical URL.
 * @return string The modified canonical URL, with 'vp_' parameters removed.
 */
add_filter( 'rank_math/frontend/canonical', function( $canonical ) {
    // Parse the current canonical URL to break it down into components.
    $url_parts = wp_parse_url($canonical);
    
    // Check if there are any query args to work with.
    if (!empty($url_parts['query'])) {
        // Convert the query parameters into an associative array.
        parse_str($url_parts['query'], $query_args);
        
        // Iterate through the query parameters and remove those starting with 'vp_'.
        foreach ($query_args as $key => $value) {
            if (strpos($key, 'vp_') === 0) {
                unset($query_args[$key]);
            }
        }
        
        // Reassemble the URL without the 'vp_' parameters.
        $canonical = $url_parts['scheme'] . '://' . $url_parts['host'];
        // Include the port number in the URL if it's present.
        if (!empty($url_parts['port'])) {
            $canonical .= ':' . $url_parts['port'];
        }
        $canonical .= $url_parts['path'];
        
        // Only append the modified query if it's not empty.
        if (!empty($query_args)) {
            $canonical .= '?' . http_build_query($query_args);
        }
    }

    return $canonical;
});

You will note that the script essentially looks for the existence of URL parameters prefixed with vp_ and removes them from the canonical URL, resulting in a much cleaner and industry-preferred method of setting canonical URLs. This will prevent duplicate content/meta tag errors and make your website crawl and interpret easier.

Hope this helps!