如何从<meta>节点或快速设置标签的内容？

我正在为一家名为Signature REP的房地产公司构建搜索引擎。我正在尝试按照网站管理员共享指南使用Facebook的Open Graph API，我正在尝试做的是让这个网站的这个图像显示为Facebook Sharer制作的帖子中的图像。

问题是我不能在Facebook的WebCrawler到达之前使用客户端JavaScript来设置<meta>标签。我最终得到了这个图像(这是我整个应用程序的默认图像(而不是列表的这个图像(这是我想要的(。

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

服务器.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);
});

我的索引.html页面如下所示：

索引.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标头之前，我如何更改HTML标头(特别是带有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" />并希望它选择该标签而不是索引上的标签.html(静态提供(。但我还需要为每天收到的其他 4000 个列表执行此操作。

资源：

脸书共享调试器

使用像 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="&#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>

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

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

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

来源：

模板引擎
模板引擎的比较
快速文档

服务器.js

索引.html

资源：

相关内容

最新更新

热门标签：