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 中，该 yarn 用于使用 React 的上下文 API 管理 Helmet 的状态。

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

React Facebook分享无法在服务器端渲染的开放图元标签上使用

2 个答案: