More than 3 years have passed since last update.

Nuxt.jsでhtmlAttrsのlangやmetaタグが効かないとき

Nuxt

Last updated at 2021-02-26Posted at 2021-02-26

事象

ドキュメントにあるように、通常このように書くと

nuxt.config.js


head: {
  htmlAttrs: {
    lang: 'ja',
    prefix: 'og: http://ogp.me/ns#',
  },
}

このように反映されますが、

<html lang="ja" prefix="og: http://ogp.me/ns#">

langになにを設定してもenになってしまう

解決法

どうやらPWAモジュールを一緒に入れていると、そちらがlangの値をenに上書きしてしまうみたい。
PWAのほうのドキュメント通りに設定するとうまく書き変わる。

nuxt.config.js

export default {
  head: {
    htmlAttrs: {
      lang: 'ja',
      prefix: 'og: http://ogp.me/ns#',
    },
  },
// ~~~
  pwa: {
    manifest: {
      lang: 'ja',
    },
  },
}

環境

Nuxt.js: 2.15.2
nuxtjs/pwa: 3.3.5

Nuxt.js 2.11.0のときは発生していなかったのだけど、バージョンアップしたら発生した。

他にも上書きされるものが…

このあたりが上書きされます。

  const defaults: MetaOptions = {
    name: process.env.npm_package_name,
    author: process.env.npm_package_author_name,
    description: process.env.npm_package_description,
    charset: 'utf-8',
    viewport: undefined,
    mobileApp: true,
    nativeUI: false,
    favicon: true,
    mobileAppIOS: undefined,
    appleStatusBarStyle: undefined,
    theme_color: undefined,
    lang: 'en',
    ogType: 'website',
    ogSiteName: true,
    ogTitle: true,
    ogDescription: true,
    ogImage: true,
    ogHost: undefined,
    ogUrl: true,
    twitterCard: undefined,
    twitterSite: undefined,
    twitterCreator: undefined
  }

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up