Pule el head de tu página: título, descripción, favicon y enlaces externos seguros.
Abrir esta lección en KodokonIncluso antes de visitar tu página, la gente la ve en otros sitios: en una pestaña del navegador, en los resultados de búsqueda, en un enlace compartido. Todo eso ocurre en el head. Un head bien elaborado es la diferencia entre un sitio amateur y uno profesional.
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Quick Recipes | Lea's Kitchen</title>
<meta
name="description"
content="30 recipes ready in 20 minutes flat,
tested by our readers."
>
</head>El title aparece en la pestaña, en los marcadores y en los resultados de búsqueda: hazlo único por página, descriptivo, con el tema primero y de unos 60 caracteres. La meta description es el texto que se muestra bajo el título en los motores de búsqueda: apunta a 150 caracteres que den ganas de hacer clic.
El favicon es el pequeño icono que se muestra en la pestaña y en los marcadores. La práctica moderna: un favicon.ico de reserva en la raíz del sitio, una versión SVG que se mantiene nítida a cualquier tamaño y un icono dedicado para las pantallas de inicio de Apple.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">Un último reflejo profesional: los enlaces externos. Abrir un enlace en una pestaña nueva con target="_blank" da a la página abierta acceso potencial a window.opener y, por tanto, a tu página. Añade rel="noopener noreferrer" para cortar ese vínculo y evitar transmitir la dirección de origen.
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN documentation (new tab)
</a>