Skip to main content
Ben Nadel
It's not enough; but, not enough is better than nothing.
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Andy Bellenie
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Andy Bellenie@andybellenie )

Adding Canonical Link Tags To My Blog For Search Engines

By Ben Nadel on

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.


Reader Comments

What has two thumbs and hopes you leave a comment? This Guy! (Ben Nadel).

Post A Comment

You — Get Out Of My Dreams, Get Into My Blog
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.