Search code examples
reactjsnext.jsseometadata

NextJs Head Dosen't show correct data for Title any solutions?

hello im using NextJs <Head/> Tag from API , all meta tags work fine only the title meta doesn't show up correctly instead it shows the first H1 in page here's the code :

      <Head>
<title>{prop.content.meta.title}</title>
<meta name="title" key="title" content={prop.content.meta.title} />
<meta name="description" content={prop.content.meta.desc}/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://metatags.io/"/>
<meta property="og:title"  key="title" content={prop.content.meta.title}/>
<meta property="og:description" content={prop.content.meta.desc}/>
<meta property="og:image" content={prop.content.meta.image}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://metatags.io/"/>
<meta property="twitter:title"  key="title" content={prop.content.meta.title}/>
<meta property="twitter:description" content={prop.content.meta.desc}/>
<meta property="twitter:image" content={prop.content.meta.image}/>
      </Head>

all meta tags work perfectly tho the title is showing up in the Tab title but when I test the meta tags I don't get the title comming from the API but I get the first h1 from page , here's image : enter image description here

Note: I'm 100% sure that the title is coming from the API as it should be , and as I said it shows up correctly in {prop.content.meta.title} but not in Meta title

Solution

  • The issue was that I was testing the title with short words like 'Title1' and like that... so when I used a kinda long sentence it worked, the issue was meta title tag has a minimum size to work