为 github 页面自定义预览图像

Pau*_*idt 9 html markdown social-media github github-pages

在将链接发布到您的 github 页面时,是否可以自定义您看到的预览图像?

我觉得他们在这里专门解决了 github 存储库的问题,但我不知道如何为 github 页面执行此操作。具体来说,我希望我的 github 页面在显示在我的 LinkedIn 上的精选部分时,不只是显示一个没有任何内容的灰色图像:

在此处输入图片说明

Ale*_*ach 8

此预览图像取自网站元标记。专门为LinkedIn足够使用:

<meta property="og:image" content="preview_image.jpg" />
Run Code Online (Sandbox Code Playgroud)

来自我的 LinkedIn 的示例: 在此处输入图片说明

前两个特色项目是我的个人网站页面,每个页面都有单独的元标记。它托管在 GitHub Pages 上,但托管在哪里并不重要。这是如何做到的:

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

Run Code Online (Sandbox Code Playgroud)

完整示例(盖茨比 + 反应头盔)