个人中心
gpt4 book ai didi

reactjs - Next JS - 源代码中缺少元标记

转载 作者：行者123 更新时间：2023-12-04 13:13:36 24 4
gpt4 key购买 nike

我已经安装了多个元标签，例如标题、描述、关键字等。
但是，它没有在查看源代码中显示这些标签。因此 Facebook 共享卡不起作用(我已经安装了 og 标签，但它们似乎在 Facebook 的 Scraper 或我的 View 源中找不到。但是它填充在客户端幻灯片上。
我的头部格式(在客户端检查/开发工具中显示标签但不在查看源代码中):

import Head from 'next/head';

export default () => (
  <>
    <Head>
      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
    </Head>
    <Header />
    <Body />
    <Footer />
  </>
)
输出(编辑页面 Prop ): 

<!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>

最佳答案

问题似乎来自禁用 SSR 的 Redux Persist。禁用 PersistGate 服务器端似乎可以解决这个问题。

Github Issue Link

return process.browser ? (
        <PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
            <ToastProvider>
                <Component {...pageProps} />
            </ToastProvider>
        </PersistGate>
    ) : (
            <Provider store={store}>
                <ToastProvider>
                    <Component {...pageProps} />
                </ToastProvider>
            </Provider>
        );

关于reactjs - Next JS - 源代码中缺少元标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62397674/

24 4 0
文章推荐： mysql - MySQL 中并发工作人员的原子读取和更新
文章推荐： ssh - sudo_user 的 Ansible 和 ForwardAgent
文章推荐： firefox - 如何清理Vimperator搜索要点
文章推荐： python - 使用背景填充向 Bokeh 图添加文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com