# Open Graph

> Open Graph meta tags with title, type, images, and site metadata.

- Name: `open-graph`
- Categories: seo
- Detail page: https://open-types.dev/types/open-graph

## Install

```bash
# Types only
npx shadcn add @open-types/open-graph

# Types + Zod v4 validators
npx shadcn add @open-types/open-graph-zod

# Types + real-world examples
npx shadcn add @open-types/open-graph-examples
```

## Types

```typescript
export interface OpenGraphImage {
  url: string;
  width?: number;
  height?: number;
  alt?: string;
  type?: string;
}

export interface OpenGraphMeta {
  title: string;
  type?: string;
  url?: string;
  description?: string;
  site_name?: string;
  locale?: string;
  images?: OpenGraphImage[];
}
```

## Zod validator

```typescript
import * as z from "zod";
import type { OpenGraphImage, OpenGraphMeta } from "../types/open-graph";

export const openGraphImageSchema = z.object({
  url: z.string(),
  width: z.number().optional(),
  height: z.number().optional(),
  alt: z.string().optional(),
  type: z.string().optional(),
}) satisfies z.ZodType<OpenGraphImage>;

export const openGraphMetaSchema = z.object({
  title: z.string(),
  type: z.string().optional(),
  url: z.string().optional(),
  description: z.string().optional(),
  site_name: z.string().optional(),
  locale: z.string().optional(),
  images: z.array(openGraphImageSchema).optional(),
}) satisfies z.ZodType<OpenGraphMeta>;

export type { OpenGraphImage, OpenGraphMeta } from "../types/open-graph";
```

## Examples

```typescript
// Source: https://ogp.me/
// Captured: 2026-05
import type {
  OpenGraphImage,
  OpenGraphMeta,
} from "../types/open-graph";

const heroImage = {
  url: "https://open-types.dev/og-image.png",
  width: 1200,
  height: 630,
  alt: "OpenTypes hero image",
  type: "image/png",
} as const satisfies OpenGraphImage;

export const openGraphImageExamples = {
  hero: heroImage,
  minimal: { url: "https://open-types.dev/icon.png" } satisfies OpenGraphImage,
  squareAvatar: {
    url: "https://open-types.dev/avatar.jpg",
    width: 400,
    height: 400,
    type: "image/jpeg",
  } satisfies OpenGraphImage,
} as const;

export const openGraphMetaExamples = {
  article: {
    title: "Why we built OpenTypes",
    type: "article",
    url: "https://open-types.dev/blog/why",
    description: "A community-curated registry of TypeScript types for everyday data shapes.",
    site_name: "OpenTypes",
    locale: "en_US",
    images: [heroImage],
  } satisfies OpenGraphMeta,
  website: {
    title: "OpenTypes",
    type: "website",
    url: "https://open-types.dev",
    description: "Open-source TypeScript type registry.",
    site_name: "OpenTypes",
  } satisfies OpenGraphMeta,
  minimal: { title: "OpenTypes" } satisfies OpenGraphMeta,
  multiImage: {
    title: "Gallery",
    type: "article",
    url: "https://open-types.dev/gallery",
    images: [heroImage, openGraphImageExamples.squareAvatar],
  } satisfies OpenGraphMeta,
} as const;
```