Skip to main content

Setting Up OpenGraph Data

OpenGraph (OG) data is crucial for controlling how your web pages appear when shared on social media platforms. This guide will walk you through the process of setting up OpenGraph data for your project.

Steps to Set Up OpenGraph Data​

1. Create OpenGraph Images​

  1. Generate an image that represents your application. This could be your logo on a branded background or a screenshot of your app.
  2. Create two versions of this image:
    • opengraph-image.png: 1200x630 pixels (optimal size for most platforms).
    • twitter-image.png: 1200x600 pixels (optimal for Twitter cards).

Using a Free Open Graph Image Generator​

If you need help creating professional-looking Open Graph images, you can use a free online tool:

  1. Visit the Free Open Graph Image Generator.
  2. Choose a template that fits your project's style.
  3. Add your content, such as page title and author information.
  4. Generate the image and download it for use in your project.

This tool allows you to create up to 5 watermark-free images per day, which is perfect for getting started with your OpenGraph setup.

2. Add OpenGraph Images to Your Project​

Place the generated images in your apps/web/app folder.

3. Create Alt Text Files​

  1. Create two text files in the same apps/web/app folder:

    • opengraph-image.alt.txt
    • twitter-image.alt.txt

  2. Open your project's README file and ask ChatGPT/Claude to generate a description of your project.

  3. Edit the copied content to create a concise description (1-2 sentences) that captures the essence of your project.

  4. Paste this edited description into both opengraph-image.alt.txt and twitter-image.alt.txt.