我正在为一家名为Signature REP的房地产公司构建搜索引擎。我正在尝试在Sharing for Webmaster's guide之后使用Facebook的Open Graph API，而我想做的是获取this image作为this website，以显示在Facebook Sharer发表的帖子中。
问题在于，在Facebook的WebCrawler到达之前，我无法使用客户端JavaScript设置<meta>标记。我最终使用this image（这是我整个应用程序的默认图像），而不是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="📍 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头之前，如何更改HTML头（特别是
property=og:image的meta标签的内容）？ Facebook只是对URL发出快速GET请求，因此在应用渲染之前使用Express设置meta标签应该就可以了。我以为Node或Express都能做到这一点。我需要做的就是将此标签发送到Facebook Crawler：
<meta property="og:image" content="https://cloudbackr.com/volume-nyc1-02/large-photos/large-52009687-0.jpeg" />，并希望它代替index.html（静态提供）上的标记。但是我还需要针对每天收到的其他4000个列表执行此操作。资源：
Facebook Sharing Debugger
最佳答案
使用诸如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文件。索引胡子
<!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="📍 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>
请注意，元标头的内容属性中的{{imageUrl}}标签名为
og:image。最后，注册一个呈现文件的快速路由：
app.get('/index', function (req, res) {
let yourImage = getYourImageUrl()
res.render('index', { imageUrl: yourImage })
})
资料来源：
Template engines
Comparision of template engines
Express documentation