¿Quieres compartir los contenidos de tu página web en las redes sociales? En este artículo te presentamos algunos consejos importantes para integrar etiquetas Open Graph, de manera que en el futuro les puedas sacar mayor partido a tus redes sociales.
Cuando compartes contenidos en Facebook y otras redes sociales, son tan importantes las páginas de resultados como la atracción de los clics. En las redes sociales, además del título y la descripción, se pueden definir otros elementos como las imágenes en miniatura. Cuando la vista preliminar del artículo que se desea compartir está optimizada y adaptada al grupo objetivo, el CTR mejora considerablemente. Estos atributos que le confieren una apariencia atractiva a los contenidos de las redes sociales como Facebook se llaman Open Graph.
Con las etiquetas Open Graphs (o etiquetas og) depositas elementos en el código fuente (por ejemplo, marcas elementos en el encabezado). Después, ese marcado se utiliza para mostrar el título, la descripción y la imagen en miniatura en el grafo social. El protocolo Open Graph no sirve solo para Facebook; por ejemplo, también se utiliza en Twitter.
El protocolo Open Graph de Facebook se introdujo por primera vez en primavera de 2010 y sustituyó al estándar "Facebook Connect" que era válido hasta entonces y servía para verificar los perfiles de la red social en páginas web.
Otra ventaja de las etiquetas Open Graph es que, cuando los usuarios comparten enlaces de tu página web en sus redes sociales, se genera automáticamente una vista preliminar óptima.
El elemento og:title se muestra casi siempre junto a la imagen de una publicación de Facebook. Por ello, debes esforzarte mucho en llegar a tus grupos objetivo (a ser posible, los adecuados) de las redes sociales, para, de esa manera, aumentar el CTR de tus publicaciones compartidas. Ten en cuenta que hay una restricción de 95 caracteres. Si quieres evitar un salto de línea, es mejor que te quedes en los 50 caracteres, como máximo. Además, los títulos más cortos tienen un mejor efecto.
Un ejemplo práctico del código fuente:
<meta property="og:title" content="Etiquetas Open Graph: consejos prácticos para tu página web"/>
Un ejemplo práctico del código fuente:
De manera similar a una metadescripción de una página web, con og:description se puede crear una descripción propia para las redes sociales. Sin embargo, en este caso las palabras clave (independientemente de si son primarias o secundarias) son irrelevantes, puesto que no se tienen en cuenta. La descripción debe ser concluyente, debe animar por lo menos a hacer clic y darle al usuario la impresión que estaba esperando (para, después, no decepcionarle y empeorar parcialmente las señales del usuario). La longitud máxima para la etiqueta Open Graph de descripción es de 297 caracteres.
Un ejemplo práctico del código fuente:
<meta property="og:description" content="En el Ryte magazine encontrarás los últimos consejos sobre etiquetas Open Graph.">
Las etiquetas Open Graph og:image son una parte muy atractiva para los clics. Escoge una imagen atractiva que anime al usuario a hacer clic en ella o a compartirla. Para poder controlar tanto como sea posible la representación en el stream del grupo objetivo, se recomienda, sobre todo para contenidos socialmente relevantes, una og:imagen específica. Por lo general, la imagen del artículo que se utiliza en la propia página web tiene buenas posibilidades de optimización. Si, por ejemplo, no defines la etiqueta og:image en Facebook, los usuarios pueden escoger ellos mismos una imagen en la vista preliminar social. Ya que en esta también suele haber una variedad de banners de publicidad, iconos u otros elementos, la definición de la imagen Open Graph debe ser oblitagoria para ti.
Imagen 1: Ejemplo de open graph por El País
Descubrirás qué imágenes son adecuadas para la propia página web probando constantemente. Gracias a un seguimiento bien integrado, puedes comprobar con total facilidad qué imagen tiene un mayor rendimiento en tus etiquetas Open Graph o en qué imagen se ha hecho clic. La og:image muestra de la mejor manera posible el contenido que se trata en el artículo. En este caso, el título y la descripción llevan a hacer clic en un segundo paso.
Resulta interesante saber que si en XING no se utiliza ninguna og:image, no se intentará hacer nada para encontrar una imagen en la página web que se pueda utilizar como vista preliminar. Asimismo, para mostrar una imagen preliminar de un enlace compartido en XING, el elemento og:image es imprescindible.
Para presentar la etiqueta og:image de la mejor manera posible en Facebook, se deben considerar también los formatos y tamaños. Facebook utiliza actualmente un formato de 1,91:1 para las imágenes del feed. En cuanto al tamaño, se debe tener en cuenta lo siguiente:
Imagen 2: Formatos y tamaños utilizados de og:image
Si trabajas con imágenes pequeñas y estas contienen texto, se deben colocar lo más al centro posible para que puedan ser visibles en el stream de Facebook (y no queden recortadas).
Para algunos, la inclusión de las etiquetas og:url es incluso redundante para la utilización canónica. Sin embargo, puesto que se utilizan parcialmente varias URL (por ejemplo, a través del seguimiento de las campañas de las redes sociales), es importante tener en cuenta estas etiquetas para darles mejores ideas a las redes sociales sobre el algoritmo EdgeRank (Facebook). Dado que las redes sociales también trabajan con ideas alternativas (p. ej., URL canónicas), para las páginas socialmente relevantes es recomendable que enumeres las og:url en el código fuente antes de la etiqueta canónica y, mientras tanto, las grandes redes se las arreglan con otra secuencia. Sin embargo, hace algún tiempo hubo problemas y las URL incorrectas acabaron en el stream de Facebook.
Un ejemplo práctico del código fuente:
<meta property="og:url" content="https://es.ryte.com/magazine/este-articulo">
En la mayoría de los casos, puedes utilizar las expresiones "website", "blog" o "article" para og:type. Sin embargo, si trabajas con otros elementos multimedia como música, vídeos, libros o similares, merece la pena, sin duda alguna, utilizar la consideración más específica de las características de og:type. En este artículo se trata la optimización de etiquetas Open Graph de documentos HTML.
og:type tendría este aspecto:
<meta property="og:type" content="artículo">
El depurador de objetos de Facebook es muy práctico para la optimización de tus etiquetas Open Graph. Te muestra qué datos ha almacenado Facebook en una URL, por ejemplo, cómo se muestra la URL en el stream. Necesitas una cuenta de Facebook válida para utilizar el depurador.
La opción más importante del depurador Open Graph es "Fetch new scrape information". Esta función es importante para aquellos casos en los que se comprueban y optimizan muchos contenidos, por lo que sirve de función para borrar la caché dentro del protocolo Open Graph. Entretanto, Facebook almacena datos. Por ejemplo, si se adaptan og:title, og:image u otros elementos, el proceso puede tardar más hasta que Facebook los muestre correctamente. Con la función "Fetch new scrape information", los datos almacenados mientras tanto se pueden borrar y cargar de cero.
Imagen 3: Imagen del uso del depurador de Facebook
Con las etiquetas og de Twitter sucede algo similar. Para comprobar la imagen preliminar de las publicaciones que has compartido en Twitter, puedes utilizar el Twitter Card Validator.
Consejo: con Ryte Suite podrás analizar tus etiquetas Open Graph. Para ello, lo mejor es que utilices los Social Reports de Ryte.
Con las etiquetas Open Graph optimizas tu presentación en redes sociales si se comparten las URL de tu página web. Para ello, solo necesitas hacer unos pocos movimientos y podrás trabajar en CMS como WordPress de forma muy sencilla con plug-ins.
¡Disfruta optimizando en Social Graph!
La teoría está bien, pero la práctica es aún mejor. Analiza tu página web con Ryte GRATIS.
Escrito el 09.07.2020 por Philipp Roos.
Philipp es un miembro de la familia Ryte y apoya a Ryte con sus conocimientos en SEO. Él estudió germanística. Ha pasado de estar horas en descifrar textos casi con palabras casi ilegibles a posicionar palabras claves en artículos web, asegurando los primeros puestos en los motores de búsqueda.