27

I'm having trouble understanding canonical URLs with regards to how search engines and Facebook seem to handle them.

My Google maps powered site allows visitors to use social media to request a gig in their country. One of the pages in question can be found at: http://izzy.nogig.in/

When a user clicks on their countries marker it gives them sharing options (twitter/facebook/etc), which when shared will share the URL specifically for that country, eg: izzy.nogig.in/usa? or izzy.nogig.in/spain? etc.

All of these countries in the URL amount to a lot of duplicate content so I use the following to point search engines to the page I want ranked:-

<link rel="canonical" href="http://izzy.nogig.in/_?"/>

For Facebook Likes to count towards each individual country I've set my Open Graph "og:url" as follows, eg:

<meta property="og:url" content="http://izzy.nogig.in/australia?" />

Now when I run a country-specific URL through the Facebook Object Debugger (eg. http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fizzy.nogig.in%2Faustralia%3F) it shows the following:-

Response Code:  206
Fetched URL:    http://izzy.nogig.in/australia
Canonical URL:  http://izzy.nogig.in/australia

Mismatch og:url and canonical url:
og:url tag in the header is not the same URL as rel='canonical' link in the html.

The above error is what's confusing me. I know they're mismatched, but I thought this was the correct way to do this.

Everything in the debugger looks good to me (correct link, description, image etc for each country), and I can't change the rel="canonical" value to match my og:url as I need it pointing to a single page (country-less) for search engines.

I believe it is all working correctly. Should I just ignore the error from the debugger, or have I set this up incorrectly? I don't want "likes" for each country all disappearing and counting towards the rel="canonical" URL.

Many Thanks - Will

Will
  • 309
  • 1
  • 4
  • 10
  • Seems that Facebook Open Graph Debugger no longer warns if page has different `link rel="canonical"` and `og:url`. – kolen Mar 27 '17 at 12:56

4 Answers4

20

link rel="canonical" will be used by search engines where as og:url will be used by facebook

og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"

More for Canonical link element: http://en.wikipedia.org/wiki/Canonical_link_element

Ghost Answer
  • 1,458
  • 1
  • 17
  • 41
Hamed Ali Khan
  • 1,108
  • 3
  • 23
  • 29
  • 1
    It should be considered first *what does it mean* and second *how it is used*. Opengraph is no longer used only by Facebook, and it is open standard. Search engines may decide to use or to not use any metadata to handle broken or spammy websites. – kolen Mar 27 '17 at 13:02
6

Canonical urls refer to page content.

The target (canonical) IRI MUST identify content that is either duplicative or a superset of the content at the context (referring) IRI. rfc6596#3

Opengraph url refers to "object".

The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/". ogp.me

So they may be different. For example, for multi-language websites, page for each language should have distinct canonical url, because content is different, but usually the same og:url for all languages, because they refer to the same object described in multiple languages.

Community
  • 1
  • 1
kolen
  • 2,752
  • 2
  • 27
  • 35
  • That's what I do. I keep both the canonical and the `og:url` different. That way, I make sure to never loose all of my Facebook Likes because the url contains only the Primary Key ID and not all of the keywords. – Marco Jan 13 '21 at 15:11
3

On one of the sites I've developed I serve the page in more than one language, and provide links to allow the user to switch between one language and the other. So, my rel="canonical" will have the URL http://www.example.com/, whereas, within the code I update the og:url so that it is either http://en.example.com/ or http://fr.example.com/. That way when the user shares the page on Facebook, everything will appear on Facebook in the language they were viewing the page, which makes sense since most of the visitor's friends will likely speak the same language.

Regards.

John Sonderson
  • 3,238
  • 6
  • 31
  • 45
  • 3
    sounds exactly the purpose canonical urls should serve.. or am I mistaken here? – Kazim Zaidi Feb 09 '15 at 10:57
  • 4
    The content is unique on the language subdomains, so you should also set the canonical URL to the language version also. What you've done is say to the search engine that http://fr.example.com/ is the same content as http://www.example.com/, but it's not. – BigBadMe Mar 17 '15 at 17:40
0

I see no reason why og:url and canonical should be different. In both circumstances you're saying to either the search engine or Facebook what page you want to index or be displayed.

BigBadMe
  • 1,754
  • 1
  • 19
  • 27
  • If you only have a few properties, you just add the basic `og:` meta tags to your page, but if you have a lot of properties describing an Open Graph object in detail (e.g. your OG object is a venue where you can eat, drink, dance, etc. and you set up OG actions to interact with that venue), it's nice to have those tags on a separate page so your users don't have to download them - the information is only useful to Facebook, after all. The special Open Graph pages load normally if the user-agent is "facebookexternalhit" and redirect to your real pages for any other user-agent. – Golphy Jun 21 '16 at 01:53
  • 4
    You might want to allow users to share filtered and paginated results, but not have search engines index them. In that case, you want `og:url` to take the form of `https://example.com/products?category=foo&page=3`, but leave the `canonical` with just `https://example.com/products`. – ACJ Oct 03 '16 at 08:41