Hi all I am using Open Graph tags to get g+ (and facebook) to pick up bigger images from my blogs posts.
This link for example: http://www.gamingonlinux.com/articles/update-contagion-zombie-fps-game-still-coming-to-linux-work-in-progress.3734
So for that post in the meta area it has:
<meta property="og:image" content="http://www.gamingonlinux.com/uploads/articles/tagline_images/1779247106id3734gol.jpg"/>
<meta property="og:type" content="article">
<meta property="og:title" content="Update: Contagion Zombie FPS Game Still Coming To Linux, Work In Progress" />
<meta property="og:description" content="We let you know recently that the Source engine based zombie survival FPS game Contagion would have news about a Linux version soon. The developers have given a small hint about it now." />
<meta property="og:url" content="http://www.gamingonlinux.com/articles/update-contagion-zombie-fps-game-still-coming-to-linux-work-in-progress.3734" />
It has the correct tags and a big image in the og:image tag, yet g+ still refused to pick it up.
Am I missing something?
Just guessing here, but perhaps the tags' order matters. Have you read http://goo.gl/u6oPKe?
Related
I am trying to share an article (or any article from this site) on LinkedIn, but the image that is specified as og:image never shows up in the post.
One of the articles I test this with is http://insights.ortec-finance.com/nl-nl/2018/02/05/press-release-data-analytics and I'm using the article share link based on https://www.linkedin.com/shareArticle?
When you look at the preview, it all looks like it's going to work fine:
But after posting the article and looking at what has been posted, the image is missing:
I've read tons of reports of similar problems and tried all the remedies I could find, but it still doesn't work. What I've tried so far:
1) Made sure that all the required og: meta tags are present.
<meta prefix="og: http://ogp.me/ns#" property="og:image"
content="http://insights.ortec-finance.com/-/media/OF8/data-analytics-hero-linkedin.jpg" />
<meta prefix="og: http://ogp.me/ns#" property="og:url"
content="http://insights.ortec-finance.com/nl-nl/2018/02/05/press-release-data-analytics" />
<meta prefix="og: http://ogp.me/ns#" property="og:title"
content="Data Analytics | Ortec Finance" />
<meta prefix="og: http://ogp.me/ns#" property="og:description"
content="removed content for readability" />
<meta prefix="og: http://ogp.me/ns#" property="og:type"
content="article" />
2) Made sure that the image meets the LinkedIn requirements (less than 5MB, at least 1200x600 in dimensions).
3) Made sure the content-type of the image is set correctly in the response header.
4) Tried several other articles and they all show the same symptoms: image is displayed in preview, but not once the share is posted.
What am I missing here?
I am experiencing the same - think its a major LinkedIn bug and so far they havent been able to clarify...Our developer spent +40 hrs trying to figure it out, but now we realized that it must be a LI bug...hopefully they`ll fix it soon as it has been going on for almost a week...
I use to implement Facebook's OpenGRaph protocol on my pages (wordpress) based on All In One SEO plugin.
With each page:
<meta property="og:type" content="article">
<meta property="og:title" content="my_title">
<meta property="og:url" content="http://my_site.jp">
<meta property="og:description" content="my_content">
<meta property="article:published_time" content="my_published_time">
<meta property="article:modified_time" content="my_modified_time">
<meta property="og:site_name" content="my_site_name">
<meta property="og:image" content="http://my_site.jp/wp-content/uploads/2017/05/my_image.png">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
<meta property="og:locale" content="my_cocale">
But i get these error when checking with Facebook developer debug:
URL returned a bad HTTP response code.
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
I have ref from: Facebook Open Graph Error - Inferred Property
But I don't have any solution. Have your solution for this problem?
Since your initial link's image issue is now fixed, it's difficult to say what was wrong with it, especially since the snippet you provided seems fine. With the latter link you provided, though, I'm getting this error:
The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
This is because there isn't an explicitly og:description tag available on the page.
Someone unrelated: I'm noticing duplicate twitter:card and related tags. This shouldn't cause Open Graph to not work, but should be resolved.
My hunch is that you're using multiple plugins that might be providing the same thing, causing clashes and unexpected behavior. This is why I tend to stay away from "provide it all" plugins, and instead use plugins that do one thing and one thing well. In your case, this might mean using a simpler, more predictable plugin like Complete Open Graph:
https://wordpress.org/plugins/complete-open-graph/
I'm pulling my hair out on this one. I'm trying to share my ASP.Net Web Forms site on Facebook, but the preview doesn't show the Image or Description I have set up. I found this chunk of code that's supposed to do the trick. I put it in my MasterPage, but it just isn't working:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head id="Head1" runat="server">
<title>MySite</title>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.example.com/img/fbbanner.jpg" />
...
According to Facebook's Sharing Debugger,
The 'og:image' property should be explicitly provided, even if a value
can be inferred from other tags.
...but, hell if I know what that's supposed to mean. What's funny is, if I remove the meta tags out entirely, I get the same error. When I click on "See exactly what our scraper sees for your URL," I see the meta tags in the rendered code... I'm at a total loss. I can't find an article or an answer that was written in the past several years, so I have a feeling the information I'm getting is outdated. I just can't figure out the magic words...
Update Now, suddenly it works fine. I just clicked "Scraped Again" after I posted this, and it seems to be working. I don't really get it... :(
if you are using any cache plugin, make sure you clear all your caches. Also make sure the image you are using has the recommended facebook size: 1200(w) x 630(h) or 600 x 315. If not it will choose randomly some of your images in the website that are suiting the facebook needs. Read more here
I know this has been asked several times but i am really puzzled as this just stopped working for my new links last few days. All the old links that are cached just works fine.
I have my meta tags very neat. facebook debug tool does not report any error/warnings.
Here are my meta tags ..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="fb:app_id" content="820998487913242">
<meta property="fb:admins" content="param.krish.5">
<meta property="fb:admins" content="obtest.obkrish">
<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="Salefrog.in">
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://www.salefrog.in/register_fmp">
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Salefrog.in : Register as a Freelance Marketing Partner (FMP)">
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="Register as a FMP. Join us. Get a FMP login and get paid as you earn credit points. More details in your login upon registration.">
<meta property="og:image" content="http://www.salefrog.in/img/fmp-picture.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta name="title" content="Salefrog.in : Register as a Freelance Marketing Partner (FMP)">
<meta name="description" content="Register as a FMP. Join us. Get a FMP login and get paid as you earn credit points. More details in your login upon registration.">
<link rel="image_src" href="http://www.salefrog.in/img/fmp-picture.jpg">
</head></html>
Facebook debug tool tells me that it picks up an image but the image preview is not just there at all (looks to be hidden) as shown below.
When i click that "blank" space against the "og:image" , it opens up the image in a separate window so why does not it show up the preview image in the debug tool ?
I attempted changing the picture to different sized one's like 250x250, bigger etc. but nothing really helped. When i place one of the old cached images in the meta tag, it shows up that image. This tells me that old cached images are just fine but the newer images are not showing at all, for some reasons.
I tested using the link http://www.salefrog.in/register_fmp in the debug tool. If you guys can find some error, do let me know as it would really help me save time than i break my head to fix it all by myself.
I fixed the problem. It was due to the .htaccess which was blocking(or not letting the facebook ) to parse the image which was the reason that it threw a blank image , not showed any error.
How i fixed or analyzed the whole problem ?
Since there are no errors reported by the facebook debug tool and nothing seen in the apache logs, i suspected it could be that the tool itself does not sense any error with the whole process hence it must be something to do with the image itself OR something in-between.
Requests from facebook hits my webserver which has a .htaccess to redirect to a separate php that responds back only the meta tags , nothing else.
As there are no errors reported in facebook debug tool or in my webserver httpd logs, it could be two things that is causing the problem.
Image itself (could be the location of the image or the image is
corrupt or its size or aspect ratio or other format)
facebook debug tool has a bug (very unlikely but cant rule out )
(.htaccess) that does the redirection when the request comes from fb
As i have reasonably no doubt with the first two, i went to the 3rd item in the list.
I suspected the requests from fb is not fetching my images possibly due to the redirection happening for the "HTTP GET" to the image requests as well.
SOLUTION
I added the following line in the .htaccess just before the redirect so that all the image requests directly goes to the file, which just fixed the whole problem.
..
RewriteCond %{HTTP_USER_AGENT} ^(facebookexternalhit)
RewriteCond %{REQUEST_FILENAME} !(img|css|jp?g|png|store_images|category_images|fonts|awesome|ttf|tif|custom_images)
..
I know in most cases it might be something to do with the errors in the meta tags or in the image itself. But, in my case , it was not both.
Hope this helps someone out there !!
On LinkedIn here "image must be at least 80 x 150 pixels". On Facebook here image "cannot exceed 130x110 pixels". I want to use a php function to resize a thumbnail for Facebook or LinkedIn.
How can I detect if is Facebook or LinkedIn when I share a link?
EDIT(Details):
When I paste a link to share it in Facebook or LinkedIn, they get the info that is in these tags inside the head of a html document:
<meta property="og:url" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="image.jpg" />
<meta property="og:title" content="title" />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="id..." />
<meta property="og:locale" content="en_US" />
For the og:image part for LinkedIn if is smaller then dimensions mentioned it will ignore it, while for Facebook the maximum required is smaller then what LinkedIn wants, and on Facebook for a wrong picture it looks to display a image of their own by default. So I'm trying to detect if I share a link on Facebook or LinkedIn to resize appropriate
Look for the user agent of the request, if it's Facebook then serve the Facebook optimized image otherwise the default one (linkedin sizes).
facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)
Source: Open Graph Protocol, Best Practices section.
NOTE: While this is not the purpose of this user agent (it's not clear what is allowed and not allowed). But I think your purpose won't violate any platform policies.