我已尝试与React在Facebook上共享图像。我已经使用react-helmet npm动态添加了og：image标签，并且还使用react-snapshot预渲染了构建。在查看源代码时，存在og：image URL，但是当我尝试共享图像时，它将不会共享。
如果我在index.html中提供静态og：image URL，那么facebook将按预期工作。我已尝试使用react-snapshot进行预渲染并添加元标记
import {Helmet} from "react-helmet";
fbshare1 = () => {
window.open(
'https://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;
}
<Helmet>
<title>About us Title</title>
<meta property="og:url" content="https://little-parrot-19.localtunnel.me" />
<meta property="og:title" content="Welcome to Passup" />
<meta property="og:description" content="A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article." />
<meta property="og:image" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:type" content="image/png" />
<meta property="og:type" content="Free Web" />
<meta property="fb:app_id" content="12345678900" />
<meta property="article:author" content="Passup" />
<meta property="article:publisher" content="Passup trioangle" />
<meta property="og:image:secure_url" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
</Helmet>
<a href="#" onClick={this.fbshare1}> Share on Facebook without sharer fb2 </a>
另一方面，我的服务器端渲染看起来像这样，带有Express
import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from "react-router-dom";
import { Helmet } from 'react-helmet';
import App from '../src/App';
const PORT = 3006;
const app = express();
app.use(express.static('./build'));
app.get('/*', (req, res) => {
const app = ReactDOMServer.renderToString(<StaticRouter location=
{req.url}><App /></StaticRouter>);
const helmet = Helmet.renderStatic();
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
return res.status(500).send('Oops, better luck next time!');
}
res.send(formatHTML(app, helmet));
});
});
const formatHTML = (appStr, helmet) => {
return `
<!doctype html>
<html prefix="og: http://ogp.me/ns#"
${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="app">
${appStr}
</div>
</body>
</html>
`
}
app.listen(PORT, () => {
console.log(`😎 Server is listening on port ${PORT}`);
});
检查next framework阅读文档，并查看_document.js在此框架中的工作方式，它将完成此工作。祝你好运：）