How do I set the content of a tag from Node or Express?

Question

I'm building a search engine for a real estate company called Signature REP. I'm trying to use Facebook's Open Graph API following the Sharing for Webmaster's guide and what I'm trying to do is get this image for this website to show up as the image in the post made by the Facebook Sharer.

The problem is that I can't use client-side JavaScript to set the tag before Facebook's WebCrawler gets to it. I end up with this image (which is the default image for my entire app) instead of this image of the listing (which is what I want).

My server configuration looks like this:

server.js

var express = require("express");
var bodyParser = require("body-parser");
var app = express();
const request = require('request');

// … a bunch of code for webhooks

app.use("/", express.static(__dirname));
app.use("/search", express.static(__dirname));
app.use("/search/:value", express.static(__dirname));
app.use("/search/:value/:id", express.static(__dirname));
app.use("/search/:value/:id/carousel", express.static(__dirname));
app.use("/moreinfo", express.static(__dirname));
app.use("/watchlist", express.static(__dirname));
app.use("*", function(req, res){
    res.status(404).send(`
    
      
        404
        Sorry, we cannot find that!
        
          
        
      
    `);
});
app.listen(PORT, () => {
    console.log("Started listening on port", PORT);
});

My index.html page looks like this:

index.html

So, how can I change the HTML header (specifically the content of the meta tag with property=og:image) before the Facebook WebCrawler gets to it? Facebook simply makes a quick GET request to the URL, so setting the meta tag with Express before the app renders should work just fine. I imagine either Node or Express could do this somehow.

All I need to do is send this tag to the Facebook Crawler: and hope that it picks that tag up instead of the one on index.html (served statically). BUT I also need to do this for the other 4000 listings that I receive every day.

Resources:

Facebook Sharing Debugger

Cristiano · Accepted Answer

Use a template engine like Mustache Express. With this extension, you can easily customize your HTML response. About your specific issue, you can:

var mustacheExpress = require('mustache-express');

    // Register '.mustache' extension with The Mustache Express
    app.engine('mustache', mustacheExpress());

    app.set('view engine', 'mustache');
    app.set('views', __dirname + '/views');

Inside view directory put a index.mustache file.

index.mustache

Notice the {{imageUrl}} tag in the content attribute of the meta header with the name og:image.

Finally, register an express route that renders the file:

app.get('/index', function (req, res) {
  let yourImage = getYourImageUrl()
  res.render('index', { imageUrl: yourImage })
})

Sources:

How do I set the content of a <meta> tag from Node or Express?

server.js

index.html

Resources:

Answers (1)

Related Questions

How do I set the content of a &lt;meta&gt; tag from Node or Express?

server.js

index.html

Resources:

Answers (1)

Related Questions

How do I set the content of a <meta> tag from Node or Express?