OG Images with Github Actions

Posted on September 20, 2019

Open graph images are those that show up on your social media card when you share the URL.

Here is how to add one:

<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Simple, Right?

Now for comparison here are two tweets:

Without an open graph image - bland

I think we can all agree that this is pretty bland.

Now let’s look at another one, but now with the Open Graph Image.

With open graph - much better

Much better.

But moving to photoshop for creating this image is pretty hard, it’s mostly generic anyway.

Github Actions to the rescue

Install from Marketplace

Generate OG Image is a customisable open graph image generator that runs on Github Actions which means it is free for public repositories.

You can add it to your existing workflow by adding the following lines to your action.yml:

1name: 'Generate OG Images'
2on: pull_request
3
4jobs:
5 generate_og_job:
6 runs-on: ubuntu-latest
7 name: Generate OG Images
8 steps:
9 - name: Checkout
10 uses: actions/checkout@v1
11 - name: Generate Image
12 uses: agneym/generate-og-image@1.0.3
13 env:
14 GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
15 GITHUB_CONTEXT: ${{ toJson(github) }}
16 with:
17 path: static/post-images/

Steps to note here:

  1. It needs the GITHUB_TOKEN so it can access the markdown files and commit the generated image.
  2. GITHUB_CONTEXT gives more information pull request.
  3. actions/checkout@v1 allows to access the files inside the action.
  4. path refers to the required path.

For more properties, customisations and uses, follow the Readme

Let me know if you try out.