DEV Community

loading...

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="https://github.com/Conner1115/Conner1115/blob/main/portfolio-images/Screen%20Shot%202021-04-12%20at%2012.13.54%20PM.png?raw=true">
    <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="https://agapechiro-tx.com">
    <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)

Collapse
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:

developer.twitter.com/en/docs/twit...

Hope that helps!

Collapse
Collapse
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