Question

我正在为一家名为Signature REP的房地产公司构建搜索引擎。我正在尝试在Sharing for Webmaster's guide之后使用Facebook的Open Graph API，而我想做的就是让this image进入this website，以显示为由{ Facebook分享者。

问题在于，在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="&#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的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

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>

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

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

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

来源：

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

server.js

index.html

资源：

1 个答案: