Nuxt.js初心者がheadタグ内を自由に操作していく

シェアする：

更新日時：2020年7月5日

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

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsでhead内の記述に手を加えたい人
  • つまりオレ

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

今回はNuxt.jsで、HTMLのheadタグ内の操作にトライします。

最終的にはまとめページみたいにしたいんですが、まだ半分くらいです。

JavaScript苦手ながらもとうとうスクリプト部分を触っていかないといけないですが、これが終わったらコンテンツ作りに入れるので気合い入れてお届けします！

WordPressの上でな！

※ このブログはWordPress製です

まずはデフォルトのheadタグを確認

デモ画面が出力されているHTMLのhead内を確認してみました。 


<head >

//タイトルタグ
<title>nuxt-test</title>

//メタタグ(文字コード、viewport、description)
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="## Build Setup">

//Favicon
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">

//Nuxt.jsのスクリプト
<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons.app.js" as="script">
<link rel="preload" href="/_nuxt/vendors.app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">
<link rel="preload" href="/_nuxt/pages/index.js" as="script">

//node_modules\@nuxt\vue-app\template\components\nuxt-loading.vue
<style data-vue-ssr-id="7e56e4e3:0">
(略)
</style>

//node_modules\@nuxt\vue-app\template\components\nuxt-build-indicator.vue
<style data-vue-ssr-id="7e49e411:0">
(略)
</style>

//layouts\default.vue
<style data-vue-ssr-id="56b15182:0">
(略)
</style>

//pages\index.vue
<style data-vue-ssr-id="1b7833da:0">
(略)
</style>

//components\Logo.vue
<style data-vue-ssr-id="1930a9a0:0">
(略)
</style>

</head>

読みやすいよう整形と一部簡略化はしましたが、まだまだ量が多いので簡単にまとめると…

  • タイトル
  • 基本的なMETAタグ
  • Favicon
  • Nuxt.jsのスクリプト
  • スタイルシート

この5つの要素が含まれていることが分かります。

これを踏まえてもうちょっと簡略化すると…。 


<head >

//タイトルタグ
<title>nuxt-test</title>

//メタタグ

//Favicon
(略)

//Nuxt.jsのスクリプト
(略)

<style>
(略)
</style>

</head>

ここに自分が足したいものを足していこうと思います。

おまけ：スタイルシートが読み込まれる順

読み込まれるスタイルは次の5種類。

  1. nuxt-loading.vue(必須)
  2. nuxt-build-indicator.vue(必須)
  3. レイアウト(default.vue)
  4. そのページのvueファイル(index.vue)
  5. コンポーネント(Logo.vue)

この順番で読み込まれていました。

Nuxt.jsのシステムから自動で読み込まれる上2つの中身は、次の3＋4つです。

  • .nuxt-progress
  • .nuxt-progress.nuxt-progress-notransition
  • .nuxt-progress-failed
  • (.nuxt__build_indicator)
  • (.v-enter-active)
  • (.v-leave-to)
  • (svg)

svgが汎用的で困りますが、ユニークな属性セレクタが指定されているので自分が使うsvgに影響を及ぼすことはありません。

さらにビルドしたHTMLにはnuxt-build-indicator.vueから読み込まれた下4つ(カッコついてるやつ)は含まれていませんでした。 「nuxt-progress」というクラス名だけ避ければよさそう。

なので開発サイドとしては、

  1. レイアウト
  2. index.vue
  3. コンポーネント

の順に読み込まれるぞ、ってのと「nuxt-progress」で始まるクラスは定義済みだぞ、ってのを知っておけばいいのかなと。

headに自由に項目を追加・削除していく前に

上のデフォルトheadの内容を前提に、ここから自由に追加・削除を行っていきたいと思います。

WordPressであれば割と簡単です。

追加はheader.phpに書き加えるだけだし、削除も「wp_deregister_script」「wp_dequeue_style」やらでいらないのを消すだけです。 分からなくてもググればけっこうすぐに解説記事が見つかります。

ですがNuxt.js。

そもそもheadが触りやすいところにないのだ！

そこでこのページでは僕が追加したいheadの項目を実装するのに四苦八苦したのをまとめていきます。

削除は必要ないんじゃないかな

簡略化したデフォルトのheadがコレ↓です。 


<head >

//タイトルタグ

//メタタグ

//Favicon

//Nuxt.jsのスクリプト

<style>
(略)
</style>

</head>

タイトルはいるでしょ。
METAタグも必要なのばっかりに厳選されてるでしょ。
Faviconはいるでしょ(どっちかという足したい)。

あえて消したいとするならNuxt.js関連のスクリプト、システムから自動で読み込まれてしまうCSSですが、これは消したら動作に支障をきたしそうなので諦める。

となると、消したいものってないんですよね…。

なので今回は削除については考えません。

title/descriptionをページ毎に設定したい

WordPressと比較すると…

titleやdescriptionも変えられないの！？

って感じですが、Nuxt.jsのデモ構成にはページ毎にtitle/descriptionを変える記述がありません。

なのでちょっとひと手間必要です。

TITLEの設定

Nuxt.js初心者がtitleタグをページ毎に設定できるようになる物語

DESCRIPTIONの設定

Nuxt.js初心者がMETA descriptionをページ毎に設定できるようになる物語

「lang="ja"」を設定

HTMLタグに「lang="ja"」を追加します。

lang属性がないとGoogleのLighthouseに怒られるので設定しておきます。

LANGの設定

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

Faviconの詳細設定

デフォルトの「favicon.ico」だけじゃなく、各OS/ブラウザ向けに詳細設定したい場合はどうするのか。

DESCRIPTION設定の応用でできます。

Faviconの設定

Nuxt.js初心者がhead内にFaviconの設定を追加してみる

OGPタグの設定

SNS向けの情報を設定する部分です。

WordPressでは「All In One SEO Pack」というプラグインに任せっきりだったので、OGP公式サイトを参考に自分で書いてみることにしました。

ほとんどの項目はDESCRIPTION設定の応用でできます。

「og:url」だけやっかいですが、僕は先にcanonicalで詰まっていたので、こちらでは大丈夫でした。

OGPの設定

Nuxt.js初心者がhead内にOGPの設定を追加してみる

canonicalの設定

canonicalはそのページの絶対URLさえ分かれば設定できます。 めっちゃ簡単そうに見えるでしょ？

めちゃくそ大変でした…。

たった1行に大苦戦

初心者がNuxt.jsでcanonical設定しようとしたら死ぬほどハマった件

Vue.jsとかJavaScriptが分かってる人にはたぶん簡単なんだと思う。

jQueryなどのスクリプト追加

すんません、JavaScript苦手なもんでまだノータッチです。

やりますよ…。

やればいいんでしょ！！

近日中には公開できません！

Nuxt.js公式マニュアルによると、「nuxt.config.js」の「head」プロパティ内に次のコードを追加すればできるそうです。 


export default {
  head: {
    script: [
      { src: '(スクリプトファイルのURL)' }
    ],
  }
}

CSSの設定

CSS関連は課題がけっこう多いです。

デフォルトだと、「vueファイルに記述したCSS」を、「コメント含めてそのまま」「インラインCSSとして追加」されます。

これらを好みの方法に切り替えていきます。

外部CSSの読み込み

vueファイルに設定するのではなく外部のCSSファイルを読み込ませます。

Nuxt.jsはレイアウト＞ページのvueファイル＞コンポーネントの順にCSSが適用されるので、

  • 全ページ共通のスタイルはレイアウトに
  • そのページ専用のスタイルはvueファイルに
  • コンポーネント内で完結するスタイルはコンポーネントに

という風に分けることで、メンテナンス性も高いんじゃないかと思います。

ですが、vueファイルが縦に長くなったりすると、templateタグ(HTML部分)とstyleタグ(CSS部分)を上下に行ったり来たりしないといけなくなります。

それならやっぱりCSSだけ独立させてる方が編集はしやすいのでは…？

と考えたので独立させることにしました。

外部CSSの参照

Nuxt.js初心者が外部CSSファイルの操作を学ぶ

ベンダープレフィックスの自動追加

ベンダープレフィックスというのはこういう↓やつです。 


.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

各ブラウザでちゃんと動作するよう接頭辞をつけるやつ。

こんなのいちいち書き分けてられないので自動で追加できるツールがあります。 超便利。

これを外部ツール依存せずにNuxt.js内で完結させられないか、というお話です。

まだ試してないんですができそう。

CSSの圧縮

コメントや不要なスペースの削除を自動でやらせたいというお話です。

「npm run dev」で開発中はCSSの中身がそのまま表示されていたので何か設定しなきゃ…と考えていたんですが、ビルドすればstyleタグの中身どころか、headタグの中身全体が圧縮されていました。

静的出力の場合も動的出力の場合も同様です。

なので設定不要。

SASS/SCSS対応

SASSはスタイルシートのメンテナンス性を上げるものです。 変数が使えたり、入れ子にできたりと、CSSが圧倒的に書きやすくなります。

流れは次のような感じです。

  1. SASS/SCSSで編集
  2. SASS/SCSSをビルド？コンパイル？
  3. CSSとして出力

この2の段階をNuxt.js内でできないかというお話です。

割と簡単にできました。

構造化データの設定

構造化データというのは…

実態はよく分かっていませんが、ページの情報を効率的にGoogleに伝えるためのJSONデータのことです。

SEOに効果あるよと言われて勉強し、パンくずリストとかarticleとか表面的なのは割と簡単に実装できたんですが、調べていくとかなり奧が深くて、気が付いたらナンチャラ式構造化データみたいなのも書けるようになり…

いざ、実装してみたはいいものの、実装したパターンと実装したパターンで差がわかんないという…。

学習コスト大きかったのにい！！

僕のやり方が間違っている？

実際にそんな効果はない？

今後効果が出てくる？

よくわかんないですけど、学んだ分をNuxt.js上でも再現できるようにしたいと思います。

まだノータッチなのでいずれ、ね…。

PHPではオートで出力できる仕組みを作ったので、まぁいけるっしょNuxt.jsでも。

まとめ

だいぶまとまって来ましたが、もうちょっと勉強して追加予定です。

headタグが自由に操作できるようになれば次は本格的にコンテンツ作りに入ります！

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

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

シェアする：
Nuxt-HEADタグ操作編,Nuxt.js,シリーズ第1話