Good day -- I'm currently using Facebook's PHP SDK to share a link (see: https://developers.facebook.com/docs/php/howto/postwithgraphapi/), but when I attempt to customize the image, title and description via the Facebook meta tags, they do not take effect (FB always renders the defaults instead).
Here is my html head information:
<head prefix="og: http://ogp.me/ns#">
<title>Share to Facebook Custom Image</title>
<meta property="og:title" content="Share to Facebook Custom Image">
<meta property="og:type" content="website">
<meta property="og:url" content="http:...">
<meta property="og:image" content="http://www.millennialmedia.com/images/home/mmedia-2.png">
<meta property="og:description" content="add a short description of the page or content">
<meta property="fb:app_id" content="751866978175179">
</head>
Can someone please advise as to what I might be doing wrong? Much obliged!
Go to facebook debugger (ex linter) and paste the url. That should help debug. Facebook caches a copy and debugger refreshes it. Try that. Another thing that might help as well is clearing your browser's cache as the last solution.
EDIT SOLVED
You are using XHTML and XHTML is strict on errors. That was causing the facebook url parser to fail getting the information due to an invalid <br /> tag that you are using (</br>). Fix that and it will work. If going on with XHTML look here for common mistakes
I recommend switching to html like so:
<!doctype html>
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb#">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
As for your image not displaying issue upload a bigger image bigger from 200x200 pixels if I remember correctly.
Related
The Facebook page shows characters as ???? for certain WordPress posts shared.
I did check the preview for Facebook Instant Articles for posts. It shows the same.
This only happens to certain posts.
I have also added following in header.
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
I did also checked https://MYDOMAINAME/feed/instant-articles. There it shown correctly.
try finding the language and maybe if it is thai this would work:
<meta http-equiv="Content-Language" content="th">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
EDIT: maybe if one of the characters isn't in the charset it would be unreadable.
make sure you implement the right charset.
I'm really struggling to get LinkedIn to recognise an og:image. My og tags look like this:
<meta property="og:type" content="website" />
<meta property="og:title" content="My title here" />
<meta property="og:url" content="https://www.example.com/some-page" />
<meta property="og:description" content="Description here" />
<meta property="og:image" content="https://www.example.com/og-image.png" />
So far I've tried:
checking the og:url matches the current page
checking the image exists
adding prefixprefix="og: http://ogp.me/ns#" to my HTML tag
changing that prefix to prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"
checking the site's SSL settings (as per Share on LinkedIn with og)
ensuring my image is at least 1200x672px
ensuring my image is under 5MB
I'm not sure what else there is to try. Any ideas?
Aha – just tried making it a JPG rather than PNG and LinkedIn now sees it. That's kind of shocking but hopefully that'll help someone else!
On Twitter, I can't show an image card when tweeting my website https://startcrowd.club
But it works perfectly on Facebook.
I want to show this card: http://startcrowd.club/images/startcrowdimage.jpg
I tried https://cards-dev.twitter.com/validator and I got:
INFO: Page fetched successfully
INFO: 9 metatags were found
ERROR: No card found (Card error)
The relevant metatags on my page https://startcrowd.club/index.html are:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:image" content="images/startcrowdimage.jpg">
The documentation I followed is:
https://dev.twitter.com/cards/getting-started
Ensure that the og:type tag is set. On Facebook it is not required, Facebook will use website as the og:type if it is not found. That is why it worked fine on Facebook.
By adding <meta property="og:type" content="website"> if the twitter:card property is not set, twitter will use summary.
So just add <meta property="og:type" content="website"> and I think it will work fine.
PS: I also had the same issue but when I added <meta property="og:type" content="website"> it worked for me.
Add:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://startcrowd.club/images/startcrowdimage.jpg">
Doc: https://dev.twitter.com/cards/types/summary-large-image
You should change your
twitter:card tag to 'app', 'player', 'summary' or 'summary_large_image'
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
that is all required meta tags.
You can also check it from twitter validator
Here is a article might be helpful
https://medium.com/#melih193/social-media-cards-for-more-interaction-with-meta-tags-741a6e8d27d1
Just add the following before your closing </head> will do:
<meta content='summary_large_image' name='twitter:card'/>
<meta content='#yourTwitterID' name='twitter:site'/>
<meta content='#yourTwitterID' name='twitter:creator'/>
If your <head></head> tag contains any og:xxx meta tags, the Twitter crawler should be able to grab it. They can't generate a card for you if you don't tell them which Twitter account that this card belongs to. The card needs to generate a link that references back to the account owner.
Anybody knows how Telegram makes the rich preview?? It would be very useful to learn about it for a development I am making. It is a server side features, so I think the code is not available. Isn't it?
It uses Open Graph protocol: http://telegram.wiki/manuals/general/link-previews
In some posts, the preview doesn't need any work from you, for example if you have a photo URL link in your post, that is an entity of the message.
But in other cases you need to add some tag in your material, for example when you add one URL that points to an article in your website, you must tag and your HTML tag must change:
<html prefix="og: http://ogp.me/ns#">
your head tag
<meta property="og:title" content="title text" />
<meta property="og:image" content="an image url that exist in your page" />
<meta property="og:url" content="current page url" />
<meta property="og:description" content="description text" />
Our app renders Like buttons that point back to an actual Facebook page. However, instead of pointing the Like button's href directly to the FB url, we proxy it through our servers through an opengraph endpoint. This is helpful because it allows us to have more detailed analytics on when these endpoints are used (amongst other things.) When these endpoints are hit with a user agent like 'facebookexternalhit', they render something like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta property="fb:app_id" content="158708354177049" />
<meta property="og:site_name" content="BandPage" />
<meta property="og:url" content="http://www.facebook.com/stormystrongmusic" />
<meta property="og:type" content="band" />
<meta property="og:title" content="Stormy Strong" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://graph.facebook.com/20501829906/picture" />
<title>Stormy Strong</title>
<link rel="canonical" href="http://www.facebook.com/stormystrongmusic"/>
</head>
<body>
</body>
</html>
Note that both og:url and the link rel="canonical" point to the actual Facebook Page. In practice, this looks like it behaves fine when we try running the link through Facebook's debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bandpage-s.com%2Fogp%2F11601543111380992
However, there is a problem where, after an interval, the Like buttons appear to not resolve back to the page anymore. This results in the Like count being off, the button not being 'Liked' if you already like the page, etc. Manually triggering a re-scrape by going to the OG debugger url above solves the problem, for a time.
Obviously manually re-triggering these scrapes is not a tenable solution. Are there multiple scraper behaviors happening here? It seems like the scraper that is triggered w/ the debugger is different than the one that periodically re-scrapes automatically.
Why does this happen? Is there anything we can do to get around this, except for getting rid of our ogp endpoint 'middle-man' here? This seems like a perfect utilization of og:url.