Skip to content

agneym/generate-og-image

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Repository files navigation

Open Graph Image Generator

Generates open graph images for your blog with Github Actions.

This github action scans your PR for changes to md or mdx files, reads frontmatter configuration from them and generates images for your SEO.

If looks very bland without an image when you share the URL, but adding a cover pic with nothing do with your article also does not suit you well. Here is a Github Action based generator that got you covered.

In your action file:

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/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_CONTEXT: ${{ toJson(github) }}
        with:
          path: src/images/post-images/

For configuring the parameters, add following fields to the frontmatter:

---
ogImage:
  title: "Things you don't know"
  subtitle: "There must be something"
  imageUrl: "https://example.com/image-url.jpg"
  background: "yellow"
  fontColor: "rgb(0, 0, 0)"
  fontSize: "100%"
---

Frontmatter Props

Props Description Required Default
title Title in the image
subtitle Subtitle in the image
imageUrl The image thumbnail on the top
background Background color, gradient or image url
fontColor any css supported color
fontSize the font size
fileName name of the file title prop in kebab case

Works only with Pull Requests and md and mdx files.

Repository level Props

These are props that you can configure in the action file to customise the working.

Props Description Required
path Path to place the image URL in true
commitMsg Commit message when image is added
background Background color, gradient or image url
fontColor any css supported color
fontSize the font size
componentUrl Web Component to be rendered for output.
botComments Whether a comment with a preview image should be posted

Frontmatter level props on a document always takes precedence over Repository level props.

How do I customise the output?

  1. I need a gradient background

    Just as in CSS your frontmatter or Repo level prop can contain:

    background: 'linear-gradient(to right, #ec008c, #fc6767)'
    
  2. What if I need an image as background?

    Write the CSS for it.

    background: 'url(https://example.com/image.png)'
    
  3. What about font sizes?

    you can customise the repository level or frontmatter fontSize props which defaults to 100%. The heading and paragraph font sizes vary depending on it.

    fontSize: 120%;
    
  4. I need an emoji instead of image

    You can pass in the unicode representation of the emoji from the List in imageUrl prop.

  5. I need to format the title

    The title prop supports markdown, feel free to use it.

  6. I don't want these preview image bot comments

    the botComments repo prop should be set to "no"

I need more customisation on the output.

The generator uses a web component to create the default output and provides a repository level prop to customise this web component.

The component currently being used is on Github and published on NPM. The default URL is from Unpkg with https://unpkg.com/@agney/[email protected].

You can substitute the same with componentUrl input in your workflow file. For more info on creating this web component, visit source

Contributing

See docs

Credits

  1. Zeit OG Image

    Serverless based open graph image generator from zeit

  2. Zeit NCC

  3. Github Image Actions

    For some utils to copy from.