Generating OpenGraph Images for a jekyll based blog

README.md

Generating OpenGraph Images for a jekyll based blog

1. Add a js script to generate an opengraph image

The script takes:

-t, --title <title> The title of the article
-d, --date <date> The publish date of the article
-a, --author <author> The author of the article
-f, --filename <filename> The ogimage filename

and generates an opengraph image with 1200px x 630px resolution.

Dependencies: - canvas - commander - fs

2. Add a plugin _plugins/opengraph.rb

   This plugin when used doesthe following:

   • Generates an image_path based on the blog title
   • Checks if the image exists
   • If the image doesn't exists calls the command to generate an opengraph image
   • returns the image path to be included in the head section

    module Jekyll
      class OGFilter < Liquid::Tag
        def initialize(tag_name, text, tokens)
          super
          @text = text
        end
   
        def render(context)
          # logic goes here
        end
      end
    end

3. Use the plugin in head

   <meta property="og:image" content="{{ site.url }}{% og_filter %}" />
   
   <meta name="twitter:image" content="{{ site.url }}{% og_filter %}" />

   becomes:

   <meta property="og:image" content="https://blog.saeloun.com/images/opengraph/43568acbe7bd63d22c68b9661579de7938e329df.png">
   
   <meta name="twitter:image" content="https://blog.saeloun.com/images/opengraph/43568acbe7bd63d22c68b9661579de7938e329df.png">