当前位置： 文江博客话题详情

为什么使用NextJS Head和GetStaticProps未正确返回我的元数据？

发布于 2025-02-13 21:58:56 字数 8671 浏览 3 评论 0原文

遇到了使我的元标记与NextJ正常工作的问题。 这是一个在线页面： https://www.acaciapp.com/action/alimentation/eviter-boire-boire-jus-fruits-presses/o4tkfjvta1c1b8xzfc3j 该信息填充在Head Tag上，但没有被社交媒体解析（使用 https://www.opengraph.xyz/ 例如）=＆gt;它不会返回标题，描述，也不会返回OG：Image。

这是我的代码：

_app.js

export default function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
        <meta name="author" content="Maxime Courtaigne" />
        <title key="title">acacia.</title>
      </Head>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <AuthProvider>
            <ActionProvider>
              <ObjectiveProvider>
                <PointsProvider>
                  {/* <PercentProvider> */}
                    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                    <CssBaseline />
                    <Component {...pageProps} />
                  {/* </PercentProvider> */}
                </PointsProvider>
              </ObjectiveProvider>
            </ActionProvider>
          </AuthProvider>
        </ThemeProvider>
      </StyledEngineProvider>
        
    </CacheProvider>
  );
}

_document.js：

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="fr">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="shortcut icon" href="/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Karla:wght@300;400;600;800&display=swap"
          />
          {/* Inject MUI styles first to match with the prepend: true configuration. */}
          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

特定页面：

function Action({actionData, actionId, params}) {
  // some functions, etc..
  
  return (
        <div className={styles.actionPage}>

            <Meta 
                title={`${actionData.title} | acacia`}
                desc={actionData.description.substring(0,150)}
                canonical={`https://www.acaciapp.com/action/${params.category}/${params.slug}/${params.id}`}
            />
            
            // Some content
       </div>

}

元组件：

// Header of every page
import Head from "next/head"
import Script from "next/script"

function Meta(props) {
    return (
        <Head>
            <title >{props.title}</title> {/* 40-50 char */}
            <meta name="description" content={props.desc} /> {/* 150-160 char */}
            <meta property="og:type" content="website" />
            {props.canonical && <link rel="canonical" href={`${props.canonical}`} key="canonical" />}
            <meta name="og:title" property="og:title" content={props.title} />
            <meta name="og:description" property="og:description" content={props.desc} />
            <meta property="og:site_name" content="acacia" />
            <meta property="og:url" content={`${props.canonical}`} />  
            <meta name="twitter:card" content="summary" /> 
            <meta name="twitter:title" content={props.title} />
            <meta name="twitter:description" content={props.desc} />
            <meta name="twitter:site" content="@acacia_app" />
            <meta name="twitter:creator" content="@acacia_app" />
            <link rel="icon" type="image/png" href="/favicon.ico" />
            <link rel="apple-touch-icon" href="/favicon.ico" />
            {props.image ? 
                (<meta property="og:image" content={`${props.image}`} />) : 
                (<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/acacia-44ebf.appspot.com/o/ogImages%2Fog-home.png?alt=media&token=81fc5d4e-db1b-4cd2-93ff-cbb27f8b8753" />)} 
            {props.image && <meta name="twitter:image" content={`${props.image}`} />}
            {props.robot && <meta name="robots" content={props.robot} />}
            {props.css && <link rel="stylesheet" href={`${props.css}`}/>}
            {props.js && <Script type="text/javascript" src={`${props.js}`} />}
        </Head>
    )
}

export default Meta

这是__ Document还是__App的过度问题？我应该添加“键”标签？ 谢谢 ！

- - - 编辑 - - - 我认为问题来自_____________________________。这是代码：

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../utility/theme';
import createEmotionCache from '../utility/createEmotionCache';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="fr">
        <Head>
          {/* PWA primary color */}
          <meta charSet="utf-8" />
          <meta key="robots" name="robots" content="index, follow" />
          <meta key="themeColor" name="theme-color" content={theme.palette.primary.main} />
          <link key="shortcutIcon" rel="shortcut icon" href="/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Karla:wght@300;400;600;800&display=swap"
          />
          {/* Inject MUI styles first to match with the prepend: true configuration. */}
          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const originalRenderPage = ctx.renderPage;

  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) =>
        function EnhanceApp(props) {
          return <App emotionCache={cache} {...props} />;
        },
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents emotion to render invalid HTML.
  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    emotionStyleTags,
  };
};

原文

Running into an issue with getting my meta tags working properly with NextJS.
Here is an online page : https://www.acaciapp.com/action/alimentation/eviter-boire-jus-fruits-presses/O4tkFjvta1c1B8XzFC3j
The info is populated on the head tag but is not parsed by social media (using https://www.opengraph.xyz/ for example) => it does not return the title, nor the description, nor the og:image.

Here is my code :

_app.js

export default function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
        <meta name="author" content="Maxime Courtaigne" />
        <title key="title">acacia.</title>
      </Head>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <AuthProvider>
            <ActionProvider>
              <ObjectiveProvider>
                <PointsProvider>
                  {/* <PercentProvider> */}
                    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                    <CssBaseline />
                    <Component {...pageProps} />
                  {/* </PercentProvider> */}
                </PointsProvider>
              </ObjectiveProvider>
            </ActionProvider>
          </AuthProvider>
        </ThemeProvider>
      </StyledEngineProvider>
        
    </CacheProvider>
  );
}

_document.js :

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="fr">
        <Head>
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="shortcut icon" href="/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Karla:wght@300;400;600;800&display=swap"
          />
          {/* Inject MUI styles first to match with the prepend: true configuration. */}
          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

A specific page :

function Action({actionData, actionId, params}) {
  // some functions, etc..
  
  return (
        <div className={styles.actionPage}>

            <Meta 
                title={`${actionData.title} | acacia`}
                desc={actionData.description.substring(0,150)}
                canonical={`https://www.acaciapp.com/action/${params.category}/${params.slug}/${params.id}`}
            />
            
            // Some content
       </div>

}

The Meta component :

// Header of every page
import Head from "next/head"
import Script from "next/script"

function Meta(props) {
    return (
        <Head>
            <title >{props.title}</title> {/* 40-50 char */}
            <meta name="description" content={props.desc} /> {/* 150-160 char */}
            <meta property="og:type" content="website" />
            {props.canonical && <link rel="canonical" href={`${props.canonical}`} key="canonical" />}
            <meta name="og:title" property="og:title" content={props.title} />
            <meta name="og:description" property="og:description" content={props.desc} />
            <meta property="og:site_name" content="acacia" />
            <meta property="og:url" content={`${props.canonical}`} />  
            <meta name="twitter:card" content="summary" /> 
            <meta name="twitter:title" content={props.title} />
            <meta name="twitter:description" content={props.desc} />
            <meta name="twitter:site" content="@acacia_app" />
            <meta name="twitter:creator" content="@acacia_app" />
            <link rel="icon" type="image/png" href="/favicon.ico" />
            <link rel="apple-touch-icon" href="/favicon.ico" />
            {props.image ? 
                (<meta property="og:image" content={`${props.image}`} />) : 
                (<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/acacia-44ebf.appspot.com/o/ogImages%2Fog-home.png?alt=media&token=81fc5d4e-db1b-4cd2-93ff-cbb27f8b8753" />)} 
            {props.image && <meta name="twitter:image" content={`${props.image}`} />}
            {props.robot && <meta name="robots" content={props.robot} />}
            {props.css && <link rel="stylesheet" href={`${props.css}`}/>}
            {props.js && <Script type="text/javascript" src={`${props.js}`} />}
        </Head>
    )
}

export default Meta

Is it an overide issue with __document or __app ? should I add "key" tags ?
Thanks !

----- EDIT -----
I think the issue comes from the __document initial rendering method that is quite inunderstandable for me :/. Here is the code :

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../utility/theme';
import createEmotionCache from '../utility/createEmotionCache';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="fr">
        <Head>
          {/* PWA primary color */}
          <meta charSet="utf-8" />
          <meta key="robots" name="robots" content="index, follow" />
          <meta key="themeColor" name="theme-color" content={theme.palette.primary.main} />
          <link key="shortcutIcon" rel="shortcut icon" href="/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Karla:wght@300;400;600;800&display=swap"
          />
          {/* Inject MUI styles first to match with the prepend: true configuration. */}
          {this.props.emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const originalRenderPage = ctx.renderPage;

  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) =>
        function EnhanceApp(props) {
          return <App emotionCache={cache} {...props} />;
        },
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents emotion to render invalid HTML.
  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    emotionStyleTags,
  };
};

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

污味仙女 2025-02-20 21:58:57

找到了解决方案。它与__ Document或__App中的渲染方法无关。
GetStaticProps和GetServersideProps实际上并没有在动态页面中有条件渲染，因此没有呈现适当的HTML。

我在做：

if (loadingUser) return <Loader/>
return (
  // main render of the page
)

通过删除此条件渲染，一切正常

Found out the solution. It has nothing to do with the render method within __document nor __app.
The getStaticProps and getServerSideProps was actually not rendering the proper HTML because of a conditional rendering in the dynamic page.

I was doing:

if (loadingUser) return <Loader/>
return (
  // main render of the page
)

By deleting this conditional rendering, everything is working perfectly

回复 原文
~没有更多了~

关于作者

怀里藏娇

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文