为 github 个页面自定义预览图像

Question

是否可以自定义将 link 发布到 github 页面时预览的图像？

我觉得他们专门解决了 github 存储库 here 的问题，但我不知道如何针对 github 页面执行此操作。具体来说，当我的 github 页面出现在我在 LinkedIn 上的精选部分时，我希望它不只是显示灰色图像：

Answer 1

此预览图片来自网站meta tags。专为领英够用：

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

来自 my LinkedIn 的示例：

前两个特色项目是我的 personal website 页面，每个都有单独的元标记。它托管在 GitHub 页面上，但托管在何处并不重要。这是如何完成的：

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

full example (gatsby + react-helmet)

Answer 2

尝试了上面的答案，但我的 og:image 仍然没有反映在我的 linkedIn 个人资料中。进一步检查后，我发现 LinkedIn 缓存 link 预览内容 7 天。除非您使用 LinkedIn Post Inspector.

检查您的站点，否则您所做的更改不会立即反映出来

本文出处：https://www.linkedin.com/pulse/how-clear-linkedin-link-preview-cache-ananda-kannan-p

为 github 个页面自定义预览图像

Customize preview image for github pages

html

markdown

social-media

github

github-pages