Metadatos, SEO y redes sociales
Dos visitantes llegan a tu página sin verla de la forma en que lo hace una persona. Uno es un motor de búsqueda decidiendo si incluir la página y qué decir sobre ella. El otro es una plataforma de redes sociales construyendo la pequeña tarjeta de vista previa que aparece cuando alguien comparte el enlace. Ambos leen un pequeño bloque de etiquetas en el <head>, no el contenido visible en pantalla. Este capítulo trata sobre escribir ese bloque para que tu página aparezca correctamente en un resultado de búsqueda, una pestaña del navegador y un enlace compartido.
Título y descripción
Cada página necesita un <title>. Es el texto que aparece en la pestaña del navegador, en tus marcadores y como el titular clickeable cuando la página aparece en una lista de resultados de búsqueda. Vive en el head, y es una sola línea corta:
<title>Pan de masa madre para principiantes: tu primer pan, paso a paso</title>Debajo de ese titular en un resultado de búsqueda generalmente hay una oración describiendo la página. Eso viene de la meta descripción, otra etiqueta que pones en el head:
<meta name="description" content="Recetas simples de pan de masa madre, desde mezclar tu primera masa hasta una corteza dorada crujiente, con tiempos para cada paso." />Imagina un libro en un estante. El título está impreso en el lomo para que lo encuentres, y la descripción es el resumen en la contraportada que te ayuda a decidir si lo abrirás.
<title> es tu etiqueta de pestaña y el titular en el que la gente hace clic en resultados de búsqueda, así que hazlo claro. El <meta name="description"> es el resumen debajo. Ambos viven en el head, y dar a cada página su propio par me requirió mucho menos esfuerzo de lo que esperaba por lo mucho que ayuda. Charset y viewport, revisitados
El esqueleto en Tu primera página HTML abrió con dos meta etiquetas que son rápidas de pegar y olvidar. Vale la pena una segunda mirada, porque ambas cambian cómo se lee y se representa la página antes de que aparezca cualquier contenido.
La primera etiqueta es la codificación de caracteres:
<meta charset="UTF-8" />Le dice al navegador en qué alfabeto están escritas las letras, así que los caracteres acentuados, comillas tipográficas y emoji se muestran correctamente en lugar de convertirse en símbolos extraños. Siempre usa UTF-8; cubre cada idioma y cada emoji.
La segunda etiqueta es la viewport, y hace que la página se ajuste a una pantalla de teléfono:
<meta name="viewport" content="width=device-width, initial-scale=1" />Sin ella, un teléfono asume que la página fue construida para un escritorio ancho y encoge todo hasta que el texto es demasiado pequeño para leer. Con ella, la página coincide con el ancho del dispositivo. Piénsalo como decirle al navegador el tamaño real del papel en el que está imprimiendo.
<meta charset="UTF-8"> evita que letras acentuadas y emoji se conviertan en basura, así que siempre inclúyelo. La línea viewport hace que la página se ajuste a un teléfono en lugar de encogerse a un escritorio diminuto. Dos etiquetas que copias una vez y rara vez tocas de nuevo, pero omitirlas se nota rápido. Open Graph y tarjetas de redes sociales
Cuando pegas un enlace en un chat o una publicación de redes sociales, a menudo aparece una pequeña tarjeta de vista previa con una imagen, un título y una línea de texto. Esa tarjeta no es la plataforma adivinando. La página le entrega la imagen y palabras para mostrar, usando un conjunto de etiquetas llamadas Open Graph en el head:
<meta property="og:title" content="Pan de masa madre para principiantes" />
<meta property="og:description" content="Tu primer pan, paso a paso." />
<meta property="og:image" content="https://escuelapan.example/pan.jpg" />Nota que estas usan property donde la etiqueta description anterior usó name. Esa es la forma que toman las etiquetas Open Graph; copia el patrón y cambia las palabras y la dirección de la imagen. Piénsalo como empacar una pequeña vista previa en la página, lista para cuando alguien la comparta.
og:title, og:description, y og:image. Usan property en lugar de name, que se ve extraño al principio pero así es como se escriben. Establécelas y tus enlaces dejan de aparecer desnudos. Favicons y otras etiquetas link
El pequeño icono en la pestaña del navegador, junto al título de la página, es el favicon. Es cómo alguien nota tu pestaña entre una docena de otras. Agregás uno con una etiqueta <link> en el head:
<link rel="icon" href="/favicon.png" />La parte rel="icon" le dice al navegador que este archivo es el ícono de la página, y href apunta a la imagen. Una pequeña imagen cuadrada, alrededor de 32 por 32 píxeles, es suficiente. Es un pequeño detalle, y hace que un sitio se vea terminado.
<link rel="icon"> y una pequeña imagen cuadrada. Es algo diminuto que hace que un sitio se vea terminado. La etiqueta <link> en el head es cómo señalas a una página archivos adicionales como este. Conceptos básicos de rastreabilidad
Los motores de búsqueda envían programas que visitan páginas web, las leen, y las agregan a una lista grande para que la gente pueda encontrarlas más tarde. Ese programa es un rastreador, y la mayoría del tiempo quieres que haga su trabajo y no haces nada especial. Si tienes una página que prefieres mantener fuera de la búsqueda, un borrador o una página de agradecimiento privada, lo dices con una meta etiqueta robots:
<meta name="robots" content="noindex" />noindex significa "por favor no incluyas esta página en los resultados de búsqueda." Imagina el rastreador como un bibliotecario caminando los estantes y catalogando cada libro; esta etiqueta es una nota pidiendo que el bibliotecario omita este.
<meta name="robots" content="noindex">. Ese es el control principal que alcanzarás en esta etapa, así que no necesitas pensar demasiado en el resto todavía.