Open Graph Info

Open Graph Info

<OpenGraphInfo> adds the social-sharing meta tags (Open Graph and Twitter card) for a page, so a link to it shows a proper preview image, title, and description when shared. Add it once near the top of a React page.

Basic Usage

Site-wide default image only:

<OpenGraphInfo />

Page-specific image:

<OpenGraphInfo pageName="apps" />

With title and description:

<OpenGraphInfo
  pageName="apps"
  title="Cardano Apps and dApps"
  description="Discover curated apps live on Cardano mainnet today."
/>

Props

Prop	Type	Default	Description
pageName	string	default	Base name of the preview image. Resolves to static/img/og/<pageName>.jpg. Pages without a dedicated image omit it and get the site-wide static/img/og/default.jpg.
image	string	none	Site path to a preview image outside static/img/og/, for example /img/insights/supply.png. Overrides pageName.
title	string	none	Sets og:title and twitter:title. Omit to leave the page's own title.
description	string	none	Sets og:description and twitter:description.
type	string | null	website	Value of og:type. Pass null to leave it to the theme, as blog posts do so they keep article.

Notes

• With pageName, the preview image must live in static/img/og/ and be a .jpg named exactly <pageName>.jpg. Use image for any other location.
• og:image and twitter:image use the same file, there is no separate Twitter image.
• og:type is always website and twitter:card is always summary_large_image. Neither is configurable.
• The canonical og:url is derived automatically from the current path, and og:site_name from the site config. You do not set these.
• Use summary_large_image previews, so design the image for a wide 1.91:1 crop.