我创建了一个服务器端React应用，它将返回html，如下所示：
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
我读到很多人一直在使用反应头盔来管理头部中的内容。我想知道何时可以直接包含上述内容，使用它有什么好处。
我在 React 项目中有我的index.html页面，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="title" content="Bucard | Digital Business Card">
<meta name="description" content="Bucard - Description for bucard" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="http://m.digital-card.co.il/zedka/152/images/icon.png" />
<meta property="og:description" content="Bucard - Description for bucard" />
<meta property="og:url" content="https://bucard.co.il/" />
</head>
<body>
<div id="root"></div>
</body>
</html>
并有我的react-helmet部分，它存在于组件中，其自身路径在url上：
<Helmet>
<title>{"Digital card of " + this.state.card.Name}</title>
<meta name="title" content={"Digital card of " + …我正在制作下一个 js 应用程序（React SSR），现在我要在 head 中实现元标记。
所以现在我在 _app.tsx 文件中使用了next/head，例如，
import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';
export default class MyApp extends App {
componentDidMount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement!.removeChild(jssStyles);
}
}
render() {
const { Component, pageProps } = this.props;
return (
<React.Fragment>
<Head>
<title>My page</title>
<meta name="viewport" content="minimum-scale=1, …因此,我已经开始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>
我正在运行React应用程序的服务器端渲染。我正在express为此目的使用。整个服务器端渲染代码如下所示：
import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express from "express"
import { StaticRouter } from "react-router-dom"
import walker = require("react-tree-walker")
import { useStaticRendering } from "mobx-react"
import Helmet from "react-helmet"
import Provider from "../src/Provider"
import { StaticRouterContext } from "react-router"
import version = require("../version")
var _template: string = require(`../dist/${version.v()}/index.html`)
interface IRenderResponse {
statusCode: number,
template: string,
redirect?: string
}
const run = (url: string, locale?: string): Promise<IRenderResponse> => { …我们正在使用Docusaurus V2创建一个网站。
在Docusaurus V1中，有一个scripts设置siteConfig.js可以定制html的头部内容。但是，我在Docusaurus V2中找不到相应的设置。
根据https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout，似乎可以自定义<head>V2中的html 部分。
布局
Docusaurus的当前状态是它负责整个布局和样式，无意中使用户很难根据自己的意愿自定义网站的外观。
对于Docusaurus 2，布局和样式应由用户控制。Docusaurus将处理内容的生成，路由，翻译和版本控制。受create-react-app和VuePress的启发，Docusaurus仍将提供默认主题，用户可以从中弹出该主题，以进行进一步的布局和样式自定义。这意味着用户甚至有可能通过使用React Helmet来更改HTML元数据。基于社区的主题也很有可能。大多数静态站点生成器都采用这种允许用户负责布局和样式的方法。
我试图用react-helmet的src/pages/index.js，用下面的代码：
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<Helmet>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</Helmet>
</Layout>
);
}
}
但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js没有出现在里面<head></head>
有没有人遇到过类似的问题，有人可以提供帮助吗？
我已经使用以下代码在 React Helmet 中为我的根路由设置了社交共享图像：
<meta property="og:url" content="https://foo.com" />
<meta property="og:image" content="https://myhostedimg.png" />
我有一个单独的路由，或 Gatsby 中的“页面”，我想为其设置另一个og:image值。由于没有任何链接og:image到og:url，我如何在我的页面上指定自定义og:url和og:image链接？
该应用程序
该应用程序是使用 ReactJS、React Router Dom、Styled Components 和 Redux ducks 制作的。
我们使用的后端也是我们使用 Amazon Amplify 和 GraphQL 制作的。
目标
我们需要定义应用程序页面之一的元标记，以便可以使用 OpenGraphic 元标记等在社交网络中向用户共享个性化链接。
问题
该项目是用 ReactJS 制作的，ReactJS 只有一个 HTML 页面作为根（/public/index.html），这样，所有内容都是用根标签中的 Javascript 生成的，当它到达浏览器时，它会被转译，如我们已经知道了。问题在于，负责理解元标记的爬虫无法理解 Javascript，最终无法找到我在需要共享链接的页面上定义的动态数据。他们知道只有一个 html 文件。
1)在 /public/index.html 文件本身中定义元标记
该解决方案不起作用，因为我们使用的数据是动态的，而index.html文件是静态文件
2）使用反应头盔
该解决方案允许定义元标记，但正如已经提到的，爬虫不懂JS。因此，尽管元标记位于页面上，但共享链接时不会出现。
3）使用一些SSR技术
这是一个可能的解决方案，但我们无法将任何 SSR 框架集成到 React 中。并且改变项目的基础技术也是不可行的。例如，我们不能只是从 React 切换到 Next，因为项目已经完成了。
4）使用由express.js和React应用程序制作的小型服务器，用string.replace()模拟SSR之类的东西来替换index.html中的元标记
这个解决方案有效，但它会导致每次访问页面时发出两个请求，一次由express.js发出，一次由React在前端发出。由于请求数量不断增加，该方案被废弃。但如果有必要，你可以这样做。在这种情况下，还需要检查 Amplify 是否可以使应用程序和小型服务器在同一项目中运行。
React-snap 允许您根据 React 项目的路由和链接创建其页面的 html 快照，这添加到 React-helmet 中生成了一个完美的解决方案，使网络爬虫在共享链接时可以很好地处理链接。但该解决方案不适用于动态路由。例如，/your-route/:id 是一个动态路由，需要完整定义 id。当尝试创建仅在设置 id 时才存在的路由的快照时，React-snap 会丢失。不幸的是，这个解决方案不起作用。
这些是我们用来尝试解决问题的解决方案，但目前还不可能。尝试 4 可能是解决该问题的最理想方法。但我们正在寻找不会产生返工和未来问题的最佳方法。如果有人知道更好的方法来做到这一点，将对我们有很大帮助！
meta-tags reactjs server-side-rendering react-helmet aws-amplify
我试图在<Helmet/>React App 的标签中添加一个图标
我当前的<Helmet/>标签如下所示。
<Helmet
title="ABC"
meta={[
{ name: "ABC", content: "ABC" }
]}
links={
rel='icon',
type='image/png',
sizes='16x16',
href={require('favicon.ico')}
}
/>
但是我收到有关意外令牌的错误，有关如何添加收藏夹图标的任何输入？我在这里先向您的帮助表示感谢。
我试图做SSR与ReactDOMServer.renderToNodeStream(element)只是想知道是否有将与同时使用的任何问题ReactDOMServer.renderToString(element)，并 ReactDOMServer.renderToNodeStream(element)在每个请求？
我在自定义 SSR 设置中拥有的是：* React 16 * react-loadable * styled-components v4 * react-helmet-async * Redux * Express JS
以前使用 React，我可以通过首先渲染<head></head>包含由React生成的标记的标签，react-helmet然后使用它ReactDOMServer.renderToString()来渲染我的 React 元素来轻松渲染 HTML 文档。
但是，通过切换到ReactDOMServer.renderToNodeStream()我不得不切换react-helmet为react-helmet-async，它支持renderToNodeStream()功能。但是当我尝试<head></head>用标记渲染标签时，react-helmet-async它会返回为undefined.
为了解决这个问题，我不得不先使用，renderToString()而没有将它实际写到 Express JS 中response。这样react-helmet-async就可以看到要呈现哪些元标记，然后继续使用renderToNodeStream并将其流式传输到response.
我已经尽可能地简化了我的代码，因为我想了解这是否会产生负面影响（对于性能，或者是否有人能想到其他任何事情）？
前：
let html = ReactDOMServer.renderToString(stylesheet.collectStyles(
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<LocalStoreProvider store={store}>
<HelmetProvider context={helmetContext}>
<RouterContext …javascript reactjs server-side-rendering styled-components react-helmet
react-helmet ×10
reactjs ×9
javascript ×3
meta-tags ×2
aws-amplify ×1
docusaurus ×1
favicon ×1
gatsby ×1
html ×1
next.js ×1
node.js ×1