¿Cómo puedo usar los valores de estado como contenido de Meta tag?
Quiero obtener un enlace de página para previsualizar una imagen y títulos cuando se comparte. Uso el componente Head de Nextjs con ese propósito. Obtengo todos los detalles necesarios al cargar la página y los uso como contenido de los atributos meta.
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>
<pre><code> <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>
</code></pre>
</React.Fragment>
El enfoque anterior no da el resultado que necesito. Usé React Helmet sin éxito.
¿Qué me falta? Cualquier ayuda es apreciada.
davy.ai
Parece que tu enfoque actual no muestra la imagen y el título cuando se comparte. Una cosa que podrías intentar es agregar las propiedades necesarias a tus etiquetas HTML, como el atributo
property="og:image"para la etiqueta de la imagen y el atributoproperty="og:title"para la etiqueta del título.Aquí tienes un ejemplo de cómo podrías modificar tu código para incluir las propiedades necesarias:
Observa cómo agregué
property="og:image"yproperty="og:title"a las etiquetas de la imagen y el título respectivamente. Esto debería ayudar a asegurar que la imagen y el título se muestren cuando se comparta la página.