CODEWITHSUNDEEP
typescriptdenofreshjs
Andrew Garrison
Andrew Garrison

Reputation: 67

Charset tag is not at the top of the head when executed on client

I am currently working on a site that I plan to upload to Deno Deploy, and to be thorough I was looking at the issues panel within developer mode to improve accessibility and performance. I found that one of the tips was the following:

'charset' meta element should be the first thing in '<head>'.

I confirmed the published source code, and indeed, the charset element is the second tag within head, directly under '<title>'.

a screenshot of the source code showing the head element

However, the strange thing is that in the app wrapper I am using, the title element is at the bottom of the head tag, and the charset element is at the top.

import { type PageProps } from "$fresh/server.ts";
export default function App({ Component }: PageProps) {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Andrew Garrison | Portfolio Site</title>
        <link rel="stylesheet" href="/styles.css" />
      </head>
      <body>
        <Component />
      </body>
    </html>
  );
}

I assume this is Deno moving things around when sending to the browser, and that not fixing this won't cause any major issues. However, I am curious; is there any reason why this is happening, and is it possible to fix without ignoring the app wrapper in the component and making a new layout?

Upvotes: 0

Views: 14

Answers (0)

Related Questions