Meta tags are not defined in the first 1024 bytes of the HTML

[matt-clegg]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.17.0
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@8.19.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Using the following package.json and nuxt.config.ts, specifically the ssr: false and nitro preset: 'service-worker' settings.

{
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@iconify-json/ion": "^1.1.4",
    "@iconify-json/majesticons": "^1.1.3",
    "@iconify-json/material-symbols": "^1.1.18",
    "@nuxt/content": "^2.1.0",
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "flat": "^5.0.2",
    "nuxt": "^3.0.0-rc.10",
    "unplugin-icons": "^0.14.10"
  },
  "volta": {
    "node": "16.17.0",
    "npm": "8.19.2"
  },
  "dependencies": {
    "normalize.css": "^8.0.1",
    "sass": "^1.55.0"
  }
}

import Icons from "unplugin-icons/vite";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  app: {
    head: {
      title: "Title",
      titleTemplate: "%s - Title",
      htmlAttrs: {
        lang: "en"
      },
      meta: [
        {charset: "utf-8"},
        {name: "viewport", content: "width=device-width, initial-scale=1"},
        {hid: "description", name: "description", content: ""},
        {name: "msapplication-TileColor", content: "#ffffff"},
        {name: "theme-color", content: "#ffffff"}
      ],
      link: [
        {rel: "icon", type: "image/x-icon", href: "/favicon/favicon.ico"},
        {rel: "apple-touch-icon", sizes: "180x180", href: "/favicon/apple-touch-icon.png"},
        {
          rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon/favicon-32x32.png"
        },
        {
          rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon/favicon-16x16.png"
        },
        {rel: "mask-icon", color: "#6874f7", href: "/favicon/safari-pinned-tab.svg"},
        {rel: "manifest", href: "/favicon/site.webmanifest"}
      ]
    }
  },
  ssr: false,
  nitro: {
    preset: 'service-worker'
  },
  modules: [
    '@nuxt/content',
    '@nuxtjs/google-fonts'
  ],
  content: {
    navigation: {
      fields: ['author', 'publishedAt']
    },
    highlight: {
      theme: "github-dark",
      preload: [
        "csharp",
        "shell",
        "javascript",
        "powershell"
      ]
    }
  },
  googleFonts: {
    families: {
      Inter: [400, 500, 600, 700],
    }
  },
  vite: {
    plugins: [
      Icons({
        autoInstall: true
      })
    ]
  },
  css: [
    "normalize.css/normalize.css",
    "~/assets/styles/app.scss"
  ]
})

Build the project using the nuxi build command and then serve it using npx serve .\output\public

Describe the bug

Running the Google Chrome Lighthouse tool fails the Best Practices step saying:

A character encoding declaration is required. It can be done with a <meta> tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header.

It seems that the site is being generated with the <meta> tags half way down the head section, rather than at the top.

Additional context

No response

Logs

No response

[farnabaz]

I think this is related to meta ordering in framework, WDYT @danielroe @pi0?

[danielroe]

I think likely, yes. cc: @harlan-zw

[harlan-zw]

This logic was fixed for this issue with ssr in the latest @vueuse/head which is part of RC 12.

However, rendering tags with ssr: false is a bit of an issue, as they can't be injected until are scripts run, so you can't provide a charset within the first 1024 bytes.

Nuxt would need to render root level meta in the SPA index.html file

[danielroe]

I think we can track issue of meta tags when ssr: false in nuxt/nuxt#14172.