Reactjs 下一个JS-源代码中缺少元标记
我安装了多个元标记,如标题、描述、关键字等 但是,它不会在视图源中显示这些标记。因此,Facebook共享卡不起作用(我已经安装了Reactjs 下一个JS-源代码中缺少元标记,reactjs,next.js,server-side-rendering,meta-tags,Reactjs,Next.js,Server Side Rendering,Meta Tags,我安装了多个元标记,如标题、描述、关键字等 但是,它不会在视图源中显示这些标记。因此,Facebook共享卡不起作用(我已经安装了og标签,但在Facebook的Scraper或我的查看源上似乎找不到它们。不过,它是在客户端幻灯片上填充的 我的头部格式(在客户端检查/开发工具中显示标记,但不在视图源中显示): 从“下一个/Head”导入Head; 导出默认值()=>( ) 输出(编辑页面道具): body{display:none}body{display:block}{“props”:{“
og
标签,但在Facebook的Scraper或我的查看源上似乎找不到它们。不过,它是在客户端幻灯片上填充的
我的头部格式(在客户端检查/开发工具中显示标记,但不在视图源中显示):
从“下一个/Head”导入Head;
导出默认值()=>(
)
输出(编辑页面道具):
body{display:none}body{display:block}{“props”:{“pageProps”:“page”:“/Home”,“query”:{},“buildId”:“development”,“isFallback”:false,“gssp”:true}
问题似乎来自于禁用SSR的Redux Persist。禁用PersistGate服务器端似乎可以解决问题
returnprocess.browser(
) : (
);
从你的代码片段中,你没有通过道具传递title
和url
,你可能错过了这里,但不是在真正的代码中。@Hangindev是的,我已经把它们都包含在真正的代码中了。但是,Facebook的废弃并没有真正起作用。问题中的输出是在开发过程中捕获的?输出如何生产中的t?@Hangindev生产中的输出通常也是一样的。如果你能用它制作出一个最小的、可重复的例子,那会很有帮助。
import Head from 'next/head';
export default () => (
<>
<Head>
<meta property="og:title" content={title} />
<meta property="og:url" content={url} />
</Head>
<Header />
<Body />
<Footer />
</>
)
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/development/pages/_app.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/development/pages/Home.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/main.js?ts=1592258092029" as="script"/><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"></div><script src="/_next/static/runtime/react-refresh.js?ts=1592258092029"></script><script src="/_next/static/development/dll/dll_f9de5cbc314a1e41f91e.js?ts=1592258092029"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps": "page":"/Home","query":{},"buildId":"development","isFallback":false,"gssp":true}</script><script nomodule="" src="/_next/static/runtime/polyfills.js?ts=1592258092029"></script><script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1592258092029"></script><script async="" data-next-page="/Home" src="/_next/static/development/pages/Home.js?ts=1592258092029"></script><script src="/_next/static/runtime/webpack.js?ts=1592258092029" async=""></script><script src="/_next/static/runtime/main.js?ts=1592258092029" async=""></script><script src="/_next/static/development/_buildManifest.js?ts=1592258092029" async=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1592258092029" async=""></script></body></html>
return process.browser ? (
<PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
<ToastProvider>
<Component {...pageProps} />
</ToastProvider>
</PersistGate>
) : (
<Provider store={store}>
<ToastProvider>
<Component {...pageProps} />
</ToastProvider>
</Provider>
);