Meta Tags para redes sociales: Como usar Facebook Open Graph y Twitter Cards

¿Cómo Open Graph y Twitter Cards pueden beneficiar tu trafico en las Redes Sociales?

    Neil Patel es uno de los mayores gurús de marketing digital.

    Siempre vemos sus artículos como fuente de inspiración y aprendemos mucho de él. Tuvimos la oportunidad de conversar con Patel en su visita a Belo Horizonte para el evento FIRE 2015. En la plática nos autorizó traducir y publicar uno de sus artículos, que puedes ver aquí en inglés.

    ¡No sentimos honrados!

    (Y si no sigues a Neil Patel, sugerimos que le des un vistazo a su sitio web y a su página en Facebook)

    Social Media Tags: Cómo utilizar Graph y Cards

    ¿Utilizas title tags y meta description tags? Claro que las utilizas, por que tu sabes que te ayuda a mejorar tu posición en los motores de búsqueda.

    Pero ¿sabías que las meta tags afectan tu tráfico en las redes sociales? Claro, ahí están Google’s authorship tags, pero ¿qué hay sobre Facebook y Twitter? de hecho, cada una de estas redes tienen sus propios meta tags que te pueden ayudar a mejorar el tráfico social que estas recibiendo.

    Estas son llamadas Facebook Open Graph y Twitter Cards. Así es como puedes aprovechar las dos:

    Facebook Open Graph

    Cuando compartes una imagen en Facebook ¿cómo se ve? 

    Bueno, no siempre se ve así. Facebook trata de leer el código en tu página, pero no siempre carga las imágenes.

    Si no utilizas Open Graph tags cuando compartes un URL de tu sitio en Facebook, es posible que solo se vea el texto del artículo (título, sitio web y descripción), como un post sin vida y que no sobresale entre los otros en Facebook. 

    Así es como solía verse Quick Sprout antes de que implementará Open Graph tags en el sitio web.

    Después de haber implementado las Open Graph tags, pude incrementar mi tráfico en Facebook un 174%, simplemente porque ahora tengo imágenes en cada actualización de estatus de Quick Sprout.

    Ahora que estás convencido, tú también deberías usar Open Graph. Así es como lo puedes instalar en tu sitio web.

     Si usas WordPress, solo instala este plugin y prácticamente ya terminaste.

    Si no usas WordPress, necesitarás meta tags por cada página en tu sitio web manualmente. Para que sea más fácil de entender, usaremos el artículo “Factores de posicionamiento de Google: 10 herramientas que te ayudarán” como ejemplo.

    Og:title

    Aquí pones el título de tu contenido. Piensa en esto como algo similar a tu html title tag normal que el motor de búsqueda usa. Cuando crees tu og:title, mantén el  número de caracteres cerca de 95 caracteres.

    Ejemplo: <mata property=»og:title»content=»Factores de posicionamiento de Google: 10 herramientas que te ayudarán»/>

    Og:type

    Aquí es donde describes qué tipo de contenido estás compartiendo. ¿Es un vídeo corto, una foto, una publicación de tu blog, etc? Esta es la lista de la cual puedes escoger al definir el tipo de tu contenido:

    Activities

    • activity
    • sport

    Business

    • bar
    • company
    • café
    • hotel
    • restaurant

    Grupos

    • causa
    • sports_liga
    • sports_team

    Organizations

    • band
    • goverment
    • non_profit
    • school
    • University

    People

    • actor
    • athlete
    • author
    • director
    • musician
    • politician
    • public_figure

    Places

    • city
    • country
    • landmark
    • state_providence

    Products and Entertainment

    • albúm
    • book
    • drink
    • food
    • game
    • product
    • song
    • movie
    • tv_show

    Websites

    • blog
    • website
    • artículo

    Ejemplo: <meta property=”og.type” content=”artículo”/>

     

    og:description

    Esto también es similar a tu html meta description porque es utilizada par describir tu contenido. No te debe importar si es una buena palabra clave, sin embargo debes de incluir una descripción atractiva que te dará más clics. Tienes hasta 156 caracteres para esta tag.

    Ejemplo: <meta property=”og:description”content=”¿Quieres saber como aparecer en la primera página de resultados de Google al hacer una búsqueda referente a tu mercado? Estas 10 herramientas te ayudarán”/>

    Og:image

    ¿Recuerdas que las publicaciones con imágenes eran capaces de aumentar el tráfico en Facebook por un 174%? Es por que usé Open Graph para asegurarme que Facebook mostrara la imagen cada vez que se compartiera el URL de Quick Sprout.

    Usando una tag og: image, asegurarás que la imagen se muestre con el contenido que estás compartiendo. De esta manera, destaca entre todo el contenido basado en solo texto en las actualizaciones de status en Facebook.

    Antes de que hable sobre cómo usar la tag, te hablaré sobre los requisitos de Facebook. Una imagen tiene que ser al menos 5o x 50 px, pero preferentemente más grande de 200 x 200 px. La imagen no puede ser más de 5 MB.

    Ejemplo:https://rockcontent.com/es/wp-content/uploads/sites/3/2015/10/google-156-620×316.jpg»/>

    Og:url

    En esta tag, deberías de poner el URL de la página que estás compartiendo. Está tag puede parecer irrelevante, pero es importante porque a veces puedes tener más de un URL para el mismo contenido. Usando esta tag, te asegurarás que siempre que sea compartido vayan a un URL en lugar de varios URL´s, lo cual debe ayudar a tu Facebook Edgerank.

    Ejemplo:https://rockcontent.com/es/blog/factores-de-posicionamiento-de-google/”/>

    Og:site_name

    Está tag le dice a Facebook el nombre de tu sitio web. En realidad no necesitas está tag, pero no te daña si la incluyes.

    Ejemplo: <meta property=”og:url”content”https://rockcontent.com/es/blog/factores-de-posicionamiento-de-google/”/>

    Fb:Admins

    Si tienes una página de Facebook y quieres más información en Facebook Insights, entonces debes usar esta tag. Le dices a Facebook que eres el dueño del perfil, y conecta tu página de Facebook a tu sitio web.

    Ejemplo:  <meta property=”fb:admins”content=”marketingdecontenidos”/>

    Ahora que ya tienes tu Facebook Open Graph meta tags, vamos a ver sobre Twitter Cards.

    Twitter Cards

    ¿Has visto un tweet como este?

    Bueno, estos tweets solo se ven así cuando utilizas Twitter Cards. ¿No te gustaría tener esto para tu sitio? Te ayudará a sobresalir.

    Así es cómo crear Twitter Cards:

    Si usas el SEO para WordPress plugin de Yoast, solo sigue estos pasos. Si tú no utilizas este plugin, sigue los siguientes pasos.

    Twitter:card

    Esta meta tag describe el tipo de contenido que estás compartiendo. Tienes tres opciones con Twitter: photo (para imágenes), player (para videos), summary (para todo lo demás) y summary with large image (tiene las mismas características que la card summary, pero ofrece un poco mas de espacio para una imagen y descripción). Si tú no defines tu card, Twitter lo identificará como tipo resumen por default.

    Ejemplo:<meta name=”twitter:card” content=”summary with large image”>

    Twitter:url

    Esta es la página que estás compartiendo en Twitter. Similar a como Facebook pregunta por un URL, Twitter también hace esto ya que es posible que tengas la misma pieza de contenido en tu sitio más de una vez. Esto asegurará que todos los tweets sean para el mismo URL. De otra manera, tus tweets se dividirán en varios URLs.

    Ejemplo:<meta name=»twitter:url» contnet=»https://rockcontent.com/es/blog/marketing-de-contenidos-2/ “>

    Twitter:title

    Similar a tu título Facebook Open Graph, esto no debería estar lleno de palabras clave. Hazlo atractivo para que los usuarios le den clic. Nuevamente, como en Facebook es mejor que te mantengas entre 70 caracteres.

    Ejemplo:<meta name=”twitter:title” content=”Marketing de Contenidos: como puede impulsar tu empresa”>

    Twitter:description

    Esto es similar a la meta description tag que usas para Google. Pero no abuses de las palabras clave. Tu objetivo es escribir una oración atractiva te invita a la gente a hacer clic. La descripción está limitada a 200 caracteres.

    Ejemplo: 

    <meta name=”twitter:description” content=» Conoce la nueva estrategia de Marketing que puede hacer crecer tu empresa con menor inversión que con el marketing tradicional”>

    Twitter:image

    Para que tu Tweet sobresalga necesitas una imagen. Tus imágenes deben ser de menos de1 MB, pero no pueden ser menores de 60 x 60 pixeles. Imágenes de mayor tamaño de 120 x 120 pixeles serán ajustadas.

    Ejemplo: <meta name=»twitter:image»https://rockcontent.com/es/wp-content/uploads/sites/3/2015/05/Marketing-de-Contenido-620×316.jpg»>

    CONTENIDOS RECOMENDADOS
    [E-book] Marketing en Instagram
    [E-book] Marketing en Facebook
    [E-book] Marketing en Twitter
    [E-book] Marketing en LinkedIn
    [E-book] Marketing en Youtube

    Conclusión

    Meta tags no solo son para los motores de búsqueda. Las redes sociales también las están tomando en cuenta. Justamente cómo optimizas tus meta tags para tener mejor posicionamiento en Google y los porcentajes de clics, también necesitas hacer lo mismo para Facebook y Twitter.

    ¿Qué piensas de Open Graph y Twitter Cards? Yo obtuve un incremento en el tráfico con Open Graph, pero me gustaría saber que es lo que piensas.

    Cuota
    facebook
    linkedin
    twitter
    mail

    Suscríbete y recibe los contenidos de nuestro blog

    Recibe acceso de primera fuente a nuestras mejores publicaciones directamente en tu caja de entrada.

    Related Posts

    ¿Te gustaría recibir más contenido de altísima calidad como este y de forma totalmente gratuita?

    ¡Suscríbete para recibir nuestros contenidos por e-mail y conviértete en un miembro de la Comunidad Rock Content!