Las metaetiquetas HTML suministran información codificada a navegadores y motores de búsqueda sobre una página web. Las metaetiquetas tienen una estructura determinada. Primero se define un elemento y segundo se asigna un contenido. el esquema es el siguiente:
<meta name="Nombre del elemento" content="Contenido asignado"/>Tipos de Metaetiquetas
Metaetiqueta Title
Como elemento obligado en el encabezado de la página web HTML, el título se sitúa por encima de todas las demás etiquetas en primer lugar. 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.
Para una buena optimización la longitud máxima de caracteres no debe ser mayor de 50. También hay que insertar la palabra clave principal en la «metaetiqueta title»:
<title>Las Metaetiquetas HTML | NEOAL.COM</title>Codificación de caracteres Utf-8
Es necesario definir la fuente indicando la etiqueta HTML correspondiente. Un ejemplo claro es la visualización en pantalla de la ñ o las tildes. Esta metaetiqueta es fundamental en el caso de que un navegador acceda a los archivos HTML directamente desde el disco duro y no los reciba por HTTP.
<meta charset="utf-8"/>Metaetiqueta Lang
La metaetiqueta «lang» le indica al buscador el idioma en el que está escrita la página. El código «es» corresponde al idioma español, y el código «ES» corresponde al código de país (España).
<html lang="es-ES">Metaetiqueta Viewport
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica, a través de una metaetiqueta.
Debe incluir la siguiente metaetiqueta de elemento de ventana gráfica en todas sus páginas web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">El elemento «width=device-width» establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo.
El elemento “initial-scale=1.0” establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Metaetiqueta Description
Como su propio nombre indica es una metaetiqueta en la que introduciremos una descripción de la página web. Esta información se muestra como snippet (un resumen en dos líneas del tema de una página que aparece bajo la URL). Realiza una función importante en el resultado de la elección de búsqueda del usuario. Esta metaetiqueta es considerada una de las más importantes.
La descripción no debe sobrepasar los 160 caracteres de longitud, ya que puede aparecer incompleta en la lista de resultados de búsqueda.
El resumen debe ser preciso, y abordar los elementos claves del contenido de la página web.
<meta name="description" content="Las metaetiquetas de HTML codifican información para ser interpretada por el navegador y los buscadores."/>Metaetiqueta Keywords
Esta metaetiqueta permite definir las palabras clave para el buscador. Hoy en día esta metaetiqueta ha perdido valor en relación con el SEO, fundamentalmente porque es ignorado por Google y su importancia ha sido minimizada en Bing y el resto de buscadores.
La elección de palabras clave debe evitar el uso abusivo, y centrarse en los términos más relevantes. Las palabras clave se separan por comas.
<meta name="keywords" content="metaetiqueta, meta-tag, keywords"/>Metaetiqueta Author | Copyright
Esta metaetiqueta permite hacer referencia al diseñador de una página web y al propietario de los derechos del código fuente de una página HTML.
<meta name="author" content="Nombre del autor"/>
<meta name="copyright" content="Propietario del copyright"/>Metaetiqueta Canonical
La etiqueta canónica sirve para indicarle a los buscadores cuál es la URL que quieres que aparezca en los resultados y así evitar problemas causados por enlaces idénticos o duplicados.
<link rel="canonical" href="https://www.neoal.com/metaetiquetas-html"/>Metaetiqueta Robots
La función principal de esta metaetiqueta es proporcionar instrucciones de indexación a los (robots o googlebots). Con la siguiente metaetiqueta es posible introducir la indexación de una página, y su disponibilidad en la búsqueda.
También se puede establecer si los robots han de seguir los enlaces salientes o si han de ignorarlos. Esta información se encuentra entre los metadatos más relevantes para el SEO.
Index «index» permite al robot de búsqueda la indexación de una página HTML.
<meta name="robots" content="index"/>Noindex «noindex» sirve para indicar que una página HTML sea excluida en el índice. Esta metaetiqueta prohíbe al buscador transferir contenidos de una página HTML a su base de datos.
<meta name="robots" content="noindex"/>Robots «robots» se dirige a todos los buscadores. Follow «follow»: de forma predeterminada los motores de búsqueda recorren los enlaces que encuentran en una página HTML, a no ser que se les indique lo contrario. Esta información se puede incluir en las metaetiquetas.
<meta name="robots" content="follow"/>Nofollow «nofollow» sirve para impedir que un robot de búsqueda alcance determinadas sub-páginas de un sitio o rastree los enlaces en otro dominio. El robot ignora los enlaces pero no el contenido de la página.
<meta name="robots" content="nofollow"/>Metaetiqueta Equiv
La metaetiqueta con el atributo “http-equiv” puede contener información equivalente a los indicadores en el encabezado HTTP, la cual puede ser leída, por ejemplo, si el servidor no está configurado como corresponde. Los encabezados HTTP con el mismo nombre tienen prioridad frente a las metaetiquetas HTML.
Control de caché «cache-control» Las webs se suelen guardar en el caché del navegador para ser descargadas más rápido en el futuro. Para impedirlo usamos la metaetiqueta «cache-control» con el valor no-cache.
<meta http-equiv="cache-control" content="no-cache"/>Las páginas web que tienen esta metaetiqueta se vuelven a cargar de nuevo desde el servidor cada vez que se accede a ellas. Esto puede hacer que el navegador vaya más lento, pero es muy conveniente para páginas que actualizan su contenido diariamente.
Expires. Es posible que no se quiera prohibir el almacenamiento temporal en caché de forma absoluta. En este caso se puede usar el atributo «http-equiv» para definir una fecha de expiración para los datos HTML. Así es posible asignar a las páginas HTML la fecha de caducidad.
<meta http-equiv="expires" content="tiempo de expiración en segundos"/>También es posible definir períodos de tiempo o fechas concretas, siempre en formato internacional y según el GMT (Greenwich Mean Time)
<meta http-equiv="expires" content="Sat, 04 Feb 2025 00:00:00 GMT"/>Refresh. Con la metaetiqueta «http-equiv» es posible configurar también una transferencia sencilla. Con este atributo también se define fecha de vencimiento. En este ejemplo, en 30 segundos se produce el reenvío a la página principal de NEOAL.COM.
<meta http-equiv="refresh" content="30; url=http://www.neoal.com/"/>Generador de Metaetiquetas
Puede utilizar también, un Generador de metaetiquetas como el que se encuentra en: www.metatags.org
