Open Graph Meta Tags for facebook and others

[elbotho]

Test case
Share a link to Serlo on Facebook.
Title and text are alright, but the embedded image comes from the "Horizont"

Open Graph Meta Tags would easily solve this and would make more ppl. click on Serlo-Links.

Ressources
http://davidwalsh.name/facebook-meta-tags
https://developers.facebook.com/docs/sharing/best-practices
http://ogp.me/

Suggestion
I suggest to use the the header image of the current subject as a default og:image or use the first image from the content if it exists.
Maybe replace it with an og:video if there's a video as well.
I'd also be willing to work on this suggestions if it helps.

[elbotho]

(might go good together with #191)

[Knorrke]

Hey @elbotho
we discussed this today a bit further: There actually are already some open graph meta tags, that's why the title and text are correct. For the image: I think it might be really hard to automatically find the needed image. So our proposal would be:

1. Temporarily use the serlo-logo as og:image, because this would be an improvement to the current state and isn't difficult to implement.
2. Probably we might want to allow users to set an image for the meta-data, however this might not be used very much.

What do you think? Are you fine with the temporary workaround?

[elbotho]

I thought I saw a function to get the first image in a post, but that might have been smth. else.
So you say there is no easy way to get the images used in an article?

I agree with 1. as a fallback, but would suggest a custom image that is big enough for fb to display it as big as possible. (i think it's at least 1200px width, but I could create that)

2. is a good idea.

Ideally I'd like something like this: try to get (in this order) selected image, an image from the content, an image for the category or subject, or use the fallback image (1.)

[elbotho]

Let's go with 1. for now as the 5min solution. I'll send you a graphic soon

[elbotho]

would it be easy to find out which subject is active? than I could create nice subject graphics with the illustration from the new landing page.

[Knorrke]

I thought I saw a function to get the first image in a post, but that might have been smth. else.

Hm, I don't know of any function like that...

So you say there is no easy way to get the images used in an article?

Yes, I thinkt it is difficult, however not impossible. But fetching the image from the content of a different entity (like subject page) is even more difficult.

would it be easy to find out which subject is active? than I could create nice subject graphics with the illustration from the new landing page.

Yes, that's quite easy to find out. So we can take the illustrations and hardcode this, that shouldn't be a problem. Difficult is only fetching an image from a entity content.

[elbotho]

So we go with this:

• use subject image if available, otherwise use serlo general fallback
• in the future we add the ability to add featured images to content types with the new editor

sounds good?

[Knorrke]

Yes, perfect :) thank you!

[elbotho]

I have drafts for graphics, will post for discussion on slack

[elbotho]

Zip File:
serlo_share_graphics.zip

[Knorrke]

Thank you. Is the 4th the general fallback?

[elbotho]

Sorry,
yeah it is!

[elbotho]

ok, step one works! (just default image) 👍
doesn't seem to work on: https://serlo.org/ https://en.serlo.org/ https://de.serlo.org/
but might be related to cache

[elbotho]

quick check:

• links above still don't show default img.
• subject images are not implemented, i guess

[inyono]

Closed in #678