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