自定义 github 页面的预览图像

2024-05-02

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

我觉得他们专门解决了 github 存储库的问题here https://docs.github.com/en/github/administering-a-repository/customizing-your-repositorys-social-media-preview,但我不知道如何对 github 页面执行此操作。具体来说,当我的 github 页面显示在 LinkedIn 的精选部分时,我希望它不只是显示一张没有任何内容的灰色图像:


此预览图像取自网站元标签 https://metatags.io/。专门针对LinkedIn足够使用:

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

Example from my LinkedIn https://www.linkedin.com/in/alexandrtovmach/: enter image description here

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

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

完整示例(gatsby + 反应头盔) https://github.com/alexandrtovmach/alexandrtovmach.com/blob/master/src/containers/SEO/index.tsx

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

自定义 github 页面的预览图像 的相关文章

随机推荐