Google and the Canonical Link Rel

By  on  

Google has introduced a link tag rel value of canonical which is used for defining the value of the page that Google should use. Why? Lets say you have an eCommerce site and one of the product URLs is:

http://yoursite.com/product.php?p=david+walsh+blog+book

Imagine now that you can make a slight customization to the product that changes the URL to:

http://yoursite.com/product.php?p=david+walsh+blog+book&color=red

Uh oh -- Google sees duplicate content! The code shows essentially the same page so Google thinks you're pulling gangsta stuff. Now you can tell Google what URL to use for the current page to avoid duplicate content penalization.

The XHTML

<link rel="canonical" href="http://yoursite.com/product.php?p=david+walsh+blog+book" />

Don't let your website get penalized by Google; use this link/rel tag combination for your highly variable pages.

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    CSS Columns

    One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a...

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

Discussion

  1. Note that the All-in-one SEO WP plugin does this for you. Good to know should you bloggers be worried.

  2. I think the article could have given a bit more info on canonical urls…

  3. @Adriaan: Thank you for your comment. I could have but my fear is spending a ton of time on an explanation when 99% of people would prefer a brief explanation with a sample problem and solution like I provided. I appreciate your honesty!

  4. OK, I had to go to Google to find out where in the document this LINK goes… But this is good info, thanks for the the tip. Google implies that some other search engines look at this too.

  5. emceha

    time to google for more about canonical ;)

  6. Cool information!
    Liked the posts about firefox extensions too, really useful for beginners on that world.

    ps: you forgot to close the link tag.

  7. Add this code to the section of the page.

    < head >
    < title > Davidd Walsh Blog Book< /title >
    < link rel=”canonical” href=”http://yoursite.com/product.php?p=david+walsh+blog+book” />
    < /head >

    @Fabio, No missing < /a > tag as its a < link .. >

  8. Good I want to implement it first and have post this tips. Thanks

  9. great post is there any problem if i use rel tag for all of my links

  10. David,
    Thanks for the tip about rel canonical.

    Peter

  11. You can find more info here: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=139394
    Thanks for the article.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!