Adding Canonical Link Tags To My Blog For Search Engines
Yesterday morning, I updated the logic that renders the "People" image at the top of my blog. As you may (or may not) know, you can influence which photo is rendered by including a ?site-photo={id} query-string parameter in the URL. While this is a fun feature, I've always had a concern that Google may penalize me for having a lot of dynamic URLs that point back to the same content. To be honest, I have no idea if this issue is "real" or just in my head. But, to hedge my bets, I've added a canonical link tag to my site template.
As per Google's documentation on canonical URLs, a "duplicate URL" is a URL that contains roughly the same content as another URL on the same site. This can happen for a variety of valid reasons, including dynamic URL parameters such as my site-url parameter. To help Google (and other search engines) understand what is and is not a duplicate page, you can include a <link rel="canonical"> tag in the HTML <head> element. This tag should contain the fully-qualified URL that points to the source-of-truth for the page content.
So, for example, imagine that I had a page located at:
/some/cool/resource.htm
With my site-url parameter, it means that the same exact content could then also be rendered at:
/some/cool/resource.htm?site-photo=383/some/cool/resource.htm?site-photo=368/some/cool/resource.htm?site-photo=158
To help Google understand that these are all the same page, I'll include the following <link> tag within the <head> element on this page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
Some Cool Resource
</title>
<link
rel="canonical"
href="https://www.bennadel.com/some/cool/resource.htm"
/>
<!-- ... truncated for demo ... -->
</head>
Note that the href attribute is a fully-qualify URL (relative URLs are not valid in this context) that points to the non-dynamic version of the page. Now, Google will understand that these are all the explicitly same page.
Again, I have no idea if this is even an issue. And, I don't spend all that much time thinking about the searchability of my site - at end of the day, I'm mostly writing primarily for myself. That said, I added my own site as a search engine in Chrome's OmniBox so that I can use Chrome to quickly search through my own content. As such, having a more searchable site means that I'll be more able to look for old articles.
Want to use code from this post? Check out the license.
Reader Comments
Post A Comment — ❤️ I'd Love To Hear From You! ❤️
Post a Comment →