CODEWITHSUNDEEP
htmlgithubmarkdowngithub-pagessocial-media
Paul Schmidt
Paul Schmidt

Reputation: 1209

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

Upvotes: 9

Views: 4301

Answers (2)

Eli
Eli

Reputation: 31

Tried the answer above but my og:image still doesn't reflect on my linkedIn profile. After further inspection , I found out that LinkedIn caches link preview content for 7 days. Changes you made will not reflect immediately unless you inspect your site using the LinkedIn Post Inspector.

Credits to this article: https://www.linkedin.com/pulse/how-clear-linkedin-link-preview-cache-ananda-kannan-p

Upvotes: 2

Alexandr Tovmach
Alexandr Tovmach

Reputation: 3179

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)

Upvotes: 11

Related Questions