Next.js Discord

Discord Forum

Metadata Image not working (Tested in Discord and https://metatags.io)

Answered
West African Lion posted this in #help-forum
Open in Discord
Avatar
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 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 fields
View full answer

7 Replies

Avatar
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 = {}
}
Avatar
West African LionOP
Oh, I see! Thank you ❤️

Do I need to call the metadataConstructor within the component page function or outside?
Avatar
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 fields
Answer
Avatar
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!