Jekyll 中的 Opengraph 链接预览

Question

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

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

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

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

Answer 1

在其他地方显示您的 Jekyll 网站的富文本预览

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

是的，这是可能的。 jekyll-seo-tag plugin 已经为您设置了 Open Graph Protocoll 元数据的属性，您可以在 its template 中看到。

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，如其文档的advanced usage section 中所述。在帖子的开头添加以下内容：

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

也可以指定默认图片，见front matter defaults in the Jekyll docs

我用my own blog 尝试了这一切——也是用 Jekyll 生成的。

我为this post 添加了og:image。你可以在GitHub查看它的来源。

在添加图片之前，Telegram 桌面的预览是这样的：

添加og:image后是这样的：

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

这有几个原因。

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

在您的 Jekyll 网站上显示其他链接的预览

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

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

服务器端预览生成

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

有一个 Jekyll 插件可以解决这个问题 - jekyll-preview-tag:

• 首先安装所需的gem 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 标签的方法：

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

我在my GitHub profile 上创建了一个分支来演示这一点，您可以轻松修改它。

预览如下所示：

客户端预览生成

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

• 优势
  • 预览始终是最新的
• 缺点
  • 客户端需要 JavaScript
  • 由于Same-Origin-Policy，大多数工具依赖于外部且通常不免费的服务

你可能想看看

• JQuery preview