Verificação HTML: Valor inválido "X" para o atributo "rel" no elemento "Y": A string "X" não é um URL absoluto.

Sobre este problema HTML

O atributo rel define a relação entre o documento atual e um recurso ligado. A especificação HTML mantém um conjunto de valores de palavras-chave reconhecidos para este atributo, e as palavras-chave permitidas variam dependendo de qual elemento o atributo aparece. Por exemplo, stylesheet é válido em <link> mas não em <a>, enquanto nofollow é válido em <a> e <form> mas não em <link>.

Quando o validador encontra um valor rel que não é uma palavra-chave reconhecida, ele verifica se o valor é um URL absoluto válido. Isto é porque a especificação HTML permite que tipos de ligação personalizados sejam definidos usando URLs absolutos como identificadores (semelhante a como funcionam os namespaces XML). Se o valor não é nem uma palavra-chave reconhecida nem um URL absoluto válido, o validador levanta este erro.

Causas comuns deste erro incluem:

Erros de digitação em palavras-chave padrão — por exemplo, rel="styelsheet" ou rel="no-follow" em vez dos corretos rel="stylesheet" ou rel="nofollow".
Usar valores não padrão ou inventados — como rel="custom" ou rel="external", que não fazem parte do conjunto reconhecido da especificação HTML.
Usar URLs relativos como tipos de ligação personalizados — por exemplo, rel="my-custom-type" em vez de um URL completo como rel="https://example.com/my-custom-type".

Isto é importante porque os navegadores e outros user agents dependem de valores rel reconhecidos para determinar como lidar com recursos ligados. Um valor não reconhecido será simplesmente ignorado, o que pode significar que a sua folha de estilos não carrega, a sua sugestão de prefetch não funciona, ou os motores de busca não respeitam a relação de ligação pretendida. Usar valores corretos garante comportamento previsível em todos os navegadores e ferramentas.

Exemplos

Incorreto: Palavra-chave mal escrita

<link rel="styleshet" href="main.css">

O validador reporta que styleshet não é uma palavra-chave reconhecida e não é um URL absoluto.

Correto: Ortografia corrigida

<link rel="stylesheet" href="main.css">

Incorreto: Palavra-chave não padrão numa âncora

<a href="https://example.com" rel="external">Visitar Example</a>

O valor external não é uma palavra-chave rel padrão na especificação HTML, por isso o validador assinala-o.

Correto: Usar uma palavra-chave reconhecida

<a href="https://example.com" rel="noopener">Visitar Example</a>

Incorreto: URL relativo como tipo de ligação personalizado

<link rel="my-custom-rel" href="data.json">

Correto: URL absoluto como tipo de ligação personalizado

Se realmente precisar de um tipo de relação personalizado, forneça um URL absoluto completo:

<link rel="https://example.com/rels/my-custom-rel" href="data.json">

Correto: Valores `rel` válidos comuns

Aqui estão algumas palavras-chave rel padrão frequentemente usadas com os seus elementos apropriados:

<!-- Ligar uma folha de estilos -->

<link rel="stylesheet" href="styles.css">

<!-- Ligar um favicon -->

<link rel="icon" href="favicon.ico">

<!-- Pré-carregar um recurso -->

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Dizer aos motores de busca para não seguir uma ligação -->

<a href="https://example.com" rel="nofollow">Ligação patrocinada</a>

<!-- Abrir uma ligação de forma segura numa nova aba -->

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Site externo</a>

Múltiplos valores `rel`

Pode especificar múltiplos valores rel separados por espaços. Cada um deve individualmente ser ou uma palavra-chave reconhecida ou um URL absoluto válido:

<!-- Correto: ambos os valores são palavras-chave reconhecidas -->

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externo</a>

<!-- Incorreto: "popup" não é uma palavra-chave reconhecida ou URL absoluto -->

<a href="https://example.com" target="_blank" rel="noopener popup">Externo</a>

Para resolver este erro, consulte a referência do atributo rel da MDN para a lista completa de palavras-chave reconhecidas e quais elementos as suportam. Se o seu valor não estiver na lista, substitua-o pela palavra-chave padrão correta ou use um URL absoluto completo para definir o seu tipo de ligação personalizado.