Open Graph & Twitter Cards

Learn how to add Open Graph and Twitter Cards to your pages for better social sharing.

Open Graph Overview

Open Graph tags control how your page appears when shared on social media platforms like Facebook, LinkedIn, Slack, and others. Bini.js allows you to define Open Graph metadata directly in your layouts and pages.

Bini.js includes a default og-image.png in the public/ folder. Replace it with your own image to customize your Open Graph and Twitter Card images.

app/about/page.tsx

// src/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',
  },
}

export default function AboutPage() {
  return <h1>About Us</h1>
}

Open Graph Fields

Field	Type	Description
title	string	Title for social sharing
description	string	Description for social sharing
url	string	Canonical URL for the page
type	string	Type of content (website, article, etc.)
images	array	Array of image objects for social cards
siteName	string	Name of the site
locale	string	Language locale (e.g., en_US)

Image object fields:

Field	Type	Description
url	string	URL to the image
width	number	Width of the image in pixels
height	number	Height of the image in pixels
alt	string	Alt text for the image

Twitter Cards Overview

Twitter Cards control how your page appears when shared on Twitter/X. Bini.js supports all Twitter Card types including summary, summary_large_image, app, and player.

app/blog/[slug]/page.tsx

// src/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'],
  },
}

export default function BlogPost() {
  return <h1>Blog Post</h1>
}

Twitter Card Fields

Field	Type	Description
card	string	Card type: summary, summary_large_image, app, player
title	string	Title for Twitter card
description	string	Description for Twitter card
creator	string	Twitter handle of the content creator
images	array	Array of image URLs for the card

Card types:

summary — Standard card with a small image
summary_large_image — Card with a large, prominent image
app — Card for mobile apps
player — Card for video/audio content

Complete Example

Here's a comprehensive example combining Open Graph and Twitter Cards for optimal social sharing:

app/blog/[slug]/page.tsx

// src/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',
    article: {
      publishedTime: '2025-08-01T00:00:00.000Z',
      modifiedTime: '2025-08-01T00:00:00.000Z',
      authors: ['https://myapp.com/authors/john'],
      tags: ['bini', 'react', 'framework'],
    },
  },
  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'],
  },
}

export default function BlogPost() {
  return <h1>Getting Started with Bini.js</h1>
}

Note: For best results, use images that are at least 1200x630 pixels. This ensures your content looks great on all platforms.

Metadata

Icons & Favicons

Open Graph & Twitter Cards

Learn how to add Open Graph and Twitter Cards to your pages for better social sharing.

Open Graph Overview

Bini.js includes a default og-image.png in the public/ folder. Replace it with your own image to customize your Open Graph and Twitter Card images.

app/about/page.tsx

// src/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',
  },
}

export default function AboutPage() {
  return <h1>About Us</h1>
}

Open Graph Fields

Field	Type	Description
title	string	Title for social sharing
description	string	Description for social sharing
url	string	Canonical URL for the page
type	string	Type of content (website, article, etc.)
images	array	Array of image objects for social cards
siteName	string	Name of the site
locale	string	Language locale (e.g., en_US)

Image object fields:

Field	Type	Description
url	string	URL to the image
width	number	Width of the image in pixels
height	number	Height of the image in pixels
alt	string	Alt text for the image

Twitter Cards Overview

Twitter Cards control how your page appears when shared on Twitter/X. Bini.js supports all Twitter Card types including summary, summary_large_image, app, and player.

app/blog/[slug]/page.tsx

// src/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'],
  },
}

export default function BlogPost() {
  return <h1>Blog Post</h1>
}

Twitter Card Fields

Field	Type	Description
card	string	Card type: summary, summary_large_image, app, player
title	string	Title for Twitter card
description	string	Description for Twitter card
creator	string	Twitter handle of the content creator
images	array	Array of image URLs for the card

Card types:

summary — Standard card with a small image
summary_large_image — Card with a large, prominent image
app — Card for mobile apps
player — Card for video/audio content

Complete Example

Here's a comprehensive example combining Open Graph and Twitter Cards for optimal social sharing:

app/blog/[slug]/page.tsx

// src/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',
    article: {
      publishedTime: '2025-08-01T00:00:00.000Z',
      modifiedTime: '2025-08-01T00:00:00.000Z',
      authors: ['https://myapp.com/authors/john'],
      tags: ['bini', 'react', 'framework'],
    },
  },
  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'],
  },
}

export default function BlogPost() {
  return <h1>Getting Started with Bini.js</h1>
}

Note: For best results, use images that are at least 1200x630 pixels. This ensures your content looks great on all platforms.

Metadata

Icons & Favicons