Skip to content

How to inject Open Graph/Meta tags for Social Media before the sendFile function? #7274

@binarykitchen

Description

@binarykitchen

In short: can we transform the file to be sent while piping? This for social media 🤷‍♂️

Longer version:
I wonder what's the recommendation how to inject HTML meta headers for social media scrapers, before sending the index.html, using sendFile.

Because, my SPA application, used by thousands of users a week, 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?

Facebook comes with this tool to check:
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.

I know, 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 and is too risky.

The current code to serve the static index.html for the SPA is:

  const fileUrl = path.join(getWwwDir(), "index.html");

  res.sendFile(fileUrl);

This index.html does not come with og:description for example because it's content/video based. I want to add it dynamically for bots/scrapers only.

Some ideas

  1. Before calling sendFile, open the original file, alter it, inject more HTML meta headers and send that (feels too complicated and poor performance)
  2. Allow a new option in the sendFile function: a transform stream. Customisable. Inject HTML headers etc.
  3. Your idea? ...

Perhaps this has been raised, discussed before?

Ideas welcome. Thanks :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions