Cómo agregar los Meta Tags de las Redes Sociales en WP sin plugins!

Cómo agregar los Meta Tags de las Redes Sociales en WP sin plugins!
24 noviembre, 2014 Leandro Padula

Existen varios plugins para agregar los meta tags necesarios en nuestro sitio WordPress, para que cuando la gente comparta nuestras páginas o artículos estos se vean correctamente.

function insert_social_networks_meta_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
	//G+
	echo '<meta itemprop="name" content="' . get_the_title() . '"/>';
	echo '<meta itemprop="description" content="' . $post->post_content . '"/>';
	//Twitter
	echo '<meta name="twitter:card" content="summary_large_image"/>';
	echo '<meta name="twitter:site" content="SITE_NAME"/>';
	echo '<meta name="twitter:title" content="' . get_the_title() . '"/>';
	echo '<meta name="twitter:description" content="' . $post->post_content . '"/>';
	echo '<meta name="twitter:creator" content="@author_handle"/>';
	//FB
	echo '<meta property="fb:admins" content="FB_USER_ID"/>';
	echo '<meta property="og:title" content="' . get_the_title() . '"/>';
	echo '<meta property="og:type" content="article"/>';
	echo '<meta property="og:url" content="' . get_permalink() . '"/>';
	echo '<meta property="og:site_name" content="SITE_NAME"/>';
	echo '<meta property="og:description" content="' . $post->post_content . '"/>';
	if(!has_post_thumbnail( $post->ID )) { //use a default image
		$default_image="http://www.DOMAIN.com/wp-content/images/default.png";
		echo '<meta property="og:image" content="' . $default_image . '"/>';
		echo '<meta itemprop="image" content="' . $default_image . '"/>';
	}
	else{
		$thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
		echo '<meta property="og:image" content="' . str_replace(' ', '%20', $thumb_src[0] ) . '"/>';
		echo '<meta itemprop="image" content="' . str_replace(' ', '%20', $thumb_src[0] ) . '"/>';
	}
	echo "";
}
add_action( 'wp_head', 'insert_social_networks_meta_in_head', 5 );

Si por algún motivo queremos independizarnos del uso del plugin podremos usar el siguiente código.

Para obtener el FB_USER_ID, vamos a la siguiente URL: http://graph.facebook.com/syedbalkhi y reemplazamos syedbalkhi con nuestro propio usuario.

Herramientas de Testeo y Validación

Twitter Validation Tool

https://dev.twitter.com/docs/cards/validation/validator

Antes de mostrar tu tarjetas en Twitter, debés tener tu dominio aprobado. Afortunadamente esto es un proceso muy fácil. Después de implementar tus tarjetas, sólo resta ingresar tu URL de ejemplo en la herramienta de validación. Luego de checkear el marcado, seleccioná el botón “Ingresar para aprovación”.

Facebook Debugger

https://developers.facebook.com/tools/debug

No es necesario tener una aprobación previa de tu meta información para ser mostrada en Facebook, pero la herramienta de “debugging” (depuración) te ofrece una gran cantidad de información acerca de todas tus tags y también puede analizar las de Twitter.

Google Structured Data Testing Tool

http://www.google.com/webmasters/tools/richsnippets

Webmasters utilizan normalmente la herramienta de prueba de datos estructurados para analizar la autoría y la vista previa de cómo apareceran los fragmentos en los resultados de búsqueda, pero vos también podés ver qué otros tipos de meta información que Google puede extraer de cada página.

Pinterest Rich Pins Validator

http://developers.pinterest.com/rich_pins/validator/

Al igual que Twitter, Pinterest requiere un proceso de aprobación para habilitar la funcionalidad Rich Pin. Usá la herramienta de validación para evaluar tu información de marcado y solicitar una aprobación al mismo tiempo.

Más información

Passionate about the web, entrepreneur, gamer and co-founder of Broobe.

1 Comentario

  1. Ines 4 años hace

    Muy bueno!

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*