The things that i want look like this:

When i try using ogp:image it result me this (large image like below)

Here my code snippet

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const characterName = params.characterName;

  try {
    const response = await fetch(apiChar);

    if (response.ok) {
      const characterData = await response.json();
      return {
        title: desc,
        robots: { index: true, follow: true },

        description: desc,
        openGraph: {
          title: title,
          description: desc,
          
          images: [
            {
              url: url, // Ensure you have a default avatar
              alt: ` avatar`,
              width: 1200,
              height: 630,
            },
          ],
          url: url, // Adjust this to match your actual URL structure
          type: "website",
        },
      };
    } else {
      const error = await response.json();
      return {
        title: title,
        description: desc,
        openGraph: {
          title: title,
          description: desc,
          images: [
            {
              url: '/default-avatar.jpg',
              alt: 'Default avatar',
            },
          ],
          url: url
        },
        twitter: {
          //card: 'summary_large_image',
          title: title,
          description: desc,
          //image: '/default-avatar.jpg',
        },
      };
    }
  } catch (error) {
    console.error('Error fetching character data:', error);
    return {
      title: title,
      description: desc,
      openGraph: {
        title: title,
        description: deesc,
        images: [
          {
            url: '/default-avatar.jpg',
            alt: 'Default avatar',
          },
        ],
        url: url,
      },
    };
  }
}