Teoría
Teoría

La etiqueta meta: palabras clave y descripción

Las metaetiquetas permiten agregar datos sobre la página, como una lista de palabras clave o una descripción breve.

La lista de palabras clave se declara con <meta> y el atributo name con el valor keywords. Las palabras se escriben en content, separadas por comas:

<meta name="keywords" content="palabras, clave, importantes">

Esta metaetiqueta tiene un valor histórico: Google no usa keywords para indexar ni para ordenar los resultados. Aquí la usaremos para practicar cómo se escriben los metadatos.

La descripción breve se declara de manera parecida, pero con description como valor de name:

<meta name="description" content="descripción breve">

Los buscadores pueden usar esa descripción al mostrar la página en sus resultados, aunque también pueden elegir otro fragmento del contenido.

Resultado de búsqueda de CódigoHéroe con la descripción de la página enmarcada en rojo — Ejemplo ilustrativo de un resultado de búsqueda.

Puedes consultar cómo interpreta Google estas etiquetas en su documentación sobre metaetiquetas.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8">  <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <h1>Mi primer sitio web</h1> </header> <main> <nav> Navegación </nav> <section> <p>¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Agrega a <head> una metaetiqueta con las palabras clave maquetación, HTML, CSS, blog.
Agrega a <head> otra metaetiqueta con la descripción Blog sobre mi aprendizaje de tecnologías web.