Nuxt.js初心者がHTMLタグにlang属性を設定してみる

シェアする：

投稿日時：2020年7月4日

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsでlang属性を追加したい人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

titleタグの設定やMETA descriptionの設定が意外と簡単で、調子こいてheadをいじくり始めていたのですが、よく見たらhtmlタグに日本語指定がされてませんでした。

というわけで今回は、htmlタグに「lang="ja"」を追加するだけのお話です。

WordPressの上でな！

※ このブログはWordPress製です

あ、僕はVue.jsはもちろんJavaScriptすら分かってないポンコツなので「何をそんな当たり前のことを…」とか思っても許してください。

しょうもないことでも日々感動しております。

今回も「vue-meta」を使う！

「vue-meta」っていかにも「Vue.jsでmetaタグを操作するモジュール」みたいな名前してますが、Nuxt.js公式マニュアルを見ていると「headers 及び html attributes を更新する」と書いてあったので、htmlタグもいじれるようです。

「詳しくはvue-metaのドキュメント見てね」と書いてあったので、今回はそちらを元に勉強していきます。

「vue-meta」の記述はNuxt.jsとちょっと違う

さっそくvue-metaのドキュメントを見ていきます。

最初にtitleタグの設定方法が書いてあったんですが…。 


{
  metaInfo: {
    title: 'Foo Bar'
  }
}

いきなりちょっと違います。

Nuxt.jsの場合はこう↓。 


<script>

export default {
  head: {
    title: 'Foo Bar',
  },
}

</script>

「vue-meta」なんて言うくらいなので、Vue.jsでの記述なのかもしれません。 というわけで、適宜Nuxt.js用に勝手に読み替えてみます。

これもWordPressなら簡単ですよね

headタグ同様にNuxt.jsではhtmlタグも触れないようです(多分)。

WordPressならこの辺も簡単ですよね。

header.phpを開いてhtmlタグに「lang="ja"」を書き足すだけです。

まぁ隣のWordPressの青さを妬んでもしょうがないのでNuxt.jsでの書き方をおべんきょします。

Nuxt.jsでHTMLタグに言語設定を追加する

vue-metaのドキュメントではlang属性追加のサンプルがこの↓ようになっていました。 


{
  metaInfo: {
    htmlAttrs: {
      lang: 'en',
    },
  }
}

「metaInfo」の部分がNuxt.jsでは「head」になってるんだと思うので、headプロパティ以下に「htmlAttrs」プロパティを追加してみます。 


export default {
  (略)
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: process.env.npm_package_name || '',
    (略)
  },
  (略)
}

以前の記事のtitle設定の上に追加しました。

追加前のHTMLタグがこれ↓。 


<html data-n-head-ssr>

追加後はこう↓。 


<html data-n-head-ssr lang="ja" data-n-head="%7B%data-n-head%22:%7B%22ssr%22:%22ja%22%7D%7D">

無事にlang属性が追加されてますね。

「data-n-head」というのも追加されてますが、中身をデコードすると「{"lang":{"ssr":"ja"}}」。

よく分かりませんがSSR用の識別子なんでしょう。

htmlAttrsでAMP対応もできるっぽい？

vue-metaのドキュメントではlang属性の他にAMPに関する記述がありました。 


{
  metaInfo: {
    htmlAttrs: {
      lang: 'en',
      amp: true
    },
  }
}

試しにこれも追加してみます。 


export default {
  (略)
  head: {
    htmlAttrs: {
      lang: 'ja',
      amp: true
    },
    (略)
  },
  (略)
}

HTMLの出力はこう↓。 


<html data-n-head-ssr lang="ja" amp data-n-head="(略)">

確かにHTMLタグにAMPが追加されました。

がっ！！

AMPのValidatorを通すと16個のエラー。

内容は、主に次の2種類。

  • styleタグは「style amp-custom」使いなさい
  • カスタムJavaScriptは使ったらダメだよ

その他、 v0.jsの読み込みやamp-boilerplateでエラーが出ていました。

「amp: true」とするだけではダメっぽい。

僕はけっこうAMP好きなので、Nuxt.jsでAMP対応もやってみたいですね。

lang属性を指定するファイルはどれ？

今回は「nuxt.config.js」に設定しました。

もしページによって言語を変える場合は、index.vueなどのページ毎にも指定できることを確認しています。 


<script>

export default {
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: (ページのタイトル),
    meta: [
      { hid: 'description', name: 'description', content: (ページの説明) }
    ],
  },
}

</script>

TypeScriptの場合はこう↓。 


<script lang="ts">

import Vue from 'vue'

export default Vue.extend({
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: (ページのタイトル),
    meta: [
      { hid: 'description', name: 'description', content: (ページの説明) },
    ],
  },
})

</script>

lang設定って必要？

必要なんだと思います。

Googleが出しているLighthouseというツールでチェックをかけると、lang属性がない場合、以下のようなエラーがでます。 


<html> element does not have a [lang] attribute

HTMLタグにlang属性がありませんよと。

詳細説明はこんな↓感じ。 


If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Learn more.

lang属性がないとスクリーンリーダーが正しく言語を理解しないことがあるよ、ってことですかね。

簡単に追加できますし、減点されるのもなんだか気分が悪いので、特に理由がなければ追加しておいた方がいいんでしょう。

まとめ

Nuxt.jsでhtmlタグにlang属性を設定するには、「nuxt.config.js」内のheadプロパティの中に「htmlAttrs」プロパティを追加して、lang属性を設定してください。 


export default {
  (略)
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    (略)
  },
  (略)
}

今回も簡単でしたね。

公式ドキュメント読むのが一番の近道な気がしてきた。

以上、WordPressからお届けしました！

Nuxt.js HEADタグ操作編の目次

シェアする：
Nuxt-HEADタグ操作編,Nuxt.js