OpenGraph component

OpenGraph metadata gives social platforms and messaging apps a title, description, and image to use when someone shares a link to your page. Sklair's built-in component generates OpenGraph and Twitter card tags, so you can define rich link previews in one place.

Sklair includes a native OpenGraph component for this. No component file or configuration is needed. Place it in the document body, or inside an ordinary component's body; Sklair removes the tag and contributes its metadata to the final head.

<OpenGraph
  site_name="Example"
  title="Example page"
  description="A short description of this page."
  image="https://example.com/social.jpg"
  url="https://example.com/page/"
  type="website"
  image_size="large"
></OpenGraph>

Attributes

Use the underscore spellings site_name and image_size. Other attribute names are ignored. Omitted or empty values produce no corresponding metadata, except that an omitted type defaults to website.

image_size="small" selects summary. All other values select summary_large_image. No Twitter card tag is emitted without an image.

Use full public URLs for image and url. The component copies their values into metadata; it does not resolve paths, upload an image, or generate a social image.

Generated head

The component generates only metadata. It does not set the document's <title> element or its canonical link; author those separately when needed.

The metadata is grouped in an ordering barrier with treat-as=dont-care. Nodes in that group are not individually deduplicated, so use one OpenGraph tag per document and avoid also emitting the same metadata elsewhere. See Head processing.

You can use bindings or inline Lua in an ordinary component to supply its values. As with other Sklair components, use an explicit closing tag.