Я создаю поисковую систему для компании по недвижимости Подпись REP .Я пытаюсь использовать API Open Graph Facebook в соответствии с Руководством для веб-мастеров , и я пытаюсь получить это изображение для этого веб-сайта , чтобыотображаются в качестве изображения в сообщении, сделанном Facebook Sharer.
Проблема в том, что я не могу использовать клиентский JavaScript для установки тега <meta> до того, как WebCrawler от Facebook до него доберется.В итоге я получаю это изображение (которое является изображением по умолчанию для всего моего приложения) вместо этого изображения в списке (что я и хочу).
Моя конфигурация сервера выглядит следующим образом:
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>
Итак, как я могу изменить заголовок HTML (в частности, содержимое метатега с property=og:image) до того, как к нему подключится Facebook WebCrawler?Facebook просто делает быстрый GET запрос на URL, поэтому установка метатега с помощью 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