GitHub Marketplace: Social Preview for Your GitHub Actions

communication

github

Created: Fri Sep 15 2023

Last update: Mon Sep 18 2023

3 min

You are finally ready to share your GitHub Action with the world. You have spent hours working on it, and now it is time to show it off. You open your favorite social media platform, start typing your post, link your GitHub Action on the GitHub Marketplace, click on send, and… your big face is on people’s screen!

Screenshot of the rendering of the social media preview of the link of my GitHub Action on the GitHub Marketplace with my big face on it

This is what happened to me when I shared the marketplace link of my GitHub Action named “Update Issue Body”.

To be fair, the rendering is different and way better if one shares a link to the GitHub Action repository itself.

Screenshot of the rendering of the social media preview of the link of my GitHub Action repository that shows useful information

What Can We Do About It?

It is possible to add a social preview image to your GitHub repository. This image will be used when you share the link to your repository on social media platforms. But this image will also be used when you share the link to your GitHub Action on the GitHub Marketplace!

It is rather easy to do as everything is explained directly in the GitHub documentation Customizing your repository’s social media preview.

At the times of writing, images are recommended to be 1280x640px for best display on high-resolution devices.

While not visible in the documentation itself, GitHub provides in the settings of your repository a template for the social preview image which is pretty handy to get started and to have the safe zones.

Repo card template provided by GitHub with safe zones

I am not a designer, so I used the template to create my social preview image which has the following rendering:

How To Check If It Works?

After having uploaded the image to your repository, you can check if it works by using online tools like opengraph.xyz.

Whether you use the marketplace link or the repository link, you should see the social preview image.

Screenshot of the rendering provided by opengraph.xyz when my new social preview image has been uploaded which works well with all social media platforms

Find This Template On Figma

Based on this rendering, I have created a reusable Figma template named “GitHub Actions and Repo Social Previews” that you can use to create your own social preview image.

Found something valuable in this article?
Dropping us a star on GitHub would show your support and help others discover it.

Found a typo, a grammar error or a broken link? This article is missing something important?
Edit this article or create an issue for this article on GitHub.