Al compartir un contenido de una web en Facebook y Twitter podemos definir la información que aparecerá en cada uno de los timelines: el título, un resumen del contenido, una imagen, incluso algo de información sobre el autor. Para Facebook basta con añadir unas cuantas etiquetas meta que definan estos contenidos; en el caso de Twitter hay que hacer además una petición para que concedan al dominio la capacidad de generar lo que han llamado cards, el sistema que permite añadir información a los tuits, más allá de los 140 caracteres.
Lo interesante es generar estas etiquetas de manera dinámica usando las funciones de WordPress, para que se adapten al contenido de cada página de nuestra web.
Meta etiquetas para Facebook
Facebook utiliza el protocolo Open Graph. En la web del proyecto está disponible la documentación con todas las opciones. Las etiquetas básicas definen el tipo de contenido, el título y la descripción de la página, una imagen y la URL canónica de la página que se comparte. Por ejemplo, para esta entrada:
<meta property="og:title" content="Etiquetas meta en la cabecera de tu WordPress para compartir correctamente tu blog en Facebook y Twitter" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://voragine.net/weblogs/etiquetas-meta-en-la-cabecera-de-tu-wordpress-para-compartir-correctamente-tu-blog-en-facebook-y-twitter" /> <meta property="og:image" content="https://voragine.net/favicon.ico" /> <meta property="og:description" content="Al compartir un contenido de una web en Facebook y Twitter podemos definir la información que aparecerá en cada uno de los timelines: el título, un resumen del contenido, una imagen, incluso algo de información sobre el autor. Para Facebook basta con añadir unas cuantas etiquetas meta que de" />
Meta etiquetas para Twitter
En la página de Twitter Cards podemos encontrar los pasos a seguir para solicitar cards para nuestro sitio, una vez hayamos iniciado sesión en Twitter developers con nuestro usuario de Twitter. Generalmente Twitter tarda en responder un par de días. Si la respuesta es afirmativa, tras incluir las etiquetas meta adecuadas, nuestro sitio tendrá cards. Por ejemplo:
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@skotperez"> <meta name="twitter:title" content="Etiquetas meta en la cabecera de tu WordPress para compartir correctamente tu blog en Facebook y Twitter" /> <meta name="twitter:description" content="Al compartir un contenido de una web en Facebook y Twitter podemos definir la información que aparecerá en cada uno de los timelines: el título, un resumen del contenido, una imagen, incluso algo d" /> <meta name="twitter:creator" content="@skotperez">
Actualización 16 junio 2015. Ya no es necesario solicitar la aprobación de Cards: el proceso es automático y requiere validación por parte de Twitter.
Genración dinámica de las etiquetas con funciones de WordPress
El siguiente código genera el contenido para las etiquetas meta específicas para Facebook y Twitter, pero también las genéricas para buscadores:
<?php // metatags generation
if ( is_single() || is_page() ) {
$metadesc = $post->post_excerpt;
if ( $metadesc == '' ) { $metadesc = $post->post_content; }
$metadesc = wp_strip_all_tags( $metadesc );
$metadesc = strip_shortcodes( $metadesc );
$metadesc_fb = substr( $metadesc, 0, 297 );
$metadesc_tw = substr( $metadesc, 0, 200 );
$metadesc = substr( $metadesc, 0, 154 );
$metatit = $post->post_title;
$metatype = "article";
} else {
$metadesc = get_bloginfo('description');
$metadesc_tw = $metadesc;
$metadesc_fb = $metadesc;
$metatit = get_bloginfo('name');
$metatype = "blog";
}
$metaperma = get_permalink();
?>
Y el siguiente lo incluye adecuadamente en las etiquetas meta:
<!-- generic meta --> <meta content="Alfonso Sánchez Uzábal" name="author" /> <meta name="title" content="<?php echo $metatit ?>" /> <meta content="<?php echo $metadesc ?>" name="description" /> <meta content="software libre, open software, software de codigo abierto, datos libres, open data, wordpress, desarrollo web, HTML5, processing, Linux, Debian" name="keywords" /> <!-- facebook meta --> <meta property="og:title" content="<?php echo $metatit ?>" /> <meta property="og:type" content="<?php echo $metatype ?>" /> <meta property="og:description" content="<?php echo $metadesc_fb ?>" /> <meta property="og:url" content="<?php echo $metaperma ?>" /> <!-- twitter meta --> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@skotperez"> <meta name="twitter:title" content="<?php echo $metatit ?>" /> <meta name="twitter:description" content="<?php echo $metadesc_tw ?>" /> <meta name="twitter:creator" content="@skotperez">
16 comentarios
exelente aporte…..
Falta un ? en el código «<php", debería ser "<?php"
Gracias por el tutorial.
No hace falta que publiques este comentario
Para añadir imágenes:
Añadir al código de arriba la variable $metaimage:
$metaimage = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘medium’);
Y en las etiquetas meta «twitter:image:src»:
<meta name="twitter:image:src" content="»>
Gracias por la corrección y el código para las imágenes.
Gracias por el post. Me ha quitado dudas que tenía sobre las meta de twitter.
Buen aporte Sr. Spam.
De nada, Alberto. Me alegro de que te haya sido útil.
La línea 5 del código php debe ser:
$metadesc = wp_strip_all_tags($metadesc);
y no
$metadesc = wp_strip_all_tags($post->post_content);
Si no, el post content sobre escribe al excerpts del post en un single.
Gracias por la corrección, numeroteca. Código actualizado.
Hola, tengo un percance con mi wordpress y creo que esto tiene mucho que ver, cuando comparto en facebook o en google+ cualquier artículo aparece siempre la misma imagen y solo el nombre del blog, estas líneas de código que se incorporarían en el header.php dentro del tema en cuestión? O dentro del single.php? La verdad es que me estaba peleando con esto …Saludos y gracias de antemano
Hola Alejandro,
tienes que añadir el código en el header.php, ya que tiene que ir dentro de la etiqueta head de la página.
Hola, gracias por la rápida respuesta, voy a contrarreloj para sacar la web a tiempo jeje, pues la verdad es que ya he puesto el código en el header.php del tema y nada, lo curioso es que cambio de template y tampoco comparte bien siempre lo hace de la misma manera..tengo experiencia en otros cms pero en wordpress es de las primeras veces que comienzo así que ando algo pez jeje aunque rápidamente me pongo al día. Seguiré probando a ver porque no me coge lo que le mando en ese archivo, seguiré comunicando por aquí.! Saludos
Lo raro es que si lo pongo escrito a mano si aparece, pero si lo escribo con las variables no hace caso, miro el código fuente generado de la página en concreto y me salen los campos vacíos es decir que no recoge valores de las variables..
Este código lo inserto en el archivo header.php y justo antes de
Creo que es el sitio correcto ¿no?
Saludos
Novedades, he conseguido que me coga los valores, y entonces he probado nuevamente con otro tema, y funciona , pero con el que quiero me sigue saliendo ese problema,,siempre me aparece el titulo del blog, ,la imagen predeterminada del blog y entonces ahora me va tocar buscar de que archivo me está cogiendo eso en la plantilla…
( me ha tocado reprogramarla casi toda.. jaja) así que a ver si encuentro pues.
Saludos
Alejandro, puede deberse a cómo estés invocando el loop de WordPress en cada página, o a otros motivos.
Difícil de determinar sin ver el código. Si no consigues resolverlo, me puedes contactar por mail. Te envío un correo a la dirección con la que te has comentado.
¡Grandioso post! Pero tengo una duda, es posible eliminar el contenido que aparece en un botón de compartir y que SOLO obtenga el contenido de un campo dentro del post? Ahí se le ponen la liga… es que actualmente me imprime mi campo personalizado + url del post + url del sitio, y quiero eliminar los últimos dos puntos.
Dentro de mi campo personalizado pongo con notas la url del post
Hola Jose,
¿te refieres al botón de compartir en Facebook o en Twitter? Para cada red social la etiqueta que define el contenido es diferente, como puedes leer en el post.