Ready.js logoReady.js

Open Graph Image Generator

How to use the OG Image in your Next.js Project

Follow these steps to integrate your OG image into your Next.js project

Quick solution

  1. Use the generator above to create your OG image and download the PNG.
  2. Save the image in the folder corresponding to your route segment, make sure the name is opengraph-image.png (e.g., /about/opengraph-image.png).
  3. Repeat this process to create unique OG images for each route segment in your Next.js project.

Advanced solution

If you need dynamic OG images (e.g., for blog posts with unique titles), follow these steps:

  1. Create an API route:
    • Add a new file at /app/api/og/image/route.ts.
    • Copy and paste the code provided below:
    • Add the following line to your robots.txt file: Allow: /api/og/*
  2. Generate your image:
    • Use the OG Image Generator above to design your image.
    • Copy the generated imageUrl using the provided button.
  3. Reference your OG image dynamically:
    • In your generateMetadata function, reference the copied imageUrl.
    • This allows you to pass query parameters (e.g., dynamic titles) to the imageUrl.

What Are Open Graph Images?

Open Graph images (OG images) are visual previews displayed when someone shares your webpage on social media platforms like Facebook, LinkedIn, or Twitter. These images are part of the Open Graph Protocol, which helps platforms better understand and present your content to users.

When a link includes an OG image, it grabs more attention, boosts engagement, and makes the link look more professional.

What Is the Recommended Size for an OG Image?

The size of your OG image can directly impact how it appears on social media platforms. Use the following recommended dimensions to ensure your images look sharp and professional:

  • For Open Graph (Facebook, LinkedIn, etc.): 1200x630 pixels
  • For Twitter Card Images: 1200x675 pixels

Using these dimensions ensures your OG images render correctly without cropping or distortion, no matter where they're shared.

Why Are Open Graph Images Important?

Open Graph images are essential for improving your website's visibility and performance online. Here's why they matter:

  1. Boosts Engagement: Posts with OG images attract more attention and clicks than plain links. Visuals naturally stand out on crowded social feeds.
  2. Enhances SEO: Search engines like Google often consider user engagement metrics (clicks, shares) when ranking your pages. An attractive OG image increases these metrics, indirectly improving your search rankings.
  3. Reinforces Branding: OG images help showcase your brand consistently across platforms. A well-designed OG image with your logo and colors increases brand recognition.

In short, investing a little time into creating OG images can significantly impact how your content is shared and perceived online.

Open Graph Image Examples

readyjs.dev

Your Awesome Article Title

A brief description of your awesome article that will make people want to click and read more.

Loved Our OG Image Generator? You'll Love Our SaaS Boilerplate!

Ready.js is a complete Next.js boilerplate designed to save you time and effort, with features like dynamic OG image generation, built-in authentication, payment integration, and admin tools. It's everything you need to launch faster and focus on what matters: building great features.
Discover Ready.js