'head tag not appearing in view source : next:js

i have created my next js appp where i have implemented my head tag but when i check the view source by right clicking i dont see my title and meta tags there how can i achive that?

eventhough the head tag is missing in view souce it can be found in inspect element

<Head>
                <title> {itm.Name} - wixten </title>
                <link rel="shortcut icon" href="/wixten.png" />
                <meta
                  name="viewport"
                  content="initial-scale=1.0, width=device-width"
                />
                <meta name="description" content={itm.Summary} />
                <meta charSet="utf-8" />
                <meta property="og:title" content={itm.Name} />
                <meta property="og:description" content={itm.Summary} />
                <meta property="og:image" content="images/wixten.png" />
                <meta property="og:locale" key="og:locale" content="en_US" />
                <meta property="og:type" key="og:type" content="website" />
                <meta
                  property="og:url"
                  key="og:url"
                  content={`${baseurl}${itm._id}`}
                />
              </Head>

i am adding full code in codesandbox

https://codesandbox.io/s/sweet-franklin-gpht9?file=/pages/index.js

the website i am faceing issue is this

https://wixten.com/query/61f4f5f9e41f700023c833c0

reactjs next.js

Solution 1:^[1]

Your title and meta tags aren't appearing in your source code because you're fetching them client-side, after the page loads.

In order to include them in the source code, they need to be fetched ahead of time, either through Server-Side Rendering (SSR) or through Static Site Generation (SSG). The Next docs cover these options thoroughly.

Assuming you want to go the SSR route, you'd do the following:

export async function getStaticProps(context) {
    const res = await axios.get(...);

    return {
        // will be passed to the page component as props
        props: {
            Item: res.data
        }, 
    }
}

Then you can use it in your component like this:

function MyPageComponent({ Item }) {
    return (
        <Head>
            <title>{Item.name}</title>
        </Head>
    )
}

Solution 2:^[2]

You have to call your head in the return otherwise it won't appear on the client side

Solution 3:^[3]

You can use Next.js Head to set the title

import Head from "next/head";
const Home = () => {
  return (
    <div>
      <Head>
        <title>your title</title>
      </Head>
     // code
    </div>
  );
};

Solution 4:^[4]

Just in case if anyone is facing the same issue like this, please check your _document.jsx to see if it matches the SSR requirements. If it is not set up then the meta tag won't show up.

You would need to include your meta tags there as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tim
Solution 2	sele-nap
Solution 3	Samarajya Shrestha
Solution 4	Terry Windwalker

'head tag not appearing in view source : next:js

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]