opengraph og:image can't be found at the defined URL despite it being valid?
Answered
chan posted this in #help-forum
chanOP
I'm getting mixed signals with regards to my og:image for social media sharing.
One one hand, Facebook's debugger is showing that the image exists https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fgo-copy-production.up.railway.app%2F
on the other sites are showing the image as NOT being found. https://socialsharepreview.com/?url=https://go-copy-production.up.railway.app/
The social media preview doesn't work on any site when I share it with my close friends for testing.
The image exists here during this current deployment. https://go-copy-production.up.railway.app/opengraph-image.png?d17d6a30dd328a46
This is what my layout.js file looks like. My images are in the /app directory. What am I doing incorrectly?
One one hand, Facebook's debugger is showing that the image exists https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fgo-copy-production.up.railway.app%2F
on the other sites are showing the image as NOT being found. https://socialsharepreview.com/?url=https://go-copy-production.up.railway.app/
The social media preview doesn't work on any site when I share it with my close friends for testing.
The image exists here during this current deployment. https://go-copy-production.up.railway.app/opengraph-image.png?d17d6a30dd328a46
This is what my layout.js file looks like. My images are in the /app directory. What am I doing incorrectly?
export const metadata = {
// Other stuff
metadataBase: new URL('https://go-copy-production.up.railway.app'),
openGraph: {
// // Other stuff
image: {
url: '/opengraph-image.png',
width: 1200,
height: 630,
},
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link
rel="icon"
href="/icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>
<link
rel="apple-touch-icon"
href="/apple-icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>
<meta name="twitter:image" content="<generated>" />
<meta name="twitter:image:type" content="<generated>" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />
</head>
<body>{children}</body>
</html>
);
}Answered by Clown
You basically dont need those link or meta tags in your head tag. Just use the metadata object and put everything there.
14 Replies
You basically dont need those link or meta tags in your head tag. Just use the metadata object and put everything there.
Answer
chanOP
so strange..when I was first working with the icons I didn't have those links in the <head> and it wasn't working...so I thought the documentation was just wrong
but I removed them now and it all works like the documentation says
You dont need those link tag either
Those <generated> stuff is the docs saying this is what gets generated automatically
chanOP
wonderful. ty ty ty
gonna push and see if it works in prod
