Jekyll中的Opengraph链接预览

Question

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

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

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

在Jekyll页面/帖子中，是否可以根据Open Graph protocol生成带有文本/图像预览的“预览卡”？

Answer 1

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

  

是否有一种方法可以根据Open Graph协议生成带有文本/图像预览的“预览卡”，而不仅仅是静态站点生成器Jekyll的markdown站点中的普通链接？

是的，这是可能的。正如您在jekyll-seo-tag plugin中所见，its template已经为您设置了开放图谱协议的元数据属性。

Jekyll的默认主题

  

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

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

• title代表og:title和og:site_name
• description for og:description
• url for og:url

还可以按照其文档的advanced usage section中所述的og:image插件指定jekyll-seo-tag。将以下内容添加到您的帖子的开头：

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以下
• 您的链接预览已被缓存。电报为此提供了一个很好的解决方案-@webpagebot。您可以将链接发送到该机器人，它将更新缓存。

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

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

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

服务器端预览生成

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

有一个Jekyll插件-jekyll-preview-tag：

• 首先安装必需的宝石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