Support custom (per repository) og:image thumbnails.

[bvaughn]

Edit Please upvote this issue with a 👍rather than leave a "+1" comment. GitHub sorts issues by reactions and not by the number of comments.

Github currently sets the twitter:image:src and og:image meta tags for each of my repositories to be that of my main profile picture. This seems like a reasonable default. But it would be useful if there were a way to override this setting on a per-repository basis. (Perhaps a convention that uses a specially-named file in the root of a repository? Or something in the project settings?)

It's a minor issue but it would be nice when I share a link to a new version release on sites like Twitter, Reddit, etc. if the thumbnail was a project logo rather than my profile picture.

I realize that I can sometimes link to my own gh-pages branch and set any meta tags I want but I usually prefer the simplicity of linking directly to the GH repository landing page. Other times it's not even an option, like when linking to a wiki page with upcoming release notes (example).

[edgariscoding]

Great idea

[itaibh]

Not only this is a great idea, I don't think this is a reasonable default.

[zzgab]

Any update about this great feature request?

[edgariscoding]

Also wondering if there's been any development on this. I like having a profile photo of myself but it's a bit weird when I share a link to a repository and it shows a huge thumbnail of my face.

[zzgab]

All I could come up with, is making a gh-pages branch for my project uiwebagent
This gh-pages contains an index.html file in which I declare the meta that I like (useful for FB og, Twitter etc.) but then the body only forces a JS redirect to the GitHub master repository...
So, the link I provide in my Twitter posts for instance, is https://zzgab.github.io/uiwebagent
Not happy with this workaround...

[housseindjirdeh]

I think this would be a great idea, and I agree, that is a bit much of a workaround @zzgab

[edgariscoding]

There really should be a place within the repo settings to assign a repo thumbnail just like you can for organization pages or profile pages.

[theiliad]

Any updates here?

[justinewin]

I guess a custom og: still isn't available. Tried creating a new website this week and put all those og: meta tags but nothing works :D Still hoping github considers this feature :)

[i-h]

Seconding this, posting with a collaborator's (who made the repository) face on Twitter feels kind of rude.

[edgariscoding]

Is there any development on this? Even a simple setting to disable the use of a custom thumbnail altogether would be sufficient in the meantime.

[ghost]

pls gitahubb do dis 4 us

[daattali]

Great idea!

[haideralipunjabi]

This should be added ASAP

[chetcuti]

Yes please.

[Almenon]

this would be a very nice feature.

[michaelashore]

This feature would be great and I suspect would encourage more sharing of repos across Facebook and Twitter.

[clarkbw]

Perhaps a convention that uses a specially-named file in the root of a repository? Or something in the project settings?

@bvaughn So you'd be ok to set a specific repository image? Perhaps it might default to your user image as it does now if not already set.

(this is a mockup, just wanted clarify; no promises)

[edgariscoding]

So you'd be ok to set a specific repository image? Perhaps it might default to your user image as it does now if not already set.
(this is a mockup, just wanted clarify; no promises)

@clarkbw I'm not speaking for @bvaughn but yes, that would be amazing.

[bvaughn]

Hey @clarkbw! Nice to hear from you. 😄

Honestly, I would be okay with almost any way to do this. An option in the project settings area would be great. That seems the most backwards-friendly way of approaching this, and avoids bloating the repo with an unnecessary image file. 👍

[spcfran]

Can I have this for Xmas? Trying to add a link to a repo to my LinkedIn profile for showcase/portfolio purposes and my face is all over it! 😅

+1 for the project scoped setting rather than a file in the repo - it's a very 'meta' thing after all

[zzgab]

@spcfran All in all, despite its tweaky-tricky-hacky aspect, we've got nothing but my workaround here : #612 (comment)
I've been using it successfully all this time, but it's a pain in the back.

[edgariscoding]

@zzgab that’s a pretty clever workaround. The bad thing is that it only works for the repo owner because other people sharing the repo won’t care to jump through hoops, they’ll just share the direct link to the repo.

Does anyone know if Github actually confirms when they’re working on a new feature before it’s released?

[zzgab]

@edgariscoding You're right.

[clarkbw]

Can this issue be labeled social or something similar? Categorizing these issues really helps with the clutter. kthx!

[valentinchrt]

It would be great @clarkbw, really.
Tell us that this feature will be release soon! 🎁

[edgariscoding]

@clarkbw, is setting a label on this issue something that @bvaughn can do or were you commenting so that someone with admin rights on the repo can do it?

[clarkbw]

commenting so that someone with admin rights on the repo can do it?

It requires admin rights which I don't have and I don't believe @bvaughn has either. I emailed @isaacs about it a while ago but I never heard back 😭

[clarkbw]

And FYI, I don't have anyone actively working on this right now. I'm hoping to convince the marketing team to pick this up with some other work they are planning for the coming year. We'll see.

[JoGall]

Fed up of seeing my face every time I link to a repo on Twitter; would love to see this implemented!

[rsodre]

come on!! Let's us configure it at least...

[Paulinakhew]

I would love to see this change happen! This would be super useful for linking over social media, especially LinkedIn

[methusalah]

A quick and dirty solution would be great too. We really need that one.

[sblunt]

Pretty please!

[TonyMezzolesta]

Just hit this myself. Went to share a repo on LinkedIn and got my profile picture. Googled how to do it and came across this. Would like to also request this feature.

[zzgab]

@TonyMezzolesta, @sblunt, did you 👍 on the initial post? This is the only way to make it go up in GH's todo list.
Thx!

[sblunt]

Yup.

[TonyMezzolesta]

Yeppers

[Luc45]

Microsoft owns GitHub, and they do not look at this issue.

We must focus our effort on the right place to get answers from them.

https://github.hscsec.cnmunity/

If someone create a topic there, let me know and I will update this link pointing to it.

[clarkbw]

Microsoft owns GitHub, and they do not look at this issue.

This isn’t true. I watch this entire repo and participate here.

We’ve made progress on a prototype for this, it’s not my team working on it so I don’t have a good date when we might see the solution roll out.

[TonyMezzolesta]

@clarkbw Thank you for responding to this issue thread. Please pass along a heartfelt thank you to the team currently working on adding this feature. Much appreciated.

[drewswaycool]

Need this also. Here's my... +1.

[espinielli]

Do it! Please

[michaelmoussa]

Using a specially-named file in the repository would mean that your image was automatically propagated to other people's newly-created forks, which would often not be desirable.

What about baking this into the naming convention of the file, e.g. .github/og-image.<user/organization name>.png?

Let's take the repository we're all discussing in right now as an example: isaacs/github.

• Link to https://github.com/isaacs/github shared:

  • Display .github/og-image.isaacs.png if it exists.
  • Display giant picture of his head if it doesn't.

• Link to https://github.com/<user-who-forked-it>/github shared:

  • Display .github/og-image.<user-who-forked-it>.png if it exists.
  • Display giant picture of the user who forked it if it doesn't.

This prevents preview images from propagating to forks, keeps the current default behavior for what forks display, and gives forks the ability to add their own preview image.

[zzgab]

@michaelmoussa Nice! But then the forks would contain the parent's pic file too?

[michaelmoussa]

@zzgab Yes, but forks contain the parent's CONTRIBUTING.md, LICENSE.md, ISSUE_TEMPLATE.md, PULL_REQUEST_TEMPLATE.md, etc., already anyway, so I wouldn't consider propagating a teaser image to be a problem.

[rsodre]

I don't think we should be forced to check in the image.
What about as simple as Repository Settings, Add Thumbnail?

Having a filename convention is good, I support it as a way to bypass the settings.

[hzoo]

Intial support is out now: https://twitter.com/github/status/1118562875830882304

https://github.blog/2019-04-17-custom-open-graph-images-for-repositories/

[zzgab]

Congrats! Thanks. Let's see!!

[clarkbw]

Thanks for all the excellent feedback that helped make this! 💥

If you have additional features you'd like to see on top of this or in addition please try to open a new issue and link back to this. If you have feedback or find bugs you can leave comments directly in here or contact support directly via the link 👇

[JayShoe]

I like that we can set a custom image for a "og:image" metatag.

But what about setting a custom "project image" that would be featured at the top of the repository, as the "main project photo" or "logo"...???

[N02870941]

Is there a public API for this so I can reference these photos in an app that currently consumes the GitHub user repo API?

[remorses]

i am also searching for an api to get the repo image

[dan-ignat]

The og:image functionality added here works great, but it doesn't seem to work at all on the mobile GitHub site.

I sent a GitHub repo URL (which has an image set on its Settings page) from one iPhone to another via iMessage, and it didn't unfurl. I dug into it a bit, using Chrome's DevTools to view my GitHub repo as a mobile device. This let me view the source HTML, and I confirmed that the og:* tags do not appear in the HTML sent to clients by the mobile GitHub site. (I also did a negative test, to confirm that the tags do appear on the regular GitHub site.)

So this means that any repo links sent on mobile devices will not unfurl. It would be nice to fix this, so that GitHub links sent on mobile devices can look as nice as those posted to social media sites.

I posted this as a new issue #1779.

[Soneji]

@N02870941 @remorses
Hi
It is not too difficult to scrape this with node using axios and cheerio:

let url = repo.html_url; // <- this is the URL of your repo
axios(url).then((response => {
    const html = response.data;
    const $ = cheerio.load(html);
    const metas = $("meta");
    for (let i = 0; i < metas.length; i++) {
        const meta = metas[i];
        if (meta.attribs.property == "og:image") {
            let value = meta.attribs.content; // <- this is the url for the og:image
        }
    }
}))

Additionally, it would be really handy to have support for og:image in mobile. I find it pretty annoying that the og:image doesn't render properly on mobile messaging platforms such as iMessage, @isaacs any update on this?

[akibrhast]

Hello, I added an image to one of my github repos, but its not unfurling anywhere. But when I used the templated image provided. It instantly unfurls everywhere. Is there some kind of processing delay when I upload my own image.