Etiquetas de WordPress OG: cómo aumentar los clics en su publicación en redes sociales

¿Has oído hablar de las metaetiquetas og? ¿Implementas metaetiquetas og en tu sitio de WordPress? Este artículo le mostrará qué son las metaetiquetas og y cómo implementarlas en su sitio web de WordPress.

Cuando se comparte una publicación de su blog o una URL de su sitio web en Facebook, el sitio de redes sociales hace un buen trabajo al extraer los datos correctos de él. Se mostrarán cosas como la URL de su blog o sitio web, un extracto del texto de la publicación, una imagen destacada, etc., lo que hará que los usuarios hagan clic en ella.

Sin embargo, si eres un ávido usuario de Facebook, es posible que hayas notado que los datos que extrae de los sitios web (incluido el tuyo) no siempre son perfectos. A veces, extrae una imagen que no representa con precisión el contenido de la publicación compartida, o puede extraer texto cerca del final de la publicación y usarlo como extracto, lo que casi siempre no es bueno y, lo que es peor, existe son momentos en los que no hay datos distintos al título de la publicación (o el etiqueta) y la URL se comparte en absoluto.

Esto suele suceder si no implementa open gmetaetiquetas raph (también conocidas como metaetiquetas og) en su sitio web de WordPress. Sin estas etiquetas importantes, Facebook (y otros sitios de redes sociales) no podrán obtener la información correcta para mostrar en una publicación o enlace compartido.

Así es como puede verse cuando comparte una URL en Facebook desde un sitio web que no se está actualizando con etiquetas gráficas abiertas:

compartir en facebook sin etiquetas og

Por otro lado, así es como se ve cuando comparte una URL que está implementando metaetiquetas de gráfico abierto:

compartir facebook con og1

Metaetiquetas Open Graph (OG) de Facebook

Las metaetiquetas de gráfico abierto de Facebook definen cómo se presentará un sitio web de terceros (como su blog) en Facebook.

Aunque está desarrollado por Facebook, otras redes sociales también utilizan las metaetiquetas de gráfico abierto (como Twitter y LinkedIn) para personalizar el intercambio que ocurre allí.

Para incluir las metaetiquetas de gráfico abierto en su sitio de WordPress, deberá agregar más etiquetas en el de su sitio web. De acuerdo con la protocolo de gráfico abierto, las siguientes son las propiedades requeridas:

  • og: titulo
  • og: tipo
  • og: imagen
  • og: url

 

og etiquetas facebook1

Mediante el uso de gráficos abiertos en sitios web, Neil Patel encontrado un aumento en la tasa de clics en un 39%.

¿Cómo verificar las metaetiquetas OG en su sitio de WordPress?

Mire el código fuente de su sitio web de WordPress si no está seguro de si las etiquetas og ya se han colocado en su sitio web. En Windows o Linux, presione Ctrl + U y en Mac, presione Comando + Alt + U para ver el código fuente.

Si ya se ha agregado, encontrará sus etiquetas og en el sección dentro de la "

og

Además, puede utilizar el Facebook Sharing Debugger herramienta para ver qué está leyendo Facebook sobre su sitio.

Agregar metaetiquetas OG a WordPress sin un complemento

Para agregar metaetiquetas og a sus publicaciones y páginas en WordPress sin usar un complemento, simplemente agregue el siguiente fragmento de código a su tema. functions.php archivo.

// Agregar el gráfico abierto en la función de atributos del lenguaje add_opengraph_doctype ($ output) {return $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"'; } add_filter ('atributos de idioma', 'add_opengraph_doctype'); // Vamos a añadir la función de metainformación de Open Graph add_og_meta_tag () {global $ post; if (! is_singular ()) // si no es una publicación o una página, no agregue etiquetas og return; eco " \ n "; echo ' '. "\norte"; eco ' '. "\norte"; eco ' '. "\norte"; eco ' '. "\norte"; eco ' '. "\norte"; eco '  '. "\norte"; if (! has_post_thumbnail ($ publicación-> ID)) {// si la publicación no tiene una imagen destacada, usa una imagen predeterminada $ default_image = "https://example.com/image.jpg"; // reemplace esto con una imagen predeterminada en su servidor o una imagen en su biblioteca de medios echo ' '; } más {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ publicación-> ID), 'grande'); eco ' '; } echo "\ n \ n ";} add_action ('wp_head', 'add_og_meta_tag', 0);

Asegúrese de cambiar "SU ID DE USUARIO" en el parte con su propia identificación de usuario de Facebook.

Puede encontrar su identificación de usuario de Facebook visitando su página de perfil de Facebook en un navegador de escritorio.

  1. Haga clic en su imagen de perfil y seleccione "Ver imagen de perfil"
  2. Esto abrirá el visor de fotos de Facebook para su foto de perfil.
  3. La URL ahora debería verse así: "https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Busca la pieza fbid=xxxxxxxxxxxxxx. Los números después del fbid parámetro "xxxxxxxxxxxxxxxx”Es su ID de usuario.
  5. Cópielo y utilícelo para reemplazar "SU ID DE USUARIO" en el fragmento de código anterior.

ID de usuario de Facebook

¡Listo! Su sitio web ahora está actualizado con etiquetas gráficas abiertas.

Agregar metaetiquetas OG a WordPress con un complemento

Los dos complementos de SEO más populares, Yoast SEO y Todo en un paquete de SEO viene con características de metaetiquetas de gráfico abierto.

Agregar etiquetas OG con el complemento SEO de Yoast

Primero, instale Yoast SEO. Después de la instalación, debería ver el nuevo elemento de SEO en el menú de la barra lateral de administración izquierda.

Para agregar etiquetas og con Yoast, vaya a SEO > Social a través del menú de la barra lateral de administración.

Una vez que esté en la página, vaya a la pestaña de Facebook.

yoast seo og etiqueta

De forma predeterminada, Yoast SEO agrega etiquetas gráficas abiertas a sus publicaciones listas para usar. No es necesario configurar nada. 

Sin embargo, deberá configurar las etiquetas og para la página principal de su sitio web.

Bajo el Configuración de la página principal sección, puede definir una URL de imagen para su página principal. Esto se utilizará para og: imagen propiedad de su página de inicio. 

También puede agregar el título y la descripción, que se utilizan para la og: titulo y og: descripción propiedades respectivamente.

Finalmente, está la Ajustes por defecto sección. Esto le permite definir una URL de imagen predeterminada que se utilizará para la publicación og: imagen propiedad en caso de que no haya una imagen destacada definida.

Una vez que haya terminado, no olvide hacer clic Guardar los cambios para que se apliquen sus cambios.

Configuración de etiquetas OG por publicación con Yoast SEO

Si desea configurar manualmente las etiquetas og por publicación, puede hacerlo yendo al editor de publicaciones y desplazándose hacia abajo hasta la sección Yoast Metabox y yendo a la Social lengüeta.

yoast por post og etiquetas

A continuación, puede definir un parámetro personalizado para varias etiquetas og aquí.

Una vez que haya terminado de agregar sus etiquetas og a una publicación, asegúrese de guardarla, actualizarla o publicarla, según corresponda, para confirmar los cambios que ha realizado.

Adición de etiquetas OG con todo en un paquete de SEO

Primero, instale All in One SEO Pack. Después de la instalación, vaya a All in One SEO > Redes sociales a través del menú de la barra lateral de administración de su sitio. Una vez que esté en la página, vaya a la Facebook lengüeta.

todo en uno seo og tags

Con All in One SEO Pack, las etiquetas og se agregan a su publicación de forma predeterminada, similar a Yoast.

Hay más opciones configurables aquí en comparación con Yoast, pero algunas solo están disponibles cuando estás usando la versión pro. Nuncaless, la cantidad de opciones configurables en la versión gratuita es más que suficiente.

  • Imagen de publicación predeterminada - define qué imagen se utilizará para una publicación og: imagen propiedad.
  • Imagen de Facebook de publicación predeterminada - si selecciona la opción de imagen predeterminada (establecida a continuación) en la opción de imagen de publicación predeterminada, aquí es donde carga la imagen personalizada.
  • Tipos de objetos de tipo de publicación predeterminados - le permite definir un valor predeterminado para una publicación, página o archivo adjunto og: tipo propiedad.
  • Mostrar autor de Facebook - puede vincular su perfil de Facebook a su sitio web. Habilitar esta opción le permite vincular una publicación a su perfil de Facebook, lo que permite a sus lectores seguir directamente su página / perfil de FB. Puede obtener más información sobre cómo configurar esto en AIOSEO página de ayuda.
  • Nombre del sitio - le permite configurar qué valores se utilizarán para una publicación og: nombre de sitio propiedad. Puede usar etiquetas para generar dinámicamente el valor de esta propiedad, también puede agregar un texto predeterminado o puede mezclar los dos si lo desea.

Siguiendo los elementos anteriores, hay una sección para configurar las etiquetas og de la página de inicio de su sitio. Bajo la Configuración de la página de inicio sección, puede definir lo siguiente:

  • Imagen - para tu página de inicio og: imagen propiedad.
  • Título - para tu página de inicio og: titulo propiedad. Puede utilizar variables para generar esto dinámicamente.
  • Descripción - para tu página de inicio og: descripción propiedad.
  • Tipo de objeto - para tu página de inicio og: tipo propiedad.

Finalmente, hay un Configuración avanzada sección, que le permite definir metaetiquetas de gráficos abiertos adicionales, como fb: app_id, fb: administradores, etc.

Una vez que esté satisfecho con su configuración, no olvide guardar cambios.

Configuración de etiquetas OG por publicación con todo en un paquete de SEO

Puede configurar etiquetas og por publicación con AIOSEO como Yoast. Vaya al editor de publicaciones y desplácese hacia abajo hasta el metabox de AIOSEO y luego vaya al Social lengüeta.

aioseo por publicación og tags

Las opciones aquí son similares a las que se discutieron anteriormente. Puede seguir adelante y definir parámetros personalizados para sus etiquetas og para esta publicación, anulando las opciones que definió en la configuración de AIOSEO.

Una vez que haya terminado de agregar sus etiquetas og a una publicación, asegúrese de guardarla, actualizarla o publicarla, según corresponda, para confirmar los cambios que ha realizado.

Eso cubre cómo agregar etiquetas og a su sitio de WordPress. Con suerte, este artículo lo ayudó a elegir el mejor enfoque para eso y que haya aprendido un poco sobre lo importante que es implementar etiquetas og en su sitio web.

Si desea ver más consejos y trucos de WordPress, consulte nuestro 101 lista de consejos y trucos de WordPress.

Descargue la lista de 101 trucos de WordPress que todo bloguero debe conocer

101 trucos de WordPress

Haga clic aquí para descargar ahora

// Agregar el gráfico abierto en los atributos del idioma

function add_opengraph_doctype ($ salida) {

return $ salida. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"';

}


add_filter ('language_attributes', 'add_opengraph_doctype');


// Vamos a agregar la metainformación de Open Graph

function add_og_meta_tag () {


global $ post;


if (! is_singular ()) // si no es una publicación o una página, no agregue etiquetas og

volver;

eco " \norte";

eco ' '. "\norte";

eco ' '. "\norte";

eco ' '. "\norte";

eco ' '. "\norte";

eco ' '. "\norte";

eco ' '. "\norte";


if (! has_post_thumbnail ($ publicación-> ID)) {// si la publicación no tiene una imagen destacada, usa una imagen predeterminada

$ default_image = "https://example.com/image.jpg"; // reemplace esto con una imagen predeterminada en su servidor o una imagen en su biblioteca de medios

eco ' ';

}


else {

$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ publicación-> ID), 'grande');

eco ' ';

}


echo "\ n \norte";

}


add_action ('wp_head', 'add_og_meta_tag', 5);

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...