如何从 Node 或 Express 设置 <meta> 标签的内容？

Question

我正在为一家名为 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 的房地产公司构建搜索引擎，以显示为 Facebook 分享者制作的 post 中的图像。

问题是我无法在 Facebook 的 WebCrawler 到达之前使用 client-side JavaScript 设置 <meta> 标签。我最终得到 this image (which is the default image for my entire app) instead of this image of the listing（这就是我想要的）。

我的服务器配置如下所示：

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(`
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
      <div class="text-center my-5">
        <h1>404</h1>
        <p>Sorry, we cannot find that!</p>
        <a href="https://signaturerep.com/">
          <img src="./404.jpg" />
        </a>
      </div>
    `);
});
app.listen(PORT, () => {
    console.log("Started listening on port", PORT);
});

我的 index.html 页面如下所示：

index.html

<!DOCTYPE html>
<html class="no-js" xmlns:fb="http://ogp.me/ns/fb#">
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">

    <!-- Facebook metadata -->
    <meta property="fb:app_id" content="507466823022210" />
    <meta property="og:type" content="business.business" />
    <meta property="og:title" content="&#128205; Signature REP" />
    <meta property="og:description" content="Signature Real Estate Professionals is the Southeast's premiere real estate agency. We provide our clients with the best service up front. From buying and selling homes, to rentals and more, we have all of your real estate needs covered." />
    <meta property="og:image" content="https://cloudbackr.com/volume-nyc1-02/assets/Search.jpg" />
    <meta property="og:url" content="https://signaturerep.com" />
    <meta property="business:contact_data:street_address" content="1425 Market Blvd" /> 
    <meta property="business:contact_data:locality"       content="Roswell, Georgia" /> 
    <meta property="business:contact_data:postal_code"    content="30097" /> 
    <meta property="business:contact_data:country_name"   content="United States" /> 
    <meta property="place:location:latitude"              content="34.0181013" /> 
    <meta property="place:location:longitude"             content="-84.3206112" /> 
  </head>
  <body>
    <div id="fb-root"></div>

    <div id="app"></div>
  </body>
</html>

那么，我怎样才能在 Facebook WebCrawler 到达之前更改 HTML header（特别是带有 property=og:image 的元标记的内容）？ Facebook 只是向 URL 发出快速 GET 请求，因此在应用程序呈现之前使用 Express 设置元标记应该可以正常工作。我想 Node 或 Express 都能以某种方式做到这一点。

我需要做的就是将这个标签发送到 Facebook 爬虫： <meta property="og:image" content="https://cloudbackr.com/volume-nyc1-02/large-photos/large-52009687-0.jpeg" /> 并希望它选择该标记而不是 index.html 上的标记（静态提供）。但是我还需要为我每天收到的其他 4000 个列表执行此操作。

资源：

Facebook Sharing Debugger

Answer 1

使用像 Mustache Express 这样的模板引擎。使用此扩展程序，您可以轻松自定义 HTML 响应。关于您的具体问题，您可以：

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');

在视图目录中放置一个 index.mustache 文件。

index.mustache

<!DOCTYPE html>
<html class="no-js" xmlns:fb="http://ogp.me/ns/fb#">
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">

    <!-- Facebook metadata -->
    <meta property="fb:app_id" content="507466823022210" />
    <meta property="og:type" content="business.business" />
    <meta property="og:title" content="&#128205; Signature REP" />
    <meta property="og:description" content="Signature Real Estate Professionals is the Southeast's premiere real estate agency. We provide our clients with the best service up front. From buying and selling homes, to rentals and more, we have all of your real estate needs covered." />
    <meta property="og:image" content="{{imageUrl}}" />
    <meta property="og:url" content="https://signaturerep.com" />
    <meta property="business:contact_data:street_address" content="1425 Market Blvd" 
     /> 
    <meta property="business:contact_data:locality"       content="Roswell, Georgia" 
     /> 
    <meta property="business:contact_data:postal_code"    content="30097" /> 
    <meta property="business:contact_data:country_name"   content="United States" /> 
    <meta property="place:location:latitude"              content="34.0181013" /> 
    <meta property="place:location:longitude"             content="-84.3206112" /> 
  </head>
  <body>
    <div id="fb-root"></div>

    <div id="app"></div>
  </body>
</html>

请注意元 header 的内容属性中的 {{imageUrl}} 标签，名称为 og:image。

最后，注册一个呈现文件的快速路由：

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

来源：

如何从 Node 或 Express 设置 <meta> 标签的内容？

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

facebook

web-crawler

node.js

express

facebook-opengraph

server.js

index.html

资源：