I am using public_path('website.jpg') to render the og:image meta data, however im not sure that it is working as facebook still is not using the image specified. Is this correct?
<meta property="og:image" content="/var/www/website/public/website.jpg">
public_path() function returns the absolute file path. Instead, you should use the url() function.
Related
Here I used to debug the above URL using Facebook sharing debugger. I have this message after debugged.
Invalid Image Content Provided og:image URL, https://mydomain/session/upload/undefined could not be processed as an image because it has an invalid content type.
I have used Next.js, and my head tag include:
<meta
property="og:image"
content={`${apiUrl}/session/upload/${session?.image}`}
/>
How can I solve this?
The image path is "..../undefined", that image most likely does not exist.
Make sure ${session?.image} is not undefined. You could also use a fallback image in case it is not defined, for example:
<meta
property="og:image"
content={session?.image ? `${apiUrl}/session/upload/${session.image}` : 'fallback-image-url'}
/>
In the Facebook debugger, scraping the URL "https://www.givingway.com/organization/the-light-and-leadership-initiative" yields the error:
Corrupted Image
Provided og:image URL, https://d141thk7ygtt3c.cloudfront.net/043a7261-eb4f-48ce-9db6-8cbeefcf86df.jpg could not be processed as an image. It may be corrupted or may have an invalid format.
At the same time scraping the URL "https://www.givingway.com/organization/youth-in-action-against-poverty-and-hivaids-yaapha" works fine.
I can't figure out what causes this issue, as both pages:
are both produced from the same template, and share the same HTML structure.
have an og:image with the same structure.
<meta property="og:image" content="https://d141thk7ygtt3c.cloudfront.net/043a7261-eb4f-48ce-9db6-8cbeefcf86df.jpg" />
<meta property="og:image" content="https://d141thk7ygtt3c.cloudfront.net/b954d1df-57e6-4beb-acae-2916997a8e4e.jpg" />
Both images are JPEG.
Opening the image URL in a separate tab displays an image - which isn't the behavior I'd expect from a corrupted page.
This inconsistency occurs on various pages - certain pages are scraped successfully, while others aren't.
There is an open bug on Facebook (Opened Feb 8). When the og:image tag points to an image that is hosted on CloudFront the Facebook debugger behaves inconsistently - can process some and can't process others. Hopefully Facebook and CloudFront can solve this issue in the near future.
If you upload a image file to s3 by library(ex. python boto3), please check ContentType arguments.
I uploaded a image file with boto3 without ContentType arguments, the content-type of file in metadata set default value "binary/octet-stream".
After i passed ContentType="image/png" argument, metadata set well and facebook og tag looks good. (description below image, not aside)
Please note that I am far from being proficient in HTML so I might be doing something silly. Also I am posting this question because although I found other questions about the same topic, none of them addressed the exact problem I am having. Thanks.
I am trying to use the Open Graph properties in the meta-data of my blog to control which image facebook shows, but facebook claims that there is a problem with my image.
Here is the metadata I have added inside the <header/> tag:
<meta property="og:type" content="article" />
<meta property="og:title" content="Salud, cuerpo, mente y dieta" />
<meta property="og:description" content="Que tu alimento sea tu medicina y la medicina tu alimento - Aristóteles de Cos" />
<meta content='http://3.bp.blogspot.com/-9eH_b6ILSic/VwneIrX1hZI/AAAAAAAAUR4/8t-krO2wqzAT90Rrv3PQ-rwB1E09IVt3g/s1600-r/salud_cuerpo_mente_dieta_612x327.PNG' property='og:image'/>
When I use facebook's Open Graph Object Debugger and point it to my blog (saludcuerpodieta.blogspot.ca), this is the problem I find:
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 'http://poweredbygreensmoothies.com/wp-content/uploads/2014/01/green-smoothie-jars-1.jpg' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.
I read several things, including facebook's guidelines and best practices, where they say that the image has to be bigger than 600x315. Mine is 612x327, so it should work.
I have found that if I replace the image I want with the image facebook falls back to, things work as expected. That image is 2034x1296. Now, the problem with making my image that big, is that it is the header of my blog and it would not look good having the image that big (in fact, I would like the image to be even smaller than 600x315, but I made it bigger because of the troubleshooting tips I read).
Can you help me, please? What I am doing wrong?
Thanks!
If Facebook tried to reach the image URL and it was invalid, unreachable, etc, the URL is cached as being an invalid image -
Try changing the filename if you're sure the image you're trying to use is reachable and valid (e.g. add a cache busting parameter to the og:image value or rename the file)
I have SPA that uses hash-tag URLs for identifying content (#/resource/id), I've added like button and it works, but how do I specify thumbnail, description etc?
From what I've read I should use
<meta property="og:image" content="http://www.example.com/site/preview.png"/>
but I have a static page without any back end + I need to change it depending on which content is loaded. What should I do?
UPDATE: I've found answer: Facebook Like Button refresh after AJAX-Load
In order to make your meta tags dynamic you will need to use backend code, such as PHP or ASP.
There really is no other way to make the header of the document dynamic.
PHP example:
<?php
if(isset($_GET['myparam']) && $_GET['myparam']==='big'){
echo '<meta property="og:image" content="http://www.example.com/site/preview_big.png"/>';
}else{
echo '<meta property="og:image" content="http://www.example.com/site/preview_little.png"/>';
}
?>
You're going to have to find a way to pass in a good URL to your image. Facebook takes this tag, goes to your site, and gets your image.
I am using code found in http://www.facebook.com/share_partners.php/
It says to replace with the URL I want to share.
The page where the share icon is placed is NOT the URL I want to share. The URL I want to share I enter as
However, first it worked, but now it is pulling the meta value AND the URL from the actual page!
My concern is that it is grabbing the URL from the page, not what I input because of:
u=location.href;t=document.title
On the page (both the one with the share icon AND the actual shared page) I tried to define the preview image with:
<link rel="image_src"
This is located between the tags...doesn't seem to do anything.
Thoughts?
You can only change the title
everything else is fetched directly from the shared url.
i dont 100% understand what you want to do
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
Share
replace the u=location.href with u= and t=document.title with the given title. additionally replace in the href="" of the link with the correct url
any other info is fetched by the meta tags of the target url
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
the href="" links to the correct image
the tag needs to be within those meta tags (in the area)