Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Matt Borgato
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Matt Borgato@borteo )

Adding Canonical Link Tags To My Blog For Search Engines

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


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">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

		Some Cool Resource


	<!-- ... truncated for demo ... -->

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!

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.