Meta description y Open Graph en WordPress sin plugins de SEO

Los plugins de SEO hacen muchas cosas, pero para un blog o un sitio sencillo, lo que más se usa de ellos es poco: la meta description (el texto que aparece bajo el título en Google) y las etiquetas Open Graph (la vista previa con imagen cuando alguien comparte tu enlace en WhatsApp, Facebook, LinkedIn o X).

Si quieres un sitio más liviano, o simplemente entender qué hacen esos plugins, puedes generar ambas cosas con un mu-plugin.

Si ya usas un plugin de SEO, no agregues esto. Tendrías las etiquetas duplicadas. Esta guía es para quien quiere prescindir del plugin o no tiene ninguno.

La meta description

Google no siempre usa tu meta description (a veces elige un fragmento del texto que responde mejor a la búsqueda), pero cuando la usa, es tu oportunidad de convencer a alguien de hacer clic. Debe resumir la página en unos 150 caracteres.

En WordPress, el lugar natural para escribirla es el extracto de cada entrada (en el editor, en la barra lateral, Extracto). Si lo escribes pensando en Google, sirve para las dos cosas.

Open Graph

Cuando compartes un enlace, la aplicación lee estas etiquetas para armar la tarjeta:

• og:title: el título.
• og:description: la descripción.
• og:image: la imagen (idealmente de 1200×630).
• og:url y og:type.

Sin ellas, cada aplicación adivina, y el resultado suele ser una tarjeta sin imagen o con el logo cortado.

El mu-plugin

Guárdalo como wp-content/mu-plugins/cwp-meta-social.php:

<?php
/**
 * Plugin Name: Meta description y Open Graph (Curso WordPress)
 */

// Imagen por defecto si la página no tiene destacada (súbela a la biblioteca y pega su URL).
const CWP_OG_IMAGEN_DEFECTO = 'https://tudominio.cl/wp-content/uploads/compartir.jpg';

function cwp_meta_descripcion() {
	if ( is_singular() ) {
		$texto = has_excerpt() ? get_the_excerpt() : wp_trim_words( get_post_field( 'post_content', get_queried_object_id() ), 30, '' );
	} elseif ( is_category() || is_tag() || is_tax() ) {
		$texto = term_description();
	} else {
		$texto = get_bloginfo( 'description' );
	}
	$texto = trim( preg_replace( '/\s+/', ' ', wp_strip_all_tags( strip_shortcodes( (string) $texto ) ) ) );
	return mb_substr( $texto, 0, 160 );
}

add_action( 'wp_head', function () {
	if ( is_404() || is_search() ) {
		return;
	}
	$descripcion = cwp_meta_descripcion();
	$titulo      = is_singular() ? get_the_title() : wp_get_document_title();
	$url         = is_singular() ? get_permalink() : home_url( add_query_arg( array() ) );
	$imagen      = ( is_singular() && has_post_thumbnail() ) ? get_the_post_thumbnail_url( null, 'large' ) : CWP_OG_IMAGEN_DEFECTO;

	$etiquetas = array(
		'description'    => $descripcion,
		'og:type'        => is_singular( 'post' ) ? 'article' : 'website',
		'og:title'       => wp_strip_all_tags( $titulo ),
		'og:description' => $descripcion,
		'og:url'         => $url,
		'og:image'       => $imagen,
		'og:site_name'   => get_bloginfo( 'name' ),
		'og:locale'      => str_replace( '-', '_', get_bloginfo( 'language' ) ),
		'twitter:card'   => 'summary_large_image',
	);

	foreach ( $etiquetas as $nombre => $valor ) {
		if ( '' === (string) $valor ) {
			continue;
		}
		$atributo = ( 0 === strpos( $nombre, 'og:' ) ) ? 'property' : 'name';
		printf( '<meta %s="%s" content="%s" />' . "\n", $atributo, esc_attr( $nombre ), esc_attr( $valor ) );
	}
}, 5 );

Ajusta la constante CWP_OG_IMAGEN_DEFECTO con una imagen de 1200×630 que represente tu sitio (por ejemplo, tu logo sobre un fondo de color).

Cómo comprobarlo

1. Mira el código fuente de una entrada (Ctrl+U) y busca og:title: deberían aparecer todas las etiquetas.
2. Pega el enlace en el Depurador de publicaciones de Facebook (developers.facebook.com/tools/debug) o en el Post Inspector de LinkedIn: te muestran la tarjeta tal como se verá. También sirven para que actualicen la vista previa si cambiaste la imagen.
3. Envíate el enlace por WhatsApp.

WhatsApp guarda la vista previa de un enlace la primera vez que alguien lo comparte. Si cambias la imagen después, puede seguir mostrando la antigua durante un tiempo. Comprueba que todo esté bien antes de compartir una entrada nueva.

Escribe buenos extractos

El código hace el trabajo técnico, pero la calidad depende del texto. Un buen extracto:

• Dice qué va a encontrar la persona y por qué le sirve.
• Tiene entre 120 y 160 caracteres.
• No repite el título.

¿Tu vista previa en WhatsApp o Facebook sale sin imagen? Comparte el enlace en el foro y revisamos qué etiqueta falta.