Jekyll 中的 Opengraph 链接预览

Question

当您在现代写作网站中插入链接时，它们通常会显示页面预览而不是链接（如果段落中没有周围的文本）。

当我在我的 jekyll 网站上添加一些帖子链接时，我想要同样的体验，这是一种呈现他们预览的方式。

这对读者来说非常方便。有时预览错误地称为“嵌入”。

有没有办法在 Jekyll 页面/帖子中根据Open Graph 协议生成带有文本/图像预览的“预览卡” ？

Answer 1

在别处显示您的 Jekyll 站点的富文本预览

有没有办法根据 Open Graph 协议生成带有文本/图像预览的“预览卡”，而不仅仅是静态站点生成器 Jekyll 的降价站点中的普通链接？

是的，这是可能的。在哲基尔SEO标签插件已经设置了打开图Protocoll的元数据的propertys你，因为你可以在看到它的模板。

Jekyll 的默认主题，

Minima 已经jekyll-seo-tag预装了插件，以确保您的网站获得最有用的元标记。^[1]

该插件从您的值中读取值_config.yaml以设置属性。一些值是

• title对于og:title和og:site_name
• description 为了 og:description
• url 为了 og:url

也可以og:image使用jekyll-seo-tag插件指定，如其文档的高级用法部分所述。将以下内容添加到帖子的前面：

image:
  path: /your/fancy/image.png
  height: 100
  width: 100

也可以指定默认图像，请参阅Jekyll 文档中的 front matter defaults

我用我自己的博客尝试了这一切——也是用 Jekyll 生成的。

我og:image为这篇文章添加了一个。您可以在GitHub 上查看其来源。

在添加图像之前，Telegram 桌面中的预览如下所示：

添加后og:image，它看起来像这样：

如果我的图片不显示怎么办？

有几个原因。

• 也许你的图片太大了？一些网站建议将预览图像保持在 300 KB 以下
• 您的链接预览已被缓存。Telegram 为此提供了一个很好的解决方案 - @webpagebot. 您可以将链接发送到此机器人，它会更新缓存。

显示 Jekyll 站点上其他链接的预览

有两种方法可以为 Jekyll 站点上的链接生成预览：

1. 在服务器上生成链接预览
2. 让客户端用 JavaScript 生成预览

服务器端预览生成

• 好处：
  • 您的客户不需要 JavaScript
• 缺点：
  • 预览随您的网站生成，仅在您的网站更新时更新
  • 自定义插件不适用于 GitHub 页面

存在一个 Jekyll 插件 - jekyll-preview-tag：

• 首先安装所需的 gems nokogiri, open-uri,ruby-readability和digest, 例如

   bundle add nokogiri
   bundle add open-uri
   bundle add ruby-readability
   bundle add digest
  

• 现在下载该文件preview_tag.rb并将其放在_plugins您站点的文件夹中。

• 创建_cache目录

• 将您的链接添加到您的降价中，例如：

  {% preview https://mycoolsite.com %}
  

默认情况下，这仅呈现文本：

但是，您可以添加一个提取og:image标签的方法：

 bundle add nokogiri
 bundle add open-uri
 bundle add ruby-readability
 bundle add digest

我创建了一个分支，在我的 GitHub 个人资料中演示了这一点，您可以轻松修改它。

预览看起来像这样：

客户端预览生成

有几个可用的 JavaScript 库可以为您生成预览。

• 好处
  • 预览总是最新的
• 缺点
  • 客户端需要 JavaScript
  • 由于同源策略，大多数工具依赖于外部且通常是不免费的服务

你可能想看看

• JQuery 预览