Jekyll 中的 Opengraph link 预览

Question

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

当我在我的 jekyll 网站上的帖子中添加一些 link 时，我想要同样的体验，一种呈现它们预览的方式。

这对读者来说非常方便。有时预览会被误称为 "embeds".

有没有办法在 Jekyll page/post 中根据 Open Graph protocol 生成带有 text/image 预览的 "preview card"？

Answer 1

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

Is there a way to generate a "preview card" with text/image preview according to the Open Graph protocol instead of just a plain link in a markdown site of the static site generator Jekyll?

是的，这是可能的。 jekyll-seo-tag plugin already sets propertys of the metadata of the Open Graph Protocoll for you, as you can see in its template.

Jekyll 的默认主题，

Minima already comes with the jekyll-seo-tag plugin preinstalled to make sure your site gets the most usefull meta tags. ^[1]

插件从您的 _config.yaml 中读取值来设置属性。有些值是

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

也可以使用 jekyll-seo-tag 插件指定 og:image，如其文档 advanced usage section 中所述。将以下内容添加到 post 的首页：

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

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

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

我为 this post. You can check its source on GitHub 添加了一个 og:image。

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

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

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

这有几个原因。

• 可能是你的图片太大了？多个站点建议将预览图像保持在 300 KB 以下
• 您的 link 预览已经缓存。 Telegram 为此提供了一个很好的解决方案——@webpagebot。您可以将您的 link 发送到此机器人，它会更新缓存。

正在显示您 Jekyll 站点上其他 link 的预览

有两种方法可以在您的 Jekyll 站点上为 link 生成预览：

1. 在服务器上生成 link 预览
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 目录

• 将您的 link 添加到您的 markdown 中，例如：

  {% 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