next.js - 元标记未显示在 Next.js 的查看源代码中

问题描述

我正在尝试使用 getInitialProps 或 getServerSideProps（一个一个地使用）添加元，我能够设置元标记，当我检查页面时它像往常一样显示元标记，但是当我打开查看源代码时它不是显示，我错过了什么。

导航栏代码：

<Head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossOrigin="anonymous" referrerPolicy="no-referrer" />
                <link rel="preconnect" href="https://fonts.googleapis.com"/>
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/>
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
            </Head>
            <Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></Script>
            <Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></Script>
            <Script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></Script>
//Navigation bar code here

../../partials/SEO.js ：

import Head from 'next/head'
const Meta = (props) => (      
    <Head>
        <title>{props.title}</title>
        <meta name="description" content="" />
        <meta property="og:type" content="website" />
        <meta name="og:title" property="og:title" content="" />
        <meta name="og:description" property="og:description" content={props.desc} />
        <meta property="og:site_name" content="" />
        <meta property="og:url" content="" />  
        <meta name="twitter:card" content="summary" /> 
        <meta name="twitter:title" content="" />
        <meta name="twitter:description" content={props.desc} />
        <meta name="twitter:site" content="" />
        <meta name="twitter:creator" content="" />
        {/* <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
        <link rel="apple-touch-icon" href="/static/images/favicon.ico" />
        <link rel="stylesheet" href="" /> */}
        <meta property="og:image" content="" />  
        <meta name="twitter:image" content="" />   
        {/* <link rel="canonical" href="" /> */}
        {/* <script type="text/javascript" src="" ></script> */}
    </Head>
)
export default Meta

单品页面：

SingleProduct.getInitialProps = async (context) => {
  const { query } = context
  const { id, categoryId } = query
  var json ={
    _id : id
  }
  try{
    const respones = await fetch(Constants.getProducts, {
      method: 'POST',
      headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
      },
      
      body: JSON.stringify(json),
      });
      const result = await respones.json();
      console.log(result);
      return {
           result:  result.doc[0],
           meta_title: result.doc[0].meta_title,
           meta_desc: result.doc[0].meta_description, 
           categoryId : categoryId,
           status : 200
        }
      // return{
      //   props : {result : result.doc[0], categoryId : categoryId , status : 200}
      // }
  } catch(e){
    return {
       result: result,
       meta_title: '',
       meta_desc: '', 
       categoryId : categoryId,
       status : 404
    }
    // return{
    //   props : {result : result, categoryId : categoryId , status : 404}
    // }
  }
  
}

并作为回报功能设置头：

{singleProductData !== null ?
      <Meta 
        title={singleProductData.name+' | ARC India'}
        desc={singleProductData.meta_description}
      />  :
      ''
    }

有人可以知道这里有什么问题吗？

标签： next.jsmeta-tags

next.js - 元标记未显示在 Next.js 的查看源代码中

问题描述

解决方案

推荐阅读