Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo agregar metadatos de Facebook Open Graph en temas de WordPress

Al principio de nuestro recorrido con WordPress, notamos que algunos sitios web se veían increíbles cuando se compartían en Facebook, mientras que otros se veían terribles. La diferencia no era la calidad del contenido. Era si el propietario del sitio había configurado correctamente los metadatos de Facebook Open Graph.

Las etiquetas de Facebook Open Graph son esencialmente instrucciones que le dicen a las plataformas de redes sociales cómo mostrar tu contenido. Sin ellas, Facebook tiene que adivinar qué imagen usar y qué texto mostrar, a menudo con malos resultados.

Con la implementación adecuada de Open Graph, controlas exactamente cómo aparecen tus publicaciones de WordPress cuando se comparten, lo que genera un mayor compromiso y más clics.

Hemos ayudado a innumerables usuarios de WordPress a implementar metadatos de Open Graph a lo largo de los años, por lo que sabemos qué métodos funcionan mejor. En este tutorial, te guiaremos a través de varios enfoques probados para agregar etiquetas de Facebook Open Graph a tu tema de WordPress.

Cómo agregar metadatos de Facebook Open Graph en temas de WordPress

Puedes usar los enlaces rápidos a continuación para saltar directamente al método que más te interese:

  1. Agregar metadatos de Facebook Open Graph con AIOSEO
  2. Configurar metadatos de Facebook Open Graph usando Yoast SEO
  3. Adding Facebook Open Graph Metadata Using Code

    Método 1: Agregar metadatos de Facebook Open Graph con AIOSEO

    All in One SEO es un popular plugin de SEO para WordPress utilizado por más de 3 millones de sitios web. Te permite optimizar fácilmente tu sitio web para motores de búsqueda, así como para plataformas sociales como Facebook y Twitter.

    Primero, necesitas instalar y activar el plugin gratuito All in One SEO. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

    Al activarlo, debes visitar la página All in One SEO » Redes Sociales. Aquí, puedes ingresar la URL de tu página de Facebook y todas tus otras redes sociales.

    El plugin SEO AIOSEO para WordPress

    A continuación, haz clic en la pestaña de Facebook en la parte superior de la página, y verás que la Marca Open Graph está habilitada por defecto.

    Puedes hacer clic en el botón ‘Subir o Seleccionar Imagen’ para elegir una imagen OG de Facebook predeterminada si un artículo no tiene una imagen Open Graph.

    Establecer imagen predeterminada de Open Graph

    Si te desplazas hacia abajo, puedes personalizar el nombre de tu sitio, la descripción y más configuraciones. No olvides hacer clic en el botón azul ‘Guardar Cambios’ una vez que hayas terminado.

    Ahora que has configurado las metaetiquetas Open Graph para todo el sitio, el siguiente paso es agregar metadatos Open Graph para publicaciones y páginas individuales.

    Por defecto, AIOSEO usará el título y la descripción de tu publicación para el título y la descripción de Open Graph. También puedes establecer manualmente la miniatura de Facebook para cada página y publicación.

    Simplemente edita la publicación o página y desplázate hacia abajo hasta la sección ‘Configuración de AIOSEO’ debajo del editor. Desde aquí, cambia a la pestaña Social, y verás una vista previa de tu miniatura.

    Vista previa de Facebook de AIOSEO

    Puedes establecer la imagen de redes sociales aquí, así como el título y la descripción.

    Simplemente desplázate hacia abajo hasta el campo ‘Fuente de la Imagen’. Puedes elegir usar la imagen destacada, subir una imagen personalizada u otras opciones.

    Elige qué imagen de WordPress usar como miniatura de Facebook

    Método 2: Establecer metadatos de Open Graph de Facebook usando Yoast SEO

    Yoast SEO es otro plugin de SEO para WordPress que puedes usar para agregar metadatos de Facebook Open Graph a cualquier sitio de WordPress.

    Lo primero que necesitas hacer es instalar y activar el plugin Yoast SEO. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

    Una vez activado, los datos de Facebook Open Graph se habilitan por defecto.

    Puedes verificar esto yendo a Yoast SEO » Ajustes y desplazándote hacia abajo hasta la sección de Compartir en Redes Sociales. Ahora puedes asegurarte de que la función de datos Open Graph esté habilitada.

    Habilitar Open Graph de Facebook

    necesitas ir a SEO » Social y seleccionar la opción ‘Habilitado’ bajo ‘Agregar metadatos Open Graph’.

    Puedes guardar tu configuración o continuar y configurar otras opciones sociales de Facebook.

    Puedes proporcionar un ID de aplicación de Facebook si usas uno para tu página de Facebook y estadísticas. También puedes cambiar el título, la descripción y la imagen meta de Open Graph de tu página de inicio.

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

    La versión Premium de Yoast SEO también te permite establecer metadatos de Open Graph para publicaciones y páginas individuales. Simplemente edita una publicación o página y desplázate hacia abajo hasta la sección ‘Yoast SEO’ debajo del editor.

    Establecer metadatos de Open Graph para publicaciones y páginas usando Yoast

    Desde aquí, puedes establecer una miniatura de Facebook para esa publicación o página en particular. Si no estableces un título o descripción de publicación, el plugin usará tu título y descripción meta de SEO.

    Ahora puedes guardar tu publicación o página, y el plugin almacenará tus metadatos de Open Graph de Facebook.

    Método 3: Agregar metadatos de Open Graph de Facebook usando código

    Este método generalmente requiere que copies y pegues código en el archivo functions.php de tu tema. Sin embargo, recomendamos agregar el código usando el plugin WPCode en su lugar, lo que hace que sea más fácil y seguro agregar código personalizado en WordPress.

    WPCode también viene con una biblioteca de fragmentos de código listos para usar, incluido uno para agregar etiquetas básicas de Open Graph, por lo que solo toma un par de clics.

    Primero, instala y activa el plugin gratuito WPCode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

    Después de la activación, puedes ir a Fragmentos de código » + Agregar fragmento desde tu panel de WordPress.

    Busca el fragmento 'Add basic Open Graph Tags' en la biblioteca. Una vez que lo encuentres, colócale el cursor encima y haz clic en el botón 'Usar fragmento'.

    Selecciona el fragmento 'Agregar etiquetas básicas de Open Graph' de la biblioteca

    Luego, WPCode agregará el código automáticamente por ti, además de configurar la ubicación del método de inserción en todo el sitio.

    WPCode agrega automáticamente el código para los datos de Open Graph

    Después de eso, todo lo que necesitas hacer es activar el fragmento a 'Activo' y hacer clic en el botón 'Actualizar'. Tu tema ahora comenzará a mostrar metadatos de Facebook Open Graph en el encabezado de WordPress.

    Activar y actualizar fragmento

    Si eres un usuario avanzado, aún puedes copiar y pegar el código a continuación en el archivo functions.php de tu tema.

    Dado que esto requiere que edites directamente los archivos de tu tema, asegúrate de respaldar los archivos de tu tema antes de realizar cualquier cambio.

    //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 );
    

    Recuerda agregar el nombre de tu sitio en la Línea 17, donde dice 'Your Site Name Goes Here'. Después de eso, deberías cambiar la URL de imagen predeterminada en la Línea 19 por una de tus propias URLs de imagen.

    Recomendamos poner una imagen con tu logo allí, para que si tu publicación no tiene una miniatura, se muestre el logo de tu sitio.

    También necesitas agregar tu propio ID de aplicación de Facebook en la Línea 13. Si no tienes una aplicación de Facebook, puedes eliminar la Línea 13 del código.

    Guías Expertas sobre Facebook y WordPress

    Esperamos que este artículo te haya ayudado a agregar metadatos de Facebook Open Graph en WordPress. También podrías querer ver otras guías relacionadas sobre cómo usar Facebook en WordPress:

    Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

    Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

    El Kit de herramientas definitivo para WordPress

    Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

    Interacciones del lector

    222 CommentsLeave a Reply

    1. Es bueno que AIOSEO pueda establecer una imagen predeterminada de Open Graph para las publicaciones sin imágenes destacadas.
      ¡Tengo algunas publicaciones de blog antiguas sin imágenes destacadas configuradas, por lo que es útil que pueda especificar mi logotipo completo (con una foto mía editada) como imagen de Open Graph.
      Esto hará que mis publicaciones se compartan correctamente en las redes sociales, incluso si no he tenido tiempo de agregar una imagen destacada.

      • Thank you for letting us know that their interface has been updated, we will look to update it when we update the article :)

        Administrador

    2. Gracias por el tutorial. He estado agregando Open Graph en AIO SEO y todavía me sorprende que AIO SEO me diga que no hay ninguno. Pasé aproximadamente media hora en esto antes de darme cuenta de que tenía que hacer clic en actualizar nuevamente en la evaluación de SEO para que el plugin descargara la nueva configuración de WordPress y realizara un nuevo análisis de SEO. Algo tan simple y me tomó tanto tiempo.

    3. Hola, gracias por el fragmento de código, espero probarlo. Una pregunta, ¿permitirá que FB capture la imagen destacada (¿es esa la "miniatura"?) y el extracto de cada publicación de blog, o solo usará la imagen del logotipo de todo el sitio designada en la línea 19? He probado Blog2Social, pero las publicaciones carecían de la imagen destacada y el extracto y no se veían bien. ¡Gracias!

      • El fragmento de código debería establecer tu imagen destacada como la imagen destacada de la publicación.

        Administrador

    4. Hola,

      Código increíble. PERO, ¿por qué no cambia og:url y og:image? Lo intenté con una publicación sin imagen configurada como predeterminada. Pero al revisarlo en el depurador de Facebook, toma mi logo del pie de página en lugar de obtener la imagen que agregué en la parte de og:image.
      El título está funcionando, cambió del original y también pegué og:description. Todas las metaetiquetas más importantes, excepto imagen y url.
      ¿Por qué es eso?

      Gracias,
      Atila

      • Asegúrate de haber borrado cualquier caché en tu sitio de WordPress, ya que esa es la razón más común por la que no se actualiza para coincidir con el código.

        Administrador

    5. hola, ¿cómo puedo modificar el código para agregar etiquetas OG para tipos de publicaciones personalizadas? Intenté cambiando esta línea de código if ( !is_singular()) a if ( is_singluar( array( ‘post’, ‘publications’) ) ) pero mi sitio web arroja un error fatal. ¿Alguien puede ayudarme, gracias?

    6. Hola, intenté todas las soluciones sugeridas y aún me falta algún parámetro en el esquema:
      Falta un campo requerido: id
      Falta un campo requerido: price
      Falta un campo requerido: availability

      ¿Hay alguna solución a través de un plugin o actualizando el código de function.php?

      • Eso sería marcado para un producto que estás vendiendo en tu sitio y All in One SEO tiene la opción de agregar ese marcado a tus productos.

        Administrador

    7. Si uso la configuración de Yoast SEO, ¿tardará en mostrar el resultado perfecto en la publicación de Facebook? ¿O comenzará a funcionar en minutos?

      • Eso dependería del almacenamiento en caché de tu sitio y de cualquier almacenamiento en caché en Facebook sobre cuánto tiempo tarda.

        Administrador

          • Si no se muestra lo que configuraste en todos los sitios sociales, deberías comunicarte con el soporte de Yoast e informarles para asegurarte de que no haya un problema con el plugin.

    8. Hola
      Cuando comparto mi publicación en Facebook, es como si mi publicación tuviera una imagen destacada.
      Pero cuando comparto en WhatsApp, no se muestra mi imagen destacada con el enlace, por favor ayúdenme..

      • Si estás usando Yoast para agregar los metadatos, primero te recomendaríamos que te pongas en contacto con Yoast para asegurarte de que no haya problemas conocidos.

        Administrador

    9. Hola, por favor ayúdenme
      Facebook ha bloqueado mi sitio, ahora en la aplicación de desarrollador de Facebook, ni siquiera puedo vincular mi sitio porque ha bloqueado Facebook.

      Por favor, dime cómo desbloquear tu sitio web con Facebook

    10. Hola

      Por favor, ¿pueden indicar cuándo se usa un tema hijo – necesito copiar el functions.php del tema padre y luego agregar el script anterior a un functions.php recién creado y subirlo a la carpeta del tema hijo O simplemente agrego el script al functions.php del tema padre?

      Gracias por leer, Sadie

    11. ¿Cómo podría eliminar la aparición de "Por ..." en la tarjeta?

      Actualmente tenemos un problema donde se muestra como: nombre-del-sitio | Por nombre-del-sitio

      Solo queremos que aparezca el primer nombre del sitio web y no dos veces.

    12. Estoy usando esto en un sitio web autoalojado. ¿Qué hago con el ID de USUARIO que se supone que debo reemplazar, ya que el sitio no está en wordpress.com?

    13. Hola,
      ¡Tengo un gran problema!!
      Cuando comparto mi publicación en Facebook, se muestra como la imagen destacada de mi publicación.
      Pero cuando comparto en WhatsApp, no se muestra mi imagen destacada con el enlace, por favor ayúdenme..

    14. Todo bien, pero todavía hay un problema, ¿cómo agregar el ID de Facebook? Después de usar este código, aparece el siguiente mensaje del ID de Facebook.

      La propiedad 'fb:app_id' debe proporcionarse explícitamente. Especifique el ID de la aplicación para que las historias compartidas en Facebook se atribuyan correctamente a la aplicación. Alternativamente, el app_id se puede establecer en la URL al abrir el cuadro de diálogo de compartir.

    15. Disfruté este artículo, pero en enero de 2018 esta opción de *código manual* no parece funcionar completamente. Por ejemplo, aunque he verificado que la propiedad de imagen predeterminada funciona, cuando creo una nueva publicación, no veo EN NINGUNA PARTE un campo donde se pueda empezar a editar los metadatos de "open graph (og)".

      ¿Sugerencias? ¡Gracias!

    16. Gracias por tan excelente información. Pero tengo una pregunta.

      ¿Qué tan útil es agregar metadatos de Facebook Graph en nuestro sitio..?

      Y si es muy útil, ¿para qué propósito es útil..?

    17. ¿Qué pasa si quiero cambiar la imagen en miniatura no para todo el sitio, sino solo para una página de mi sitio de WordPress? Por ejemplo, estoy intentando compartir una página de eventos de mi sitio y me gustaría una miniatura única y relevante. ¿Ayuda?

    18. Hola, quería incluir Worpress SEO by Yoast, pero no estoy seguro si la última versión es compatible con mi versión de Worpress (4.2.2), ¿saben si es seguro activarlo?

      Gracias, chicos

    19. He agregado el código para agregar esto manualmente a mi tema. Sin embargo, las cosas no funcionan. ¿Tiene que ser público mi perfil para que mi ID de usuario de Facebook sea accesible?

    20. ¿Sigue siendo esto válido para hoy? Lo intenté y funciona, pero noté en el código lo siguiente: “xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

      ¿No es 2008 un poco antiguo? ¿Hay un protocolo más nuevo que deberíamos usar hoy?

    21. Hola, gracias por publicar. Me quedé con una duda. Entendí que el en cada publicación se construye dinámicamente con las funciones que explicaste tan bien. Lo que no puedo entender es dónde se definen y almacenan las variables que llama esa función. Cuando pones property=”og:type” content=”article”/, OK, lo defines con una cadena fija. Pero cuando usas: property=”og:title” content=”‘ . get_the_title() . ‘”, ¿de dónde va a obtener la función get_the_title() esa información? ¿Cómo puedo definir de antemano esos valores para cada publicación de manera que el código elija los metadatos correctos para cada parámetro?

      • get_the_title() will get your post title. If you want to use something else, you could always get the value from a meta box. With the advanced custom fields plugin, it would be something like get_field(“my_field”), or with a regular WordPress custom meta field it would be get_post_meta($post->ID, “my_field”, true). See get_post_meta()

    22. ¡Bien explicado! Intento averiguar dónde puedo agregar el código para verificar el tamaño de la imagen destacada, ya que FB necesita un tamaño con un mínimo de 200px tanto de ancho como de alto, de lo contrario usará otra imagen de la publicación.
      ¡Cualquier ayuda sería genial!

    23. He estado intentando usar Yoast para habilitar mis metadatos para poder usar Rich Pins en Pinterest. He hecho lo que dice este tutorial, pero Pinterest todavía no reconoce mi publicación. ¿Hay algún otro plugin que pueda probar?

      • Una vez que tengas Yoast instalado, busca en SEO » Panel » Títulos y metadatos y debajo de eso está Social.
        En Social, deberías habilitar "Agregar metadatos Open Graph" en la pestaña de Facebook.

        • Esta opción simplemente no está ahí con la v4.6 del plugin.
          En SEO >> Panel, las pestañas que tengo son: Panel, General, Funciones, Información de la empresa, Herramientas para webmasters y Seguridad. No se menciona Títulos y metadatos ni Social.

          ¿Es esto porque no he configurado un perfil social de Facebook? ¡Seguro que esto no debería ser necesario solo para poder configurar cosas de OG!

    24. Agregué la compartición social a la plantilla de resultados de búsqueda, así que cada extracto tiene un botón para compartir PERO los metadatos que se comparten están mal y son incontrolables con esto, ¿hay alguna forma de hacer que esto funcione mejor cuando hay 20 resultados en la misma página con diferentes descripciones meta para cada uno?

    25. Hola, ¿me puedes ayudar por favor? Agregué el código en la función y ¿qué tengo que agregar en el head por favor?

    26. Aquí también hay una buena mejora para hacer una excepción para la página de inicio:

      if (is_front_page()) { echo ""; echo ""; echo ""; } else { echo ""; echo ""; }

    27. He descargado el plugin de Yoast y lo he configurado para mi página de inicio, pero cuando ingreso el sitio web en Facebook, todavía no muestra la imagen que he especificado, ni el fragmento de texto que he escrito. Tampoco puedo encontrar mi URL de Facebook usando el enlace que proporcionaste, solo me da un error... Intenté depurar, pero dice que las páginas de Facebook no se pueden depurar y que no tienen caché. ¡Así que... nada ha funcionado hasta ahora!

    28. Solo quería agradecerte por esta descripción tan completa del proceso de conexión de Facebook a tu página de WordPress. He estado intentando hacerlo durante días siguiendo otros sitios y recomendaciones. Esta noche me encontré con tu página de una búsqueda en Google y ¡bam!, funcionó. ¡Hurra! Muchas gracias.

    29. Gracias por esta información. Fue realmente fácil de seguir. Subí el plugin Yoast y seguí todos los pasos y guardé, pero la miniatura sigue siendo solo un cuadro en blanco. ¿tarda algo de tiempo en propagarse? ¿Necesito cerrar sesión y volver a iniciarla en Facebook? ¿o en Wordpress?

    30. Hola chicos, tengo problemas con og:description, básicamente todo el formato falta en la página compartida. Las nuevas líneas no se respetan, ¿cómo puedo controlar eso?
      ¡Gracias!

    31. Gracias por esto. Quiero compartir un enlace directamente desde mi sitio usando el botón social. Sin embargo, cuando hago clic, por ejemplo, en el botón de compartir de Facebook, la imagen y la descripción siguen usando información anterior. Aunque he actualizado la imagen y la descripción usando Yoast SEO y he personalizado específicamente la imagen y la descripción para esa publicación. ¿Puedo saber qué hice mal?

    32. Gracias. No te imaginas cuánto tiempo estuve tratando de descifrar esto. Es fácil de hacer con ZiPLIST para recetas, pero no pude descifrarlo para artículos.

    33. ¡Hola! Tengo un problema que no sé cómo resolver. Cuando intento compartir un enlace en Facebook desde mi blog, o una página en particular, aparece este mensaje “página no encontrada” o el enlace con símbolos que no entiendo. Controlé los enlaces con el depurador de objetos y esto es lo que aparece: la propiedad requerida ‘og:title’ de tipo ‘string’ no fue proporcionada. ¿Cómo puedo solucionarlo, por favor?

    34. @ Syed Balkhi. —– Solo quiero preguntarte esto, después de que he configurado todas las etiquetas y obtuve un resultado de prueba de depuración limpio sin ninguna advertencia, cuando alguien hace clic en el botón de Me gusta de Facebook que usé en mi página web, no aparece en el feed de la línea de tiempo de Facebook, solo aparece en la sección de actividad reciente, ¿por qué es esto? ¿Hay algo más que deba agregar para que se muestre directamente en el newsfeed cuando hacen clic en el botón ME GUSTA??????

    Deja una respuesta

    Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.