¿Para qué sirven las etiquetas `meta`?
Las etiquetas meta, también llamadas meta tags son instrucciones que se colocan en el head de una página web.
Aunque no se ven directamente en el navegador, tienen como utilidad principal el indicar algunas cuestiones a los navegadores, a los motores de búsqueda y a las redes sociales.
¿Por qué son importantes?
- Pueden ayudar al posicionamiento de la página en sitios de búsqueda (SEO).
- Indican como debe de desplegarse el contenido, como es el caso de la compatibilidad en móviles, y la codificación que se va a utilizar.
- Controlan como se ve el sitio en redes sociales.
Aunque 1 y 3 son opcionales, pueden ayudar a mejorar el desempeño del sitio en cuanto a visitas.
Principales etiquetas meta.
| Etiqueta | Función | ¿Es necesaria? |
|---|---|---|
<meta charset="UTF-8"> |
Indica la codificación a utilizar dentro de la página. UTF-8 permitirá mostrar acentos, caracteres como ñ e incluso emojis. |
Si tu sitio no es en inglés, y/o usas emojis, es un sí rotundo. |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
Hace que la página se despliegue de forma correcta en dispositivos móviles. En español, que se vea bien en celulares. | A menos que la idea tras tu sitio es que solo se vea bien en computadora, debes usar esta etiqueta. |
<meta name="description" content="[Descripción de la página]"> |
Define el contenido de tu página para los motores de búsqueda. Puede ayudar a que la gente de clic. | Si quieres que mejore el desempeño web de tu sitio, o si quieres que aparezca en búsquedas. |
<meta name="keywords" content="palabras, clave, separadas"> |
Esta etiqueta está en desuso, sin embargo permite definir con etiquetas el contenido de tu sitio. Se sigue usando con generadores de contenido estático como Hugo. | No pasa nada si no lo usas. |
<meta name="author" content="Tu nombre de usuario">
|
Otra etiqueta que no es indispensable. Indica el nombre del autor del sitio. | Lo mismo del punto anterior. |
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
Obliga a Internet Explorer a usar su motor más moderno. | Si quieres que tu sitio sea retrocompatible, esta es la opción. |
<meta property="og:title" content="Título para redes sociales">
|
Parte del protocolo Open Graph de Facebook. | Es útil si vas a compartir contenido de tu página en redes sociales. |
<meta name="robots" content="index, follow">
|
Indica a las arañas/robots de los buscadores si deben indexar o no la página. | Es útil si quieres aparecer o no en sitios de búsqueda. |
A resumidas cuentas, las etiquetas meta pueden ser bastante útiles. Pero salvo la del set de caracteres y el viewport, poco a poco están en desuso.
La etiqueta viewport indicará que el contenido se va a ajustar de acuerdo al tamaño de la pantalla en la que es visto. Esto va a facilitar que el contenido se pueda leer en un móvil o tablet. Si se omite, puede que aún siga siendo legible en dispositivos portátiles, pero dependerá de la hoja de estilo, y de la cantidad de elementos en pantalla.
Se recomienda considerar la portabilidad a la hora de diseñar tu página. No es recomendable hacer un sitio solo para móviles o solo para PC.
Úsalas de acuerdo a lo que esperas del desempeño de tu sitio fuera de la página.
Si contratas un servidor y un nombre de dominio, definitivamente debes usar la mayoría de las que tienen que ver con búsqueda y posicionamiento.
Aunque si tu idea es que tu página solo llegue a un cierto nicho, me parece que sin problemas puedes omitir su uso.