Metadata Image not working (Tested in Discord and https://metatags.io)
Answered
West African Lion posted this in #help-forum
West African LionOP
I'm trying to migrate the metadata of this website but am having issues with the images. I found a thread on this server about this issue, and used the code from this reply to create a function for the websites metadata - https://nextjs-forum.com/post/1204518890361847818#message-1204520718214242335
At the moment, I'm just testing the basic version of this without adding or calling it from anywhere other than the main page. The title and description seem to be showing up correctly, but I can't seem to get the image to show up. Any suggestions?
The URL for this is - https://deploy-preview-11--thecruxpsychotherapy.netlify.app/
in
the
At the moment, I'm just testing the basic version of this without adding or calling it from anywhere other than the main page. The title and description seem to be showing up correctly, but I can't seem to get the image to show up. Any suggestions?
The URL for this is - https://deploy-preview-11--thecruxpsychotherapy.netlify.app/
in
layout.tsx
:import { metadataConstructor } from "@/Util/metadataConstructor";
export const metadata: Metadata = metadataConstructor();
the
metadataConstructor
function:export function metadataConstructor({
title = "Crux Psychotherapy",
description = "Crux Psychotherapy is your new home for mental health resources and mindfulness. Mike Balsan is a Licensed Psychologist specializing in: Depression & Anxiety, Complex PTSD, Neurodivergence, Gender Identity, Social Skills, Self-Compassion",
image = '/url-preview-image.png',
icons = '/favicon.ico',
noIndex = false,
customMetadata = {}
}: {
title?: string
description?: string
image?: string
icons?: string
noIndex?: boolean
customMetadata?: Partial<Metadata>
} = {}): Metadata {
return {
title,
description,
openGraph: {
title,
description,
images: [
{
url: image,
},
],
},
twitter: {
card: 'summary_large_image',
title,
description,
images: [image],
creator: '@crux_psychotherapy',
},
icons,
metadataBase: new URL('https://thecruxpsychotherapy.com/'),
...(noIndex && {
robots: {
index: false,
follow: false,
},
}),
...customMetadata // Merge custom metadata with default metadata
};
}
Answered by josh
I see now that you're already using
metadataBase
, sorry - is that not the real URL? It should be prepending https://thecruxpsychotherapy.com
to each of the fields7 Replies
West African LionOP
Seems like using a full URL works, but is that the right way of doing this?
{
title = "Crux Psychotherapy",
description = "Crux Psychotherapy is your new home for mental health resources and mindfulness. Mike Balsan is a Licensed Psychologist specializing in: Depression & Anxiety, Complex PTSD, Neurodivergence, Gender Identity, Social Skills, Self-Compassion",
image = 'https://deploy-preview-11--thecruxpsychotherapy.netlify.app/url-preview-image.png',
icons = '/favicon.ico',
noIndex = false,
customMetadata = {}
}
I think you're looking for https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
West African LionOP
Oh, I see! Thank you â¤ï¸
Do I need to call the metadataConstructor within the component page function or outside?
Do I need to call the metadataConstructor within the component page function or outside?
I see now that you're already using
metadataBase
, sorry - is that not the real URL? It should be prepending https://thecruxpsychotherapy.com
to each of the fieldsAnswer
West African LionOP
So that's the real URL, but this is the preview branch, so I needed to use the URL from the start of that post since the image I was trying to get doesn't exist in the regular production site yet
Seems to be working now! Just trying to figure out why Discord isn't showing a preview of the image (other places do) and how to set it up with getStaticPaths so each page is setup correctly
Thanks again so so much for all of your help!