Facebook OG Image stuff is a nightmare. How do you tackle keeping images consistently appearing on Facebook right? I am currently struggling to get a default image setup for the forum of a website. The forum is in phpBB. I have added this code to the header.
<meta property="og:image" content="https://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-forum-default-facebook-image.jpg" />
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="484">
<meta property="og:image:height" content="252">
The image is set to the exact size it is supposed to be. I even tell Facebook that. But it still chops off both ends.
I also get an error saying it can't download the image or it is too small. it is not to small, exceeding the 200px min. It is also listed IN the debugger and showing that Facebook can indeed download it just fine.
My URL: https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
Facebook Debug Info
Time Scraped 2 seconds ago
Response Code 206
Fetched URL https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
Canonical URL https://fyxtrpg.com/fyxt-forum/index.php
Notice
Warnings That Should Be Fixed
og:image could not be downloaded or is too small 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 'https://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-public-beta-logo.jpg' will be used instead.
To find the object, these are the redirects we had to follow
original https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
og:url https://fyxtrpg.com/fyxt-forum/index.php
The following will be treated as a redirect by the crawler:
A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
The final URL, which we tried to extract metadata from is highlighted in bold
These are the raw tags that we found
Meta Tag <meta property="og:url" content="https://fyxtrpg.com/fyxt-forum/index.php" />
Meta Tag <meta property="og:title" content="Fyxt RPG Forums" />
Meta Tag <meta property="og:description" content="The free to play Fyxt RPG system offers RPG players a fun, fast, and flexible RPG experience. Play any genre, setting, or character for free with Fyxt RPG!" />
Meta Tag <meta property="og:image" content="https://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-forum-default-facebook-image.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpeg" />
Meta Tag <meta property="og:image:width" content="484" />
Meta Tag <meta property="og:image:height" content="252" />
Based on the raw tags, we constructed the following Open Graph properties
og:url https://fyxtrpg.com/fyxt-forum/index.php
og:type website
og:title Fyxt RPG Forums
og:image
og:description The free to play Fyxt RPG system offers RPG players a fun, fast, and flexible RPG experience. Play any genre, setting, or character for free with Fyxt RPG!
og:updated_time 1417807331
As you can see the debugger says it can't find it then shows me all the data it actually DID find.
When I post the image is cropped, but if I delete that and manually upload it fits fine. That is not acceptable, I need know that anyone sharing something from the website is going to have a decent image appear along with it. Not one that is chopped or distorted.
How do I fix this so Facebook sees the image AND displays it correctly, consistently?
Is there a process of method that someone can suggest to insure that all links to the website will be X size photo/thumbnail? It is really frustrating as it seems that sometimes Facebook uses a portrait, other times a landscape, other times a square. I have even noticed it using different methods to post the same picture. This makes it very difficult to make sure the images look good on Facebook.
Thank you for your advice and help!
More info added... I have also sent in numerous Facebook bug reports because this stuff needs to be fixed.
I have also found that Facebook is not being consistent between creating and posting. This includes resolution, ratio, and a couple other things. Here is one mess I found on ONE attempted post.
If anyone has any suggestions I am eager to hear how to actually work WITH Facebook and their API and not against it...
I have been dealing with this over the last few days. It seems that Facebook only takes the OG tags as suggestions. I discovered that if your image is closer to a square, and it finds a large enough image that is closer to it's ideal aspect ratio, then it will use that one.
Also, even though they say the minimum is 600px X 315px, they really do prefer images above 1200px X 630px.
https://developers.facebook.com/docs/sharing/best-practices#images
Related
i'm facing a problem with sharing links on facebook which is displaying the wrong image many times and just sometimes it displays the correct image using the code like this
<meta property="og:title" content="webpage title" />
<meta property="og:url" content="http://www.domain.com/webpage_url.php?id=17515278817738945084phb">
<meta property="fb:app_id" content="app id here"/>
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.domain.com/large/image.jpg" />
and when debugging the page i get this
The 'og:type' property is required, but not present.
this image is 1000*317px and still not showing up. this happens with all the links of my site. I have to go to url debugger and clear the cache so facebook can get the correct image. so how to fix this problem and make facebook display the correct image directly?
[UPDATE]
using the facebook debugger i get this notice
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://www.domain.com/gallery1/01234.jpg' will
be used instead.
But the og:image is set properly and image size is largr than 200*200 and Facebook displays the correct image after clearing the Facebook cache though it keeps displaying this notice
Try pointing to your index file. eg www.yourdomain.com/index.php when using the facebook object debugger. It fixed the og:name error for me.
Okay, I can not figure this out for the life of me. I created a new site, and wanted to add the open graph meta tags like on my old site (which is working fine). When I added these to my new site and tested them in facebook debugger, it says that they are not present. I get this back when I test it:
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.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Also, it is not finding the image even though it is there as well. Here is the code from my site as follows:
<meta property="fb:admins" content="100002683693547" />
<meta property="og:title" content="JDerry Art" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.jderry.com/2015" />
<meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
<meta property="og:description" content="Art and Illustration by J. Derry" />
<meta property="og:site_name" content="JDerry Art" />
my new site URL is: http://www.jderry.com/2015/
I have tried all suggestions for similar issues on here and other forums, as well as tried moving the order of the tags to no avail...
Any and all help will be greatly appreciated as this is starting to drive me nuts as there appears to be no definite answer and all suggested solutions yield the same problem. Thanks in advance.
P.S. My old site was xhtml and my new site is HTML5, not sure if that has any influence on this issue?
When you are using Open Graph Object Debugger . make sure you check the time last scraped and make sure its up to date with the changes on your website.
you can click on fetch new scrape information , to get the new data. and right now your open graph tags are working fine .
These are the raw tags that we found
Meta Tag <meta property="fb:admins" content="100002683693547" />
Meta Tag <meta property="og:title" content="JDerry Art" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:url" content="http://www.jderry.com/2015" />
Meta Tag <meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
Meta Tag <meta property="og:description" content="Art and Illustration by J. Derry" />
Meta Tag <meta property="og:site_name" content="JDerry Art" />
I was having the same problem, and what was causing it for me was that the content of og:url was just mywebsite.com, and not http://www.mywebsite.com.
The problem for me was that I had ipv6 enabled for my site and I didn't had a proper configuration in my web server settings.
HEY GUYS HERE'S MY ANSWER, i HOPE IT WORKS FOR YOU AS WELL: I try'ed every sugestion I can get my hands on, and what worked for me was this:
go to: https://developers.facebook.com/tools/debug/og/object/
Once you are there, paste the URL from the web page you wish to share in the box, and hit the button "retrieve information from the new extraction"
After you do this, it will appear some information, WHAT YOU ARE GOING TO NEED from this information, is the "og:update_time" element, on the right side of this element you will have a number, you are going to need to add this element along with this number to your meta information, someting like this:
meta property="og:updated_time" content="1496821331"
every number for every page is UNIQUE, but I find that if you put the same number in more than one web page it still works, but you may wanna put the specific number for each web page you are going to need (NOTE: in my experience,
you DONT need to have the image in the same directory as the meta is, actually, I use an image from google images and work out just fine!)
this is an example of the og:updated_time
I hope this can help you guys.
How I fixed this issue:
Turns out that the facebook scraper was timing out before it could get the content. You can check if this is happening to you with this tool. It will give a red error message if it is indeed timing out.
I'm making a wordpress site so I fixed this with the "Super Cache" plugin, which caches the content so that the facebook scraper can load it fast enough to not timeout. You still have to scrape multiple times (up to 4) with the sharing debugger for all the content to come through and work because the image loading is asynchronous.
When I try to share from http://www.giftry.com I am given the small square thumbnail image instead of the large rectangle. The image linked to in the open graph meta tags is larger than Facebook's recommended 1200x630.
I've tried using the debugger, but there are no errors and everything looks correct. Any thoughts on what I can do?
Here are my og meta tags:
<meta property="og:title" content="I need your gift ideas!">
<meta property="og:site_name" content="Giftry">
<meta property="og:url" content="http://www.giftry.com">
<meta property="og:description" content="Come help me at Giftry — a place where gift givers unite to curate giftries full of fabulous gift ideas. Whether you create your own giftries or explore gift ideas for others, Giftry makes it easy to find ‘just the thing’, for anyone and any occasion. Now, let’s get gifting!">
<meta property="og:image" content="http://ec2-static.giftry.com/img/giftry_gift_surprise_large.jpg">
<meta property="fb:app_id" content="356150731192079">
Seems that I have find a way how to resolve this. When I remove fb:app_id and update url via debuger the rectangular image were shown as expected. Then I have created new fb:app_id and it works fine as well. If I turn back my old app id facebook show me small square thumbnail again.
So I've notices from my Facebook Page Analytics that posts without link previews (thumbnail & excerpt) get over 10 times the 'reach' as posts with links previews.
I recently used an app called Buffer to post to Facebook and the first 10-15 posts included a small bit of text and a shortened link (that was clickable) - but no thumbnail or excerpt underneath. Those posts had a reach of about 250 people.
Now, posts (from the exact same app) are generating the link preview with thumbnail and I'm reaching 10-12 people per post.
Does anybody have any insight on this? Is there a way to disable Facebook's link detection for previewing URLs while keeping the link in the post itself?
Thanks :D
If you don't control the URL you are posting, I don't know anything you can do. But if you happen to be posting content from a personal blog, etc...you can add social meta tags, which are intended to be used to describe the content to, in this case, Facebook. The example will use Facebook's meta tags.
If you look at the tags below, this is an example from a WordPress blogs generated output for a site I did for a friend:
<meta property="og:title" content="Reality Winner: Accused leaker wanted to ‘burn the White House down’"/>
<meta property="og:description" content="This leftist loon had access to classified material! They don't do a very good job of vetting folks! Can this contractor be 'fired'?!"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.mcbanned.com/reality-winner-accused-leaker-wanted-to-burn-the-white-house-down/"/>
<meta property="og:site_name" content="McBanned"/>
<meta property="og:image" content="https://www.mcbanned.com/wp-content/uploads/2017/06/6CB4A836-AFD3-4CAC-B3FF-A1D22427FE89-191-000000672C0A541C.jpeg"/>
<meta property="og:image:width" content="660"/>
<meta property="og:image:height" content="780"/>
These will tell Facebook exactly what to put in the link preview. If you have control over that, you can insert empty description, and a blank white image or something and it will just not show up. As far as completely stopping it...if you link to a simple page with only 1 image that is 200x200 or greater it will pick that one with or without the tags, but if you specify something it will choose that everytime (theoretically) so you could engineer something "blank."
I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
YouTube's share URL isn't a straight .swf per se, but it is flash content:
rob#uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815
rob#uvm:~$ file yt
yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
Using movie worked for for og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.
The following og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.
Note the URLEncoded file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.
Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured crossdomain.xml on the content server.
Facebook Debugger Tool observations
The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded.
I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:
<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
Seems like facebook only accept application/x-shockwave-flash or video/mp4 not text/html.
MIME type of the video. Either application/x-shockwave-flash or video/mp4.
https://developers.facebook.com/docs/sharing/webmasters