Elemento < meta >

Resumen

La etiqueta meta proporciona metadatos sobre el documento HTML. Los metadatos no se muestran en la página, pero son legibles por máquinas. Se pueden utilizar para navegadores (cómo mostrar el contenido o recargar la página), motores de búsqueda (palabras clave) u otros servicios web.

Atributos requeridos

Atributos opcionales

Optimización SEO

Documento de referencia

• Palabras clave de la páginaCada página web debe tener un conjunto único de palabras clave que describan el contenido de la página.
  Utilice palabras clave y frases descriptivas y representativas que las personas puedan buscar y que describan con precisión la información proporcionada en la página web. Si el contenido de la etiqueta es demasiado corto, es posible que los motores de búsqueda no lo consideren relevante. Además, la etiqueta no debe superar los 874 caracteres.

<meta name="keywords" content="your tags" />

• Descripción de la páginaCada página web debe tener una etiqueta de descripción de no más de 150 caracteres que refleje con precisión el contenido de la página.

<meta name="description" content="150 words" />

• Modo de indexación del motor de búsquedarobotterms es un conjunto de valores separados por comas (,). Normalmente tiene los siguientes valores: none, noindex, nofollow, all, index y follow. Asegúrese de utilizar correctamente los valores de los atributos nofollow y noindex.

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

• Redirección y actualización de páginaEl número en content representa el tiempo en segundos, es decir, después de cuánto tiempo se actualiza la página. Si se añade una url, se redirigirá a la página web especificada (el motor de búsqueda puede detectarlo automáticamente, y también es fácil que el motor lo considere engañoso y sea penalizado).

<meta http-equiv="refresh" content="0;url=" />

• Otros

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

Dispositivos móviles

• viewportPuede optimizar la visualización en los navegadores móviles. Si no es un sitio web responsive, no use initial-scale ni deshabilite el zoom.
  El ancho de viewport de la mayoría de los dispositivos de 4.7-5 pulgadas se establece en 360px; para los dispositivos de 5.5 pulgadas, en 400px; para el iPhone 6, en 375px; para el iPhone 6 Plus, en 414px.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1. width: ancho (valor / device-width) (rango de 200 a 10,000, por defecto 980 píxeles)
2. height: alto (valor / device-height) (rango de 223 a 10,000)
3. initial-scale: escala inicial (rango de >0 a 10)
4. minimum-scale: escala mínima a la que el usuario puede hacer zoom
5. maximum-scale: escala máxima a la que el usuario puede hacer zoom
6. user-scalable: si el usuario puede hacer zoom manualmente (no, yes)
7. minimal-ui: puede minimizar las barras de estado superior e inferior al cargar la página. (Obsoleto)

Nota: muchos usan initial-scale=1 en sitios web no responsive, lo que hace que el sitio se renderice con un ancho del 100% y que el usuario tenga que mover la página manualmente o hacer zoom. Si se usa user-scalable=no o maximum-scale=1 junto con initial-scale=1, el usuario no podrá ampliar/reducir la página web para ver todo el contenido.

• Modo de pantalla completa de WebAppSimular una app, aplicación offline.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

• Ocultar la barra de estado / establecer el color de la barra de estadoSolo tiene efecto cuando el modo de pantalla completa de WebApp está activado. El valor de content es default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Título después de añadir a la pantalla principal

<meta name="apple-mobile-web-app-title" content="标题">

• Ignorar el reconocimiento automático de números como números de teléfono

<meta content="telephone=no" name="format-detection" />

• Ignorar el reconocimiento de correos electrónicos

<meta content="email=no" name="format-detection" />

• Añadir el Smart App Banner (banner inteligente de anuncios de la aplicación)Indica al navegador la aplicación correspondiente a este sitio web y muestra un banner de descarga en la página (como se muestra en la imagen siguiente).Documento de referencia

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• Otros Documento de referencia

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

Relacionado con la página web

• Declaración de codificación

<meta charset='utf-8' />

• Usar preferentemente la última versión de IE y Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

• Control del motor del navegadorMuchos navegadores chinos son de doble motor (WebKit y Trident). El motor WebKit permite una navegación de alta velocidad, mientras que el motor IE es compatible con páginas web y sitios antiguos. Los sitios web que añaden la etiqueta meta pueden controlar qué motor utiliza el navegador para renderizar.Documento de referencia

<meta name="renderer" content="webkit|ie-comp|ie-stand">

Los modos de motor predeterminados de los navegadores chinos de doble motor son los siguientes:
1. Navegador de alta velocidad Sogou, navegador QQ: motor IE (modo compatibilidad)
2. Navegador de velocidad 360, navegador Maxthon: motor WebKit (modo velocidad)

• Prohibir que el navegador acceda al contenido de la página desde la memoria caché del ordenador localCon esta configuración, los visitantes no podrán navegar sin conexión.

<meta http-equiv="Pragma" content="no-cache">

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

• Adaptación del sitio webSe utiliza principalmente para la correspondencia entre la página de PC y la página de teléfono móvil.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

• Declaración de transcodificaciónAl abrir una página web con Baidu, esta puede ser transcodificada (por ejemplo, añadiendo anuncios). Para evitar la transcodificación, se puede añadir el siguiente meta.

<meta http-equiv="Cache-Control" content="no-siteapp" />

Otros documentos de referencia

COMPLETE LIST OF HTML META TAGS
W3C META TAGS
METATAGES in HTML5
MDN META TAGS

Fuente: http://segmentfault.com/a/1190000002407912