react-og-image v1.1.0

react-og-image

Generate Open Graph image meta tags for your React app.

Usage

Install the package:

npm install react-og-image

Import it from react-og-image:

import OgImage from 'react-og-image';

Add the OgImage component in your layout component:

<OgImage
  title="My Website"
  url="https://example.com"
  image="https://example.com/image.png"
  description="This is my website"
  twitter={{
    card: 'summary_large_image',
    site: '@example',
    image: {
      url: 'https://example.com/image.png',
      type: 'image/png',
    },
  }}
/>

API References

the component takes a metadata object of type OgImageMetadata:

type OgImageMetadata = {
  title: string;
  url: string;
  image: OgImageProps | OgImageProps[];
  description?: string;
  type?:
    | 'website'
    | 'article'
    | 'profile'
    | `music.${'song' | 'album' | 'playlist' | 'radio_station'}`
    | `video.${'movie' | 'episode' | 'tv_show' | 'other'}`
    | 'business'
    | 'product'
    | 'place'
    | 'book'
    | string;
  siteName?: string;
  locale?: string;
  localeAlternate?: string[];
  latitude?: number;
  longitude?: number;
  region?: string;
  twitter?:
    | TwitterCardType
    | {
        card: TwitterCardType;
        title?: string;
        description?: string;
        site?: string;
        creator?: string;
        image?: OgImageProps;
        app?: {
          country?: string;
          iphone: { name: string; id: string; url: string };
          ipad: { ... };
          googleplay: { ... };
        };
        player?: { url: string; width?: number; height?: number };
      };
};

the images can be of type OgImageProps:

type OgImageProps =
  | string
  | {
      url: string;
      secureUrl?: string;
      type?:
        | 'image/jpeg'
        | 'image/png'
        | 'image/gif'
        ...

      width?: number;
      height?: number;
      alt?: string;
    };

the twitter card type:

type TwitterCardType = 'summary' | 'summary_large_image' | 'app' | 'player';

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.