next.js 为什么使用nextjs Head和getStaticProps不能正确返回我的元数据？

在NextJS中使用 meta标记时遇到问题。这里是一个在线页面：https://www.acaciapp.com/action/alimentation/eviter-boire-jus-fruits-presses/O4tkFjvta1c1B8XzFC3j信息被填充在head标签上，但不被社交媒体解析（例如使用https://www.opengraph.xyz/）=〉它不返回标题，也不返回描述，也不返回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>
  );
}

_文档. 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>

}

meta组件：

// 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的覆盖问题吗？我应该添加“key”标签吗？谢谢！
----- EDIT -----我觉得问题出在__document的初始呈现方法上，这个方法我很难理解：/.代码如下：

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,
  };
};

next.js 为什么使用nextjs Head和getStaticProps不能正确返回我的元数据？

1条答案

相关问题

热门标签

最新问答