为什么我的元数据无法使用 nextjs Head 和 getStaticProps 正确返回？

问题描述 投票：0回答：1

让我的元标签与 NextJS 一起正常工作时遇到问题。 这是一个在线页面：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>
  );
}

_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 的过度问题吗？我应该添加“关键”标签吗？ 谢谢！

----- 编辑----- 我认为问题来自 __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 seo meta-tags
1个回答
1
投票

找到解决方案。它与 __document 和 __app 中的 render 方法无关。 由于动态页面中的条件渲染，getStaticProps 和 getServerSideProps 实际上没有渲染正确的 HTML。

我在做：

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.