Metadatos para web
Una de las cosas muy comunes en las páginas web es posicionar mediante metadatos, a esto le llaman SEO, para esto necesitamos entender que son los metadatos o metatag.
Las metaetiquetas, etiquetas meta o elementos meta (también conocidas por su nombre en inglés, metatags o meta tags) son etiquetasHTML que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.
-wikipedia
otra de las cosas para posicionar tu página web, son los metadatos por schema.org estos son datos muy especificos para las paginas y que se pueda indexar fácilmente y saber para qué son cada una.
Hay que recordar que entre más original sea tu marca, más fácil podrás posicionar o hacer seo para tu página web o producto.
por ejemplo si buscamos unprogramador aparecerá el blog en la primera página pero en la parte más baja del buscador, si buscamos un programador esto no aparece porque es una búsqueda muy amplia.
para posicionarnos mejor en los buscadores, nos ayudaremos con los metadatos para la web, ya que podemos decir por ejemplo, unprogramador es una pagina para programadores web, en este punto si busco programadores web en google, posiblemente aparezca unprogramador ya que la descripción usa estas palabras generales.
Metadatos para todo
los metadatos prácticamente está para todo, actualmente no solo nos debemos centrar en un buscador, si no también en redes sociales, para esto estas redes sociales nos dan sus propios metadatos.
Las principales propiedades que generalmente vamos a ver en todos nuestros metadatos para páginas web son los siguientes:
- url
- titulo
- descripcion
- imagen
Teniendo esto en cuenta vamos a analizar algunos metadatos para un mejor posicionamiento web.
Sin duda alguna Facebook es muy importante para nuestras redes sociales, actualmente los navegadores ya indexan información de fb para mostrar, para esto han usado open graph y una gran mayoría usa esto para posicionar información, este es un ejemplo de la página.
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="When Great Minds Don’t Think Alike" /> <meta property="og:description" content="How much does culture influence creative thinking?" /> <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
esto se veria algo asi
Twitter también cuenta con metadatos especializados en su página web, aquí nos da varias formas de visualizar nuestro contenido, aquí se llaman cards y esta es su estructura.
este es un tw simple:
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
y especialmente este es el que más me gusta usar ya que contiene una imagen larga.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
twitter nos proporciona una página de validación y una documentación donde nos dice si tenemos errores y como se visualiza tu página web.
una ventaja es que usan los mismos open graph que fb, podemos ponerlos tambien aunque aconsejo dejar solamente los de facebook
<meta property="og:title" content="My Shared Article Title" /> <meta property="og:description" content="Description of shared article" /> <meta property="og:url" content="http://example.com/my_article.html" /> <meta property="og:image" content="http://example.com/foo.jpg" />
Google lee prácticamente todas los metadatos anteriores, pero ellos piden unos metadatos distintos, en especial estos metadatos son mas para como se comportan los robots de google para indexar nuestra página, este son las reglas de google en metadatos, que también dejo aca abajo.
<meta name="description" content="Descripción de la página" /> |
Esta etiqueta proporciona una descripción breve de la página. En algunos casos esta descripción se utiliza como parte del fragmento que se muestra en los resultados de búsqueda. Más información |
<title>El título de la página</title> |
Aunque técnicamente no se trata de una metaetiqueta, se suele utilizar junto con la etiqueta de descripción. El contenido de esta etiqueta suele ser el título de los resultados de búsqueda (y, por supuesto, en el navegador del usuario). Más información |
<meta name="robots" content="..., ..." /> |
Estas metaetiquetas pueden controlar el comportamiento del rastreo y la indexación de los motores de búsqueda. La metaetiqueta robots se aplica a todos los motores de búsqueda, mientras que “googlebot” es específica de Google. Los valores predeterminados son “index, follow” (igual que “all”) y no es necesario concretarlos. Google entiende los siguientes valores (si especificas varios valores, sepáralos por comas):
Esta información también se puede concretar en el encabezado de las páginas mediante la directiva de encabezados HTTP “X-Robots-Tag”. Esto resulta especialmente útil para limitar la indexación de archivos que no sean HTML, como archivos gráficos y otro tipo de documentos. Más información sobre las metaetiquetas robots |
<meta name="google" content="nositelinkssearchbox" /> |
Cuando los usuarios realicen búsquedas en tu sitio web, algunas veces en los resultados de la Búsqueda de Google se mostrará un cuadro de búsqueda específico de tu sitio web, junto con otros enlaces directos a él. Esta metaetiqueta indica a Google que no debe mostrar el cuadro de búsqueda de los enlaces de sitio. Más información sobre el cuadro de búsqueda de los enlaces de sitio |
<meta name="google" content="notranslate" /> |
Cuando reconocemos que el contenido de una página no está en el idioma que el usuario podría querer encontrar, solemos proporcionar un enlace a una traducción en los resultados de búsqueda. En general, esto permite ofrecer un contenido único y convincente a un grupo de usuarios mucho mayor. Sin embargo, es posible que haya casos en los que no desees utilizar esta opción. Esta metaetiqueta indica a Google que no quieres que proporcionemos una traducción de esta página. |
<meta name="google-site-verification" content="..." /> |
Puedes utilizar esta etiqueta en la página de nivel superior de tu sitio web para verificar su propiedad en Search Console. Recuerda que, aunque los valores de los atributos “name” y “content” deben coincidir exactamente con los datos que se te proporcionen (incluidas mayúsculas y minúsculas), no importa que cambies la etiqueta de XHTML a HTML ni que el formato de la etiqueta coincida con el de tu página. Más información |
<meta http-equiv="Content-Type" content="...; charset=..." /><meta charset="..." > |
Esta metaetiqueta define el conjunto de caracteres y el tipo de contenido de la página. Asegúrate de delimitar el valor del atributo de contenido con comillas; de lo contrario, el atributo del conjunto de caracteres podría interpretarse de manera incorrecta. Recomendamos utilizar Unicode/UTF-8 siempre que sea posible. Más información |
<meta http-equiv="refresh" content="...;url=..." /> |
Esta metaetiqueta redirige al usuario a una URL nueva tras un periodo de tiempo y a veces se usa como forma sencilla de redirecciónamiento. Sin embargo, no es compatible con todos los navegadores y puede resultar confuso para el usuario. El W3C no recomienda usar esta etiqueta. En su lugar, Google sugiere el redireccionamiento 301 por parte del servidor. |
Otros metadatos
Los metadatos anteriores son de uso común, son metadatos que se deben poner si queremos posicionar nuestra página web, pero existe otros que son estéticos, para esto muchos de los cambios son gracias a google chrome.
Cambio de color en barra de navegador
uno de los cambios más vistosos son los cambios de colores en el navegador web, este es usado para chrome en android, para esto necesitamos lo siguiente.
<meta name="theme-color" content="#db5945">
Iconos especiales
estos iconos sirven ya sea para el navegador o cuando pones el acceso directo en la pantalla del celular y que se vea bien
<!--resolucion grande --> <link rel="icon" sizes="192x192" href="icon.png"> <!-- icono para Safari --> <link rel="apple-touch-icon" href="ios-icon.png"> <!-- multiples iconos para IE --> <meta name="msapplication-square310x310logo" content="icon_largetile.png">
Safari
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
windows phone e internet explorer
<meta name="msapplication-square70x70logo" content="icon_smalltile.png"> <meta name="msapplication-square150x150logo" content="icon_mediumtile.png"> <meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Cambiar la barra de estado en iOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Página en pantalla principal en android y iOS
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
Resumen de metadatos para posicionamiento y cambios visuales
Quiero proporcionar a modo de resumen cual son las metaetiquetas que más uso dia a dia.
<link href="./logo32.png" rel="icon" type="image/png" sizes="32x32">
<link href="./logo96.png" rel="icon" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="./assets/img/logo64.png">
<link href="./assets/img/logo64.png" rel="icon" type="image/x-icon">
<link rel="canonical" href="webpage" />
<meta name="msapplication-TileColor" content="#color">
<meta name="description" content="descripcion de pagina." />
<!-- en si es ingles, es si es español -->
<meta property="og:locale" content="en">
<meta property="og:type" content="website">
<meta property="og:title" content="frase - nombre producto/empresa">
<meta property="og:description" content="descripcion.">
<meta property="og:url" content="http://url.com/">
<meta property="og:site_name" content="nombre del sitio">
<meta property="article:publisher" content="https://www.facebook.com/paginafb/">
<meta property="og:image" content="./Full.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitter" />
<meta name="twitter:title" content="titulo" />
<meta name="twitter:description" content="descripcion twitter" />
<meta name="twitter:image" content="./headerLeftFull.png" />
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">