RevealJS Social

Open Graph and Twitter card tags for slide decks.

What the social extension adds to a RevealJS presentation, how to enable it, and what Quarto already emits by itself.
Author

Mickaël CANOUIL, Ph.D.

A link to a slide deck is shared far more often than the deck is opened, and a link with no card behind it previews as a bare URL.

social reads the social metadata already in a presentation’s front matter and writes the corresponding <meta> tags into its head.

ImportantQuarto now emits some of these itself

The deck this site renders already receives sixteen social tags without any filter. This extension adds five that are still missing, og:url and og:type among them, and re-emits fourteen that Quarto has already written.

The Examples page compares two identical decks, one built with the filter and one without, so the overlap is visible rather than described.

Installation

quarto add mcanouil/quarto-revealjs-social@1.1.1

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

filters:
  - social

The standard Quarto keys are enough:

title: "The Grammar of Graphics Assembles"
description: "A talk on a native Typst grammar-of-graphics package."
site-url: "https://example.com/my-talk/"
image: "assets/social-card.png"
open-graph:
  image-width: 1200
  image-height: 630
twitter-card: true
Warning

Social scrapers need an absolute og:image URL. Set site-url so a relative image path is resolved against it, or give an absolute URL. The filter warns when a relative path is used without one.

See the Reference for every tag and where its value comes from, and the Examples for the two decks compared.

Where it works

RevealJS.

Back to top