DEV Community


What happened to my OG image?

leviathanprogramming profile image 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming ・1 min read

I was developing a website for my dad and was adding the OG meta information. I don't know what happened to the image, but it was super small. I was testing the outcome on Discord and it seems like I coded something seriously wrong.

Alt Text

If you look at github's OG data, it looks like this:

Alt Text

Here is my OG data code:

<meta property="og:type" content="website" />
    <meta property="og:title" content="Agape-TX Chiropractic">
    <meta property="og:description" content="Agape Chiropractic is your neighborhood clinic situated on a small ranch in Whitewright, TX.  Bring your family and animals for an adjustment and enjoy the beautiful scenery in the coutryside.">
    <meta property="og:image" content="">
    <meta property="og:image:type" content="image/png"/>
    <meta property="og:image:width" content="1200"/>
    <meta property="og:image:height" content="630"/>
    <meta property="og:url" content="">
    <meta name="copyright" content="2021">
Enter fullscreen mode Exit fullscreen mode

If you can provide me with an answer, I will greatly appreciate it. Thanks!

Discussion (3)

jasonetco profile image
Jason Etcovitch • Edited

👋 Try adding this:

<meta name="twitter:card" content="summary_large_image">
Enter fullscreen mode Exit fullscreen mode

This meta tag tells Twitter that yours is a "large card" and should be displayed separately. I'm not positive that that's what Discord looks for, but that's what I'd try!

Here are Twitter's docs on it:

Hope that helps!

leviathanprogramming profile image
guryashzone profile image
Guryash Singh

Try using a image of exact dimension you want to display.
Eg: Make sure your image width is actually 1200x630 if you are using og:image:width/height.

Forem Open with the Forem app