Open Graph & Twitter Cards

Open Graph and Twitter Cards for social previews - injected by bini-ssg at build time.

Overview

Open Graph and Twitter Cards control how pages look when shared on Facebook, LinkedIn, Slack, and X. Define them in the metadata export on layouts and pages.

  • Open Graph: title, description, url, type, images, siteName, locale
  • Twitter Cards: card type, title, description, creator, images
  • Default image: replace public/og-image.png (1200×630 recommended)
  • bini-ssg: injects tags via getMetadataForRoute during vite build

Open Graph Overview

Open Graph tags control previews on Facebook, LinkedIn, and Slack.

app/about/page.tsx
export const metadata = {
  title: 'About Us',
  description: 'Learn more about our company and team',
  openGraph: {
    title: 'About Us - My Bini.js App',
    description: 'Learn more about our company and team',
    url: 'https://myapp.com/about',
    type: 'website',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'About Us',
      },
    ],
    siteName: 'My Bini.js App',
    locale: 'en_US',
  },
}
Put a default image at public/og-image.png and reference it from metadata. Replace it with your own 1200×630 asset.

Open Graph Fields

FieldTypeInjected as
titlestringog:title
descriptionstringog:description
urlstringog:url
typestringog:type
imagesarrayog:image (+ width/height/alt)
siteNamestringog:site_name
localestringog:locale

Image object fields

FieldTypeNotes
urlstringImage URL
widthnumber1200 recommended
heightnumber630 recommended
altstringAlt text

Twitter Cards Overview

Twitter (X) cards control how links appear in the feed. Common types: summary and summary_large_image.

app/blog/[slug]/page.tsx
export const metadata = {
  title: 'Blog Post',
  description: 'A comprehensive guide to Bini.js',
  twitter: {
    card: 'summary_large_image',
    title: 'Blog Post - My Bini.js App',
    description: 'A comprehensive guide to Bini.js',
    creator: '@bini_js',
    images: ['/og-image.png'],
  },
}

Twitter Card Fields

FieldTypeInjected as
cardstringtwitter:card
titlestringtwitter:title
descriptionstringtwitter:description
creatorstringtwitter:creator
imagesarraytwitter:image

Card types

  • summary - small image
  • summary_large_image - large image (recommended)
  • app - mobile app card
  • player - video / audio

bini-ssg Injection

During vite build, bini-ssg injects OG and Twitter tags into pre-rendered HTML. Existing matching tags are updated in place.

MetadataInjected tags
openGraph.titleog:title
openGraph.descriptionog:description
openGraph.urlog:url
openGraph.typeog:type
openGraph.imagesog:image, og:image:width, og:image:height, og:image:alt
twitter.cardtwitter:card
twitter.creatortwitter:creator
twitter.imagestwitter:image
Injection is best-effort and does not fail the build. For dynamic routes like /blog/:slug, metadata is keyed by the route pattern unless you resolve per-URL values yourself.

Complete Example

Combined Open Graph and Twitter metadata for a blog post.

app/blog/[slug]/page.tsx
export const metadata = {
  title: 'Getting Started with Bini.js',
  description:
    'Learn how to build native cross-platform apps with Bini.js',
  openGraph: {
    title: 'Getting Started with Bini.js',
    description:
      'Learn how to build native cross-platform apps with Bini.js',
    url: 'https://myapp.com/blog/getting-started',
    type: 'article',
    images: [
      {
        url: 'https://myapp.com/images/blog/og.png',
        width: 1200,
        height: 630,
        alt: 'Getting Started with Bini.js',
      },
    ],
    siteName: 'My Bini.js App',
    locale: 'en_US',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Getting Started with Bini.js',
    description:
      'Learn how to build native cross-platform apps with Bini.js',
    creator: '@bini_js',
    images: ['https://myapp.com/images/blog/og.png'],
  },
}
Use images at least 1200×630 for consistent previews across platforms.
Was this helpful?