Volver al blog
¿Alguna vez te has preguntado por qué a veces los enlaces que compartes en Facebook o Twitter se ven raros? ¿Sabes cómo influir en la apariencia de tus posts de blog compartidos en estas redes sociales?
Si no estás seguro de haber hecho todo lo posible para optimizar la información sobre tu post de blog o página que se muestra en Facebook y Twitter, sigue leyendo. Te mostraremos cómo el uso de las etiquetas de redes sociales adecuadas puede ayudarte a mejorar el look & feel de las vistas previas de tus publicaciones.
Al compartir el enlace de un artículo, quieres que tu post se vea bien cuando se publique en redes sociales. Te gustaría que contuviera una imagen de calidad, el nombre correcto, la descripción y la URL. Facebook, Twitter y otras plataformas obtienen estos parámetros de tu sitio web.
Puedes controlar lo que extraen del post incluyendo etiquetas meta para redes sociales (por ejemplo, etiquetas open graph) en el código HTML de tus publicaciones.
Si las etiquetas meta de Facebook (=etiquetas meta Open Graph) están presentes, tú determinas qué se muestra en la publicación de Facebook. Si no incluyes estas meta propiedades Open Graph (og), Facebook seguirá mostrando información sobre tu post, pero probablemente no como te gustaría. Esto funciona de manera análoga también con las etiquetas meta de Twitter. Vamos a demostrar el uso de etiquetas meta y cómo compartir enlaces en Facebook.
Compartir contenido web en Facebook
Facebook es una gran plataforma de redes sociales para compartir tu nuevo contenido. Crear una nueva publicación a partir de un artículo de tu sitio web es tan simple como insertar el enlace en la caja de «Crear publicación» de Facebook.
Echemos un vistazo a este proceso. Usaremos nuestro post sobre Estrategia de Marketing en Facebook como ejemplo.
Después de insertar la URL en la nueva publicación, Facebook extrae los datos de la URL de destino y crea un post con un formato atractivo para nosotros. El formato se muestra instantáneamente en la vista previa, tanto para la configuración de escritorio como para móvil. Si usas Kontentino para gestionar tu contenido de redes sociales, la vista previa está disponible al instante en el Calendario de Kontentino.
Entendiendo las etiquetas meta en el código HTML de la página web
Propiedades meta para motores de búsqueda
En la parte superior, podemos ver varias propiedades que definen los parámetros de este artículo, también llamadas etiquetas meta o meta propiedades. Algunas de ellas son utilizadas por los motores de búsqueda para entender cuál es el contenido del sitio web proporcionando información adicional que no se muestra en la página del post. Estas incluyen, por ejemplo, etiquetas meta como:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
La imagen a continuación muestra el código HTML para este post de Kontentino. Puedes ver estas etiquetas meta marcadas con el color verde.
Identificando etiquetas meta en el código HTML del post Públicos objetivo de Facebook Ads 101: La guía definitiva
Consejo rápido: ¿No estás seguro de cómo mostrar el código HTML de tu sitio web? Simplemente presiona CTRL+U en tu navegador web en Windows u Opción + Comando + U en Mac.
Gracias a estas etiquetas meta, los motores de búsqueda saben que la indexación de esta página web (post) y sus parámetros están configurados para seguir (dofollow). El meta título introducido y la meta descripción son utilizados por los motores de búsqueda para mostrar el enlace a este post en sus resultados de búsqueda (en su página de resultados – SERP). Como puedes ver, las propiedades de meta título y meta descripción están configuradas así:
- Meta title: ‘Públicos objetivo de Facebook Ads 101: La guía definitiva | Blog de Kontentino – Simplificando el flujo de aprobación en Redes Sociales’
- Meta description: ‘Descubre cómo llegar a las personas adecuadas con los públicos objetivo de Facebook Ads.’
Sabemos que estas etiquetas meta no tienen una longitud óptima, pero no estamos aquí para hablar de SEO o Google. Así que saltemos directamente a las etiquetas meta de abajo, que contienen el texto ‘og:’.
Estas etiquetas meta o meta propiedades a veces se denominan etiquetas meta sociales, etiquetas meta para redes sociales o simplemente propiedades meta og.
Como puedes ver, hay 7 meta propiedades og diferentes en el código HTML de nuestro post de blog. Son:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Además, hay algunas etiquetas meta de Facebook más: las propiedades og: asociadas con la etiqueta meta og:image que incluyen:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Etiquetas meta de Twitter
Aparte de estas, también encontrarás algunas etiquetas meta sociales especiales para Twitter en el código HTML, tales como:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Volvamos a nuestro ejemplo de compartir el post en Facebook. Necesitaremos entender, decodificar y editar el contenido de las meta propiedades ‘og:’ para influir en la apariencia de nuestro nuevo post de Facebook con el enlace incrustado.
Sigue leyendo y descubre más sobre: i) Decodificar las meta propiedades og:; ii) Pautas para redactar el contenido de las etiquetas meta sociales; y iii) Editar el contenido de estas meta propiedades sociales en el CMS de tu sitio web.
Publicar en Facebook y Twitter con Kontentino
Regístrate para una prueba de 14 días de Kontentino y domina las etiquetas meta de redes sociales con nosotros. Mira la vista previa del post en Kontentino antes de publicarlo.
El ‘og:’ en el código HTML de tu sitio web significa ‘Open Graph’. Es un acrónimo de un protocolo Open Graph que te permite decirle a Facebook cómo debe mostrarse tu contenido compartido. Como ya mencionamos (y Facebook lo indica en sus instrucciones para desarrolladores), ‘sin estas etiquetas Open Graph, el rastreador de Facebook (Crawler) utiliza heurísticas internas para hacer su mejor suposición sobre el título, la descripción y la imagen de vista previa para tu contenido’. Definir esta información explícitamente con etiquetas Open Graph ayuda a garantizar la más alta calidad en los posts de Facebook.
Como ves, estas etiquetas meta og son extremadamente importantes para Facebook. Si aún no has oído hablar de ellas o piensas que son bastante nuevas, te sorprenderá saber que el protocolo Open Graph fue lanzado por Facebook hace ya más de 10 años (en 2010). Hoy, sin embargo, es mantenido por la Open Web Foundation.
El protocolo Open Graph se basa en varias tecnologías y esquemas existentes para ayudar a los desarrolladores a representar ricamente cualquier página web dentro del gráfico social. Basta de historia y definiciones; entremos en los detalles de las diversas etiquetas meta og. Solo veremos 4 de ellas en detalle, aquellas responsables de la apariencia de nuestro post incrustado en Facebook: og:title, og:image, og:url y og:description.
Meta propiedad og:title
Esta meta propiedad es uno de los cuatro metadatos básicos dentro del protocolo Open Graph (estos son: og:title, og:type, og:image, og:url). Al especificar el og:title, establecemos el título de nuestro objeto (en este caso, un post de blog), tal como debe aparecer dentro del gráfico social. Facebook extraerá este og:title y lo mostrará como el título del post (justo debajo de la URL en nuestra primera imagen).
Meta propiedad og:image
Insertamos la URL de la imagen que debe representar nuestro objeto (artículo) dentro del gráfico social. En este caso, el enlace a la imagen destacada debe incluirse en esta propiedad. Al especificar el og:image, nos aseguramos de que esta imagen exacta se muestre en Facebook.
De lo contrario, Facebook podría elegir otra imagen de nuestro post; podría ser la imagen principal mostrada en nuestro listado de posts y en la parte superior de nuestro artículo, o cualquier otra imagen que aparezca en el post del blog.
Meta propiedad og:url
Esta etiqueta meta contiene la URL canónica de nuestro objeto que se utilizará como su ID permanente en el gráfico social. En nuestro caso, la URL en og:url es https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Meta propiedad og:description
Finalmente, especificar la etiqueta meta og:description debería ayudarnos a que la descripción se muestre al compartir este post. Ahora, como puedes ver en la imagen del código HTML, es ‘Descubre cómo llegar a las personas adecuadas con los públicos objetivo de Facebook Ads.’
Etiquetas meta de Twitter
Las etiquetas meta de Twitter funcionan de manera análoga a las etiquetas meta Open Graph y especifican el contenido que Twitter extraerá al compartir una página web en esta plataforma de redes sociales.
Dominando las etiquetas meta og
Facebook y Twitter ofrecen pautas sobre cómo utilizar las etiquetas meta mencionadas anteriormente. En nuestra tabla a continuación, resumimos la información básica sobre ellas junto con las recomendaciones respectivas.
Ahora que entendemos los diversos tipos de etiquetas meta sociales y sus implicaciones, es hora de entrar en el CMS de nuestra página web y descubrir dónde y cómo editarlas. Te mostraremos ejemplos del CMS WordPress, siendo el CMS número 1 en el mundo con diferencia.
Si estás utilizando un plugin de SEO, como Yoast SEO, Rank Math, All in One SEO o similar, te serán muy útiles al editar estos metadatos sociales. Casi todos los buenos plugins de SEO te permitirán cambiar las etiquetas meta para Facebook y Twitter por separado. En el siguiente texto, te mostraremos cómo configurarlas en Rank Math.
Comenzamos editando el post y haciendo clic en la pestaña SEO. Allí, se debe abrir la pestaña ‘social’.
Encontrando el lugar para editar las etiquetas meta de redes sociales en tu CMS
Rank Math contiene un visualizador de vista previa en vivo que te permite ver cómo impactarían los cambios realizados al incrustar tu post en Facebook o Twitter. Haz clic en el botón ‘Preview & Edit Social Media’ (Previsualizar y editar redes sociales).
Editando las etiquetas meta de Facebook
En primer lugar, veremos la vista previa del post de Facebook y debajo, las etiquetas meta de redes sociales que se pueden ajustar.
Vista previa del enlace compartido generada por tu CMS – en este caso, el plugin RankMath
En nuestro caso, las propiedades og:image, og:title y og:description aún no se han especificado. Como puedes ver, el simulador (editor de fragmentos de vista previa) muestra los valores de los metadatos básicos utilizados para los motores de búsqueda.
Editando etiquetas meta de redes sociales: las etiquetas og:title y og:description de tu post de blog
En nuestra primera imagen de este post, podemos ver que el título faltante es lo más problemático. Sin embargo, completaremos tanto el título como la descripción.
A continuación, después de guardar los cambios, deberíamos mirar cómo se verá el post actualizado cuando se comparta en Facebook.
Nuevas etiquetas meta de redes sociales completadas para el post
Aunque Facebook recomienda usar de 2 a 4 oraciones para la etiqueta meta og:description, nos limitaremos a una oración para esta demostración. Queremos ver si Facebook la muestra, gracias a haber creado algo de espacio en la tarjeta reduciendo la longitud del parámetro og:title.
Antes de comprobar el resultado, debemos mencionar otras soluciones que te permiten editar los parámetros Open Graph en WordPress. Si no estás utilizando un plugin de SEO, puedes usar un plugin dedicado a Open Graph como OG o insertar manualmente los metadatos sociales en el código HTML de tu página web. Esta última opción también será útil para otros CMS. WIX tiene una solución incorporada para insertar propiedades meta og, al igual que otros sistemas de gestión de contenido importantes.
Una vez que hayas terminado de editar las etiquetas meta de Facebook o Twitter, es hora de intentar compartir tu post en estas plataformas. Veamos cómo luciría nuestro post en Facebook ahora. Podemos usar el Facebook Debugger (oficialmente llamado Facebook Sharing Debugger, a veces referido como herramienta de vista previa de FB) para ver los posts modificados en Facebook. Antes de hacerlo, no olvides borrar tu caché o eliminar los archivos temporales de Safari (si estás usando este navegador) si no se han borrado automáticamente después de guardar el post.
Etiquetas meta Open Graph en el Depurador de Enlaces de Facebook (Sharing Debugger)
Vista previa del enlace en el Facebook Sharing Debugger mostrando tus etiquetas meta de redes sociales en acción
Como puedes ver arriba, todo se ve bien y los cambios en las etiquetas meta de Facebook han surtido efecto.
Conceptos erróneos comunes sobre las etiquetas meta de redes sociales
Mito 1: Las etiquetas meta de redes sociales son solo para fines de SEO.
Las etiquetas meta no son solo para los motores de búsqueda; juegan un papel crítico en cómo se muestra tu contenido en las redes sociales. Las etiquetas meta sociales como og:image y og:title optimizan específicamente tus posts para plataformas como Facebook y Twitter, mejorando el engagement.
Mito 2: Todas las imágenes se mostrarán perfectamente en las redes sociales.
No todas las imágenes de tu post se mostrarán correctamente al compartirse. Sin especificar og:image o usar una Twitter card, las plataformas sociales pueden seleccionar una imagen genérica o formatear incorrectamente la visual, afectando la apariencia de tu post.
Mito 3: Las etiquetas meta solo son importantes para sitios web de una sola página.
Las etiquetas meta son esenciales para sitios web que abarcan múltiples páginas. Ya sea que tu sitio contenga blogs o listados de productos, el uso de og:type y otras etiquetas meta garantiza una visualización consistente y optimizada en múltiples plataformas sociales.
Mito 4: Puedes confiar en que las plataformas de redes sociales muestren tu contenido correctamente.
Confiar en que Facebook o Twitter formateen automáticamente tu post es arriesgado, por decir lo menos. Sin configurar manualmente etiquetas meta clave como og:url y og:description, las plataformas sociales pueden extraer datos incorrectos o incompletos, impactando el atractivo visual de tu contenido.
Mito 5: Las etiquetas meta sociales son difíciles de implementar sin conocimientos de programación.
Los plugins de WordPress y herramientas como Rank Math simplifican el proceso de agregar y gestionar etiquetas meta de redes sociales. No necesitas ser desarrollador web para asegurarte de que tus posts estén optimizados para ser compartidos.
Mito 6: Las Twitter cards solo funcionan con imágenes estáticas.
Las Twitter cards soportan varios formatos de medios, incluyendo formatos GIF y videos. Puedes adjuntar fotos u otros medios a tu tarjeta de resumen, haciendo que tus posts sean más dinámicos y atractivos en esta red social.
Mito 7: Las etiquetas meta son solo para tu propio contenido.
Las etiquetas meta no son solo para tu propio sitio web; ayudan cuando tu contenido se comparte también en otros sitios web. Configurar adecuadamente meta property=»og:image» y meta property=»og:title» asegura que tu contenido se vea profesional sin importar dónde se comparta.
Conclusión
Esperamos que este artículo te haya ayudado a entender las meta propiedades og y su importancia para compartir enlaces en Facebook y Twitter. Si quieres llevar tu marketing en redes sociales a otro nivel, asegúrate de probar Kontentino (si aún no lo has hecho). Es una herramienta fácil de usar para crear contenido de redes sociales, que permite una colaboración en equipo eficiente y la aprobación de contenido.
Nuestro Calendario de Contenidos integra la función de vista previa, por lo que no tienes que ir a ningún otro lugar para ver cómo lucirá tu nuevo post con enlace, ahorrándote un tiempo precioso para verificar y optimizar tus etiquetas meta de redes sociales.
¿Y qué podría ser mejor que configurar las etiquetas UTM para rastrear el rendimiento del post en tu analítica web, establecer una fecha de publicación futura o asignar un presupuesto de promoción al post para lograr un mayor alcance?
Preguntas Frecuentes (FAQ)
¿Qué es una etiqueta meta para redes sociales?
Una etiqueta meta de redes sociales proporciona datos cruciales como títulos, imágenes y descripciones para las plataformas de redes sociales al compartir páginas web. Es esencial para mejorar la participación (engagement) del usuario en las principales plataformas.
¿Cuáles son ejemplos de etiquetas meta?
Ejemplos incluyen el contenido de meta property=»og:title», meta property=»og:image» y meta property=»og:url», que optimizan el compartir en plataformas sociales como Facebook y Twitter, asegurando que tu contenido esté bien representado.
¿Qué son los metadatos de redes sociales?
Los metadatos de redes sociales incluyen datos open graph como un título conciso, una descripción e imágenes de alta calidad, que mejoran la apariencia de las publicaciones en redes sociales en plataformas como Twitter y Facebook.
¿Qué son los tags o etiquetas de redes sociales?
Las etiquetas de redes sociales son identificadores como los tags de twitter card o tags og incrustados en el archivo HTML para influir en cómo se muestran las páginas web cuando se comparten en plataformas sociales, aumentando la exposición social.
¿Cómo crear etiquetas meta?
Para crear etiquetas meta, un desarrollador web inserta algunas líneas de código en el archivo HTML de una página web, incluyendo parámetros como la etiqueta de título, la etiqueta de descripción y una imagen única que represente el contenido.
¿Qué red social utiliza meta?
Las etiquetas meta son utilizadas por las principales plataformas sociales como Facebook, Twitter y LinkedIn para optimizar cómo aparecen las páginas web y las publicaciones de redes sociales cuando se comparten a través de las redes, mejorando la interacción del usuario.
¿Es necesaria una etiqueta meta?
Sí, las etiquetas meta son cruciales para el marketing online porque controlan cómo se ve tu contenido en las plataformas sociales, asegurando que se muestre la imagen y el título correctos, lo que aumenta las veces que se comparte y la interacción.
¿Cómo encontrar etiquetas meta?
Puedes inspeccionar el archivo HTML de un sitio web para encontrar etiquetas meta. Herramientas como Facebook Debugger y servicios generales online también te ayudan a ver propiedades meta específicas como og:image u og:type.
¿Cuántas etiquetas meta debo usar?
Usa etiquetas meta esenciales como og:title, og:image, og:url y etiquetas de Twitter card para optimizar tu exposición social. Prioriza la calidad sobre la cantidad enfocándote en las etiquetas de alto impacto para compartir en redes.
¿Qué es una etiqueta meta de Facebook?
Una etiqueta meta de Facebook, como meta property=»og:title», es parte del protocolo Open Graph. Ayuda a determinar cómo aparecen tus páginas web o publicaciones de redes sociales en Facebook, asegurando una mejor interacción del usuario.
¿Qué es el contenido de la meta propiedad og:title?
El contenido de la meta propiedad og:title define el título de tu página web tal como aparece cuando se comparte en plataformas de redes sociales como Facebook.
¿Qué es el contenido de la meta propiedad og:image?
El contenido de la meta propiedad og:image especifica la URL de la imagen que aparecerá cuando tu contenido se comparta en plataformas de redes sociales.
¿Qué es el contenido de la meta propiedad og:type?
El contenido de la meta propiedad og:type define el tipo de contenido (por ejemplo, artículo, sitio web) que se está compartiendo, ayudando a las plataformas sociales a categorizarlo y mostrarlo adecuadamente.
¿Qué son los metadatos? ¿3 ejemplos?
Ejemplos de metadatos incluyen la etiqueta de descripción, variables de sesión para parámetros de identificación de usuario y la etiqueta meta property=»og:image», que ayuda a las plataformas a seleccionar la imagen correcta para compartir en redes sociales.
