markdown - Jekyll 中的 Opengraph 链接预览

Question

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

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

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

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

标签： markdownjekyllfacebook-opengraphstatic-site

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

也可以按照其文档的高级用法部分og:image中的说明使用jekyll-seo-tag插件进行指定。在帖子的开头添加以下内容：

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

也可以指定默认图像，请参阅Jekyll 文档中的前端默认值

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

我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

我在我的 GitHub 个人资料上创建了一个分支来演示这一点，您可以轻松地对其进行修改。

预览如下所示：

客户端预览生成

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

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

你可能想看看

• jQuery 预览