Estoy dinámicamente cambiar mi <meta property="og:image" content="#"> y <meta property="og:title" content="#"> etiquetas usando jQuery (abajo). Cuando veo el código a través de ‘inspeccionar’ en Chrome, las etiquetas han sido cambiada con éxito.

HTML:

<meta property="og:title" content="#">
<meta property="og:image" content="#">

jQuery:

$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);

Pero la Facebook herramienta de depuración sigue mostrando content="#" para cada uno. Estoy asumiendo que esto es debido a que Facebook se lee el código fuente, antes de que Javascript tiene una oportunidad para reemplazar el contenido.

Hay una forma de evitar esto?

Gracias.

InformationsquelleAutor user1661677 | 2015-12-15

3 Comentarios

  1. 11

    Facebook no analizar con JavaScript, usted no puede utilizar dinámica de etiquetas Open Graph. No tiene realmente sentido para cambiarlos sobre la marcha de todos modos.

    Sólo puede cambiar la OG etiquetas de forma dinámica en el servidor, obviamente. Por ejemplo: https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

    <meta property="og:title" content="<?php echo $_GET['title'];?>">

    No estoy seguro si eso es lo que quieres hacer, sin embargo, la URL se ve bastante feo de esa manera. Reescribir sería bueno, por supuesto.

    También es posible que desee probar algo como prerender.io, pero no estoy seguro de si va a manejar dinámica og etiquetas.

    • Yo ya sabía esto. Mi pregunta era para ‘evitar’ mi problema. Un montón de sitios de hacerlo, debe haber una manera.
    • no hay ninguna manera alrededor, facebook no acabo de analizar javascript. ¿en qué sitio está haciendo?
    • No estoy diciendo que tengo que usar Javascript para lograr esto. Debe haber una manera de cargar dinámicamente <meta> etiquetas. Vimeo, Youtube, prácticamente en cualquier sitio de alojamiento de vídeo como el que funciona a la perfección con el FB. Supongo que se está utilizando PHP para crear una nueva página para cada vídeo subido?
    • sí, pero eso es exactamente mi punto. eso no es dinámico en el cliente. por supuesto, usted puede hacer lo que quiera con php en el servidor. no está seguro de cuál es la pregunta a continuación.
    • se ha añadido más información a mi respuesta. sería de gran ayuda, aunque si lo iba a publicar un caso de uso de qué es exactamente lo que estamos tratando de lograr. por ejemplo, en youtube se lleva el video clave como parámetro get y muestra og etiquetas de acuerdo con el video. eso es nada de lujo, sus básicos de php.
    • gracias por tu ayuda @luschn. No estoy muy familiarizado con php, pero soy capaz de hackear mi camino a través de él cuando sea necesario. Así que simplemente tirando de vars de los parámetros de la URL a través de PHP, lo haría en el lado del servidor, antes de que la carga de la página..? Que luego permitirá FB para leer las etiquetas meta?
    • por supuesto, para facebook, no habrá diferencia a una página html estática. eso es lo que php funciona, solo echo las cosas. he añadido un ejemplo.
    • Un millón de gracias. Cómo se podría ir sobre la reescritura de la URL después de que el PHP se ejecuta? Porque mi url podría ser de 150 caracteres… de Youtube se ve como esto: https://www.youtube.com/watch?v=ID9DkRzH1qE
    • eso es un poco fuera de alcance, intente buscar en google para «apache reescribir», hay un montón de información acerca de la reescritura de la url. yo no creo que sería una buena idea de todos modos, ya que todavía tiene que añadir toda la descripción y puede ser muy largo. era sólo una idea, sino una mala. youtube lleva la clave de vídeo, se ve en su base de datos y obtiene las etiquetas.
    • ahh, ya veo. Gracias por toda la ayuda!
    • si usted downvote algo por favor comente por qué. mi respuesta es 100% correcto, pero estoy feliz de mejorar si falta algo.
    • Hy @luschn no puedo hacer nada en el backend. Tengo que hacer todo en el lado del cliente.
    • es imposible hacerlo con javascript, im miedo
    • de nuevo un downvote. por favor comentar si algo no es correcto, por lo que puedo mejorar en mi respuesta si es necesario…

  2. 0

    Probar esto funcionó para mí.

    <?php
    $params = array();
    if(count($_GET) > 0) {
    $params = $_GET;
    } else {
    $params = $_POST;
    }
    //defaults
    if($params['type'] == "") $params['type'] = "restaurant";
    if($params['locale'] == "") $params['locale'] = "en_US";
    if($params['title'] == "") $params['title'] = "default title";
    if($params['image'] == "") $params['image'] = "thumb";
    if($params['description'] == "") $params['description'] = "default description";
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Open Graph meta tags -->
    <meta property="fb:app_id" content="MY_APP_ID" />
    <meta property="og:site_name" content="meta site name"/>
    <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
    <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
    <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
    <meta property="og:title" content="<?php echo $params['title']; ?>"/>
    <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
    <meta property="og:description" content="<?php echo $params['description']; ?>"/>
    </head>
    </html>
  3. 0

    Como se dijo anteriormente, Facebook no analizar con JavaScript.

    Una forma de hacerlo (la manera en que lo hago) es el uso de un prerendering servicio como prerender.io a preparar sus páginas y redirigir las peticiones procedentes de los rastreadores web para que prerendering servidor basado en el agente de usuario (usted puede encontrar fácilmente cómo hacerlo con su Nginx/servidor Apache en google).

    Prerendering servicios de producir un HTML/CSS de procesamiento de su página, pero que espere hasta que la página se ha cargado completamente, y el JavaScript se ejecuta antes de hacerlo. De esa manera, Facebook obtiene un render de su sitio web en el que se ha ejecutado JavaScript y el OpenGraph etiquetas están configurados correctamente!

    Prerender es de código abierto por lo que puede ejecutar su propio prerender server gratis!

Dejar respuesta

Please enter your comment!
Please enter your name here