This is doing my head in! I've searched about for answers everywhere but with no success.
I believe my issue is on the same lines as this question asked:
wrong og:description
facebook is not recognizing my meta tags
Wordpress Website: http://www.cyclingabout.com
All I want is to have image and text data visible in Facebook. I'd like the start of my post and an image from my post to be displayed when someone 'likes' or 'shares' my post.
I have played around with a few plugins that attempt to make this work. I have "facebook like thumbnail" which does add an image when someone likes it as it is supposed to, but doesn't solve the text problem (or do anything about sharing). I have also tried "Facebook Open Graph Meta in WordPress" however this doesn't appear to solve my problem.
Is there an issue with my coding or a widget which is blocking this information?
I have run a Facebook Linter check and I get the following:
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
I have searched ways to resolve these og issues with no success.
I'd love to hear from someone! Any ideas?
Kind regards
Alex
I looked at the HTML returned from your page and I see this:
<meta property="og:description" content="description" />
<meta property="og:description" content="" />
Are you using two different og tag plugins?
Figure out how to get rid of the second one with the empty content and also specify the og:url one and I'd say you'd be good to go.
Related
I'm having a lot of problems sharing my site URLS. When sharing a new post, the image associated to the post is not shown.
I tried the Facebook Open Graph Debugger, but it doesn't work as supposed.
1st try to check the url I get this error:
2nd try I get this other errors:
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://img1.woman.es/82/ad/85/michelle-calvo-presentacion-coleccion-roberto-verino-640x689.jpg' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.
As you can see the og:image is present, but facebook can't see it.
Could you please help me with this? I'm getting mad trying to find the problem.
Page with OG's: http://www.woman.es/moda/tendencias/famosas-rinden-tendencia-botas-altas.
Thanks in advance and sorry for my damn English.
This seems to solve the problem (add a width and a height to the og:image):
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="917" />
I have a customised button for sharing the page on fb on my website.
the html is like this:
<div id='facebookButton' class='shareButtons'></div>
on the head I also have the following meta data:
<meta property="og:image" content="Images/image1.png">
However, even if the button works, I can't get the pic to show in the share on fb. It only gets the page name.
What am I missing please??!!
Many thanks,
Elias
Debug the URL: https://developers.facebook.com/tools/debug/og/object/
You will find out that there is an error:
Object at URL 'http://www.give-net.com/' of type 'website' is invalid because a required property 'og:title' of type 'string' was not provided.
There is no og:type tag, but it´s a required one.
You may want to read through those links:
http://ogp.me/
https://developers.facebook.com/docs/sharing/best-practices#tags
https://developers.facebook.com/docs/sharing/best-practices#images
The last link is important for your og:image URL. Make sure it fits the aspect ratio and size recommendation.
I have placed these meta tags on a site I'm working on. I then have a 'share this page' type feature which content authors can override the default content which appears in the share window using the og tags which are working fine for Facebook, however Twitter is not working.
<meta property="og:image" content="test test test" />
<meta property="og:title" content="test title goes in here" />
Reading around a bit, I can see that it shows here
that the fall back is the og tags which I already have. I've also read about twitter cards however I don't think I'm using them as they describe - its just a share button? This post explains using different ones:
http://davidwalsh.name/twitter-cards
I'm wondering if anyone can shed any light on why the og tags may not work? Do you need to apply for something from Twitter??
Turns out I needed specific tags for Twitter and Facebook after all. The doco was out dated - would recommend reviewing new doco if you need to do this as it changes all the time..
hope you can help me...
I want to have a page with facebook metatags, like:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
and the problem is that instead of showing the descriptions, titles and images that I define in the metatags of my page, the facebook like box is generated with the url defined in my og:url. I was reading documentation and it seems that it should be in that way.
But I still want the facebook like box generated only with the metatags of my page, and not with the url defined in og:url.
is it possible? someone has done?
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
So it's doing exactly what it's supposed to do. If you want the like button to point to a different url, use the href parameter and have it point to a different url.
See https://developers.facebook.com/docs/reference/plugins/like/ for more information.
I think I understand what you are asking. Like #Jeff Sherlock said "og:url basically tells our scraper "ignore anything on this page, and scrape this url instead"..."
So if og:url is anything other than the current page -- Facebook will try to scrape the open graph data from there instead.
If this is a page you are trying to send people to if they click on the 'like object' that is posted to a users wall (who has already liked your page) --
I made a tool for this exact purpose -- as I thought it might be helpful to others:
Facebook/Open Graph Like button Generator
It generates (and stores) the open graph tag(s) so you don't need to put them in your page at all and the 'Redirect URL' tells it where to send all the traffic.
It detects the Facebook bot/scraper too so it won't interfere with anything :)
Good luck
you can put the like button in an iframe. Furthermore, that iframe may or may not need to be filled by setting a src attribute. I would try adding the like button code as innerHTML, and then try a separate file to set the src to.
It would look something like this:
<iframe><place like code here></iframe>
When that doesn't work, place the like code in a separate file, and set the src of the iframe to that file. Let me know if you have quesitons
It seems the facebook debug tool http://developers.facebook.com/tools/debug is using a cache.
I made an update to my site but facebook debug tool is still showing up the old data.
Is their any way to force facebook to refresh its data? It has been a few days now and it seems the cache will not expire.
Go to http://developers.facebook.com/tools/debug
Enter the URL following by fbrefresh=CAN_BE_ANYTHING
Examples:
http://www.example.com?fbrefresh=CAN_BE_ANYTHING
http://www.example.com?postid=1234&fbrefresh=CAN_BE_ANYTHING
OR visit:
http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912
I was having the same issue last night, and I got this solution from some website. I hope this helps.
The tool should update Facebook's cache for a given URL immediately, if Facebook is still returning 'stale' data, check that Facebook is actually getting the content you're expecting.
A quick way to check is to load your page from a command line tool like curl, using Facebook's user agent and see if the meta tags returned are what you were expecting.
One thing i've seen happen sometimes is people including all the correct tags on page X, except that page X has an og:url meta tag pointing to another url, Y.
Facebook will follow that tag and scrape page Y and use that metadata.
I've usually seen it where page X is 'something.com/article/x' and the og:url is set to 'something.com/articles/' or 'something.com'
I've the same problem. The ?fbrefresh=CAN_BE_ANYTHING didn't do anything clear the og:image cache.
The only solution that worked for me was to rename the image and the path on the og metaga. You can do something like:
<meta property="og:image" content="http://yourdomain.com/images/socia-photo-v2.jpg">
If somebody knows a better solution will be very appreciate.
Thanks.
This hasn't been added to in a couple of years, but I've just had the same issue and found a way that immediately resolved it.
Facebook say:
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
Putting this into use should look like this:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Solved the problem straight away! Hope this helps!
Go To
https://developers.facebook.com/tools/debug/
then put site URL
Now Click on button Scrape Again
I was getting the cache to show the right picture after updating my blog post, but when I went to post the link, Facebook was still showing an old picture. I didn't want to wait a day to see if it would finally change, so I did what's outlined on this page:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
In other words, something like this:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basically, you're going to hard code an if statement into your page's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.
You can try the object debugger and click on fetch new scrape information. It is mainly to debug the open graph meta data.
https://developers.facebook.com/tools/debug/og/object/