Jekyll 中的 Opengraph 链接预览

Question

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

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

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

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

Answer 1

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

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

是的，这是可能的。 jekyll-seo-tag 插件已经为你设置了 Open Graph Protocoll 的元数据属性，你可以在它的模板中看到。

Jekyll 的默认主题，

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

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

• title为og:title和og:site_name
• description为og:description
• url为og:url

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

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 nokogiri和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标签的方法：

def get_og_image_url(source)
    if source.css('meta[property="og:image"]').first
        return source.css('meta[property="og:image"]').first["content"]
    end
    return ""
end

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

预览看起来像这样：

客户端预览生成

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

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

你可能想看看

• JQuery 预览