Rich preview / meta tags

[rossjrw]

How do I make a Rich Preview for my GitHub repository?

I’m not sure that I’m using the right term - I’m talking about the thing that you see when someones posts a link to something on social media, and then this big box pops up with that site’s title, a bit of text, and an image.

I want to control that rich preview for my repository.

I know it’s possible: I’ve seen a repository linked on Discord with a brand-specific image attached to it. When I went to poke around in that repository, I found that image in the .github/ directory.

I just can’t find any documentation on the topic - the best I could do was Rich preview links for Whatsapp, which doesn’t answer my question. Searching GitHub’s help directly is also a no-go.

How can I control my repository’s rich preview?

[Jme7]

I think you are referring to a social media box, so try this. Go to a page (e.g. https://www.facebook.com/GitHub) and find a button that says share, it should give you some code to put in your webpage.

Sorry if this fails, I don’t have a social media account, so I can’t test it - but it does work for YouTube.

[airtower-luna]

If you go to your repository and click on “settings”, there’s a “Social preview” section. It allows you to upload a picture to use for the preview. The text comes from your repository description.

[Jme7]

Oh, I must have misunderstood rossjrw, I thought he meant a social media link.

[airtower-luna]

The question was about the automatic previews which many social media site create automatically when you post a link. They usually use data from <meta> tags in the HTML page behind the link (if any), which Github provides depending on the repository configuration.

If you want to see the technical details, open the Github site for any repository, and look at the HTML source. There will be tags like the following to set the preview picture on different sites, and many more for other things. 😉

<meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/5814919?s=400&amp;v=4" />
<meta property="og:image" content="https://avatars3.githubusercontent.com/u/5814919?s=400&amp;v=4" />

(The example is from one of my repositories, so if you follow the URLs you’ll see my avatar.)