Etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags en tu socialmedia.

Etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags

En este artículo te explicamos cómo ofrecer mejor información a los rastreadores de las redes sociales. Esto es lo que tienes que hacer para integrar en las noticias, paginas de detalle de vídeo y foto galerías de tu sitio web las etiquetas de Facebook y Twitter. La idea es ponérselo fácil a los sistemas de compartir en redes sociales, como Twitter, Google+, Facebook o Pinterest, para mejorar la viralidad del contenido de tu sitio web. Etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags en tu socialmedia.

La importancia de los datos Open Graph. Si debemos elegir un tipo de metadatos para incluir en una página web, estos serían los datos Open Graph (Facebook). Esto se debe a que todas las plataformas pueden utilizarlo como reserva, incluyendo Twitter. Las twitter cards también mejoran la iteración de nuestros usarios con Twitter.

Las  etiquetas meta sociales son simples. Contiene los datos mínimos para poder compartir contenido en Twitter, Facebook, Google+ y Pinterest.

Las plantillas «meta tags» para las redes sociales son básicas en uan Web que se precie. En este artículo te explicamos las etiquetas sociales sobre todo de Facebook Twitter.

¿Cómo implementar las etiquetas sociales?

En el HTML pondremos una serie de meta tags que permiten mejorar nuestra viralidad en las redes sociales, Twitter, Facebook, G+, Pinterest. Utilizar estas metas tags sociales puede ayudarnos a difundir mejor nuestro contenido, ya que nos permite definir las imágenes y descripciones de una forma más óptima.Etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags.

Saber exactamente que Meta Tags incluir puede ser confuso, incluso para personas con cierta experiencia en este tema. Si por ejemplo utilizas algún CMS y tienes implementado un plugin de SEO, generalmente no tienes que preocuparte por este tema ya que el propio plugin te lo estará gestionando, pero si quieres optimizar cómo apareces en las redes o no quieres depender de otros, te interesará este artículo. Si usas WordPress utiliza el plugin Yoast sEO y las tendras metidas.

Las etiquetas del título y las meta descripciones se incluyen, aunque no sean etiquetas meta sociales propiamente dichas. Esto es debido a que pueden ser utilizadas por Google+ y otras plataformas de redes sociales, y forma parte de las mejores prácticas SEO .

La etiquetas se colocan dentro de las las etiquetas <head> de tu página web.
<title>Título de la página. Longitud máxima 60-70 caracteres</title>
<meta name=»description» content=»Descripción de la página. Longitud máxima 155 caracteres.» />

 

Open Graph etiquetas de Facebook

Para convertir las páginas en los objetos gráficos, es necesario agregar metadatos básicos a la página. Utilizamos la versión inicial del protocolo sobre RDFa lo que significa colocar etiquetas adicionales en e la página web. Fuente http://developers.facebook.com/docs/opengraph/

Las propiedades necesarias para todas las páginas son los siguientes:
• OG: title – El título de su objeto, coincide con la Meta etiqueta “title”
• OG: Type – El tipo de su objeto, por ejemplo, «video.movie» o “article”. Dependiendo del tipo especificado, otras propiedades también puede ser necesaria.
• OG: image – Un URL de la imagen que debe representar a su objeto dentro de la gráfica
• OG: url – La URL canónica de su objeto que será utilizado como su identificación permanente en el gráfico.
• og:description – Descripción de la página del objeto. Coincide con la Meta etiqueta “Description”
• og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Para españa es es_ES.
• og:site_name – If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., «IMDb».

 

Ejemplo:

<meta property=»og:title» content=»[=META TITLE]» />

<meta property=»og:type» content=»[TIPO CONTENIDO]» />

<meta property=»og:url» content=»[URL PAGINA]» />

<meta property=»og:image» content=»[URL IMAGE THRUMBAIL]» />

<meta property=»og:description» content=»[=META DESCRIPTION]» />

<meta property=»og:locale» content=»es_ES» />

<meta property=»og:site_name» content=»Frikipandi» />

 

Meta datos avanzados para Facebook

Tan solo trabajaremos con 2 tipos de metadatos avanzados como son los de artículos y vídeos.

En los vídeos las etiquetas a incluir en las páginas de vídeos además de los básicos. En el ejemplo mostramos como quedaría.
• og:type» content=»video»
• og:video – La url del objeto vídeo
• og:video:secure_url – Alternativa si la página usa https.
• og:video:type – A MIME type for this image.
• og:video:width – Píxeles ancho
• og:video:height – Pixeles alto
• og:video:tag etiquetas del video

Ejemplo:

Meta datos básicos  más los siguientes:

<meta property=»og:type» content=»video»>

<meta property=»og:video» content=»http://example.com/bond/trailer.swf» />

<meta property=»og:video:secure_url» content=»https://secure.example.com/movie.swf» />

<meta property=»og:video:type» content=»application/x-shockwave-flash» /> si es html5 <meta property=»og:video:type» content=»text/html»>

<meta property=»og:video:width» content=»400″ />

<meta property=»og:video:height» content=»300″ />

<meta property=»og:video:tag» content=»twitter»>

<meta property=»og:video:tag» content=»tweet»>

<meta property=»og:video:tag» content=»jack dorsey»>

<meta property=»og:video:tag» content=»ev williams»>

<meta property=»og:video:tag» content=»biz stone»>

<meta property=»og:video:tag» content=»dick costolo»>

 

Metadatos avanzados de Facebook en nuestros post o artículos.

Las etiquetas a incluir en las páginas de artículos además de los básicos. En el ejemplo mostramos como quedaría og:type values: article

Namespace URI: http://ogp.me/ns/article#

  • article:published_time – datetime – Fecha publicación.
  • article:modified_time – datetime – Fecha de la última modificación.
  • article:expiration_time – datetime – When the article is out of date after.
  • article:author – profile array – Autor del artículo.
  • article:section – string – Nombre de la sección a primer nivel. Ej. Cotizaciones
  • article:tag – string array – palabras clave asociadas al artículo.

Ejemplo:

Meta datos básicos  más los siguientes:

<meta property=»og:article:published_time» content=»2012-02-27T13:40″ />

<meta property=»og:article:modified_time» content=»2012-02-28T09:15″ />

<meta property=»og:article:author» content=»hoycinema» />

<meta property=»og:article:section» content=»cine» />

<meta property=»og:article:tag» content=»cine,actriz,gente» />

 

Integración de OG con Facebook

Incluiremos las etiquetas de administrador y aplicación para controlar la integración de open graph en Factbook, sus datos estadísticos y validar su propiedad en cada una de las páginas.

<meta property=»fb:admins» content=»[USER_ID1,USER_ID2]»/> La a propiedad meta “fb: admins” requiere que introduzcas tu número de identificación numérico de Facebook y te da acceso a la analítica de cómo el contenido de tu página web es compartido en Facebook.

<meta property=»fb:app_id» content=»[Nº APP]» />

 

Twitter cards etiquetas de  Twitter

Los twitter cards son tags que permiten a los Webmasters mejorar la divulgación de tweets a través de Twitter. Los Twitter Cards usan estándares como las etiquetas OpenGraph, por este sistema los propietarios de páginas web tienen la posibilidad de determinar el mensaje que sale cuando las páginas se comparten en Twitter. Al igual que los tags de Facebook.
https://dev.twitter.com/docs/cards

Existen tres tipos de cards que nos interesan especialmente para nuestra Web:
o Summary large image
o Photo
o Player

Por defecto utilizaremos SUMMARY cards en las noticias. Summary large imagees la que solemos utilizar.

https://dev.twitter.com/cards/types/summary-large-image

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

<meta name=»twitter:site» content=» @abc_es»>  o  <meta name=»twitter:site» content=» @ abcdesevilla»> o  <meta name=’twitter:site’ content=’@lavozdigital’ />

<meta name=»twitter:url» content=»[URL PAGINA]»>

<meta name=»twitter:title» content=»[=META TITLE]»>

<meta name=»twitter:description» content=»[=META DESCRIPTION]»>

<meta name=»twitter:image» content=»[URL IMAGE]»>

 

Un ejemplo de Twitter Cards:

 

<meta name=»twitter:card» content=»summary_large_image»/>

<meta name=»twitter:site» content=» @frikipandi»>  <meta name=»twitter:title» content=»Miguel Ángel Revilla, el presidente que nunca ganó»/>

<meta name=»twitter:description» content=»«Como España es un país en el que las elecciones ya no se ganan ni con gestión ni, mucho menos, debatiendo en el Parlamento, él ha vuelto»»/>

<meta name=»twitter:url» content=»[URL PAGINA]»/>

<link rel=»image_src» type=»image/jpeg» href=»[URL IMAGEN]»/>

<link rel=»thumbnail» type=»image/jpeg» href=»[URL IMAGEN]»/>

<meta name=»twitter:image» content=»[URL IMAGEN]»/>

 

Para galerías https://dev.twitter.com/cards/types/gallery Para las Galerías de fotos utilizaremos GALLERY Cards

 

Ejemplo:

<meta name=»twitter:card» content=»gallery»>

<meta name=»twitter:site» content=»@abc_es»>

<meta name=»twitter:title» content=»[=TITULO GALERIA]»>

<meta name=»twitter:description» content=»[DESCRIPCION DE LA GALERIA]»>

<meta name=»twitter:image0″ content=»[URL IMAGEN]»>

<meta name=»twitter:image1″ content=»[URL IMAGEN]»>

<meta name=»twitter:image2″ content=»[URL IMAGEN]»>

<meta name=»twitter:image3″ content=»[URL IMAGEN]»>

 

Para página de videos twitter:player Para página de videos https://dev.twitter.com/cards/types/player

 

<meta name=»twitter:card» content=»player»>

<meta name=»twitter:site» content=»@abc_es»>

<meta name=»twitter:url» content=»[URL PAGINA]»>

<meta name=»twitter:title» content=»Sample Player Card»>

<meta name=»twitter:description» content=»This is a sample video. When you implement, make sure all links are secure.»>

<meta name=»twitter:image» content=»https://yoursite.com/example.png«>

<meta name=»twitter:player» content=»[URL VIDEO]»>   ejemplo para youtube meta name=»twitter:player» content=»https://www.youtube.com/embed/15u2G-L07x8«> hay que dar en embed de brightcove

<meta name=»twitter:player:width» content=»480″>

<meta name=»twitter:player:height» content=»480″>

<meta name=»twitter:player:stream» content=»[URL STREAM]»>

<meta name=»twitter:player:stream:content_type» content=»video/mp4″>

 

Etiquetas Google +. Google Authorship y Publisher Markup

<!– Google Authorship and Publisher Markup –>
<link rel=»author» href=» <a href=»blank»>https://plus.google.com/[Google+_Profile]/posts»/</a>>
<link rel=»publisher» href=” <a href=»blank»>https://plus.google.com/[Google+_Page_Profile]»/</a>>

 

 

Herramientas de prueba y verificación de etiquetas de Facebook, Twitter, Google y Pinterest en tu Web. Mejora tus metas.

 Herramienta de validación de Twitter

https://dev.twitter.com/docs/cards/validation/validator

Antes de que se muestren tus Twitter Cards debes tener tu dominio verificado. Afortunadamente, es un proceso muy fácil. Después de implementar tus tarjetas, escribe la URL de ejemplo en la herramienta de validación. Después de comprobar el marcado, seleccione el botón “Enviar para aprobación”.

Herramienta de depuración de Facebook

https://developers.facebook.com/tools/debug

No necesitas aprobación previa para que se muestre en Facebook tu meta información, pero la herramienta de depuración que ofrece te da una gran cantidad de información acerca de todas las etiquetas. Puedes ver si todo está bien implementado con Open Graph.

Herramienta de prueba de datos estructurados de Google

http://www.google.com/webmasters/tools/richsnippets
Herramienta para los Webmasters para comprobar como Google entiende nuestra páginas. Muy útiles para validar microformatos como Article o WebPage.

Herramienta de Validación de Rich Pins de Pinterest
Pinterest requiere un proceso de aprobación para activar la funcionalidad de Rich Pins. Utiliza el Validador de Pins Enriquecidos para testear los datos de tus marcadores y validarlos al mismo tiempo.
http://developers.pinterest.com/rich_pins/validator/

Espero que te guste el artículo de etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags en tu socialmedia.

Te interesa

Nace Psicología Online Avanzada democratizando la Terapia Online tras aumentar más del 100% la demanda

Nace Psicología Online Avanzada democratizando la Terapia Online tras aumentar más del 100% la demanda

Con la desescalada a medio camino se empiezan a ver las distintas secuelas que está dejando esta pandemia. No es solo el del daño directo del virus, con millones de contagiados y fallecidos por todo el mundo, si no de secuelas que van a permanecer entre todos durante mucho tiempo. El confinamiento ha provocado situaciones de ansiedad y estrés, conflictos de pareja y a todos aquellos que ya arrastraban problemas de salud mental, se les ha complicado su situación.

Las consecuencias colaterales, que ya está afectando, son la desaparición de miles de empleos con todas las secuelas materiales y mentales que esto provoca en la persona o núcleo familiar. Gente que nunca ha necesitado ayuda económica se encuentra de la noche a la mañana haciendo cola en un banco de alimentos. Todas las familias que han vivido la dureza de perder a un ser querido estas semanas, sin poder acompañarles ni despedirse.

Todo el personal sanitario que trabajaba sin descanso para salvar, mantener y cuidar vidas. Empleados de supermercados, policías, farmacéuticos, repartidores, conductores de autobús, en definitiva, trabajadores que salían por todos, para no paralizar del todo un país, mientras sus familias temían por ellos, ambas partes han soportado situaciones impensables. Muchas de estas dejaran secuelas para siempre.

La imposibilidad de ver a los seres queridos, ni poder hacer una vida “normal” durante tanto tiempo ha afectado de muchas maneras.

Se han sustituido las 'terracitas' por Zoom o Skype, Las cañas por WhatsApp, el deporte se ha hecho a través de aplicaciones de móvil o vídeos en YouTube, muchos han tele-trabajado y se han puesto al día con todas las series de Netflix. Este empuje de las nuevas tecnologías se ha visto también en las consultas de psicología.

Muchos psicólogos han intentado dar continuidad a sus pacientes de manera telemática, pero no es sencillo dar el paso para todo el mundo. “Hay que tener una serie de fortalezas para romper la barrera de la pantalla y que las carencias de no tener al paciente físicamente delante se vean compensadas de alguna manera” Comenta José Juan Álvarez fundador de Psicología Online Avanzada.

Lo primero que hacen en Psicología Online Avanzada es dar una formación a sus psicólogos sobre la Terapia Online, para ello cuentan con Paula Massa, psicóloga experta en Terapia Online que lleva realizando la terapia por internet varios años. “Es fundamental preservar la privacidad y confidencialidad de los pacientes y además mostrarles una cercanía a pesar de la distancia” afirma Paula.

El equipo de Psicología Online Avanzada lleva tiempo participando en diferentes proyectos tecnológicos de psicología para intentar acercar la salud mental a todo el mundo. Hay una serie de razones por las que la Psicoterapia Online hace que pueda llegar a ser incluso más efectiva que la presencial en algunos casos.

  • Privacidad: Asistir a terapia por Internet da una privacidad extra, el paciente no tiene que entrar y salir de la consulta. Se nota especialmente en ciudades pequeñas donde la gente prefiere en algunos casos evitar ser visto.
  • Comodidad: La terapia se puede hacer desde el mismo salón de casa, sin perder tiempo en atascos o desplazamientos. El paciente está en un sitio donde se siente seguro y cómodo.
  • Ahorro: Las consultas Online suelen ser más baratas al reducirse los costes del psicólogo, además del ahorro en tiempo y dinero de los desplazamientos.
  • Flexibilidad: La Terapia Online es más flexible y resulta más sencillo ajustar horarios que de forma presencial, además de la posibilidad de continuar con la terapia, aunque el paciente esté de viaje.
  • Necesidad: Hay pacientes que viven en un sitio donde no hay psicólogos especializados en su problemática. Incluso si está en el extranjero y quiere hacer la terapia en su idioma.

“Hemos visto un crecimiento en los casos de Ansiedad y problemas de pareja durante las primeras semanas de pandemia. Ahora estamos empezando a ver más casos de duelo, no solo por las pérdidas humanas, hemos visto casos en los que tratamos el duelo por rupturas sentimentales”, confirma Paula.

En Psicología Online Avanzada ofrecen la primera sesión de 1 hora gratuita, sin ningún compromiso, para que todo aquel que tenga dudas se anime a probar. En esa primera sesión se tiene un primer contacto con el psicólogo, para conocerse, explicar la forma de trabajo de este y escuchar la demanda del paciente, además de experimentar la comodidad de la terapia online. Si después de esta primera sesión gratuita el paciente no desea continuar, no tiene que hacer nada. Pero, señala José Juan que una vez que el paciente prueba los beneficios que se consiguen y la comodidad de hacer la Terapia Online con Psicología Online Avanzada continúan con su terapia. Además, se han fijado unos precios muy ajustados para que todo el que lo necesite pueda acceder a la Terapia.



Últimas noticias de Frikipandi.com

Las noticias se actualizan cada 15 minutos.