I have set up the NextJs OG Image and everything works well. Only the image cannot be inferred by Facebook.
The error/warning is The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
when i supply the url of the page to Facebook the url is not being detected.
The code in my Head looks like
<meta property="og:url" content={
`${
process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://' + process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
}/${user.Name}`
}/>
<meta property="og:type" content="website"/>
<meta property="og:title" content={`${user.Name}`}/>
<meta property="og:description" content="undefined"/>
<meta
property="og:image"
name="og:image"
content={
`${
process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://' + process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
}/api/og-image?title=Nameofuser&description=A description`
}
/>
According to a source Facebook only checks for og:image in the first 50Kbs of the page source. If you are using inline CSS, the og:image will not be seen by Facebook does this mean that Facebook will not find the image.
Or am I setting this us the wrong way
Edit:
I have also copy pasted the code in the NextJS documentation onto my page and the image still does not show.
The simple code is
<Head>
<title>Cool Title</title>
<meta name="description" content="Checkout our cool page" key="desc" />
<meta property="og:title" content="Social Title for Cool Page" />
<meta
property="og:description"
content="And a social description for our cool page"
/>
<meta
property="og:image"
content="https://example.com/images/cool-page.jpg"
/>
</Head>
from the documentation link .
Is this a known bug in NextJS that I am unaware of
Eventually I was able to fix the issue. My entire app is wrapped with an AuthProvider by firebase. And for some reason, having it present makes facebook debuggers not wait for the authentication state or something. I would lazy load the AuthComponent and my first load size would come to even about 80Kb from around 182Kb but still facebook debuggers would still not load my og image. This is my solution
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
const AuthContextProvider = dynamic(() => import('../auth/AuthProvider'), {
ssr: typeof window==="undefined"
})
function MyApp({ Component, pageProps }) {
// mock state to make sure we are running in browser
const [inBrowser, setInBrowser] = useState(false)
useEffect(() => setInBrowser(true), [])
return (
<>
{inBrowser ? (
// running in browser load Auth
<AuthContextProvider>
<Component {...pageProps} />
</AuthContextProvider>
) : (
// building or running in pipeline
<Component {...pageProps} />
)}
</>
);
}
export default MyApp;
When build is running the second block of code is executed, which facebook does (not in a browser environment) and when a normal user loads the page the first block of code is run.
If there are security tradeoffs to this (I do not think there is) one can point it out. But that's the solution.
Also later I still brought back lazy loading the AuthContext Component, in line 3, because why not, honestly
Related
We have a site that we want users to share an image based on the results of their input. Basically a map with selected countries unique to them.
We previously could do this using the sharer.php parameters up until about today but these now seem to have bitten the dust for good. They were due to be discontinued this month.
Our alternative (hopefully someone has better!) is to set the og:image property for our home page (which is what we want linked on the FB post) dynamically based on the URL parameter. All seems straight-forward, however whenever we test share FB uses the standard image for the home page as if there is no URL parameter.
Does anyone know definitively if FB uses the URL parameters when it crawls a site to get the image? Our tests seems to show they don't but if anyone knows a way around this I would be eternally grateful.
FYI, here are the og tags so you can see how they're set dynamically. It's web2py but should make sense I hope:
<meta property="og:url" content="{{=cfg.global_base_url + request.env.web2py_original_uri}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{=(cfg.global_strap_line + ' | ' + cfg.global_app_name) if not response.title else response.title}}" />
<meta property="og:description" content="{{=cfg.global_open_graph_description if not response.description else response.description}}" />
<meta property="og:image" content="{{=cfg.global_share_image if not response.share_image else response.share_image}}" />
<meta property="og:locale" content="en_GB" />
Here's an example share URL: https://www.wherecani.live?pid=9d684d33-78ad-4f39-9010-458583dbfcef
You can see in the HTML that the og:image relates to the URL parameter as expected.
I had the same problem. This is how i fixed it.
This is going to show the default imageL
<meta property="og:url" content="http:example.com">
<meta property="og:image" content="http:example.com/img/fb.jpg">
To change the image dynamically based in the url, you need to also add the og:url like this
<meta property="og:url" content="http:example.com/pages/cars">
<meta property="og:image" content="http:example.com/img/pages/cars/fb.jpg">
It worked for me. Tested in open graph.
Here's another explanation.
I want to share a video with a thumbnail of only one image via sharer.php
I understand that most of people use Feed dialog with flexible UI but I need advanced options in this case.
A dialog looks like this and I want to have only one thumbnail the on I specify with og:image on a relative page
My OG tags look like this:
<meta property="fb:admins" content="*admins*" />
<meta property="fb:app_id" content="*app_id*" />
<meta property="og:type" content="movie" />
<meta property="og:video:height" content="*height*" />
<meta property="og:video:width" content="*width*" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:title" content="*title*" />
<meta property="og:description" content="*description*" />
<meta property="og:image" content="*image*" />
<meta property="og:url" content="*url*" />
<meta property="og:video" content="*video*" />
And I use a basic function to call a Share This Link dialog
u = $(*link*).html();
t = $(*name*).html();
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=*width*,height=*height*');
return false;
My question is how can I modify my code / add code to have only 1 thumbnail instead of 1 of 2 message
I tried changing my code, removing og:url, checking og:image, etc, using facebook debugger to clear its cache. And I could find nothing on net either.
I've been told you have to modify the code in (meta property="og:image" content="image" /) to
(meta property="og:image" content="http://www.yoursite.location of the image" /)
I've personally messed with this for several days and finally accomplished it! The way I did it was to publish the image I wanted FB to use for my site to my server. Then, in my browser, I did a right-click on the newly published image and chose "Copy image location". Then I added the above code to my page html between the header tags, and pasted the copied image location between the quotes. Be sure that your image is at least 200 x 200 px - they say the bigger the better, but not more that 5MB in size. I was having a lot of trouble getting FB to pick my specified image because I was making it too small. I've finally gotten success just now by resizing my image to 1000x712, and it's working.
In my case, Facebook has still not recognized my specified image as the ONLY image I want used, but I've also been told that FB will "scrape" my site every 24 hours and, hopefully, once that's done, the multiple images option will disappear. Hope this helps.
I have a website where I'd like to have a facebook like button, with the button being customized so it shows a specific picture, description, etc.
All of that is done and it works, however I used regular img, description, title meta tags instead of the og tags we are supposed to use.
Facebook complains when I lint the website with http://developers.facebook.com/tools/debug.
Here are some error messages:
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.
and etc for all of the other tags...
Here is the problem: When I did add and configure the tags as shown in examples provided on the web, not only did it not work, I recieved another error:
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place. Either way you need to fix it
before the tags are usable.
Here is my html config:
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraphprotocol.org/schema/">
...
<meta property="og:url" content="..." />
<meta property="og:site_name" content="..." />
<meta property="og:type" content="..." />
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
<meta property="fb:app_id" content="..." />
...
NOTE: My fb-root tag and the other fb provided like button code is at the very bottom of the page along with the other script's.
NOTE: I did zero configuration on open graph's website, or on facebook's open graph section of my app, in facebook developers, however I don't think that this is an issue because in fb's instructions, they said to add a like button only copying/pasting code is needed and no actual open graph configuration was needed.
Here is the site URL: http://darehut.com
NOTE: My tag code is actually inside the head element in my source, but for whatever reason, they get rendered outside!
Thanks for your help!!
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place.
That message is missing the word <head> before the first period.
What it means, is pretty simple: Either you put your OG meta tags outside of your <head> element, or your HTML is malformed.
And next time you ask a question like this, please include the URL to the document you’re having trouble with – that way, we can have a look at it ourself and we’ll be able to answer more specific.
I am getting one weird issue on my site. I did what facebook developer site said exactly the same way but still getting the same issue. Issue is that when I click on "Like" button on my website, the popup and count works absolutely fine but story does not get published on facebook's timeline or news feed. However (as strange it sounds) when I debug my page using linter tool it does not show any warnings and after that only like button for that page starts posting to user's wall otherwise not. I am not getting the connection between linter tool and this publish policy of FB. Can anyone please help me with this....it is taking too much time to resolve :(
These are my meta-tags
<meta property="og:description" content="[DESCRIPTION]" />
<meta property="og:site_name" content="[SITE_ADDRESS]" />
<meta property="og:type" content="object" />
<meta property="og:url" content="[PAGE_WHERE_LIKE_BUTTON_IS LOCATED]" />
<meta property="og:title" content="[PAGE_TITLE]" />
<meta property="og:image" content="[IMAGE_URL]" />
<meta property="fb:app_id" content="[APP_ID]" />
<meta property="fb:admins" content="[ADMINS_ID]" />
I am using "Like" as action and "object" on my App Dashbord's opengraph.
The most strange thing is everything works fine onlt after using debug tool. Question is why??
BR,
MailMaster
I had the same problem and I temporary resolved calling the facebook debug tool directly from inside the page using an ajax call. It's horrible, I know. But if you are in a hurry (like me) you may want to use this as a temporary work around, until you find the right way
My page is http://www.organirama.com/showserver/minisite.php. The workaround is (requires jquery).:
$(document).ready(function() {
$.ajax({
url : "http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.organirama.com%2Fshowserver%2Fminisite.php",
success : function (a,b) {
},
error : function (a,b,c) {
}
});
});
I am pretty new to Open Graph Actions. So, unable to fix this small issue.
I am developing a canvas application where I used in-built read-article meta tags
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="APP ID" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://apps.facebook.com/myapp/article?postid=1" />
<meta property="og:title" content="Underwater Shades" />
<meta property="og:image" content="http://2.bp.blogspot.com/-Z-yBlXMMYWo/UBUYe-Lc46I/AAAAAAAAAxc/VO9XB7Ls-sY/s640/Under+water.JPG" />
If you have noticed, I used a GET request and Facebook app URL in og:url. (I want uses to get directed to app when they click links)
Now, I just added "Like" social plugin initially to check whether everything is working fine! and surprisingly its not working.
This is what the debugger is showing:
Response Code: 401
Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.
# Raw OG Document Information
Meta Tag: <meta property="fb:app_id" content="365662310180674" />
Meta Tag: <meta property="og:url" content="http://apps.facebook.com/myapp/article?postid=1" />
Meta Tag: <meta property="og:site_name" content="Surya Test App" />
Meta Tag: <meta property="og:type" content="website" />
Meta Tag: <meta property="og:image" content="https://s-static.ak.facebook.com/rsrc.php/v2/y_/r/9myDd8iyu0B.gif" />
Meta Tag: <meta property="og:title" content="Surya Test App" />
Where is the problem and how should I fix it.
This is a common mistake:
If you have noticed, I used a GET request and Facebook app URL in
og:url. (I want uses to get directed to app when they click links)
If og:url is anything other than the current page it is telling Facebook to "ignore these meta tags and go get the ones at this location instead."
However, this is not where your current issue lies.
Your re-direct is what is causing this problem.
Facebook can detect redirection and will attempt to grab those open graph meta tags instead. This is exactly what is happening with your described issue.
How to fix it:
Change the URL in your Like Button code to this:
http://o-e.us/e.php?o=53fa
For Example, if you are using the XFBML Like button code, it should look like this:
<fb:like href="http://o-e.us/e.php?o=53fa" send="false" width="450" show_faces="false"></fb:like>
I got this using:
Facebook/Open Graph Like Button Generator
Using the info from above, I entered:
Title: Underwater Shades
Image URL: http://2.bp.blogspot.com/-Z-yBlXMMYWo/UBUYe-Lc46I/AAAAAAAAAxc/VO9XB7Ls-sY/s640/Under+water.jpg
Description: View Underwater Shades on Surya Test App
Redirect URL: http://apps.facebook.com/surya-dev-app/post?feed_link=http://withmycam.blogspot.com/2012/07/underwater-shades.html
I tested it and it's working for me so hopefully it helps you out. You can change the info I entered and generate a new URL if what I entered doesn't work for you. Good Luck!
Um... it says so in the error message. The image you provided in your meta tags is 75x75px. You'll need to put a larger image - one with at least 200x200px dimentions.
All the images referenced by og:image must be at least 200px in both dimensions...
Your iamge - 75x75px
(source: facebook.com)
Image from example - 390x366px