Agregar metadatos de Open Graph de Facebook en temas de WordPress

 

¿Quieres agregar metadatos de Open Graph de Facebook a tus temas de WordPress?

Los metadatos de Open Graph permiten que Facebook y otros sitios web de redes sociales obtengan metadatos sobre las páginas de sus publicaciones. También puede controlar cómo se muestra su contenido cuando se comparte en Facebook.

En este artículo, le mostraremos cómo agregar fácilmente metadatos de Facebook Open Graph en temas de WordPress. Vamos a presentar tres métodos diferentes para que pueda elegir el que mejor se adapte a sus necesidades.

Agregue metadatos para gráficos abiertos de Facebook en cualquier tema de WordPress

Método 1. Agregar metadatos de Open Graph de Facebook usando AIOSEO

Todo en uno SEO es un popular complemento de SEO para WordPress utilizado por más de 2 millones de sitios web. Esto le permite optimizar fácilmente su sitio web para motores de búsqueda, así como para plataformas sociales como Facebook y Twitter.

Primero necesitas instalar y activar eso Todo en uno SEO Enchufar. Para obtener más información, consulte nuestra guía paso a paso sobre la instalación de un complemento de WordPress.

Después de la activación, debe visitar Todo en uno SEO »Redes sociales Página. Aquí es donde puede ingresar la URL de su página de Facebook y todas sus otras redes sociales.

Configuración de AIOSEO para redes sociales

A continuación, haga clic en la pestaña de Facebook en la parte superior de la página y verá que Open Graph Markup está habilitado de forma predeterminada. Puede hacer clic en el botón «Cargar o seleccionar imagen» para elegir una imagen predeterminada de Facebook OG si un elemento no tiene una imagen de gráfico abierta.

Establecer la imagen predeterminada de Open Graph

Si se desplaza hacia abajo, puede personalizar el nombre de su sitio, la descripción y otras configuraciones. No olvide hacer clic en el azul ahorrar Una vez que haya realizado los cambios, haga clic en el botón.

Ahora que ha configurado las metaetiquetas de gráficos abiertos en todo el sitio, el siguiente paso es agregar metadatos de gráficos abiertos para publicaciones y páginas individuales.

De forma predeterminada, AIOSEO usa el título y la descripción de su publicación para el título y la descripción del diagrama abierto. También puede configurar manualmente la miniatura de Facebook para cada página y publicación.

Simplemente edite la publicación o página y desplácese hacia abajo hasta la sección Todo en uno SEO debajo del editor. Desde aquí, cambie a la pestaña Social y verá una vista previa de su miniatura.

Vista previa de Facebook de AIOSEO

Aquí puede configurar la imagen de las redes sociales, así como el título y la descripción. Simplemente desplácese hacia abajo para Fuente de imagen Campo. Puede usar la imagen seleccionada, cargar una imagen personalizada o elegir otras opciones.

Seleccione la imagen de WordPress que desea usar como miniatura de Facebook

Método 2. Establecer metadatos de gráfico abierto de Facebook con Yoast SEO

Yoast SEO es otro gran complemento de WordPress SEO que le permite agregar metadatos de Facebook Open Graph a cualquier sitio de WordPress.

Lo primero que debe hacer es instalar y activar ese SEO de Yoast Enchufar. Para obtener más información, consulte nuestra guía paso a paso sobre la instalación de un complemento de WordPress.

Después de la activación tienes que ir SEO »Social y marque la casilla junto a Agregar metadatos de Open Graph.

Activar Facebook Open Graph

Puede guardar su configuración o continuar y configurar otras opciones sociales de Facebook en la pantalla.

Puede proporcionar un ID de aplicación de Facebook si está utilizando uno para su página de Facebook e Insights. También puede cambiar el meta título, la descripción y la imagen de Open Graph de su página de inicio.

Por último, puede establecer una imagen predeterminada que se utilizará cuando no se establezca ninguna imagen para una publicación o página.

Yoast SEO también te permite configurar metadatos de Open Graph para publicaciones y páginas individuales. Simplemente edite una publicación o página y desplácese hacia abajo hasta la sección de SEO debajo del editor.

Establecer metadatos para gráficos abiertos para publicaciones y páginas

Desde aquí puede configurar una miniatura de Facebook para esa publicación o página en particular. Si no especifica un título o descripción de la publicación, el complemento usará su meta título y descripción de SEO.

Ahora puede guardar su publicación o página y el complemento guardará sus metadatos para gráficos abiertos de Facebook.

Método 3. Agregue manualmente metadatos de Open Graph de Facebook a su tema de WordPress

Este método implica editar sus archivos de diseño. Así que asegúrese de hacer una copia de seguridad de sus archivos de diseño antes de realizar cualquier cambio.

Luego, simplemente copie este código y péguelo en el archivo functions.php de su tema o en un complemento específico de la ubicación.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
        echo '<meta property="fb:app_id" content="Your Facebook App 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="Your Site NAME Goes HERE"/>';
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Nota: Recuerde cambiar el nombre del sitio donde está «El nombre de su sitio va aquí». Después de eso, cambie la URL de la imagen predeterminada con su imagen. También deberá agregar su propia ID de aplicación de Facebook. Si no tiene una aplicación de Facebook, puede eliminar la línea de ID de la aplicación de Facebook del código.

Recomendamos colocar allí una imagen con su logo. Entonces, si su publicación no tiene una miniatura, extraerá el logotipo de su sitio web.

Eso es todo lo que tienes que hacer. Tan pronto como guarde su archivo functions.php (o un complemento específico de la ubicación), los metadatos para los gráficos abiertos de Facebook se muestran en el encabezado de WordPress.

Esperamos que este artículo le haya ayudado a agregar metadatos de Open Graph de Facebook en WordPress. Es posible que también desee ver nuestras selecciones de los mejores complementos de redes sociales para WordPress para hacer crecer su base de fanáticos sociales y nuestra guía de solución de problemas sobre cómo solucionar el problema de miniaturas de Facebook incorrecto en WordPress.