1

Lo que sucede es que por ejemplo, Facebook toma los metadatos estáticos del index.html y no los que actualiza angular-update-meta. Este es mi proyecto, pueden ver el código fuente, no está minificado: geekmox.com. En el Sharing Debugger de Facebook pueden verificar que los "meta tags" que elije son los del index.html y no los actualizados. Espero que puedan ayudarme, no se qué hacer.

Estos son los "Meta tags" estáticos que tengo en el index.html

<head>
<meta property="og:type" content="website">
<meta property="og:title" content="geekmox.com">
<meta property="og:description" content="Noticias sobre ciencia y tecnología en una interfaz minimalista y fácil de utilizar.">
<meta property="og:url" content="http://geekmox.com/news">
<meta property="og:image" content="http://geekmox.com/jpg/geekmox-og-cover.0.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@geekmox">
<meta name="twitter:title" content="geekmox.com">
<meta name="twitter:description" content="Noticias sobre ciencia y tecnología en una interfaz minimalista y fácil de utilizar.">
<meta property="twitter:image" content="http://geekmox.com/jpg/geekmox-og-cover.0.jpg">
</head>

Estos los tengo en la plantilla donde quiero que se actualicen los "meta tags", en este caso están en la plantilla de los artículos, ósea las noticias.

<update-meta property="og:type" content="article"></update-meta>
<update-meta property="og:title" content="{{item.title}}"></update-meta>
<update-meta property="og:description" content="{{item.description}}"></update-meta>
<update-meta property="og:url" content="http://geekmox.com/news/{{item.id}}"></update-meta>
<update-meta property="og:image" content="http://geekmox.com/{{item.images[0]}}"></update-meta>
<update-meta name="twitter:title" content="{{item.title}}"></update-meta>
<update-meta name="twitter:description" content="{{item.description}}"></update-meta>
<update-meta property="twitter:image" content="http://geekmox.com/{{item.images[0]}}"></update-meta>

Cuando abro la herramienta de desarrollo del navegador para ver el DOM puedo ver que los "meta tags" se actualizan correctamente, pero cuando comparto un enlace de una noticia por ejemplo en Facebook o twitter, la publicación aparece con los datos principales, cómo si "angular-update-meta" no los hubiera actualizado, pero si revisas el DOM de mi web si están actualizados.

3
  • 2
    Podrías editar tu pregunta e incluir el código donde manipulas los datos del meta y como incluyes envías los metadatos a facebook?
    – devconcept
    el 28 jul. 2016 a las 13:44
  • @devconcept eh actualizado la pregunta! Espero que me puedas entender. el 28 jul. 2016 a las 17:15
  • Creo que lo que está ocurriendo es que el sdk de facebook no se actualiza cuando se actualizan los meta, por eso es que debes incluir también ese fragmento del código.
    – devconcept
    el 28 jul. 2016 a las 19:05

1 respuesta 1

0

El crawler de Facebook no ejecuta el JavaScript de la página, por lo tanto AngularJS no puede hacer su magia y Facebook sólo lee los meta tags estáticos y no ve los valores que se actualizan desde JavaScript (que sí puedes ver inspeccionando la página cuando se ha cargado del todo).

Una posible solución requiere más que simple AngularJS: desde el back-end necesitarías rellenar esos valores en lugar de usando JavaScript. Como puedes ver en algunas soluciones online a este problema, una alternativa sería detectar si el cliente que pide la página es un crawler de Facebook (o Twitter, o Google+, o el que sea) y entonces redireccionarlo a una página que sí ponga los valores correctos en meta de manera "estática".

La idea es la siguiente:

  1. Crea una página con PHP/ASP/tu lenguaje back-end preferido que:
    1. Lea un parámetro identificando la página
    2. Obtenga los meta datos para la página indicada en el parámetro (p.e. de una base de datos)
    3. Escriba los meta tags (sin necesidad de poner nada en el body)
  2. Poner una regla de redirección en el servidor que:
    1. Compruebe el agente del usuario
    2. Si es algun crawler, lo redireccione a la página creada en el paso 1 pasando como parámetro la solicitud original

En las dos primeras soluciones enlazadas se menciona este código (para Apache) para detectar el crawler de Facebook/Twitter/Google+/Pinterest y redireccionar (lo he cambiado un poco y no lo he podido probar, así que puede que necesite algún retoque):

<ifModule mod_rewrite.c>
RewriteEngine On

# permitir que los crawlers de las redes sociales funcionen al redireccionarlos a una página creada en el servidor
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule ^(.*)$  http://www.miweb.com/crawlers/pagina-estatica.php?id=$1 [P]

</ifModule>

Que redireccionará los crawlers a tu página en http://www.miweb.com/crawlers/pagina-estatica.php pasándole como parámetro la URL original de la petición. En la página estática entonces leerías la URL, buscarías los datos (p.e. en una base de datos) y los mostraría.

El contenido de PHP podría ser así:

<?php

$id = $_GET["id"];

// buscar los datos en la base de datos a partir de $id,
// y guardarlos en variables $ogtitle, $ogdescription, $ogurl, etc.

?>
<!doctype html>
<html>
    <head>
        <meta property="og:type" content="<?php echo $ogtype; ?>">
        <meta property="og:title" content="<?php echo $ogtitle; ?>">
        <meta property="og:description" content="<?php echo $ogdescription; ?>">
        <meta property="og:url" content="<?php echo $ogurl; ?>">
        <meta property="og:image" content="<?php echo $ogimage; ?>">
    </head>
    <body>
    </body>
</html>
3
  • Saludos Alvaro, te agradezco la ayuda. Entiendo lo que me has explicado, pero tengo una duda del código PHP ¿En mi web cada noticia es un archivos JSON por separado, en ellos tengo toda la información de cada noticia, cómo puedo hacer para que el código PHP tome los datos de ellos? -No se nada de PHP, espero que puedas ayudarme- el 31 jul. 2016 a las 8:17
  • @AdrianoJosué Con PHP puedes leer el contenido de un fichero y pasarlo a un string usando file_get_contents() y después convertirlo a un array asociativo usando json_decode(). A partir de ahí sería muy parecido a como se hace con JavaScript
    – Alvaro Montoro
    el 31 jul. 2016 a las 14:18
  • Alvaro crees que implementando este ejemplo serviría en mi web? el 31 jul. 2016 a las 18:44

Tu Respuesta

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

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