Quiero un enlace de página para obtener una vista previa de una imagen y títulos cuando se comparte. Usando el componente principal de Nextjs para ese propósito. Obtengo todos los detalles necesarios sobre la carga de la página y los uso como contenido de los metaatributos.
let campaign = this.state.campaignDetails; <React.Fragment> <Head> <title>{campaign!==null && campaign.title}</title> <meta name="title" content={campaign!==null && campaign.title}/> <meta name="description" content={campaign!==null ? campaign.description : undefined}></meta> <meta name="image" content={campaign!==null ? campaign.image : undefined}></meta> <meta property="og:title" content={campaign!==null ? campaign.title : undefined}/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="website"/> <meta property="og:url" content="https://website.com/"/> <meta property="og:image" content={campaign!==null ? campaign.image : undefined}/> <meta property="og:description" content={campaign!==null ? campaign.description : undefined}/> <meta name="twitter:card" content={campaign!==null ? campaign.image : undefined}/> <meta name="twitter:title" content={campaign!==null ? campaign.title : undefined}/> <meta name="twitter:description" content={campaign!==null ? campaign.description : undefined}/> <meta name="twitter:site" content="@website"/> <meta name="twitter:image" content={campaign!==null ? campaign.image : undefined}/> <meta name="twitter:creator" content="@website"/> </Head> <div></div> </React.Fragment>El enfoque anterior no hace lo que necesito. Usé el casco de reacción sin éxito. ¿Qué me estoy perdiendo? Cualquier ayuda es apreciada.
Proporcione un ejemplo de código completo para poder reproducir el problema. Suponiendo que en realidad está devolviendo un componente Head de Next.js, lo más probable es que el problema esté relacionado con la variable de su campaña, así que asegúrese de verificar que la campaña no sea nula o indefinida, como mencionó MD M Nauman.
import Head from 'next/head'; function YourPage() { const { campaign = {} } = this.state.campaignDetails; // Make sure this is not null or undefined! const { description, image } = campaign; const seo = { description, image }; return ( <div> <Head> <title>My page title</title> <meta name="description" content={seo.description} /> <meta name="image" content={seo.image} /> {/* ... */} </Head> <p>Hello world!</p> </div> ); } export default YourPage;También puedes consultar next-seo tal vez te ayude.