Seleccionar página

Los Meta-Tags Móvil funcionan de guías para los navegadores y los motores de búsqueda. Su función es la de indexar información relativa a los archivos HTML. Estos elementos siempre deben estar entre las etiquetas <head> y </head>.

Título (Title)

Como elemento obligado en el encabezado del HTML, el título se sitúa, por regla general, por encima de todas las demás etiquetas. Los navegadores lo leen y aparece en la barra del título de una pestaña o una ventana como nombre estándar de la página en la lista de favoritos y en el historial del navegador. Los buscadores usan esta etiqueta para titular las entradas en las listas de resultados o SERP.

<title>Meta-Tags | FUNCIONES</title>

Codificación de caracteres

Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El meta tag que usaremos es este:

<meta charset="utf-8"/>

Descripción (Description) Y Palabras Clave (Keywords)

En la descripción o meta description podemos describir brevemente el contenido de la página web. Esta información se muestra como snippet (una síntesis en dos líneas del tema de una página que aparece bajo la URL) en los buscadores de uso más generalizado como Google o Bing.

<meta name="description" content="Como su propio nombre indica es una descripción."/>

La Meta-Tag keywords, definen las palabras clave para el buscador.

<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>

La etiqueta viewport en la web móvil

La etiqueta viewport  define el ancho, alto y escala del área usada por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos constantes, device-width y device height respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos desarrolladores caen en el error de configurar el viewport con un width de 320, siendo este el ancho del iPhone. Utilizando las constantes, se verá de mejor forma no solo en el iPhone sino que en muchos «mobile browsers» más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Para ganar tiempo puedes usar el Generador Meta-Tags.