React facebook 共享不适用于具有服务器端渲染的开放图形元标记

Question

我尝试用 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}`);
});

Answer 1

检查 next framework。它有用于反应的服务器端渲染。设置和使用它非常容易。他们有很好的文档。阅读文档并查看 _document.js 在此框架中的工作方式，它将完成这项工作。祝你好运:)

有关下一个服务器端渲染的更多信息here

Answer 2

尝试使用 react-helmet-async，这是为解决此类问题而开发的 react-helmet 的一个分支。

只是不要忘记将您的应用程序包装在一个 HelmetProvider 中，该 HelmetProvider 用于使用 React 的上下文 API.

来管理 Helmet 的状态

你需要 React 16+ 才能使用这个包。

React facebook 共享不适用于具有服务器端渲染的开放图形元标记

React facebook share not working on open graph meta tags with server side rendering

reactjs

facebook-opengraph

react-helmet