Facebook OpenGraph images not working on the homepage

(Ben Tristem) #1

This topic does not embed properly into Facebook, it looks like this…

I have tried tried setting the “default opengraph image url” to this, but no luck.

Any help appreciated

(Rafael dos Santos Silva) #2

What the debugger says?

(Ben Tristem) #3

Thanks Rafael, it says a bunch of properties are inferred…

It fills-in everything but the og-image tag…

I’m wondering where to set this in Discourse.

(Rafael dos Santos Silva) #4

The logo the page has at least 200px of height?

(Jeff Atwood) #5

Bear in mind that a link to the topic behaves differently than a link to a reply in a topic. Only topic (first post links) will include the image at the current time, though it is on @techapj’s list to improve this to work for all replies as well as the first post.

(Ben Tristem) #6

It’s specifically the home page: http://community.gamedev.tv I would like a nice image for, there are no posts on that page.

(Rafael dos Santos Silva) #7

On my little public instance it uses the logo as the image.

There aren’t open graph tags on the index, I proposed the feature here:

(John Britton) #8

I’m having the same issue. It looks like topic posts include meta tags for Twitter cards and Facebook open graph, but the non-discussion pages (including homepage) do not have info for Twitter cards or Facebook open graph.

As a workaround, I’ve manually added the needed code using site settings, but this has the adverse effect of including the code on every page meaning that we have a single sitewide image and description for social sharing.

My preference would be to have metadata per topic set automatically, but also have a way to configure this for pages that can’t be configured automatically (like the homepage).

I saw that there was a setting called default_open_graph_image_url, but setting it to an image didn’t add the meta tags to the homepage, instead it seemed to use that image as a default on topic pages where no image was available.

(Jeff Atwood) #10

So the topic title is kind of wrong here, opengraph works fine on topics, this is specifically about the homepage opengraph / oembed tags? I think the topic title was really confusing me, so I have edited it.

@techapj can you prioritize that, since adding to homepage should be straightforward.

(John Britton) #11

Yeah, this is specifically about the homepage and all pages that don’t have topic or reply metadata in the tags. Essentially any page that doesn’t currently have the tags should get the images with site name and site description.

(Arpit Jalan) #12

Okay, this is now fixed via:

OpenGraph and Twitter meta tags will be now be included on following pages too: /latest, /top, /new, /categories, /about, /faq, /tos, /privacy.

default_opengraph_image_url will be used (if present) as OpenGraph and Twitter image for all the above pages.

(Jeff Atwood) #13

What happens if the open graph image URL setting is not populated?

(Arpit Jalan) #14

In that case og:image and twitter:image meta tags will not be created. Other OpenGraph and Twitter meta tags will be created as usual.

(Jeff Atwood) #15

Should this field be moved to required?

(Arpit Jalan) #16

Good point, I’ll make it so. Done:

(Arpit Jalan) #17

I just pushed a commit so that we fall back to apple_touch_icon_url as opengraph image if default_opengraph_image_url is not populated.

(John Britton) #18

This doesn’t quite work as expected. It’s using a twitter:card of type summary and using the same image for og:image.

The problem is that those services expect images of different dimensions. I would like to use summary_large_image for Twitter and og:image for Facebook.

Perhaps it’s better to allow setting Facebook and Twitter defaults separately.

(John Britton) #19

Some useful tools for debugging:

(Arpit Jalan) #20

From https://dev.twitter.com/cards/types/summary:

The image must be a minimum size of 120px by 120px and must be less than 1MB in file size. The image will be cropped to a square on all platforms.

From https://www.h3xed.com/web-and-internet/how-to-use-og-image-meta-tag-facebook-reddit:

Reddit uses a 70 x 70 square image for its thumbnail. Images of all sizes are resized down to this.


If you do want to have the smaller square image thumbnail on Facebook, just make sure your og:image is smaller than 400x400 and square in aspect ratio.

Interfering from above links I think that og:image and twitter:image (for summary card) both prefers square image so it made sense to use single image for both the cases.

Okay, I think I am getting what you mean now.

Do you want me to change twitter:card to type summary_large_image and add a new site setting to specify the large image URL?

What I can do is add a new site setting twitter_summary_large_image which will accept image URL. If provided it will change twitter:card to type summary_large_image (for non topic/post pages) and will use the provided image URL for twitter:image.

Does that makes sense?

Support for Twitter Cards with large images?
(John Britton) #21

I think that’s almost there. The end result should be that square image is used on topic pages (user avatars) and, if set, a larger image is used for summary_large_image on home page and non-topic pages for Twitter and a corresponding large image should be shown on Facebook if set.

Sorry to be so picky, but when sharing the homepage link on Twitter / FB, it’s really a lot better to have a large image in the card / post.