ℹ Info SEO

Charset Is Not the First Meta Tag — Encoding Must Come First

The charset declaration should be the very first element inside <head>.

What's the issue?

Your page has a charset declaration, but it's not the first element inside the <head> tag. The HTML specification recommends that the charset meta tag appears within the first 1024 bytes of the document, and best practice is to make it the very first tag.

Why does order matter?

Browser parsing

  • The browser needs to know the character encoding before it can correctly parse any text content
  • If the charset appears after other elements (like <title>), the browser may have already misinterpreted characters
  • This can cause a re-parse of the document, leading to a visible flash

Security

  • The HTML5 spec mandates that charset must be within the first 1024 bytes for security reasons
  • Late charset declarations can be exploited for encoding-based attacks (UTF-7 XSS)

Correct rendering

  • Non-ASCII characters in <title> or other early meta tags may be garbled if the charset hasn't been declared yet

How to fix it

Move the charset declaration to be the very first element inside <head>:

<head>
  <meta charset="UTF-8" />
  <title>Your Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- other meta tags after -->
</head>

Recommended head order

  1. <meta charset="UTF-8" /> — Must be first
  2. <meta name="viewport" ...> — Early for proper rendering
  3. <title> — Page title
  4. <meta name="description" ...> — SEO description
  5. Other meta tags (OG, Twitter, etc.)
  6. CSS and other resources

Common mistakes

<!-- Bad: title before charset -->
<head>
  <title>My Page with Spëcial Chàracters</title>
  <meta charset="UTF-8" />
</head>

<!-- Good: charset first -->
<head>
  <meta charset="UTF-8" />
  <title>My Page with Spëcial Chàracters</title>
</head>
Check your Open Graph tags

Related articles

✕

Missing og:title

The og:title tag is essential for social sharing. Without it, platforms will use the page title or URL.

 ⚠

og:title Is Too Long

Titles longer than 60 characters may be truncated on social platforms.

 ℹ

og:title Is Too Short

Short titles may not be descriptive enough for social sharing.

 ✕

Missing og:description

The og:description tag provides a summary of the page content for social platforms.

 ⚠

og:description Is Too Long

Descriptions over 160 characters may be truncated on social platforms.

 ℹ

og:description Is Too Short

Short descriptions miss the opportunity to engage users.