head tag not appearing in view source : next:js

user_17513486 0
Viewed 2047

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

enter image description here

next.js reactjs
5 Answers

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>
    )
}
user_29722730

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.

user_114218390

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

user_169639770

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>
  );
};
user_82373880

I had the same problem, re-launching a new tab with localhost:3000 solved the issue in my case.

user_89680810
Related