Question

所以我已经 react helmet 在我的客户端应用上工作，将facebook og个标记重新渲染到头部，具体取决于哪个页面在应用中处于活动状态。

然而facebook调试器和facebook本身并未选择任何此类调试器。我错过了什么吗？这只能用于服务器端渲染页面吗？

我希望不要因为我必须学习node.js！

 <Helmet>
    <title>{props.title}</title>
    <meta property="og:url" content={ogUrl} />
    <meta property="og:type" content={props.type} />
    <meta property="og:title" content={props.title} />
    <meta property="og:description" content={props.desc} />
    <meta property="og:image" content={ogImg} />
 </Helmet>

Answer 1

大多数搜索引擎和抓取工具直接使用服务器的响应，不允许您使用javascript更改它。所以，是的，你需要的是服务器端渲染。

或者，您可以使用gatsbyjs，react-static等工具。基本上，它们会事先将您的组件渲染为HTML文件。

Answer 2

或者，您可以使用ogtag.me API发送数据并通过预览动态创建缩短链接，然后共享该缩短链接而不是实际页面的链接。

Answer 3

您可以添加og：image

这就是我放入app.js并在不同页面上更改元数据的原因

<Helmet>
    <title>VEED - Create, Edit & Share Videos Online for free</title>
    <meta name="description" content="Veed is a simple but powerfull video editor, try our free video editor to, resize video, trim video add loads more!" />
    <meta name="keywords" content="instgram video editor, Online Video editor, Video Editor, Video Resizer, Trim Video, Draw On Video, Resize Video, Edit videos online, Online video editor" />
    <meta name="application-name" content="VEED" />
    <meta name="theme-color" content="#e162f8" />

    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="https://www.veed.io/" />
    <meta property="og:title" content="VEED - Create, Edit & Share Videos Online for free" />
    <meta property="og:description" content="Veed is a simple but powerfull video editor, try our free video editor to, resize video, trim video add loads more!" />
    <meta property="og:image" content="https://www.veed.io/fav/og-image.png" />
    <meta property="og:image:url" content="https://www.veed.io/fav/og-image.png" />
</Helmet>

React Helmet：Facebook Open Graph

3 个答案: