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 預覽