Facebook OpenGraph images not working on the homepage


(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.

and

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.


(Arpit Jalan) #22

Okay, done via:

The new behaviour will be:

  • If twitter_summary_large_image_url is present then on non-post links Twitter card will be of type Summary Card with Large Image i.e. summary_large_image
  • If default_opengraph_image_url is present then on non-post links og:image will use default_opengraph_image_url
  • If twitter_summary_large_image_url is present but default_opengraph_image_url is not present then og:image will use twitter_summary_large_image_url
  • If both twitter_summary_large_image_url and default_opengraph_image_url are not present then on non-post links og:image and twitter:image will fall back to apple_touch_icon_url
  • If topic’s first post link is shared then if the post has image then that will be used for og:image and twitter_image. If not then it will fall back to twitter_summary_large_image_url or default_opengraph_image_url or apple_touch_icon_url based on above logic
  • If post link is shared then og:image and twitter:image will always link to post user avatar.

I hope this makes it clear.

@johndbritton Do let me know if you think this can be further improved. :slight_smile:


Support for Twitter Cards with large images?
Best Practices for Open Graph setup with a new community?
Incorrect or failing oneboxes for links to other discourse instances
Ignore favicon, use default open graph image to create og:image tags
(John Britton) #23

This seems to be working as expected now. Thank you.


(Daniel Marquard) #24

I tested this for the first time tonight after a bug was fixed today that prevented images from showing in our Twitter Cards to begin with. With that fixed, after having read your post and run some tests, I have some feedback.

It’s great that this support for large images in Twitter Cards was added, but it seems applicable only to the global image defined in the new admin setting. The majority of topics we share on social media are content-rich, and we want the large image summary cards when sharing these topics. In my experience, links with large images in the summary cards see much higher clickthrough and engagement. The small thumbnails have us instead tweeting the link along with an uploaded picture that cannot be clicked to navigate to the link, which is not preferable. I’ve since added <meta name="twitter:card" content="summary_large_image"> to the header (in the body) via admin. I don’t love it, but it’s a quick and dirty workaround that works for overriding the default meta tag above it.

My recommendation would be for <meta name="twitter:card" content="summary_large_image"> to be kept it the header sitewide, instead of just on pages without images.


(Robert) #25

I second this! Would be cool to have the own image from the post in large as well.


(John Britton) #26

we want the large image summary cards when sharing these topics.

I like that each post has a unique image but the forum itself has a large image. The ideal solution for me would be the ability to set the social image for each topic independent of the content. This would be especially useful for cases where you’re driving traffic to the forum from social channels but wouldn’t be needed for most sites. Maybe this belongs in a plugin of some sort.


(Arpit Jalan) #27

I understand your requirement here but as per our current code we can’t be sure that the first image in a topic will meet Twitter Summary Card with Large Image requirement i.e. “Images for this Card should be at least 280px in width, and at least 150px in height”.

Also, when you share a post link on Twitter the “twitter:image” always links to user avatar image which will never satisfy the “summary_large_image” requirement.

I agree with this. The ideal solution will be to allow forum staff and topic author (TL3 and above) to upload the Twitter “summary_large_image” for a topic via Admin wrench on topic page (with image size validation in place).


(Jeff Atwood) #28

I don’t agree with that; a better solution is to add metadata to the post that indicates “yes, this is the special image I want to be used when sharing on social media.”


(John Britton) #29

We don’t need this feature at all, but if there were support for large summary images on individual threads I think we would use it.

I don’t agree with that; a better solution is to add metadata to the post that indicates “yes, this is the special image I want to be used when sharing on social media.”

Not every post in the forum needs to display an image in the post itself, but it is always better to include an image for social sharing. Where the image goes (post metadata / post settings) seems less important than the ability to have a custom social image for each post without necessarily requiring the image to be displayed on the topic page as part of the content.

Another potential idea for a plugin would be to allow a template to be uploaded for this image and to insert the topic title into the image dynamically, but that’s getting really complicated and is unlikely to be useful for most sites.


(Jeff Atwood) #30

An image completely disconnected from the topic makes zero sense to me. I would not support it.


(John Britton) #31

An image completely disconnected from the topic makes zero sense to me. I would not support it.

It wouldn’t be disconnected from the topic, it just would not be displayed. The idea of the twitter card image is to summarize / preview the page that the user will see if they click the link on the social network.

There’s no need to display an image in the thread that presents, for example, the topic title, avatar of the user, and branding of the site. An image like that as a summary card would be useful though.


(Daniel Marquard) #32

If image size validation can be used, then large image cards can be used when size requirements are met, no?

It makes sense to me, but would definitely make the UX a bit weird. WordPress does this natively for authors, but I agree that it doesn’t make sense for end users. I don’t think end users would use this feature anyway if they knew it was optional, but we’d still like large image cards used for their topics when shared.


(Arpit Jalan) #33

Okay, this is now done as per:

Now if the reply has image then it will be used as OpenGraph/Twitter image, if not then image will default to user (who posted the reply) image.

In case of multiple images first image will be picked.


(Jeff Atwood) #34

Let’s see:

https://bbs.boingboing.net/t/misandry-for-fun-and-profit-topical-animated-gif-bank-plus-awesome-static-images-of-man-hate/66279/2

https://bbs.boingboing.net/t/gif-bank-for-the-bbs/66050/2

This does not yet seem to work @techapj?


(Régis Hanol) #35

I manually rebaked both posts and it works now :wink:


(Jeff Atwood) #36

Weird let’s see:

https://bbs.boingboing.net/t/misandry-for-fun-and-profit-topical-animated-gif-bank-plus-awesome-static-images-of-man-hate/66279/32

Why does it require rebaking?