YOLO PUSHYOLO PUSHBETA✦

OG Image Generator

Explore our Open Graph image templates. Sign up and create a project to get a permanent, dynamic OG image URL.

Y
YOLO PUSH
Demo preview

Select a project to see the preview

1200 × 630 px — Standard Open Graph Image

Dynamic OG images for your projects

Create a project on YOLO PUSH and get a permanent OG image URL like images.yolopush.com/og/your-project. Change your template, tweak the title, or update your project details — the image updates automatically. No redeployment needed.

Start
End

How to Use Your OG Image

Add your OG image to any framework in seconds.

N

Next.js

Use the metadata export in your layout or page:

export const metadata = {
  openGraph: {
    images: [
      {
        url: 'https://images.yolopush.com/og/your-project',
        width: 1200,
        height: 630,
      },
    ],
  },
};
T

TanStack Start

Add the head() function in your route:

export const Route = createFileRoute('/')({
  head: () => ({
    meta: [
      {
        property: 'og:image',
        content: 'https://images.yolopush.com/og/your-project',
      },
    ],
  }),
});
</>

HTML / Any Framework

Add this meta tag in your <head>:

<meta property="og:image"
  content="https://images.yolopush.com/og/your-project" />
<meta property="og:image:width"
  content="1200" />
<meta property="og:image:height"
  content="630" />

Just need the image file?

Click Download PNG above and place the file in your public/ directory. In Next.js, name it opengraph-image.png in your app/ folder and Next.js will automatically serve it. For other frameworks, reference it via the meta tag above.

Why use a dynamic URL instead?

  • ✓Update your project name, logo, or tagline on YOLO PUSH — the OG image updates automatically
  • ✓Switch templates or customize styles anytime without redeploying
  • ✓Always 1200×630 px, optimized for X, LinkedIn, Discord, and Slack previews
  • ✓Free forever for all YOLO PUSH projects