HTML
Tutorial HTML: Metadatos (meta, title, link)
HTML metadata: metaetiquetas y ejemplos. Aprende a usar metaetiquetas en HTML para mejorar el SEO y el rendimiento con ejemplos detallados.
Los metadatos en HTML se refieren a datos acerca de los datos en su página web. No son directamente visibles para los usuarios, pero proporcionan información vital a los navegadores y a los motores de búsqueda. Los metadatos más comunes en HTML incluyen los elementos meta, title y link.
Elemento title
El elemento title es un componente clave del metadato de una página. Se encuentra dentro del encabezado (head) de la página y se usa para definir el título de la página, que se muestra en la barra de título del navegador y como el título de la página en los resultados de búsqueda. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Este es el título de mi página</title>
</head>
<body>
...
</body>
</html>
Elemento meta
El elemento meta se utiliza para proporcionar metadatos que no se pueden representar con otros elementos HTML, como title, base y link. Los elementos meta se utilizan para especificar la descripción de la página, las palabras clave, el autor del documento, la última modificación, y muchos otros metadatos.
El elemento meta tiene dos atributos que se utilizan con mayor frecuencia: name y content. El atributo name especifica el nombre del metadato y content especifica el valor del metadato. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Esta es una descripción de mi página web.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Mi Nombre">
</head>
<body>
...
</body>
</html>
El elemento meta también se puede usar para especificar el conjunto de caracteres del documento y la vista en dispositivos móviles. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
...
</body>
</html>
Elemento link
El elemento link se usa para vincular documentos y archivos externos a la página web. El atributo rel define la relación entre la página actual y la página enlazada. Algunos ejemplos comunes de su uso incluyen la vinculación a hojas de estilo en cascada (CSS), favicons y feeds RSS. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mi-estilo.css">
<link rel="icon" href="mi-favicon.ico" type="image/x-icon">
</head>
<body>
...
</body>
</html>
En resumen, los metadatos HTML son fundamentales para proporcionar a los navegadores y a los motores de búsqueda información acerca de su página web. Asegurarse de que están correctamente definidos y utilizados puede ayudar a mejorar tanto la accesibilidad de su sitio web como su clasificación en los resultados de búsqueda.
Ejercicios de esta lección Metadatos (meta, title, link)
Evalúa tus conocimientos de esta lección Metadatos (meta, title, link) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Audio
Tablas
Formularios (form, input, select, textarea, button)
Tablas (table, tr, td, th)
Enlace
Video
Imágenes
Contraste y legibilidad
DOCTYPE
Atributos de elementos
Introducción a HTML
Metadatos
Imágenes vectoriales
Anidación de etiquetas
Encabezados
Compatibilidad con navegadores
Validación de HTML
Optimización de la carga de la página (Lazy loading)
Atributos de ARIA
Listas
Página web completa con Bootstrap
Párrafos
Uso de DOCTYPE
Etiquetas semánticas (article, section, header, footer, nav, aside)
Navegación por teclado
Etiquetas semánticas
Listas (ul, ol, li)
Estilos
Divisiones
Uso de atributos
Atributos
Comentarios
Incrustación de contenido (iframe)
Uso de elementos y etiquetas
Elementos y etiquetas
Formularios
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el propósito y la importancia de los metadatos en HTML para proporcionar información relevante a navegadores y motores de búsqueda.
- Aprender a utilizar el elemento
titlepara definir el título de la página y cómo se muestra en el navegador y los resultados de búsqueda. - Familiarizarse con el uso del elemento
metay sus atributosnameycontentpara proporcionar descripciones, palabras clave, autoría, conjunto de caracteres y ajustes para dispositivos móviles. - Conocer cómo utilizar el elemento
linkpara vincular documentos externos, como hojas de estilo y favicons, para mejorar el diseño y la apariencia de la página web.