Cómo utilizar las etiquetas Open Graph

Cómo utilizar las etiquetas Open Graph

¿Utilizas etiquetas de título y meta descripción? Por supuesto que sí, porque ya sabes que las etiquetas meta pueden ayudar a mejorar tu clasificación en los motores de búsqueda.

¿Pero sabías que las etiquetas meta afectan realmente a tu tráfico en las redes sociales? Claro, están las etiquetas de autoría de Google, pero ¿qué pasa con Facebook y Twitter? De hecho, ambos tienen sus propias etiquetas meta de medios sociales que pueden ayudarle a aumentar la cantidad de tráfico social que está recibiendo.

¿Ha visto alguna vez esas publicaciones en los medios sociales que tienen imágenes y vídeos de aspecto atractivo? Puede que no sepas que no necesitas ningún software ni cuentas premium para hacer lo mismo en tus publicaciones sociales.

Se llaman Facebook Open Graph y Twitter Cards. A continuación te explicamos cómo puedes aprovechar ambos:

Facebook Open Graph

Cuando compartes una imagen en Facebook, ¿qué aspecto tiene?

Pues no siempre tiene ese aspecto. Facebook intenta leer el código de tu página, pero no siempre es capaz de extraer tus imágenes. Si no utilizas las etiquetas Open Graph cuando compartes una URL de tu sitio en Facebook, esto es lo que puede parecer:

Así es como se veía con Quick Sprout antes de que implementara las etiquetas Open Graph en mi sitio. Después de implementar las etiquetas Open Graph, pude aumentar mi tráfico de Facebook en un 174%, simplemente porque ahora había una imagen junto a mis actualizaciones de estado de Quick Sprout.

Ahora que estás convencido de que debes usar Open Graph, aquí es cómo lo configuras en tu sitio web.

og:title

Aquí es donde pones el título de tu contenido. Piensa que esto es similar a la etiqueta de título html normal que utilizaría un motor de búsqueda. Al crear su og:title, mantenga el número de caracteres a menos de 95 caracteres.

Ejemplo: <meta property=»og:title» content=»11 formas creativas de crear enlaces»/>

og:type

Aquí es donde describes qué tipo de contenido estás compartiendo. ¿Es un vídeo, una imagen, una entrada de blog, etc.? Aquí está la lista completa que puede elegir al definir su tipo de contenido:

Actividades

• actividad
• deporte

Negocios

• bar
• empresa
• café
• hotel
• restaurante

Grupos

• causa
• liga_deportiva
• equipo_deportivo

Organizaciones

• banda
• gobierno
• sin ánimo de lucro
• escuela
• universidad

Personas

• actor
• atleta
• autor
• director
• músico
• político
• figura_pública

Lugares

• ciudad
• país
• marca de tierra
• estado_provincia

Productos y entretenimiento

• álbum
• libro
• bebida
• comida
• juego
• producto
• canción
• película
• tv_show

Sitios web

• blog
• sitio web
• artículo

Ejemplo: <meta property=»og:type» content=»article»/>

og:description

También es similar a tu etiqueta html meta description porque se utiliza para describir tu contenido. No debe preocuparse por si es rica en palabras clave, sino que debe elaborar una descripción convincente que dé lugar a más clics. Tienes hasta 297 caracteres para esta etiqueta.

Ejemplo: <meta property=»og:description» content=»¿Estás cansado de construir enlaces a la vieja usanza? Ya sabes, los métodos que requieren que envíes correos electrónicos a miles de webmasters mendigando enlaces. «/>

og:image

¿Recuerdas que mencioné que pude aumentar mi tráfico de Facebook en un 174%? Fue porque utilicé Open Graph para asegurarme de que Facebook mostrara una imagen cada vez que alguien compartiera una URL de Quick Sprout.

Al utilizar una etiqueta og:image, te asegurarás de que haya una imagen junto al contenido que estás compartiendo. De este modo, destacará frente a todas las demás actualizaciones de estado basadas en texto que la gente ve en sus líneas de tiempo.

Antes de hablar de cómo puedes utilizar esta etiqueta, te explicaré los requisitos de Facebook. Una imagen tiene que ser de al menos 50px por 50px, pero preferiblemente más grande que 200px por 200px. Además, la imagen no puede tener más de 5 MB de tamaño.

Ejemplo: <meta property=»og:image» content=»https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg»/>

og:url

En esta etiqueta debes colocar la URL de la página que estás compartiendo. Esta etiqueta puede parecer irrelevante, pero es importante porque a veces tendrás más de una URL para el mismo contenido. Al utilizar esta etiqueta, te asegurarás de que todas las comparticiones vayan a una URL en lugar de a varias, lo que debería ayudar a tu Edgerank de Facebook.

Ejemplo: <meta property=»og:url» content=»https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/»/>

og:site_name

Esta etiqueta indica a Facebook el nombre de tu sitio web. Realmente no necesitas esta etiqueta, pero no está de más incluirla.

Ejemplo: <meta property=»og:site_name» content=»Quick Sprout»/>

fb:admins

Si tienes una página de fans en Facebook y quieres obtener más datos en Facebook Insights, entonces tienes que usar esta etiqueta. Le dice a Facebook que eres el propietario del sitio, y conecta tu página de fans de Facebook con tu sitio web.

Ejemplo: <meta property=»fb:admins» content=»500013011″/>

Ahora que ya tienes tus metaetiquetas Open Graph de Facebook, pasemos a las Twitter Cards.

Twitter Cards

¿Has visto alguna vez un tuit como este?

Pues bien, estos tuits detallados sólo aparecen cuando utilizas Twitter Cards. ¿No te gustaría tener eso para tu sitio? Te ayudará a destacar entre la multitud.

Así es como puedes aprovechar las Twitter Cards:

Si utilizas el plugin SEO para WordPress de Yoast, sólo tienes que seguir estos pasos. Para todos los demás, siga los pasos siguientes.

twitter:card

Esta metaetiqueta describe el tipo de contenido que está compartiendo. Tienes tres opciones con Twitter: foto (para imágenes), reproductor (para vídeos) y resumen (para todo lo demás). Si no define su tarjeta, Twitter utilizará por defecto el resumen.

Ejemplo: <meta name=»twitter:card» content=»summary»>

twitter:url

Esta es la página que estás compartiendo en Twitter. De forma similar a como Facebook pide una URL, Twitter también lo hace porque puedes tener la misma pieza de contenido en tu sitio varias veces. Esto asegurará que una URL reciba todos los tweets. De lo contrario, sus tweets se dividirán en múltiples urls.

Ejemplo: <meta name=»twitter:url» content=»https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/»>

twitter:title

Al igual que el título de tu Open Graph de Facebook, este no debe estar lleno de palabras clave. Hazlo convincente para que la gente quiera hacer clic en él. De nuevo, al igual que con Facebook, querrá limitar el número de caracteres a 70.

Ejemplo: <meta name=»twitter:title» content=»11 formas creativas de crear enlaces»>

twitter:description

Esto es similar a una etiqueta meta description que usarías para Google. Pero no la llenes de palabras clave. Su objetivo debe ser crear una frase convincente que incite a la gente a hacer clic en su sitio web. Su descripción está limitada a 200 caracteres.

Ejemplo: <meta name=»twitter:description» content=» ¿Estás cansado de construir enlaces a la vieja usanza? Ya sabes, los métodos que requieren que envíes correos electrónicos a miles de webmasters mendigando enlaces. «>

twitter:image

Para que tu tuit destaque, necesitas una imagen. Tus imágenes tienen que tener un tamaño de archivo inferior a 1 MB y no pueden ser menores de 60px por 60px. Las imágenes mayores de 120px por 120px serán redimensionadas.

Ejemplo: <meta name=»twitter:image» content=» https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg»>

Después de aplicar las metaetiquetas de Twitter Card a tu sitio, tienes que aplicar al programa Card de Twitter. Una vez que sea aceptado, las URL de su sitio web se mostrarán en el formato de tarjeta.

Conclusión

Las etiquetas meta no son sólo para los motores de búsqueda. Los sitios de medios sociales también los están aprovechando. Al igual que la optimización de las etiquetas meta para los rankings de Google y las tasas de clics, es necesario hacer lo mismo para Facebook y Twitter.