Un buen contenido atraerá a una audiencia relevante a su sitio web y es muy probable que algunas de esas personas quieran compartir su contenido en las redes sociales. Pero a veces ocurren problemas cuando el contenido compartido no aparece correctamente en una transmisión social, que es donde el uso de etiquetas Open Graph puede ayudar.
Con Open Graph puedes controlar la apariencia del título, la imagen, la descripción y más de tu contenido cuando se comparte a través de los canales sociales. Quizás ya esté familiarizado con las metaetiquetas comunes, como la etiqueta de título y las etiquetas de descripción. Pero muchos blogueros no saben que existen otras metaetiquetas específicas para sitios de redes sociales como Google+, Facebook, Twitter y Pinterest. La razón por la que estos sitios de redes sociales han comenzado a utilizar metadatos es para mostrar correctamente el contenido junto con imágenes, descripciones y enlaces relacionados. Al definir estas metaetiquetas, puede asegurarse de que su contenido sea más fácil de compartir y comprender de un vistazo en las redes sociales.
Cada sitio de la red social tiene diferentes preferencias. Pinterest y Google+ dan preferencia a las etiquetas Schema, pero también admiten Protocolo de gráfico abierto etiquetas, que son las preferidas por Facebook, Google+ y Pinterest.
Las etiquetas de Open Graph van entre la sección
de la página web. Las etiquetas más utilizadas son:- og: título
- og: descripción
- og: url
- og: nombre_del_sitio
- og: imagen
- og: tipo
Esto probablemente no tenga mucho sentido, así que aquí hay algunos diagramas de redes sociales compartidas con las etiquetas de Open Graph claramente etiquetadas.
Además, Twitter ha definido sus propias etiquetas personalizadas conocidas como Twitter Cards. Estas etiquetas permiten que sus enlaces presenten más información cada vez que se twittean. De manera similar a las etiquetas de Open Graph, las etiquetas de las tarjetas de Twitter también van entre la sección
de una página web. Las etiquetas de Twitter más utilizadas son:- twitter: tarjeta
- twitter: sitio
- twitter: creador
Si bien puede agregar etiquetas de Open Graph y Twitter Card manualmente, hay muchos complementos disponibles en WordPress.org que facilitan incluso a los usuarios novatos agregar etiquetas en publicaciones y páginas de WordPress. Algunos de nuestros favoritos incluyen:
- SEO por Yoast
- Open Graph para etiquetas de tarjetas de Facebook, Google+ y Twitter
- El marco de SEO
- Tarjetas de Twitter de JM (solo para tarjetas de Twitter)
- Marco de protocolo de gráfico abierto (Solo para etiquetas Open Graph y recomendado para desarrolladores)
Para este tutorial, usaremos las opciones integradas del complemento Yoast SEO para definir metaetiquetas especiales para hacer que nuestras publicaciones sean compatibles con los medios enriquecidos.
Nota: Debe usar solo un complemento que tenga una funcionalidad similar. Si ya tiene WordPress SEO by Yoast instalado, entonces es mejor configurar ese complemento que instalar también el complemento Open Graph para Facebook, Google+ y Twitter Card Tags.
Paso 1: instale la última versión de Yoast SEO
Le recomendamos que instale la última versión de Yoast SEO. La forma más sencilla de hacerlo es a través del panel de administración de WordPress en Complementos> Agregar nuevo y busque «Yoast SEO».
Luego instale y active el complemento (simplemente haga clic en ese botón).
Una vez activado, debería ver una nueva pestaña «SEO» en su panel de administración de WordPress. Hay toneladas de funciones geniales en Yoast SEO (para migas de pan, redirecciones, etc.) pero lo que nos interesa hoy es la Social pestaña.
Paso 2: configure sus ajustes sociales
Para configurar las tarjetas Open Graph y Twitter, navegue hasta SEO> Social desde el panel de administración de WordPress. Primero agregue los enlaces de su perfil social aquí para ayudar a los motores de búsqueda a validar que realmente están conectados a su sitio. Luego, pase a las distintas pestañas sociales.
El primer paso es habilitar los metadatos de Open Graph para las publicaciones de Facebook; simplemente haga clic en el Activado opción. Suponiendo que ya agregó la página de Facebook relacionada con su sitio en el Cuentas pestaña está listo para comenzar. Puede agregar una imagen predeterminada si lo desea para cualquier página que no tenga medios destacados, pero eso depende de usted.
Gorjeo
Una vez hecho Facebook, es hora de abordar Twitter. Solo asegúrese de que los metadatos de la tarjeta de Twitter sean Activado luego seleccione un diseño de tarjeta predeterminado (resumen o resumen con imagen grande). Nuevamente, esto se asociará con el identificador de Twitter que ha agregado en el Cuentas página.
Pinterest es un poco diferente, ya que esta plataforma utiliza una verificación de metaetiquetas. Vaya a su cuenta de Pinterest, coloque el cursor sobre el icono de usuario y luego haga clic en el Ajustes pestaña. Clickea en el Reclamar sitio web opción y seleccione la Agregar etiqueta HTML opción.
Copie la metaetiqueta generada y péguela en su panel de Yoast SEO. Guarde sus cambios, luego regrese a Pinterest para enviar. Esto le dice a Pinterest que revise la etiqueta y verifique su sitio. ¡Eso es todo para Pinterest!
Google+
La última cuenta social que deberá configurar es Google+, que es solo un enlace a la página de Google+ de su empresa. Pégalo y listo.
Configurar valores predeterminados
El último paso es crear su archivo predeterminado. Yoast usa metacajas en su contenido para definir los datos de Open Graph, así que asegúrese de editar sus valores predeterminados en SEO> Apariencia de búsqueda> Tipos de contenido. Use las variables de fragmento integradas de Yoast SEO para crear sus propios valores predeterminados dinámicos para el título de su publicación (que se usa para og: title) y la meta descripción (que se usa para og: description).
Imagen, título y descripción personalizados
Yoast SEO también incluye una opción en publicaciones individuales para personalizar la imagen, el título y la descripción utilizados para Facebook y Twitter. Al editar una publicación, simplemente desplácese hacia abajo hasta la sección Yoast SEO y haga clic en el ícono para compartir (parece menos que el símbolo <). Luego cargue una imagen personalizada o edite el título y la descripción según sea necesario.
Depuración y validación
Cada sitio importante de redes sociales tiene su propio Validador o depurador para probar y obtener una vista previa de cómo aparecerán sus enlaces cuando se compartan en las redes sociales.
Herramienta de prueba de datos estructurados de Google: Esta herramienta no le mostrará la vista previa de la publicación compartida en Google+, pero mostrará qué metadatos están presentes y son legibles por Google. Sus propiedades aparecerán en las propiedades del nodo RDFA.
Depuración de Facebook: Después de implementar las etiquetas de Open Graph, simplemente pegue la URL de su sitio que contiene las etiquetas. Le mostrará las propiedades del objeto.
Herramienta de validación de Twitter: Puede utilizar este enlace para obtener una vista previa de la tarjeta de Twitter de su publicación antes de que se comparta en las redes sociales.
Validador de pines enriquecidos de Pinterest: Similar a los dos últimos validadores, simplemente ingrese la URL que contiene las etiquetas de Open Graph para obtener una vista previa y asegúrese de que su contenido se muestre como debería. Si has seguido todo el tutorial no tendrás ningún problema.
Nota final
Al utilizar estas metaetiquetas de Open Graph, puede optimizar la forma en que los títulos, las imágenes, las descripciones y otros detalles de su contenido aparecen en las redes sociales. Esto puede ayudar a aumentar el tráfico de los sitios sociales, ya que los enlaces con información clara tienden a obtener más compartidos y enlaces naturales. Además, las personas tienden a confiar en los enlaces que contienen más información en lugar de hacer clic en URL cortas o desnudas (también puede ayudar si está utilizando técnicas para automatizar el intercambio social).
Esperamos que nuestra guía te haya ayudado a configurar las metaetiquetas Open Graph y las tarjetas de Twitter de tu sitio, pero si tienes alguna pregunta, no dudes en preguntar. ¡Estamos felices de ayudar si podemos!
¿Qué complementos de WordPress utiliza para implementar estas metaetiquetas? ¿Tiene otros consejos o trucos para agregar? No dude en mencionar sus pensamientos en los comentarios a continuación.