Acerca de este problema HTML
El elemento <link> conecta tu documento HTML con recursos externos como hojas de estilo, iconos, fuentes y páginas precargadas. Según la especificación de HTML, un elemento <link> debe incluir al menos uno de rel, itemprop, o property para que su propósito esté claramente definido. Un <link> simple con solo un href carece de significado—apunta a un recurso pero no explica para qué es ese recurso. El validador muestra este error para asegurar que cada <link> tenga significado semántico.
Esto importa por varias razones. Los navegadores dependen de estos atributos para decidir cómo manejar el recurso enlazado. Un <link> con rel="stylesheet" activa la carga de CSS, mientras que rel="icon" le dice al navegador que use el recurso como favicon. Sin uno de los atributos requeridos, los navegadores pueden ignorar el elemento completamente, lo que resulta en estilos faltantes, iconos u otros recursos. También afecta las herramientas de accesibilidad y motores de búsqueda que analizan tu marcado en busca de datos estructurados.
Entendiendo los tres atributos
-
rel— El atributo más común. Define la relación entre tu documento y el recurso enlazado. Los ejemplos incluyenstylesheet,icon,preconnect,preload,canonical, yalternate. La mayoría de elementos<link>en la práctica usanrel. -
itemprop— Se usa cuando el elemento<link>es parte de una estructura de HTML Microdata. Especifica un nombre de propiedad dentro de unitemscope, enlazando a una URL como valor de la propiedad. Esto se ve comúnmente con vocabularios de Schema.org. -
property— Se usa con metadatos RDFa (como etiquetas Open Graph). Define una propiedad de metadatos para el documento, comoog:imageoschema:citation.
Solo necesitas uno de estos tres atributos para satisfacer el requisito, aunque puedes combinarlos cuando sea apropiado.
Ejemplos
Inválido: <link> sin atributo de relación
Esto activa el error de validación porque el elemento no tiene atributo rel, itemprop, o property:
<head>
<title>My Page</title>
<link href="styles.css">
</head>
Arreglado: añadiendo rel para una hoja de estilo
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
Arreglado: usos comunes de rel
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="canonical" href="https://example.com/page">
</head>
Arreglado: usando itemprop con Microdata
Cuando un <link> aparece dentro de un elemento con itemscope, usa itemprop para definir una propiedad que tome un valor URL:
<div itemscope itemtype="https://schema.org/Article">
<h2 itemprop="name">Understanding HTML Validation</h2>
<link itemprop="mainEntityOfPage" href="https://example.com/article">
</div>
Arreglado: usando property con RDFa / Open Graph
Las etiquetas meta de Open Graph para compartir en redes sociales comúnmente usan el atributo property. Aunque <meta> es más típico para Open Graph, <link> con property es válido para valores de tipo URL:
<head>
<title>My Page</title>
<link property="og:image" href="https://example.com/image.jpg">
<link property="schema:citation" href="https://example.com/source.html">
</head>
Inválido: error tipográfico o atributo mal colocado
A veces este error aparece debido a un nombre de atributo mal escrito:
<head>
<title>My Page</title>
<link rел="stylesheet" href="styles.css">
</head>
Verifica que rel esté escrito correctamente y no se haya omitido accidentalmente al copiar marcado de plantillas o fragmentos de código.
Lista de verificación para arreglo rápido
-
¿Enlazando a una hoja de estilo, icono, fuente u otro recurso? Añade el valor
relapropiado. -
¿Definiendo propiedades Microdata? Usa
itempropdentro de un contextoitemscope. -
¿Añadiendo metadatos RDFa o Open Graph? Usa
propertycon el prefijo de vocabulario correcto. - ¿Aún ves el error? Verifica errores tipográficos en el nombre del atributo o asegúrate de que el atributo no esté accidentalmente vacío.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.