I've a web page and I want to share it in facebook but the image shown is not ok.
In the HTML code of the web I have:
<link href="http://www.example.com/img/logo2.png" rel="image_src" />
In the options to select the image, there are other images, but not logo2.png
I've tried to delete facebook cache with facebook debugger, but the result is the same.
Edit:
If I add ?v=1 to the end the URL when I share it, the logo option is shown. It means that facebook debugger is not deleting the cache.
Also, I want that the logo image be the first option.
Can you help me?
Solved:
<!-- facebook tags -->
<meta property="og:image" content="http://www.example.com/img/logo.png"/>
<meta property="og:url" content="http://example.com">
<meta property="og:title" content="Portfolio | web">
<meta property="og:description" content="Portfolio">
I think that you may be using the wrong tag. I haven't done this in a while, but I believe that it should be a <meta tag with a property="og:image" and then content set to your image. The following (really old) question addresses this issue/conforms to what I remember: How does Facebook Sharer select Images and other metadata when sharing my URL?
Let me know if it works :)
Related
I'm using Graph API JS SDK v2.11 and trying to share a link from my website to my Facebook profile. Now, I'm facing the same problem that Facebook has already mentioned here (Please search Pre-caching images):
I just can't see image in dialogue preview on first click. (Although image is shared successfully in my profile)
On second click, it is rendered fine. I have provided all necessary meta tags including og:image, og:image:width, og:image:height (according to width and heights of my images) but still it's not working!
I just can't understand why it's not working! I read same solutions on other similar questions but nothing is working. Can it be because of different origins (The image link has a sub domain)? Does anybody have any idea about it?
Here's markup for meta tags:
<meta property="og:url" content="https://www.example.com/views/1103/your-facebook-profile-picture-popularity/1522777597_5ac3bdfd8c524">
<meta property="og:type" content="website">
<meta property="og:title" content="Know about your Facebook profile picture popularity">
<meta property="og:description" content="Example has a collection of latest fun apps. Know how much your Facebook friends care about you and find out your profile picture popularity.">
<meta property="og:image" content="https://api.example.com/v1/app/images/img_1522777597_5ac8hdfd8c524.jpg">
<meta property="fb:app_id" content="1848969382006870">
<meta property="og:image:width" content="660">
<meta property="og:image:height" content="560">
Image dimensions are: Width 660px, Height: 560px
Image is visible to public (i.e., has all necessary permissions to others)
PS: I can pre-cache the image with the Facebook's Sharing Debugger, but the images are generated dynamically, so it's not possible to do it manually.
Working on a site that contains OpenGraph tags. However, when trying to share one of those pages, the Facebook preview isn't populating properly:
For example: https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/
OG Tags:
<meta property="og:locale" content="en_US"/>
<meta property="og:site_name" content="H&K Insurance"/>
<meta property="og:title" content="Noise Reduction for Your Restaurant - H&K Insurance"/>
<meta property="og:url" content="https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="Reducing noise is key to maintaining ambiance in your restaurant. Learn about noise reduction techniques on our blog. Call 617-612-6515 to evaluate your insurance coverages."/>
You need to enter your page url and click Scrape Again button in the next page.
https://developers.facebook.com/tools/debug/
If this doesn't help maybe you don't have property requirements for og tags.
Check out this: https://developers.facebook.com/docs/sharing/best-practices
For og:image if you changed image for same url, sometimes facebook caching the image and Scrape button doesn't work. You have two options: wait until facebook cleans its cache or change image name and og:image propery path for the new image and Scrape Again.
After a lot of confusion, I discovered that my file was in UTF-16 format, not UTF-8. As soon as I converted it, everything worked.
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
If I paste the following URL into Facebook I can share an animated gif. It's not a movie and not flash, Facebook now supports gifs without those workarounds. I can click it to pause and it shows "GIF" in a circle while paused.
http://giphy.com/gifs/hot-funny-cartoon-fBEDuhnVCiP16
No matter what I replicate from that page's meta tags I cannot get Facebook to share an animated gif form my own page. I've even gone so far as to copy the entire code of that page and serve it myself (Changing <link rel="canonical" and <meta property="og:url" to match my url).
Open Graph Object Debugger gives identical results for both the real Giphy page and my replica. Interestingly, the preview in Object Debugger is the old style Flash movie for both pages. However, when I paste the Giphy url into my Facebook it shows the gif - my relica shows the Flash.
Do Giphy get some special treatment from Facebook? Do I need to do something different?
I was able to create an .html file which, when the link is pasted as a status, displays as an animating (and looping) GIF in the Facebook feed. In my html page, I use the following meta tags in the header:
<meta property="og:site_name" content="Site Name">
<meta property="og:url" content="url to GIF on web">
<meta property="og:title" content="Title of GIF page">
<meta property="og:description" content="Some description">
<meta property="og:type" content="video.other">
<meta property="og:image" content="Same as og:url above">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="400">
The thing that gave me trouble when I was working on this was the og:url property. It should point directly to the GIF, not the .html file that these meta tags are a part of. Also, og:image should be the same as og:url.
I didn't test if the width and height properties are required.
Product Manager for the Giphy API team here. No special treatment; I wish--filing bugs with Facebook takes forever.
The Flash tag is legacy and we should clean it up. FB now does support GIFs and the answer by vegashacker is essentially correct.
An important point which answers have missed, how to make GIF image (if clicked) redirects to the article which belongs to instead of the GIF link itself?
The important parts are:
<meta property="og:image" content="url/to/image.gif">
<meta property="og:url" content="url/to/image.gif">
<meta property="og:url" content="url/to/article">
Add two og:url tags. First one should be the same as og:image pointing to the GIF image URL. Second one should be the URL to the article.
Actually, I looked at their source code, and I am 99% sure that they are actually showing a video. For this gif, there are a number of open graph meta tags associated with the page:
<meta property="og:type" content="video">
<meta property="og:image" content="http://media.giphy.com/media/H2ANZTOXVepbO/giphy-facebook_s.jpg">
<meta property="og:image:width" content="480">
<meta property="og:image:height" content="270">
<meta property="og:video" content="http://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:secure_url" content="https://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="470">
<meta property="og:video:height" content="297">
and most of them are video tags. These tags are associated with the page and not a gif. If you share the straight gif image, then it will not animate.
To confirm this, if you plug the page into the Facebook URL debugger, then this can be confirmed. There is no mystery, this is shared as a flash video.
I have been working on this for a while with Facebook debugger and found how to post swf but just today I also successfully posted my animated gif.
I simply pasted my link https://www.example.com/my.gif into Facebook debugger and it said could not find URL but displayed fine giving app id number and then I went ahead and posted in my timeline for all to see :) So no html or tags to achieve that but simply a secure link to my gif file on my server.
Never did I work out how to achieve it via html embedded!
when you try to share a link on a fan page, some times use the image from meta og:image but some times uses a random image.
site is: http://maite.com.br/blog/
metas i'm using:
<meta property="og:image" content="http://maite.com.br/blog/imagens/posts/face_icon.jpg"/>
<meta property="og:url" content="http://maite.com.br/blog/"/>
<meta property="og:type" content="blog"/>
<meta property="og:tittle" content="Maite Proença Blog"/>
i have had this same problem . when i shared some thing on face book it doesn't show as the same featured image on my website: my site: http://www.technobezz.com/
If you are using wordpress please try these plugin's from wordpress because it worked for me and others
http://wordpress.org/plugins/facebook-featured-image-and-open-graph-meta-tags/
thanks