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




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

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.

. Leer artículo completo en Frikipandi Etiquetas de Facebook, Twitter y Google en tu Web. Mejora tus meta tags.

Te interesa

¿Cómo recuperar pestañas abiertas en Google Chrome? Tutorial

¿Cómo recuperar pestañas abiertas en Google Chrome? Tutorial

Hoy os dejamos ¿Cómo recuperar pestañas abiertas en Google Chrome? Tutorial o truco que te …

Últimas noticias de Frikipandi.com

Las noticias se actualizan cada 15 minutos.