Recently i have noticed that if someone shares my website URL in facebook sharer then it pulls images from canonical URL not from fetched URL that is happening because of i have added -
<meta property="og:url" content="http://www.mywebsite.com"/>
<meta property="og:description" content="description related to page/images">
but it is showing every time my home page's images not of fetched URL
my URL are looking like that-
canonical URL - http://www.mywebsite.com
fetched URL - http://www.mywebsite.com/tags/car
So i'm not getting any idea what do i do so facebook sharer always show my fetched URL's images.
I know this could be same question asked before like these-
Is it possible to extract metadata from fetched url instead of canonical url?
Canonical url being linked on Facebook rather than real URL. Dynamic OpenGraph tags coming up empty
but there is a same solution in both question that is -
I need to setup Intermediate URL redirection, so i just searched about the 301, and 302 redirection, but i'm not getting any idea how/where do i use it?
I need to do this for my wordpress and an other website(which is in zend framework).
Please tell me anything if anyone has did the same.
I will be grateful for Any help.
The problem you are facing is, that you are sending your home url as a canonical url of the shared url. This is wrong as a canonical url has to point to a resource with the same content as the fetched url. For a definition of what canonical urls are check RFC6596 or a good description from Google.
Pointing to the Index URL of you site, as you do, is not pointing to a canonical (equivalent) URL. By setting that URL you are saying to Facebook "You can go look there, you will find the same content as here. So just take everything from there." But I guess this is not what you intend.
If you still want to point to you index (which imho is abusing the system), then you can try also adding the metadata for an image, which should result in the image you provide to be used to represent the link:
<meta property="og:image" content="http://www.mywebsite.com/path/to/image.jpg" />
The reason, why you shouldn't point to your index as canonical: If a user A wants to share some specific content, user B clicking on the link in facebook won't find the expected content, instead he'll see the index page and doesn't know which content user A wanted to share.
The correct way to use the og:url meta, is to point to a real canonical (equivalent) URL which will show the smae content as the fetched URL. Often such a link is referred to as permalink. If you can't provide such an url just use the fetched url itself or leave it away. Pointing to the index is wrong.
For wordpress there is a plugin, which should do this correctly. And the open graph protocol is documented here.
Facebook uses og:url tag to consolidate the like and share count. Whatever url you will mention in og:url, facebook will share that url and increase the share count for that url. Otherwise, your likes and shares will be distributed among canonical urls.
<meta property="og:url" content="http://www.mywebsite.com"/>
If you set a og:image tag, then facebook sharer will pick that image. But make sure the image is of correct dimensions. Facebook check the dimension as well. I always use 600X315.
Check image sizes here.
<meta property="og:image" content="http://www.mywebsite.com/path/to/image.jpg" />
Once you are done don't forget to clear the cache.
Put your URL here
Fetch new scrape information to see the changes.
Meta tags like keyword, title and descriptions are used by search engines.
og tags are used by facebook.
and canonical urls are by rel="canonical"
For any url, whatever data you want Facebook to fetch, needs to be set in og tags.
And then debug the URL to see the new scrape information to see the changes.
Related
Hi i am having an issue with "Sharing my site's url with facebook". I checked the url in facebook debugger , here i am getting the below issue.
Kindly find the images.
http://i.imgur.com/OrUITz2.png
http://i.prntscr.com/58a4d03d61dd4d4da8e08d8c7c367ca7.png
I have given all the required open graph info(meta tags) such as "og:title", "og:type","og:image","og:url". But i am getting the above shown error(The 'og:type' property is required, but not present.).
So kindly help me on this.
How my original url(//XXXXX.com/tester) getting changed to that unknown "Canonical URL"(//XXXX.online.de/tester)?
How can i change this "Canonical Url"(//XXXX.online.de/tester)? Because facebook scraps this url only not my original url(//XXXXX.com/tester).
Facebook scrapes the webpages to index it's metadata information, and make the webpage a rich object, integrating it to the social graph .
The canonical url is set at your page head tags, usually as :
<link rel="canonical" href="http://www.example.com" />
You need to remove that kind of tags from your head, because Facebook scrapes information from this tags URL if present .
After that, you need to fetch new scrape information using Facebook Open Graph debugger on :https://developers.facebook.com/tools/debug/og/object/ .
Taking a look in Scraped URL "See exactly what our scraper sees for your URL" is great for find this tags, you will need only to CTRL+F the strange URL .
Use that for checking your open graph meta tags, maybe something is including og:type and og:url tags, or other tags .
Tell us if this worked .
I've used the debugger - > https://developers.facebook.com/tools/debug/og/object/ which shows the correct image and tag line for my domain when showing the initial existing scrape information. It also shows correctly when I fetch new scrape information.
However, when I attempt to share the url from any timeline, it shows an old image and old tag line. I've tried variants of ?fbrefresh=timestamp, ?fbrefresh=1 etc. I've even appended a timestamp to the og:image url.
Additionally, the dev tool complains about the og:image saying it could not be downloaded referencing the url (which is valid and pulls up the image in any browser) and again is shown correctly at the bottom of the dev tool page, or it is too small referencing 200px x 200px minimum, however the image is 540px x 300px! And goes on to say its going to use the older cahced image instead which IS what shows when I attempt to share the url.
Furthermore it also complains about "Inferred Property" for og:url, og:title, og:description and og:image even though when I view the scrape the tags are clearly there each with their own meta html element and explicitly providing a correct "content" attribute. I have verified the og:url, fetched url, cannonical url and cached url are all the same.
I've also confirmed trying the url w/ and w/out http, https, and www combinations make no difference when sharing the url. The only difference that clearly shows a problem is the amount of likes is different even though I would expect fb to know w/ and w/out www. is the same domain since they share the same og information. As a matter of fact, w/out the www redirects to www anyway.
It seems to me as if the fb og system has some serious bugs but no way to contact the dev team or report the problem that I can easily find.
I'm posting here first to see if I'm overlooking some crucial part that the stack community can help with.
I found that everything started working properly once I forced a new scrape using the dev tool against all possible domain variants. I had thought I had tried this already but I guess I did not. Such as:
"mywebsite.com"
"www.mywebsite.com"
"http://mywebsite.com"
"http://www.mywebsite.com"
"https://mywebsite.com"
"https://www.mywebsite.com"
Implement all open graph tags, using the main URL only and scrape new information using the debuger. The posts sharing that URL or ANY variants will have the image, description, etc from the URL you specificate on Open Graph og.url tag. All the variants points to the same URL. There is the only place the og information is ;)
I've discovered whilst typing my question a small exchange on this at Adding a URL hash into meta data for Facebook and Twitter share cards which suggests that this may not be feasible but as things change over time I thought I'd seek guidance.
The scenario:
I have a URL http://example.com/ which includes appropriate Facebook meta in the header. I'm most interested in:
<meta property="og:image" content="whatever.jpg" />
At a later date I may add some additional info on the page and link to it with an anchor - e.g. http://example.com/#new and may want to display different meta for that anchor, e.g.
<meta property="og:image" content="whatever-another.jpg" />
My question is, is there any way to dynamically change the meta depending on whether the URL shared is the original URL or the URL with an anchor. The page could have multiple anchors.
My site uses Wordpress so I can use things like custom fields, etc if they are a possible manual solution but whatever, the ability to change the meta field based on the URL anchor is the goal.
Appreciated any guidance.
I am unable to share wordpress page with my custom query string in facebook like box using facebook api. for example http://www.example.com/?page_id=10&myquery=10 after hit like button "myquery=10" is removed from above url, only we are getting "http://www.example.com/?page_id=10" in my wall.
Thanks&Regards,
Arunabathan.G
The problem here is the canonical URL you've set your page to.
How to discover the problem?
If you check out your URL on the facebook url debugger tool, you'll see that the fetched URL if the url with the querystring (http://breakbounce.com/lookbook/?slideID=4), but the canonical URL does not have the querystring (http://breakbounce.com/lookbook/).
Where does this comes from?
This problem can be originated by two meta-tags, either og:url is defined to a different URL or a <link rel="canonical" ...> is defined (being the last one your problem, view your page souce and search your code for <link rel='canonical' href='http://breakbounce.com/lookbook/' />)
How to fix it?
In a normal situation you need to alter or delete the tag you identified as problematic on the previous step.
In you case you need either to change or delete the <link rel='canonical' href='http://breakbounce.com/lookbook/' /> tag.
Importante Note: After changing or deleting the tag you'll need to visit the facebook URL debugger again and enter your URL, in order to clear the cache of your url from Facebook.
Anything let me know.
You can also fix it like this:
http://www.example.com/?page_id=10%26myquery=10
the %26 is an equivalent for the ampersand. I had this problem when I tried additional parameters in a query, and this worked for me :)
I use the following share button to my page. Unfortunately my urls that are shared through my page have Greek letters in it "as" below:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
and I guess this causes a problem where the facebook does not show any image or content of the page. It only shows the url.
I found out that if I manually cut the above url to
http://www.domain.com/gb/news/12/13311/
the share works properly and the current page is shown. Everything is great.
So my question is how should I force the facebook share button to share the page after the modification? I know that by using var_dump($url['dirname']); I get the format I want.
According to FB docs, you can specify any URL you wish by populating the SHARE_URL a tag attribute:
<a name="fb_share" type="button" share_url="<?php echo $url['dirname'] ?>"></a>
By the way, what you are referring to is a canonical url, trimming this:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
To this:
http://www.domain.com/gb/news/12/13311/
The beauty of canonical urls is that they will not change, even though you decide to change keywords in the pretty url version. Useful for sitemaps.
You can use the FaceBook OG (open graph) tags to tell facebook what the "real" url is of the page. If you're serious about facebook sharing, you should be using those already. Put these in your
<meta property="og:title" content="Titeel Goes Here"/>
<meta property="og:url" content="URL goes here"/>
Verify what Facebook sees here: https://developers.facebook.com/tools/debug. You can also add a thumbnail image, and admin (so you can better see the likes and who shared).