Open Graph Images with Github Actions

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:

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:

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:

name: 'Generate OG Images'
on: pull_request

jobs:
  generate_og_job:
    runs-on: ubuntu-latest
    name: Generate OG Images
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Generate Image
        uses: BoyWithSilverWings/generate-og-image@1.0.3
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_CONTEXT: ${{ toJson(github) }}
        with:
          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.

Next time when you fire up a PR to the repo with markdown file with ogImage properties, it creates the open graph image and inserts it into the codebase.

For more properties, customisations and use cases, follow the Readme

How it works?

1. Puppeteer

   It uses a puppeteer instance on Github Actions docker to screenshot the current output on the web browser. The HTML is generated by the input variables.

2. Web Components

   The styling for HTML is controlled by a web component. It uses this web component created with lit element as default. But you can substitute with anything.
   This allows the styling of your image to remain highly customisable while using the action.

Let me know if you try out.