Jekyll中的Opengraph链接预览 [英] Opengraph link previews in Jekyll

问题描述

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

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

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

在Jekyll页面/帖子内，是否有一种方法可以根据

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

如果我的图像没有显示怎么办?

有几个原因.

• 也许您的图片太大了?一些网站建议将预览图像保持在300 KB以下
• 您的链接预览已被缓存.Telegram为此提供了一个很好的解决方案-

  但是，您可以添加一种提取 og:image 标记的方法:

    def get_og_image_url(源)如果source.css('meta [property =''og:image']').返回source.css('meta [property ="og:image"]').first ["content"]结尾返回"结尾 

  我创建了一个叉子，在

  客户端预览生成

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

  • 优势
    • 预览始终是最新的
  • 缺点
    • 客户端需要JavaScript
    • 由于 Same-Origin-Policy

  您可能想看看

  • Jquery预览

  When you insert links in modern writing websites, they usually display preview of the page instead of the link (if there is no surrounding text in the paragraph).

  I would like the same experience when i add some links to posts on my jekyll website, a way to render their previews.

  This is very convenient for readers. Sometimes previews mistakenly called "embeds".

  Is there a way, inside Jekyll page/post, to generate a "preview card" with text/image preview according to the Open Graph protocol?

  解决方案

  Showing rich text previews of your Jekyll site elsewhere

  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?

  Yes, this is possible. The 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's default theme,

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

  The plugin reads the values from your _config.yaml to set the properties. Some values are

  • title for og:title and og:site_name
  • description for og:description
  • url for og:url

  It is also possible to specify og:image with the jekyll-seo-tag plugin as described in the advanced usage section of its docs. Add the following to the front matter of your post:

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

  It is also possible to specify a default image, see front matter defaults in the Jekyll docs

  I tried this all with my own blog - also generated with Jekyll.

  I have added an og:image for this post. You can check its source on GitHub.

  Before adding the image, the preview in Telegram desktop looked like this:

  After adding the og:image, it looked like this:

  What to do if my image does not show up?

  There are several reasons for this.

  • Maybe your image is too large? Several sites suggest to keep the preview image below 300 KB
  • Your link preview is already cached. Telegram offers a nice solution for this - the @webpagebot. You can send your links to this bot and it will update the cache.

  Showing previews of other links on your Jekyll site

  There are two ways to generate a preview for links on your Jekyll site:

  1. Generate the link preview on the server
  2. Let the client generate the preview with JavaScript

  Server side preview generation

  • Advantages:
    • your clients do not need JavaScript
  • Disadvantages:
    • the preview is generated with your site and only updated when your site is updated
    • Custom plugins do not work with GitHub pages

  There exists a Jekyll plugin for that - jekyll-preview-tag:

  • first install the required gems nokogiri, open-uri, ruby-readability and digest, e.g.

     bundle add nokogiri
     bundle add open-uri
     bundle add ruby-readability
     bundle add digest
    

  • Now download the file preview_tag.rb and place it in the _plugins folder of your site.

  • Create the _cache directory

  • Add your link into your markdown, e.g:

    {% preview https://mycoolsite.com %}
    

  Per default this renders only text:

  However, you can add a method that extracts the og:image tag:

  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
  

  I created a fork that demonstrates this on my GitHub profile, you can easily modificate it.

  The preview looks like this:

  Client side preview generation

  There are several JavaScript libraries available, that generate the preview for you.

  • Advantages
    • the preview is always up to date
  • Disadvantages
    • the client needs JavaScript
    • most of the tools rely on external and often unfree services due the Same-Origin-Policy

  You may want to look at

  • JQuery preview

  这篇关于Jekyll中的Opengraph链接预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！