Skip to main content
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Jeff McDowell and Joel Hill
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Jeff McDowell Joel Hill

Adding Canonical Link Tags To My Blog For Search Engines

By
Published in

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

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel