head element (へっど えれめんと)
日本ではしばしば ヘッダ情報 という呼称が使われます。
htmlの中のこの部位はページを構成する基本的な文書の種類ですとか、htmlをきちんとhtmlとして正しく伝えるための情報を記しますのでとても重要です。
一般的にヘッダ情報内の要素は「目に見えるもの」「可視化されるもの」ではありませんので、人間のためというよりもむしろコンピュータのためのものとも言えるかと思います。
が、人間の目に触れる前にコンピュータに正しく解釈してもらわないことにはまともなページになりませんので、ヘッダ情報をカスタマイズする時には細心の注意を払うようにしてください。
今回はよくあるミスと、先回の記事を補足する内容も含みます。
テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
テンプレートのカスタマイズをよくしている、という方に 「HTMLエディター」 をおすすめしたいと思います。「テキストエディター」という呼び方もされます。 なんとなく上級者向けなイメージがあるかもしれませんが、寧ろ初心者の方ほど積極的に使って欲しい と思います。...
ヘッダ情報内の場所
ヘッダ情報というのはこの部位です。
一部を大幅に省略していますが、「日本の」「FC2ブログの」テンプレートの場合はこんな感じです。
ヘッダ情報よりも「前(先)」には何も入れない
<head> から </head> までの内容が「ヘッダ情報」なわけですが、開始タグの <head> の前には
<!DOCTYPE html> と <html lang="<%template_language>"> というのがあります。それに続きヘッダ情報が始まる、という形です。
ヘッダ情報と上記2つの要素との「間」に何かを差し込むことはまず無い、と思ってください。
一番最初はドキュメント宣言といって、htmlのバージョンを指定します。2018年現時点では原則としてhtml5を使用すべきですから、書き出しがこの文字列以外の場合それはhtml5ではありませんので極力利用を避ける、と。
ドキュメント宣言はまずいの一番に書かなければいけない内容です。
続いてlanguage指定です。ここではFC2の独自変数 <%template_language> が記されていることが多いです。
各ユーザーの登録情報にマッチする言語指定が自動で出力されます。大抵の場合は ja つまり「Japanese (日本語)」となります。
FC2ブロガーは日本人だけではありませんので別の言語指定になっている方ももちろんいらっしゃいます。
この人間用の言語指定が二番目に記されるべき内容です。
次いでヘッダ情報となるわけですが、言語指定とヘッダ情報の間、あるいはヘッダ情報よりも前に既に何かを追加した覚えがある、という方は「間違えたかも…(汗)」と思って頂ければ。
で、開始タグ <head> と 終了タグ </head> というのを書きましたが、この「開始」と「終了」を間違える方も結構いらっしゃいますので次章でお伝えします。
ヘッダ情報に追加する要素いろいろ
ヘッダ情報内に追加する「何か」とはなんぞ？という話になりますけれども、Googleのadminコード(管理者特定のコード, google-site-verification) や analytics(googleアクセス解析, トラッキングコード) であったり、第三サービスあるいはFC2純正の アクセス解析 がほとんどだと思います。
また、私のテンプレートに限定して言うとkeywordのメタ要素はデフォルト導入していませんので、もしかしたらmeta keywordを追加している方もいらっしゃるかもです。個人的には不要だと思いますが(どこのクローラーも既にサポートしていません)
ヘッダ情報への要素追加時のミス
開始タグと終了タグを間違えない
例としてGoogleの管理者権限コードを入れてみます。推奨は </head> の直前ですのでそこへコピペします。
終了タグの方 ですよ。
<head> --- 開始タグ
</head> --- 終了タグ
スラッシュが付いているのが終了タグです。開始タグと終了タグを間違えると位置が全く違ってきますのでスラッシュの有無をしっかり確認してください。このミスも大変よく見かけます。<head> の「直前」と間違ってしまうとhead要素の「外」に書くことになってしまいますのでhead要素内のインフォメーションとしての役割が失われてしまいます。head内要素でなくhead外要素なってしまうので当然です。
開始 or 終了タグの見間違いはhead以外にも <body> と </body> でもよく見かけます。
head終了タグ直前というのはこの位置です。head開始タグ直前では一番最初に記した「この位置に何かを追加することはまず無い」とした位置に該当します。
ところが実際に見てみるとそういったミスはあまりなくてですね、haad開始タグ 直後 に置かれていることが多いんですね。つまり「開始」と「終了」を読み違えている上に「直前」と「直後」も読み違えている、という不思議な現象です(笑)
ちなみに両方を読み違えた場合(開始タグ直後に記した場合)には翻って「不正ではない = 正しい」位置になります。あまりおすすめできない位置ではありますが少なくとも構文エラーは免れます。
何かを追加する時には「開始タグ(スラッシュ無し)」なのか「終了タグ(スラッシュ有り)」なのか、「直前」なのか「直後」なのか、注意深く説明を見て正しい位置を把握する ことが大事ですね。
終了タグを省略できる要素はルールがシビア
「シビア」なんて表現をしていますが実際は難しいことは何もなく、単純ミスに気をつけないと大事故になる可能性がある ということです。
その代表的な「単純ミス」のひとつがここのところ何度も記事にしている 全角スペースの使用 ですね。
しつこくこうして記事にしているのはあまりにも同じミスをしているFC2ブロガーさんが多いからなんですけどね。
というのはhead情報までカスタマイズできるサービス自体が日本にはそうそうありません。
元より許可されていないカスタマイズであればミスのおかしようもないわけで。
htmlの タグ というのは通常 開始タグ と 終了タグ が一組、ワンセットになっています。
中には終了タグを省略できるものがあり、head要素も終了タグを省略できることになっています。実はhead要素というのは終了タグはおろか開始タグまでも省略可能な要素です。
ところがこれがねー、ちょっと初心者には向かないというか。
終了タグを省略した場合どうなるかというと、ブラウザが 正しいと思われる位置に終了タグを補完する ことになります。ブラウザが仕事をするから省略しても構わないよ、という感じで捉えればOKです。
この「正しいと思われる位置」というのがミソ。
例えば開始タグ <head> と 終了タグ </head> が書いてあるとします。つまり終了タグを省略せずに記してある場合ですね。
ここで全角スペースの話をまた持ち出しますが、仮に 要素の頭の位置(インデント)を揃えるために半角スペース2つではなく全角スペース1つを入れてしまった場合。
半角スペース2と全角スペース1つは見た目にほぼ等しいよ、だから日本人はインデントのつもりで間違えて打ってしまうんだよ、という話を先回書きましたけれど、head情報内での全角スペースの使用というのは完全にNGです。
つまり「head要素内にあってはならない文字」であり「head要素内にあるわけがない文字」なんですね。
「文字」ですよ。全角スペースの扱いは「文字」です。半角スペースは「記号」ですが全角のそれは「文字」
head要素内に全角スペースは「あるはずがない」のでブラウザは「head要素は終わった」 という解釈をします。つまりhead終了タグの補完が行われます。
すると後続にまだhead内に記したい要素があったとしても、全角スペースのせいでhead要素は「終わった」とみなされていますので、head「内」であるべき要素群がhead「外」へ押し出されてしまうわけです。これが大事故、しかも巻き込まれ型です。
「実際はもっと前でも良いけれどもhead終了タグの直前に書くのが安全」という内容も先回書いたのですが、なぜかと言うと巻き込み被害を最小限にできるからです。
被害がどこまで続くかと言うと、まぁ、最後まで。
最小限と言っても結局htmlの最終まで悪影響は続きますので、「50人が重軽傷」なのか「50人が重軽傷のうち3人は奇跡的に無傷」か、という感じでしょうか。
レンダリングはほぼ正しく行われますが、内部構造的にはぐちゃぐちゃです。
二次被害を最小限にするという意味で初心者の方へ向けては「head終了タグ直前」を推奨します。
というわけでたかがスペース、大きいか小さいか程度、と甘く見てはいけません。
head終了タグが書いてあってもダメですよ。ブラウザのhtmlの解釈(パース)は上から順に行われ、終了タグが有るか無いかなどの先読みはしません。終了タグ省略可能な要素については「正しい位置」にその都度補完を行います。期待した位置よりも先に自動補完で閉じてしまったのならば元々「正しいつもり」で書いたその終了タグの位置は正しくなかった、ということです。
まとめ
繰り返しになりますが、head情報というのは通常描画されるような内容は置きませんので、エラーを体感出来ないことのほうが多いんですね。
テンプレートのレイアウトが崩れるといったことがあれば気づくのでしょうが、なかなかそうはいきません。
ある種のデザインであれば気づくことができますが(ナビやヘッダーの位置下がりなど)
あとhead情報関連で他に気になる点というと以下のような感じです。
- CSSをやたらと小分けにしている --- 一つにまとめましょう
- scriptファイルをhead内に追加しまくっている --- async属性が付加できるか考慮、body終了タグ直前に移動できないか考慮(head内のscriptはページの読み込みを遅くします)
- void element(空要素, imgやmetaなど終了タグを持たないもの)のclosing slash(閉じスラッシュ)が有ったり無かったり --- xml文書以外は無しに統一しましょう
head情報内の全角スペースがどのような形でエラーになるのか具体的な仕組みの説明をしました。
日本人である以上全角とは切っても切れない間柄ですから、htmlを触る際にはゆめゆめお気をつけあれ。
最後に、何かをテンプレートhtmlに追加するとき、特に Google系の何か 例えば広告のコードなど。どこに記載するかは必ず指南があるはず なので、しっかりと確認を行ってください。</head> の直前、というものもあれば <body> の直後、あるいは </body> の直前など。これを間違えるとクリティカルな(致命的な)構文エラーになることがあります。
There are no comments yet.