9

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

Paul Schmidt
  • 1,072
  • 10
  • 23

2 Answers2

9

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)

Alexandr Tovmach
  • 3,071
  • 1
  • 14
  • 31
  • Sorry, this is probably way too late but I'm trying to get this solution to work for my jekyll site. Where exactly do I put the stuff from the `head` tag section in my site repository? In the index.html file? Here's the code base for reference: https://github.com/sharmaabhishekk/sharmaabhishekk.github.io – Abhishek Jul 22 '21 at 17:53
  • 1
    meta tags should be placed into ``, which in your case contains here https://github.com/sharmaabhishekk/sharmaabhishekk.github.io/blob/master/_includes/head.html – Alexandr Tovmach Jul 25 '21 at 00:48
  • I tried adding the two meta tags in the head section in my `head.html` but it still doesn't work on twitter card validator for some reason. The code is still on the same link as above. I tried using full image url, relative paths to images as well as variables but it still doesn't change anything – Abhishek Jul 28 '21 at 13:25
  • 1
    it works, just checked with https://cards-dev.twitter.com/validator. it can be cache issue, so you need to wait for a while after making changes – Alexandr Tovmach Aug 06 '21 at 08:14
  • yes, since posting the comment, I'd stumbled upon the way to fix it and I had pushed the changes to main. Thank you for your help :) – Abhishek Aug 10 '21 at 07:55
1

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

Eli
  • 21
  • 4