Etiquetas meta 2015


Las etiquetas meta, son una serie de etiquetas las cuales nos permiten indicarle a los motores de Búsqueda como Google, Bing o Ask, aspectos técnicos de nuestras páginas web, antíguamente eran muy utilizadas en cuestiones de posicionamiento o SEO, sin embargo su nivel de importancia a ido disminuyendo y hoy día no son tomadas muy en cuenta para el posicionamiento Web, sin embargo aún es muy conveniente utilizar alguna de ellas. Antíguamente su funcionamiento era muy básico, simplemente indicarle parámetros al navegado, hoy día se relacionan con redes sociales, verifican el tamaño del dispositivo con que se accede a la página Web, entre muchos otros usos.

 

Las etiquetas meta se utilizan siempre entre las etiquetas head o de encabezado de toda página Web. Ejemplo:


etiqueta_meta


Etiquetas meta más utilizadas


  • Title: El título es utilizado para hacer una descripción breve de nuestra página Web,  si comparamos una página Web con un libro, vendría siendo como el "nombre del libro", en el caso de ésta página el título es Etiquetas meta 2015.
    Anteriormente realizamos un artículo sobre  la etiqueta de título explicamos como utilizarla y desarrollamos también una pequeña utilidad para cualquier la cantidad de caracteres adecuado para nuestros títulos.
  • author: Es el autor de la página, describe quien es el que desarrolló la página web.
  • description: Es una de las etiquetas más utilizadas y con mucha importancia en el posicionamiento Web, también es una etiqueta que tiene mucha relación con el usuario, debido a que es una descripción breve que utilizan los navegadores para indicarle al usuario de que trata la página en sí.
  • keywords: Antiguamente muy utilizada, hoy día a perdido mucho valor en el SEO, las keywords son palabras que se utilizan para hacer enlaces a nuestra página.

<title>Etiqueta de título</title>
<meta name="description"  content="Ejemplo..."/>
<meta name="keywords"  content="etiqueta meta,open graph,twitter cards"/>

 

Nuevas etiquetas meta



  • viewport: Fue una etiqueta introducida por Apple, en simples palabras sirve para indicarle a los navegadores el tamaño ancho o alto de la página, con el propósito de permitirle mostrar la página dependiendo del tamaño o resolución de la pantalla de quien la visita. Es muy utilizada para el diseño de sitios móviles.

Éste es un vídeo muy explicativo del uso de la etiqueta viewport:

 

 

  • Etiquetas meta sociales: Son utilizadas por las principales redes sociales como Facebook, Twitter, para mostrar de una manera más precisa la información a través de medios sociales. Entre las más utilizadas tenemos:

 

Twitter Cards


Las meta etiquetas de Twitter, son formatos enriquecidos, proporciona información a la red social Twitter sobre el contenido de una página Web.



<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://www.pcuserspanama.com">
<meta name="twitter:title" content="Ejemplo de Twitter Cards">
<meta name="twitter:description" content="Existen distintos tipos de twitter card...">
<meta name="twitter:image" content="http://www.pcuserspanama.com/imagen">


twitter cards​​

 

Existen 6 tipos de formatos establecidos por Twitter para la creación de Twitter Cards entre los cuales están:

 

tipos twitter cards

 

 

 

Open Graph- La etiqueta de Facebook

 

​Al igual que Twitter es una etiqueta para datos enriquecidos de la red social Facebook, que permite una mejor organización del contenido de nuestro sitio o blog en la red social Facebook.

opengraph-facebook



<meta property="og:type" content="website" /> 
<meta property="og:url" content="Etiquetas-meta-2015.php" />
<meta property="og:title" content="Etiqueta para facebook" />
<meta property="og:description" content="Existen varios tipos de etiquetas para Facebook ..." />

 


Conclusiones


Hemos visto las distintas etiquetas, algunas tradicionales como la etiqueta del autor, descripción, palabras clave, etc sin embargo las redes sociales y el diseño móvil han traído a la palestra nuevas etiquetas que deben ser tomadas en cuenta a la hora de crear nuestras página, de ésta manera hacemos nuestro sitio sea más universal y adaptable.