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

[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 :)

[deypartha]

Hi, I'd like to work on this issue. I think I can implement a solution by caching the HTML template and injecting dynamic Open Graph meta tags before sending the response. Please let me know if this approach aligns with the expected direction.

[binarykitchen]

Almost. Not only injecting new meta tags, but also replacing existing meta tags. Because title and description for example vary from post to post.

Also had a look at your PR #7278
It's a great start, but please remember I run an SPA where I always serve the index.html first before any routes kick in.

[krzysdz]

The easiest thing that I can think of would be using a template (derived from your SPA's index.html) and rendering it if a video is loaded (demo). This would require doing some "preprocessing" to generate the template from the index.html and when your SPA is rebuilt, the template would have to be generated again (so some script that inserts the template code to the file would be necessary) and the server would have to be restarted (in production mode Express caches view files in memory).

If you really want to use streams, then you can try using send directly. send is used by Express under the hood and returns a stream that is usually piped to res, but you should be able to pipe it to a transform stream, that then pipes to res. I think that with streams writing the code that is supposed to inject content to HTML is more difficult.

I'm not sure if serving open graph properties only to bots/crawlers makes sense, because while most will likely have bot somewhere in UA, there are client-side tools that sometimes fetch link previews (e.g. Signal, WhatsApp) and may use different UAs and residential IPs, so you might miss them and not get a nice preview.

[binarykitchen]

Excellent idea with templates. I already use the Pug template engine to serve the index.html, so I'll just create a second one for contents and inherit from it.

That makes it all much simpler, rather than going down the rocky road with streams and pipes.

Noted, I will not only do this for bots, but also for any sort of messaging tools.

Thank you again very much for your repo and suggestions 🙇

[1soka]

Your option 1 is totally fine, it's what most SPAs do before moving to SSR. Read index.html once at startup, keep it in memory, and replace a placeholder per request. No need to touch sendFile.

In the of index.html, add a marker:

<!--OG_TAGS-->

const fs = require("node:fs");
const path = require("node:path");

const template = fs.readFileSync(path.join(getWwwDir(), "index.html"), "utf8");

const escapeHtml = (s = "") =>
  String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;")
    .replace(/>/g, "&gt;").replace(/"/g, "&quot;");

app.get("/videos/:id", async (req, res, next) => {
  try {
    const video = await getVideo(req.params.id);
    if (!video) return res.status(404).send(template.replace("<!--OG_TAGS-->", ""));

    const tags = `
      <title>${escapeHtml(video.title)}</title>
      <meta property="og:title" content="${escapeHtml(video.title)}">
      <meta property="og:description" content="${escapeHtml(video.description)}">
      <meta property="og:image" content="${escapeHtml(video.thumbnailUrl)}">
      <meta property="og:url" content="https://yourdomain.com/videos/${encodeURIComponent(video.id)}">`;

    res.set("Cache-Control", "no-cache");
    res.send(template.replace("<!--OG_TAGS-->", tags));
  } catch (err) {
    next(err);
  }
});

A few details that matter: escape the DB values (a title with a " breaks the tag, and otherwise it's an XSS), register this route before your catch-all that sends index.html, and remove any default og/title tags from the template so scrapers don't read duplicates. Also check that your build keeps HTML comments in the final index.html. After deploying, the Facebook debugger has a "Scrape Again" button to clear its cache.