HTML
Meta informacion
Buscar..
Introducción
Las etiquetas meta en los documentos HTML proporcionan información útil sobre el documento, que incluye una descripción, palabras clave, autor, fechas de modificaciones y alrededor de otros 90 campos. Este tema cubre el uso y propósito de estas etiquetas.
Sintaxis
-
<meta name="metadata name" content="value"> -
<meta http-equiv="pragma directive" content="value"> -
<meta charset="encoding label">
Observaciones
La etiqueta meta es una etiqueta HTML utilizada para establecer los metadatos del documento HTML. Las etiquetas meta deben ir en el elemento principal. Una página puede tener cualquier número de etiquetas meta.
Las keywords metaetiqueta no son utilizadas típicamente por los robots. La mayoría de los motores de búsqueda determinan qué palabras clave encajan con el contenido de las páginas web. Dicho esto, nada dice que ya no se debe incluir la metaetiqueta de palabras clave.
Los metadatos de una página son utilizados principalmente por el navegador (como la escala de un documento) y las arañas de rastreo web utilizadas por los motores de búsqueda (Google, Yahoo !, Bing).
La especificación proporciona varios nombres de metadatos estandarizados para usar con <meta name> y directivas pragma de metadatos estandarizados para usar con <meta http-equiv> . Sin embargo, muchos servicios a través de Internet (rastreadores web, herramientas de creación, servicios para compartir en redes sociales, etc.) utilizan el formulario <meta name> como un punto de extensión genérico para los metadatos. Algunos de estos están listados en la página wiki de la especificación .
Codificación de caracteres
El atributo charset especifica la codificación de caracteres para el documento HTML y debe ser una codificación de caracteres válida (los ejemplos incluyen windows-1252 , ISO-8859-2 , Shift_JIS y UTF-8 ). UTF-8 (Unicode) es el más utilizado y debe usarse para cualquier proyecto nuevo.
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
Todos los navegadores siempre han reconocido el formulario <meta charset> , pero si por alguna razón necesita que su página sea HTML 4.01 válido, puede usar lo siguiente:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Consulte también el Estándar de codificación , para ver todas las etiquetas de codificación de caracteres disponibles que reconocen los navegadores.
Actualización automática
Para actualizar la página cada cinco segundos, agregar esta meta elemento de la head elemento:
<meta http-equiv="refresh" content="5">
¡PRECAUCIÓN! Si bien este es un comando válido, se recomienda que no lo use debido a sus efectos negativos en la experiencia del usuario. Actualizar la página con demasiada frecuencia puede hacer que deje de responder y, a menudo, se desplaza a la parte superior de la página. Si alguna información en la página necesita actualizarse continuamente, hay maneras mucho mejores de hacerlo solo actualizando una parte de la página.
Control de diseño móvil
Los sitios comunes optimizados para dispositivos móviles utilizan la etiqueta <meta name="viewport"> así:
<meta name="viewport" content="width=device-width, initial-scale=1">
El elemento de viewport le da instrucciones al navegador sobre cómo controlar las dimensiones de la página y la escala en función del dispositivo que está utilizando.
En el ejemplo anterior, content="width=device-width significa que el navegador mostrará el ancho de la página en el ancho de su propia pantalla. Entonces, si esa pantalla tiene un 480px wide , la ventana del navegador tendrá un 480px wide . initial-scale=1 representa que el zoom inicial (que es 1 en este caso, significa que no hace zoom).
A continuación se muestran los atributos que admite esta etiqueta:
| Atributo | Descripción |
|---|---|
width | El ancho de la ventana virtual del dispositivo. Valores 1 : device-width o ancho real en píxeles, como 480 |
height | La altura de la ventana virtual del dispositivo. Valores 2 : device-height o el ancho real en píxeles, como 600 |
initial-scale | El zoom inicial cuando se carga la página. 1.0 no hace zoom. |
minimum-scale | La cantidad mínima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. |
maximum-scale | La cantidad máxima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. |
user-scalable | Permite al dispositivo acercarse y alejarse. Los valores son yes o no . Si se establece en no, el usuario no puede ampliar la página web. El valor predeterminado es sí. La configuración del navegador puede ignorar esta regla. |
Notas:
1 La propiedad de width se puede especificar en píxeles ( width=600 ) o por ancho de dispositivo ( width=device-width ) que representa el ancho físico de la pantalla del dispositivo.
2 Del mismo modo, la propiedad de height puede especificarse en pixels ( height=600 ) o por device-height ( height=device-height ) que representa la altura física de la pantalla del dispositivo.
Información de la página
application-name
Dar el nombre de la aplicación web que representa la página.
<meta name="application-name" content="OpenStreetMap">
Si no es una aplicación web, no se debe utilizar la metaetiqueta de application-name la application-name .
author
Establecer el autor de la página:
<meta name="author" content="Your Name">
Sólo se puede dar un nombre.
description
Establecer la descripción de la página:
<meta name="description" content="Page Description">
La metaetiqueta de description puede ser utilizada por varios motores de búsqueda mientras indexa su página web con fines de búsqueda. Por lo general, la descripción contenida en la etiqueta meta es el breve resumen que se muestra debajo del título principal de la página / sitio web en los resultados del motor de búsqueda. Google usualmente usa solo las primeras 20-25 palabras de su descripción.
generator
<meta name="generator" content="HTML Generator 1.42">
Identifica uno de los paquetes de software utilizados para generar el documento. Solo para ser utilizado para páginas donde el marcado se genera automáticamente.
keywords
Establecer palabras clave para los motores de búsqueda (separados por comas):
<meta name="keywords" content="Keyword1, Keyword2">
Las etiquetas meta de keywords veces son utilizadas por los motores de búsqueda para conocer la consulta de búsqueda que es relevante para su página web.
Como regla general, probablemente sea una buena idea no agregar demasiadas palabras, ya que la mayoría de los motores de búsqueda que usan esta etiqueta meta para indexar solo indexarán las primeras ~ 20 palabras. Asegúrese de poner primero las palabras clave más importantes.
Los robots
El atributo robots , soportado por varios motores de búsqueda principales, controla si las arañas de los motores de búsqueda pueden indexar una página o no y si deben seguir los enlaces de una página o no.
<meta name="robots" content="noindex">
Este ejemplo indica a todos los motores de búsqueda que no muestren la página en los resultados de búsqueda. Otros valores permitidos son:
| Valor / Directiva | Sentido |
|---|---|
all | Defecto. Equivalente a index, follow . Vea la nota abajo. |
noindex | No indexar la página en absoluto. |
nofollow | No sigas los enlaces de esta página. |
follow | Los enlaces en la página pueden seguirse. Vea la nota abajo. |
none | Equivalente a noindex, nofollow . |
noarchive | No haga una versión en caché de esta página disponible en los resultados de búsqueda. |
nocache | Sinónimo de noarchive utilizado por algunos bots como Bing. |
nosnippet | No mostrar un fragmento de esta página en los resultados de búsqueda. |
noodp | No utilice los metadatos de esta página del proyecto de Open Directory para títulos o fragmentos en los resultados de búsqueda. |
notranslate | No ofrezca traducciones de esta página en los resultados de búsqueda. |
noimageindex | No indexar imágenes en esta página. |
unavailable_after [RFC-850 date/time] | No mostrar esta página en los resultados de búsqueda después de la fecha / hora especificada. La fecha / hora debe especificarse en el formato RFC 850 . |
Nota: Definir explícitamente el index y / o el follow , mientras que los valores válidos, no es necesario, ya que prácticamente todos los motores de búsqueda asumirán que pueden hacerlo si no se les impide hacerlo explícitamente. De manera similar a como opera el archivo robots.txt, los motores de búsqueda generalmente solo buscan cosas que no tienen permitido hacer. Solo declarar cosas que un motor de búsqueda no tiene permitido hacer también evita que se declaren opuestos (como index, ..., noindex ) que no todos los motores de búsqueda tratarán de la misma manera.
Reconocimiento de números de teléfono
Las plataformas móviles como iOS reconocen automáticamente los números de teléfono y los convierten en tel: links. Si bien la función es muy práctica, el sistema a veces detecta los códigos ISBN y otros números como números de teléfono.
Para que Safari móvil y algunos otros navegadores móviles basados en WebKit desactiven el reconocimiento y el formato automáticos del número de teléfono, necesita esta etiqueta meta:
<meta name="format-detection" content="telephone=no">
Medios de comunicación social
Open Graph es un estándar para metadatos que extiende la información normal contenida en el marcado de encabezado de un sitio. Esto permite que los sitios web como Facebook muestren información más profunda y rica sobre un sitio web en un formato estructurado. Esta información se muestra automáticamente cuando los usuarios comparten enlaces a sitios web que contienen metadatos OG en Facebook.
Facebook / Open Graph
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->
Facebook / Artículos instantáneos
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">
<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">
Twitter utiliza su propio marcado para metadatos. Estos metadatos se utilizan como información para controlar cómo se muestran los tweets cuando contienen un enlace al sitio.
Gorjeo
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
Google+ / Schema.org
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
Redireccionamiento automatico
A veces su página web necesita una redirección automática.
Por ejemplo, para redirigir a example.com después de 5 segundos:
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
Esta línea lo enviará al sitio web designado (en este caso example.com después de 5 segundos).
Si necesita cambiar la demora de tiempo antes de una redirección, simplemente cambiando el número justo antes de su ;url= modificará la demora de tiempo.
Aplicación Web
Puede configurar su aplicación web o sitio web para agregar un ícono de acceso directo a la pantalla de inicio de un dispositivo y hacer que la aplicación se inicie en el "modo de aplicación" de pantalla completa usando el elemento del menú "Agregar a la pantalla de inicio" de Chrome para Android.
Las siguientes etiquetas meta (s) abrirán la aplicación web en modo de pantalla completa (sin barra de direcciones).
Android Chrome
<meta name="mobile-web-app-capable" content="yes">
IOS
<meta name="apple-mobile-web-app-capable" content="yes">
También puede establecer el color para la barra de estado y la barra de direcciones en la etiqueta meta.
Android Chrome
<meta name="theme-color" content="black">
IOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">
