OpenGraph Image not being picked up correctly

Facebook is picking up the forum logo as the OG image, not the main image at the top of the body of my post. I’ve tried debug/scrape via Facebook og developer debug tool. Nothing changed.

Sorry if this is a duplicate, but I’ve read a whole bunch of threads on the forum here, not able to find a solution for this.

Thanks for your help!

1 Like

It’s possible your logo image is too big. It looks enormous in the preview image, above.

2 Likes

It looks like there is a theme component installed on the site which is messing with Facebook’s crawler. The component is adding this inside the <head>

<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

Images are not supposed to be included in the <head>, so most browsers just ignore them. Facebook’s crawler seems to see the img tag, and end the <head> early. From their debug tool

<!-- Facebook Pixel Code -->
</head>
<body>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

This magic </head><body> tag does not appear via curl or any browsers. Very strange behaviour from Facebook.

But anyway, the solution here is for you to move the facebook tracking pixel from the </head> section of the theme component, to the Header section of the theme component.

3 Likes

@codinghorror,

Not sure if I’m missing a connection here, but my problem is that I do not want the forum logo to show up. But instead, the first image in the post to show up.

So if the actual image in the post (a picture of me) were to show up, how does it matter how big the logo is? I guess my question is, why is the size of the logo of concern when I don’t even want it showing in the first place? Hope that makes sense.

@david,

I don’t have any custom themes installed. It’s a plain vanilla installation of Discourse. In fact, I don’t even know how to install a theme or plugin for Discourse.

The size of the image is somewhat relavent, because when Facebook can’t find an og:image tag, it picks the largest image on your site. In this case, the logo is larger than the photo, so it picked the logo.

However, Discourse does include og:image tags - they’re just being broken by the theme on your site.

You must do - the facebook tracking pixel is being added by a theme. When I use safe mode, it disappears. Head to /admin/customize/themes, press Edit HTML, and go to the </head> tab. I suspect you will see the facebook code there.

3 Likes

See this image - I don’t have any custom themes, and there’s no “Edit HTML” option there.

Click “default” on the left, then you should see the edit button

2 Likes

That did it! Yessss! Thank you so much!

2 Likes