Menu
how to use NextHead in next js and set open graph tag. I am passing props from the detail page but It is not appearing in the source.
<NextHead>
<title>{title}</title>
<meta property="og:type" content="website"/>
<meta name="description" content={description}/>
<meta property="og:title" content={title}/>
<meta name="description" content={description}/>
<meta name="keywords" content={keyword}/>
<meta property="og:url" content={url}/>
<meta property="og:description" content={description}/>
<meta property="og:image" content={image}/>
</NextHead>
401
js. In the case of React, we need to install a package called react-helmet to add title and meta tags for each router component. Also, for adding routes or multiple pages in a react app, we need a package called react-router-dom.
This means that each page exists before being rendered by the browser client-side. In other terms, any web crawler can index them all effortlessly and treat them differently based on their content. So, Next. js is inherently an excellent tool to achieve great SEO performance.
You can see from the example here, next/head is imported and will add specific meta tag to the specific page.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPageIf this is not working, please provide the error message from your dev console. There should be some error that cause this approach not working.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
