Skip to main content
Redes sociales

Meta tags para redes sociales

Por 4 diciembre, 2016Sin comentarios
Todas las meta etiquetas posibles para que tus usuarios puedan compartir toda la información de tus post, archivos o productos

En la categoría de redes sociales hablaré de como potenciar y trabajar nuestras redes sociales, herramientas para analizar y ahorrarnos trabajo al publicar en ellas

, pero sobre todo, ya que este blog se basa en el diseño web, como enlazar nuestra web y compartir contenido en Facebook, Twitter, Google plus, Pinterest, Instagram… De hecho en este post hablaré de las meta etiquetas html para redes sociales. Las meta tags son etiquetas html que ponemos en el <head>, invisibles para la apariencia de la web y que guardan información relevante de la página. Por ejemplo, el título y la descripción, muy importante para el SEO, ya que utilizan esta información los buscadores cmomo Google cuando muestran nuestra web en sus resultados. Lo mismo ocurre con las etiquetas meta de redes sociales. Cuando compartimos un articulo, un producto, la página principal, utilizan estas etiquetas para mostrar toda la información posible en la publicación. Podemos mostrar el título, descripción, imagen, autor, si es artículo, un producto, su precio, el usuario de Twitter o Facebook del autor de la web, incluso que se publique con un hashtag. Todo esto es gracias a formatos como Open graph para Facebook, Twitter Card para twitter y Schema.org para Google + y otras.

Aquí os dejaré algunas plantillas más o menos completas de cada una de ellas. Copiad la que os interese y sustituir el contenido por el de vuestro sitio. Son 3 plantillas: una estandar, otra para artículos más avanzada y otra para páginas de productos.

Plantilla estandar

<!-- Declaramos los atributos prefix, itemscope e itemtype en la etiqueta html -->
<html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/WebPage">

<!-- Open Graph para Facebook -->
<meta property="og:title" content="Título de la página aquí" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.midominio.com/" />
<meta property="og:image" content="http://midominio.com/imagen.jpg" />
<meta property="og:description" content="Descripción de la página" />
<meta property="og:site_name" content="Nombre de la página web" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Título página">
<meta name="twitter:description" content="Descripción de la página">
<meta name="twitter:creator" content="@autor">
<meta name="twitter:image" content="http://www.midominio.com/image.jpg">

<!-- Schema.org para Google+ -->
<meta itemprop="name" content="Nombre de la página web">
<meta itemprop="description" content="Descripción de la página">
<meta itemprop="image" content="http://www.midominio.com/imagen.jpg">

Plantilla para artículos avanzada

<html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Article">

<!-- Open Graph para Facebook -->
<meta property="og:title" content="Título de la página aquí" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.midominio.com/" />
<meta property="og:image" content="http://midominio.com/imagen.jpg" />
<meta property="og:description" content="Descripción de la página" />
<meta property="og:site_name" content="Nombre de la página web" />
<meta property="fb:admins" content="ID de Facebook" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large">
<meta name="twitter:site" content="@webjrcode">
<meta name="twitter:title" content="Título página">
<meta name="twitter:description" content="Descripción de la página">
<meta name="twitter:creator" content="@autor">
<!-- Imagen grande. Mínimo 280x150 -->
<meta name="twitter:image:src" content="http://www.midominio.com/image.jpg">

<!-- Google Authorship -->
<link rel="author" href="https://plus.google.com/[Perfil_Google+]/posts"/>
<link rel="publisher" href=”https://plus.google.com/[Página_Google+]"/>

<!-- Schema.org para Google+ -->
<meta itemprop="name" content="Nombre de la página web">
<meta itemprop="description" content="Descripción de la página">
<meta itemprop="image" content="http://www.midominio.com/imagen.jpg">

Plantilla para página de producto

<html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Product">

<!-- Open Graph para Facebook -->
<meta property="og:title" content="Título de la página aquí" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.midominio.com/" />
<meta property="og:image" content="http://midominio.com/imagen.jpg" />
<meta property="og:description" content="Descripción de la página" />
<meta property="og:site_name" content="Nombre de la página web" />
<meta property="product:price:amount" content="30" />
<meta property="product:price:currency" content="EUR" />

<!-- Twitter Card -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@webjrcode">
<meta name="twitter:title" content="Título página">
<meta name="twitter:description" content="Descripción de la página">
<meta name="twitter:image" content="http://www.midominio.com/image.jpg">
<meta name="twitter:creator" content="@autor">
<meta name="twitter:data1" content="3&#8364;">
<meta name="twitter:label1" content="Precio">
<meta name="twitter:data2" content="Rojo">
<meta name="twitter:label2" content="Color">

<!-- Google Authorship -->
<link rel="author" href="https://plus.google.com/[Perfil_Google+]/posts"/>
<link rel="publisher" href=”https://plus.google.com/[Página_Google+]"/>

<!-- Schema.org para Google+ -->
<meta itemprop="name" content="Nombre de la página web">
<meta itemprop="description" content="Descripción de la página">
<meta itemprop="image" content="http://www.midominio.com/imagen.jpg">
Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta