html-eslint
no-duplicate-in-head
This rule disallows duplicate tags in the <head> section that should be unique.
Why?
Certain HTML tags in the <head> section should appear only once per document for proper functionality and SEO optimization. Having duplicate tags can cause:
- Multiple page titles confusing search engines and browsers
- Conflicting character encodings
- Multiple viewport declarations causing layout issues
- Conflicting base URLs
- Multiple canonical URLs diluting SEO value
How to use
.eslintrc.js
module.exports = {
rules: {
"@html-eslint/no-duplicate-in-head": "error",
},
};
Rule Details
This rule checks for duplicate occurrences of the following tags within <head>:
<title>- Document title<base>- Base URL for relative URLs<meta charset>- Character encoding declaration<meta name="viewport">- Viewport configuration<link rel="canonical">- Canonical URL declaration
Examples of incorrect code for this rule:
<head>
<title>First Title</title>
<title>Second Title</title>
</head><head>
<base href="/" />
<base href="/home" />
</head><head>
<meta charset="UTF-8" />
<meta charset="ISO-8859-1" />
</head><head>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1" />
</head><head>
<link rel="canonical" href="https://example.com" />
<link rel="canonical" href="https://example.org" />
</head>
Examples of correct code for this rule:
<head>
<title>Page Title</title>
<base href="/" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="canonical" href="https://example.com" />
</head><head>
<meta charset="UTF-8" />
<meta name="description" content="Page description" />
<meta name="keywords" content="html, css" />
<link rel="stylesheet" href="style.css" />
</head>Note that tags outside the <head> section are not checked by this rule, and other meta tags (like description, keywords) are allowed to have multiple instances.
