Before understanding how to create your Open Graph images with zero design skills, first, let us establish what are OG images - so there are no confusions. Do you know those fancy images that pop up when you share links on social media? Yes, those pictures grab your attention.

If you want to quickly check how your OG image for your site or blog looks like, you can quickly use this site for that https://www.opengraph.xyz/

The Setup

First things first, we need to get our dependencies and libraries installed. Many different Python libraries support us in reaching our goal, but we are going to use Playwright. https://playwright.dev/python/docs/api/class-playwright

Let us install them real quick. Open your terminal (and if you want to activate your virtualenv) and run these commands

pip install playwright
playwright install

Don’t worry if it looks like it’s downloading the entire internet. That’s normal. It is trying to download the browser variants that you might want to use to browse the pages & take pictures of. So, go grab a coffee, pet your cat, or contemplate the meaning of life while you wait.

The Code: Where the Magic Happens

We are starting with a very simple code. Now, create a new Python file (let’s call it og_image_wizard.py) and paste the following code into the file:

from playwright.sync_api import sync_playwright

def capture_og_magic(url, output_file):
  with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1200, "height": 630})
    page.goto(url)
    page.screenshot(path=output_file, full_page=False)
    browser.close()
    
url = "<https://mosaicimg.com/>"
output_file = "og_image_of_awesomeness.png"
capture_og_magic(url, output_file)

Now you should have a file named og_image_of_awesomeness.png which has the screenshot of the page that you wanted to take a picture of, but supported in the dimension of what an OG image is supposed to be. You can tweak this a little bit to support creating many page screenshots.

The Explanation: What in the World is Going On?

Let’s break it down one step at a time.

• We’re using Playwright to open up a virtual browser. In our case, it is Chromium
• We’re telling this browser to create a new page that’s exactly 1200x630 pixels (the perfect size for OG images, don’t you know).
• Then, we’re sending this virtual browser on a field trip to whatever URL we specify.
• Finally, we’re asking it to take a snapshot and save it as our OG image.

Conclusion

To use this masterpiece:

• Replace https://www.example.com with whatever URL you want to capture.
• Change og_image_of_awesomeness.png to whatever you want to name your image file.
• Run the script and watch the magic unfold!
• The Conclusion: You’re Now an OG Image Wizard!

Congratulations! You’ve just created your very own OG image generator. Remember, with great power comes great responsibility. Use your new OG image powers wisely.

Happy screenshotting, you magnificent code sorcerer!

P.S. If all else fails, you can always just use Mosaic. https://mosaicimg.com/