Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text


#1

We’ve been having some issues with Facebook sharing on our site and I was wondering if it might be eased by defining manual excerpt when creating some topics?

I was looking around at the commit history for excerpt_parser and noticed this commit: FEATURE: Allow manual excerpt to be specified anywhere in the post an…

Does this mean that to specify a manual excerpt, one just wraps the text in <span class='excerpt'>...</span>?

Would Facebook actually use this excerpt or is this only used for display on the front page etc?


What would be the best way to customize my Discourse install's excerpt and to place necessary opengraph tags into the head html?
404 Facebook Fetch
(Jeff Atwood) #2

Can you provide some specific examples, links, screenshots, etc


#3

Hi Jeff, thanks so much for responding, the issues I’m referring to are (I don’t mean to derail this thread too much, but perhaps the excerpt parsing is not actually related then):

Image filenames are always displaying in the post excerpt as in the screenshot:

//discourse-meta.s3-us-west-1.amazonaws.com/optimized/3X/b/5/b5e23b0f949bcb5d80aedc876a6ae5173160aae9_1_383x500.jpg

I’ve tried to define an og:image with a square icon/logo to help the ‘cropped logo’ issue on posts with no images, but then if there are any other images within that we would prefer, the square og:image overrides any images contained in the post.


(Jeff Atwood) #4

Are these your posts? Do you run the talksurf.com site? I was hoping for more specific examples from your site that are more recent.


#5

No, these are not my posts, I’ve just been experiencing the same issues.

Take for example:

Which is a post with a single image of 1280x720px, definitely enough to meet FB standards to pick it the image.

Running it through the Facebook object debugger you see the og:image set to the avatar (I’ve since removed the defined og:image logo as it was overriding all images) and the og:description set to only the image details in text form.


Then take for example: Does Accelerationism lack an economic theory? - Frontpage - e-flux conversations

A thread with no images. Running it through the object scraper, the image is, by default, a cropped version of the top banner logo.

Just for your information, I’ve updated to the most recent beta 1.2.0 beta3


(Sam Saffron) #6

@zogstrip I thought you hacked it so it stripped out the image size stuff from the excerpt, no?


(Régis Hanol) #7

I did. Might be using another code path.


(Sam Saffron) #8

The exerpting stuff all needs centralising


#9

Perhaps we should rename this thread since I suppose the topic has returned to the Facebook issues. In any case, if there’s any way I can help I would be happy to, it is very much a top priority for my client right now who sees it as a barrier to promoting and really pushing the platform.


(Jeff Atwood) #10

Yes let’s centralize that excerpting code for sure @zogstrip.


#11

Even more confusing is this example:

The top post consists of a large image followed by a block of text:

Clicking the share button like so:

Results in this sharing box:

Results in this post on Facebook:

Which doesn’t even match the sharing preview nor what the object debugger says will happen:

https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fconversations.e-flux.com%2Ft%2Flive-coverage-world-biennial-forum-no-2-26-30-november%2F767

og:image could not be downloaded or is too small

og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that’s at least 200x200px and is accessible from Facebook. Image ‘http://conversations.e-flux.com/uploads/default/_optimized/686/eae/cf048b7fc4_749x500.jpg’ will be used instead.

I’m not sure, but I feel like adding property="og:image" to the first or largest image in the topic post would be hugely beneficial along with og:description to a sanitized version of the excerpt to help ensure that shares are descriptive and also more interesting with topic-oriented images rather than the cropped logo or a pixelated avatar.


(Jeff Atwood) #12

Well, one thing @zogstrip is working on is to strip image metadata (file size, filename, etc) from excerpts consistently.


#13

Do you think there might be any benefit in some kind of dynamic opengraph tag generation or is that not a good idea? I feel like the process could be somewhat simple along the lines of (in pseudocode):

  1. Check requested URL if it is the topic post, or a deep link to a specific reply
  2. Parse the appropriate topic or reply and inject the opengraph meta tags into the header accordingly

og:image
For each image in the topic or specified reply

og:title
Title of the topic

og:description
Excerpt from the topic or the specified reply

Thus the opengraph tags would only need to be set once on the initial load since that’s what Facebook would be parsing, and thus sharing a Topic versus a Reply would generate an accurate representation of what is being shared.

Unfortunately I’m a bit at a loss of where to start digging were I to be able to build something and make a pull request.


What would be the best way to customize my Discourse install's excerpt and to place necessary opengraph tags into the head html?
(Régis Hanol) #14

@kkershaw can you update to latest and tell me what you think of this fix?

https://github.com/discourse/discourse/commit/929ff00741193daa1c9a9a43ded93ec24025167a


#15

@zogstrip Thanks for the information, I’ve updated to discourse (a4ce039) but unfortunately having an issue with this sharing still.

Take again, the same example as above: Live Coverage: World Biennial Forum No. 2, 26-30 November - Live - e-flux conversations

Facebook’s object debugger now shows:

Which seems to contain the HTML for the image, which ends up posting on Facebook like so:

Which seems even more problematic :frowning:


(Régis Hanol) #16

What about with this fix in?

https://github.com/discourse/discourse/commit/fe007d08b35834c07d1cc0cb96dc264e9c486315


#17

This seemed to help!

I was confused why sharing via the popup was causing issues, but that was due to the ?u=username caching.

So thank you very much @zogstrip this is wonderful, I would say it does clear the issue noted in

So at last, the only problem that still remains with regard to facebook sharing is the lack of the og:image being set.

Does anyone think this kind of functionality as mentioned in my post above #13 - Difficulties with Facebook sharing and opengraph tags? Wrong images, excerpt contains image text might be considered, or should it be part of a plugin or something like that? (and in that case, I’m just not quite sure how to begin)


#18

@codinghorror @zogstrip @sam @DeanMarkTaylor After some poking around the code and reading some topics here, I came across and looked more deeply at this thread:

Originally I had been looking at /app/views/layouts/application.html.erb and tried manually inputting some og:image meta tags just to see if it would help things and was genuinely confused when I could see these tags in the source but not in the Facebook debugger.

After reading the thread above I realized there was code in /app/views/topics/show.html.erb:

The particular code in question being the crawlable_meta_data...

I don’t know why the reasoning behind this code is to set the small avatar as the og:image viewable to the crawler. Our topic could have plenty of rich images specific to the topic, but be completely ignored by the Facebook sharer because the og:image is being dynamically set to a small avatar that doesn’t even meet Facebook requirements and thus results in a share result with no image at all (when using the sharing button).

I setup a completely fresh instance of discourse to make sure it wasn’t just my install or me going crazy and setup a simple topic with some images and text:

http://104.236.113.192/t/this-is-a-simple-test-topic-with-a-number-of-images/12

Looking at this page with Facebook’s OG object debugger:




The possibility of sharing any of the other images has been overridden by an incompatible small avatar og:image that itself can’t even be displayed because it itself is too small. The share popup and preview seems to grab the images, but they never make it through to the actual post.


When I remove this crawlable_meta_data, the site behaves exactly as I would hope as Facebook is able to properly infer what the images are:



Am I alone in believing that the second behaviour is more desirable and beneficial? If we are implementing opengraph tags for the images at all, it would make so much more sense if they actually pulled the image from the topic itself and not just the avatar that isn’t even compatible with Facebook to begin with. (I know opengraph != Facebook, but it is an important and relevant example of how opengraph is leveraged to bring users towards a discourse platform).

I feel, from my limited understanding, simply the task of populating image_url with images from the topic and not just with the avatar image. I would really appreciate your thoughts on this subject.


(Régis Hanol) #19

Where’s the pull request? :wink:


#20

I didn’t make my current fix a PR because I figured the solution I had wasn’t exactly ideal – it is simply a complete removal of the opengraph tags that are set through the crawlable_meta_data function. I’m not sure how to go about the next step, but I feel like the proper solution would be parsing the topic and then setting image_url to one of these images rather than the avatar, but wanted to know if this was a reasonable suggestion?