0

He diseñado una página en angular y todo funciona muy bien, pero al hacer una vista previa no aparece nada en WhatsApp, Facebook, Twitter, en este momento estoy haciendo pruebas de socialsharepreview y me sale un error https://socialsharepreview.com/?url=https://yoelijo.com.co/

Aquí está el index.html de mi página

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Yo Elijo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/images/yoelijo.png">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- HTML Meta Tags -->
<meta name="description" content="Haga click para responder la encuesta">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://yoelijo.com.co/poll/">
<meta property="og:type" content="website">
<meta property="og:title" content="Responde la Encuesta">
<meta property="og:description" content="Haga click para responder la encuesta">
<meta property="og:image" content="https://yoelijo.com.co/assets/images/yoelijo.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="https://yoelijo.com.co/poll/">
<meta name="twitter:title" content="Responde la Encuesta">
<meta name="twitter:description" content="Haga click para responder la encuesta">
<meta name="twitter:image" content="https://yoelijo.com.co/assets/images/yoelijo.png">

</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

Agradezco su colaboración

1
  • cabe mencionar que en las rutas para las imagenes, en algunos servidores es mejor subir el link directo desde la web, es decir, la que ya esta cargada y no con rutas relativas dentro de los archivos del servidor. Commented el 7 jun. a las 4:16

1 respuesta 1

2

Dentro de la etiqueta HEAD de tu html te faltan cabeceras para poder realizar lo que quieres, que salga como una especie de carta cuando compartas por facebook, tweeter, whatsapp, etc...

<!-- FACEBOOK Open Graph === -->
<meta property="og:type" content="website" />
<!-- <meta property="og:type" content="article" />  PARA ARTÍCULOS  -->
<meta property="og:title" content="Titulo" />
<meta property="og:description" content="Descripcion" />
<meta property="og:image" content="Ruta de una imagen"/>
<meta property="og:image:width" content="800" /><!-- Importante -->
<meta property="og:image:height" content="418" /><!-- Importante -->
<meta property="og:url" content="url de la web" />
<meta property="og:site_name" content="site name" /> 

<meta property="fb:app_id" content="330307617951079"/>  

<!-- TWITTER Open Graph === -->
<meta name="twitter:card" value="summary">
<meta name="twitter:title" content="title"/> 
<meta name="twitter:description" content="descripcion" />
<meta name="twitter:image" content="ruta de una imagen"/> 
<meta name="twitter:image:src" content="ruta de una imagen"/> 

<meta property="og:title" content="title"/> 
<meta property="og:type" content="website" />
<meta property="og:url" content="url de la web" />
<meta property="og:image" content="imagen"/> 
<meta property="og:description" content="Descripcion." /> 

<meta name ="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="url de la web" />
<meta name="twitter:site" content="@Nombre de la cuenta de twitter">

Espero que te haya sido de ayuda. Donde pongo url de la web quiero decir la url entera, https://myweb.com/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.