为 github 页面自定义预览图像 [英] Customize preview image for github pages

查看:58
本文介绍了为 github 页面自定义预览图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我觉得他们专门解决了 github 存储库的问题

解决方案

此预览图片取自网站

前两个特色项目是我的个人网站页面,每个页面都有单独的元标记.它托管在 GitHub Pages 上,但托管在哪里并不重要.以下是它的实现方式:

{/* 所有社交 */}<元属性=og:image"content={previewImageSrc}/>{/* 推特 */}<meta name="twitter:image";content={previewImageSrc}/>

完整示例(gatsby + react-头盔)

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:

解决方案

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:

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)

这篇关于为 github 页面自定义预览图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆