Open Graph Support for Dynamic Routes

[raedle]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Hey hey 👋🏻

Our PlayTorch website and API docs are built with Docusaurus and hosted on Vercel!

https://playtorch.dev/

The website includes dynamic routes that embed Expo Snacks and render the route name in a hero component plus some additional text. An example is this url:

https://playtorch.dev/snack/@raedle/image-classification/

When sharing the URL via text messaging or social media, we would like it to show a preview with the route name as title. However, it currently renders the text "PlayTorch is a framework for rapidly creating mobile AI experiences." instead of "@raedle/image-classification | PlayTorch Snack" (see screenshot).

We used @docusaurus/Head to change the page metadata, which works on the client, but not for OG previews. I can repro if I disable JavaScript on the client.

I tried the following PR, but that doesn't seem to work: facebookresearch/playtorch#103 (the Vercel preview of the PR is linked in the PR)

Is there a way to get Open Graph meta tags enabled for dynamic routes?

Thank you!

Reproducible demo

No response

Steps to reproduce

The PR facebookresearch/playtorch#103 adds og: meta tags via the @docusaurus/Head. The Vercel preview in this PR can be used for testing the issue

Expected behavior

It is expected that the og: meta tags provided via @docusaurus/Head would also apply when sharing links for dynamic routes (i.e., links would show previews with content from meta tags)

Actual behavior

The meta tags don't apply when sharing links to dynamic routes

Your environment

No response

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Hi @raedle

---

Edit: I think I initially misunderstood and you only care about the title, not the image 🤷‍♂️

Please show me the source code of your file using og:preview, and the live page (deploy preview if you have) so that I can inspect the HTML => this should work. I don't see the

Now I believe you must use og:image and not og:preview ? 🤔

Note we have a helper (not documented yet but soon) that you can use to set common metadata. We use it everywhere across the theme

import { PageMetadata } from "@docusaurus/theme-common";

<PageMetadata
  title={title}
  description={description}
  keywords={keywords}
  image={image}
/>;

It will set the following headers and handle site baseurl prefixing:

      {pageImage && <meta property="og:image" content={pageImage} />}
      {pageImage && <meta name="twitter:image" content={pageImage} />}

---

What I understand is that you use dynamic routes with a plugin that create paths with exact: false

Be aware that in such a case, Docusaurus will only build one static HTML file per dynamic route.

If you have one dynamic route rendering 3 snacks, Docusaurus has to put a title in the static HTML file. match.params is undefined at build time, and this is what will end up in your unique static HTML file.

Technically you could fix the page title with JS after the page loads, using path params, or even fetching data from a Snack API. But I'm not sure those metadata changes with JS will be interpreted by social media preview tools.

If you care about those metadata I believe you should ensure that 1 static HTML page is produced at build time for each snack. You could for example loop over a static list of snacks you want to include. That list of snack can be fetched from an API or whatever in case you need something more dynamic and convenient to maintain, but Docusaurus should have access to that list at build time.

Does it make sense?

Also answered in the PR: facebookresearch/playtorch#103 (review)

[raedle]

Thanks a bunch, @slorber!

Yes, it makes sense and was super helpful!

I replied to your comment on the PR facebookresearch/playtorch#103 (comment)