Canonical Tags

Canonical tags are added to your website to provide search and indexing data to search engines. Not every page needs to have a canonical tag, but some people do prefer to add them to every page as a precaution. In this article we’ll explain:

• What are canonical tags?
• How canonical tags are handled in WordPress.
• How canonical tags are handled in the Divi theme.
• How to modify the canonical tag on pages that contain our Divi FilterGrid plugin so they are properly formatted.

What Are Canonical Tags

Canonical tags are added to the code in the head of pages on your website and provide information to search engines to help identify the master version of a page. This can be important when you have multiple URLs that all point to the same page or similar page – something that is very common in WordPress sites.

For example, the homepage of every WordPress website can be accessed from two URLs:

• https://diviplugins.com
• https://diviplugins.com/index.php

WordPress automatically redirects the 2nd link above to the 1st link so there’s no need to add a canonical tag in this case.

However, in some cases there is no redirect. An example could be a blog post. Within the WordPress dashboard -> Settings -> Permalinks page, you can control the URL structure of your posts. One possible structure could be the base URL, followed by the post category, followed by the post title:

https://example.com/category-one/post-one/

But if the post is assigned to two categories, it could also be accessed from a different URL:

https://example.com/category-two/post-one/

Same post. Two URLs. Now the search engine has to decide which URL should be displayed in search results. If it treats them as separate pages, it could display both URLs in SERPS which could dilute the search ranking of each URL. You could also get penalized for having two pages with the exact same content, even though they really are the same page.

Luckily WordPress automatically adds the canonical tag in the 2nd example above. Each version of the page has the following tag added to the head:

<link rel="canonical" href="https://example.com/category-one/post-one/" />

When this is placed in the head of the category one post with the same URL, it tells search engines “I am the original”. When it’s placed in the head of the category two post, it tells search engines “I am a duplicate version of this original page. Do not treat me as a unique page.”

Canonical Tags in WordPress

You can see from the examples above, WordPress automatically adds the canonical tag in many cases where you would need it. But it doesn’t add a canonical tag to every single page. Should it?

This is debatable. WordPress adds canonical tags to every user-created page and post. It does NOT add them to archive pages. Unless you are using a lot of URL parameters on your site that might inadvertently generate duplicate content, this should not be an issue. However, adding a canonical tag to every page is not going to hurt your SEO, even if all of your canonical tags are self-referencing (the canonical tag URL is the same as the current page URL).

One could then argue if it’s not hurting anything to add it to every page but not adding it to some pages could be harmful, why not just add them to every page? If you fall in this category, you have a few options to add canonical URLs to every page on your site.

Canonical Tags in Divi

The Divi theme has a “Enable canonical URL’s” toggle that can be turned on for the homepage, single post or page, and index pages (archive pages). You can find these toggles by going to your WordPress dashboard -> Divi -> Theme Options -> SEO tab.

Since WordPress already includes canonical URLs for single posts and pages, turning the toggle on for these is redundant.Turning it on for the Homepage is also redundant since your homepage is likely a page you created and set as the homepage. If this is the case for your site, WordPress is already outputting a canonical URL for your homepage.

That leaves the Index Page SEO tab. Turning the Enable canonical URL’s toggle for this page type will output a canonical URL for all archive pages – category pages, tag pages, search results page, etc.

Canonical Tags and Divi FilterGrid

Now that we understand more about canonical tags and how they are added to your site, let’s talk about how they relate to our Divi FilterGrid plugin. Divi FilterGrid uses AJAX pagination to display the results relative to each page. This means when the pagination at the bottom of the grid is clicked, the page does not reload and only the results in the grid are updated.

However, to maintain best SEO practices and allow for proper indexing of your results, each page in the pagination links to a unique URL with the corresponding page number. Let’s say you are using Divi FilterGrid to display your blog posts like we are on our blog page:

https://diviplugins.com/blog/

If you click on page 2 of our blog page, you stay on the same page with the same URL. Only the results in the grid changes. That’s how AJAX works. The results are retrieved from the database without reloading the page.

But if you view the page source and look at the URL assigned to the page 2 button, you’ll see it links to a different URL:

https://diviplugins.com/blog/page/2/

This URL is for search engines and for indexing purposes only. Search engines will follow each page link, indexing each blog post on each page. If you go directly to the page 2 link above, you’ll see that the results show the page 2 results. So far so good.

The problem is that WordPress will not generate the correct canonical tag for AJAX paginated pages. For example, the default output of the canonical tag for page 2 would be https://diviplugins.com/blog/. However, it should be https://diviplugins.com/blog/page/2/. Since the results of each page are different, they are in effect different pages and should be treated as such.

To resolve this issue, we can hook into the get_canonical_url filter to modify the output of the canonical URL so it reflects the correct page number. Below are three code examples you can add to your child theme’s functions.php file or to a plugin like Code Snippets.

The first example will only apply to a specific page and would be ideal if you are only using Divi FilterGrid on a single page (or few pages). The second example will apply to every page that contains Divi FilterGrid and would be ideal if you are using Divi FilterGrid on many pages or archive and search result pages. The third example applies to sites that have the Yoast SEO plugin installed.

Modify Canonical Tag on Single Page

Modify Canonical Tag on All Divi FilterGrid Pages

The code below searches the content of the current page, looks for the presence of the Divi FilterGrid module shortcode, and then modifies the canonical tag if it finds it. At the very least, you should have a caching plugin installed to cache the results of this content search.

Modify Yoast Canonical Tag

The Yoast SEO plugin hijacks the canonical URL, making it impossible to change with the built-in WordPress hook like the examples above. Instead you’ll need to use the hook provided by Yoast to modify the canonical URL. If you are using an SEO plugin other than Yoast, you may need to use a different hook depending on how it modifies the canonical URL.