Search code examples
htmlgithubmarkdowngithub-pagessocial-media

Customize preview image for github pages

is it possible to customize the image that you see as a preview when posting the link to your github pages?

I feel like they specifically address the issue for github repositories here, but I dont know how to do this for github pages. Specifically, I want my github page to not just display just a grey image of nothing, when it is showing up on my Featured section on LinkedIn:

enter image description here

Solution

  • This preview image taking from website meta tags. Specifically for LinkedIn enough to use:

    <meta property="og:image" content="preview_image.jpg" />

    Example from my LinkedIn: enter image description here

    The first two featured items are my personal website pages, and each of them has separate meta tags. It hosted on GitHub Pages, but it doesn't matter where to host. Here is how it's can be done:

    <head>
      {/* all socials */}
      <meta property="og:image" content={previewImageSrc} />
      {/* twitter */}
      <meta name="twitter:image" content={previewImageSrc} />
</head>

    full example (gatsby + react-helmet)