How to inject Open Graph/Meta tags for Social Media to your template file?

[binarykitchen]

I wonder what's the recommendation how to inject HTML meta headers for social media scrapers, best using rsbuild?

Facebook comes with this tool to check:
https://developers.facebook.com/tools/debug

It requires a static HTML file. Before, I was using this npm package react-metatags-hook which was a bad idea. Because that Facebook scraper tool requires a plain HTML file.

That's why I decided to delete that wrong npm package and to refactor it properly but not sure where to start. Asking for advice if rsbuild already supports this?

For example, on my website, I load Video X with a GET request by ID. That video comes with a title and description. This using Express.js in routes. Once loaded over DB, I want to set the ogDescription meta tag with its description, for example. But how?

In the defineConfig function rsbuild provides, you set the template for your SPA web application.
https://rsbuild.rs/guide/basic/html-template#set-template

It's compiled into HTML, yet, in my routes I would like to alter that template further, inject it with more HTML meta tags.

Ideas welcome. Thanks :)

[chenjiahan]

For static meta tags, you can use html.meta:

export default {
  html: {
    meta: {
      'og:title': {
        property: 'og:title',
        content: 'Example Title',
      },
      'og:description': {
        property: 'og:description',
        content: 'Example description',
      },
    },
  },
};

But in your case, the meta content depends on the route and DB data. The recommended approach is to use SSR or SSG, so each page can return HTML that contains the correct Open Graph meta tags.

[binarykitchen]

Thanks, @chenjiahan

Yes, I already use html.meta for some parts which never change, regardless of the route.
Although defineConfig is run at build time, so cannot inject these dynamically when the app is run.

But in your case, the meta content depends on the route and DB data.

Exactly.

Thought so. SSR or SSG would be the ideal solution. But I don't have the time to migrate my app to SSR/SSG right now. That would be a big step and requires a lot more testing for an application which already comes with plenty of users.

In Express.js I have this

app.use(routes);
...

// It's a single page app, so send the base layout anytime
app.use(sendIndex());

Perhaps, as a short-term solution, I should alter the sendIndex middleware to inject meta tags, but that would require modifications of the HTML document ... which feels odd.

More ideas, suggestions welcome.

[chenjiahan]

Yes, as a short-term solution, modifying sendIndex is reasonable. You can add an explicit placeholder in the HTML template and let sendIndex replace it.

[binarykitchen]

Thanks for the confirmation - glad to know I'm not crazy 😄