14

I own many GitHub repository and I usually add projects on weekly basis. I am making my own website using GitHub pages, since I can only host static website on GitHub pages hence I am going to use GitHub API in order to automatically update my new projects on my website. But I also want to add a preview/sample image to it.

I got to know that there is an option named social preview where I can add an image of my repository to be shown on social media.

Although I can get my all repo info from api.github.com but I can't get my social media preview image URL.

0

4 Answers 4

8

GitHub GraphQL API v4 has a field to query the OpenGraph image URL. It uses the social image set in the repo settings and fallbacks to the user profile image.

Link to docs and search for "openGraphImageUrl".

You can test this out with GitHub's GraphQL API explorer (sign in required) and query:

{
  repository(owner: "vuetifyjs", name: "vuetify") {
    openGraphImageUrl
  }
}
2
  • GitHub only allows requests at GraphQL API when it's has a token to authentication. That means I can't use it on a front-end only website.
    – imLolman
    Oct 26, 2021 at 0:59
  • @imLolman That's the only way GitHub exposes the image URL. Otherwise, you would need to do that in a server and proxy the result. You mentioned you're using GitHub Pages to serve the site, but an alternative is using Netlify or Vercel which has the functions feature for a simple proxy setup. OR another way is to fetch the image URLs during build time (before publishing to GitHub Pages).
    – Bjorn Lu
    Oct 28, 2021 at 2:31
3

I don't think that it is possible with GitHub API but you may try to parse <meta property="og:image" content="[IMAGE-URL]"/> tag in the HTML of your repository page.

1
  • But the main problem is I am using a static website, CORS Error Will Occur if I fetch Repo Link and Then I have To Fetch and Parse the data for One Image. If i have 30 projects, that will make my webpage very very slow.
    – imLolman
    Jun 20, 2019 at 20:14
0

What I did:

  1. got to the respecitve repositor setting on github. you should see the option to add/edit social preview, (this is the image whose link is required to us)

  2. simply press ctrl+shift+i , this should opens developer tools,

  3. then click on inspect icon. ( usually on top left, arrow)

  4. now select our image,click on it.

  5. now look closely to the styles, you should see a link which looks something like this-

    https://repository-images.githubusercontent.com/xxxxxxxxx/yyyyyyyy-wwww-kkkk-jjjj-rrrrrrrrrrrr

  6. this is the links of the social preview image of your github repo.

  7. Copy this link and use wherever you want, works like a charm, no login required.

1
  • Was looking for the same issue in 2024, got happy i myself solved it earlier, Works in 2024 too, i approve. Mar 29 at 15:00
-3

I was facing the same issue but I thought like taking the repository link and appending /settings/og-template string after it. This returns the same image that you added in your social preview. So iterating through every link of the repositories add adding that string should return the corresponding Social Preview TRY IT!

2
  • 2
    Nope, it doesnot. It returns the default image even if you have uploaded an image.
    – imLolman
    Jan 2, 2021 at 21:03
  • Is this an answer? It's hard to tell.
    – TylerH
    Sep 19, 2023 at 19:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.