なかなかですね head要素のミス が後を絶たないようなので再々々々々掲とかそのぐらい。
head要素のミスが多い理由
- Google Analytics
- アクセス解析
- Twitterカード
これらを記載するのが head要素 内だからです。テンプレートのデザインカスタマイズを行わない方でもこれらを導入すれば それはカスタマイズ です。
FC2ブログは個人設定に「Google analyticsを入れる人は〜」「アクセス解析入れる人は〜」といった単独の項目が無いのでテンプレートhtmlに手を加えることになります。それがミスを生む原因でもあります。
headタグは補完が働きます
一部のhtmlタグは ブラウザによる補完処理 が働きます。私は日頃「p要素は実は使い方がとても難しいので 終了タグは省略しない方が良い」とすすめています。
補完というのは例えば以下のようなもの。
<p>これは段落です。上記のように記したとします。p終了タグは省略が許可されています。するとブラウザが能動的に
<p>これは段落です。</p>こうして終了タグを追加するんですね。それが「補完」の意味です。では以下のような場合
<p>これは段落です。
<div>これは段落内のdiv要素(のつもり)です</div>
これは後続の文章です。</p>全体がp要素、というつもりで上記のように書いたとします。ところがこれは 構文エラー です。p要素内にdiv要素を入れ子することはできません。
p要素はブラウザ補完が働く、と説明しました。この構文エラーの場合もブラウザは
<p>これは段落です。
</p><div>これは段落内のdiv要素(のつもり)です</div>
これは後続の文章です。<p></p>こうして修正してしまうんですね。何故ならこれが正しい形だからです。p終了タグよりも前にdiv開始タグが来ることは構文上あり得ないので、div開始タグの直前で「p終了タグが省略されている」と判断するためこういうことが起こります。
コーダー(htmlを書く人)がp終了タグを省略する方針かそうでないかはブラウザ側では知る由もありませんので、構文上「正しい」「当然」とされる処理を行います。
headも同じくミスがあれば補完処理が行われます。
「ミスがあれば」という言い方には語弊がありますが、まだhead要素が続いているのにも関わらずブラウザがhead要素を閉じてしまうことがある、という意味です。するとhead内にしか書いてはいけないとされる要素でもhead要素の「外」つまり </head> よりも「後」に記されているとみなされ、全てエラーとなってしまいます。そしてこの状態(headの強制終了)がFC2では非常に多い と。そゆこと (o'ω')ﾉ
最も多いミス「全角スペース」の利用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
内容
</body>
</html>テンプレートのhead内にはもっとたくさんの情報が詰まっていますが、ほぼ必須となるのは上記内容です。
緑部位はGoogle analyticsのコードです。この内容はエラーです。
ブラウザは以下のように補完を行います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
</head> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
内容
</body>
</html>緑が補完処理されたhead終了タグ。以降赤字は全てエラー扱いです。
- Stray end tag head.(head終了タグがはぐれています)
- Start tag body seen but an element of the same type was already open.(bodyタグがありますが先行要素が閉じていません)
- その他多岐にわたるエラー
ソースを見てもわかりづらいですが、このエラーは 全角スペースが原因 です。全角スペースを視覚化したものが以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
</head>■<!-- Global site tag (gtag.js) - Google Analytics -->
■<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
■<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
内容
</body>
</html>head要素内は 全角文字(スペース)を含めてはいけない というルールですから、head内に全角スペースが混じっていることはありえないわけです。そのため補完が行われ、全角スペースの直前でhead終了タグが追加される、つまりhead要素が閉じられてしまいます。
ところが元々書いてある </head> は削除されることはありませんので浮いてしまう、つまり「はぐれてしまう」んですね。それ以降は延々とエラーを量産します。
心当たりのある方も多いのではないでしょうか。何故全角スペースを打ってしまうかというと、ソースの見た目、インデントを踏襲しようと考えるから です。htmlソースコードのインデントはプロジェクト管理ために用いるもので必須ではありませんが、付けることで入れ子の状態を可視化できるなどのメリットがあります。インデントは必ず 半角スペースを用います(タブによるインデントは非推奨です)
ただし繰り返しますが インデントは必須ではありません ので、上級者以外は以下のような記載を推奨します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
内容
</body>
</html>インデントは行わない。これが一番安全です。どうしてもコードの視覚にこだわりたい方は ソースコードを扱う際には必ず半角英数字に切り替える癖をつける と良いですね。ただ日本語圏ではなかなか難しいかもしれません。
何かを追加してはいけない場所
analytics, アクセス解析, 某のコード、「head内に記してください」とされるものは全て以下の位置への掲載をおすすめします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
ここが推奨位置
</head></head> の直前。もう全て何もかもここで良いです。というかここにしてください(笑)
以下は掲載禁止位置を視覚化しています。
ここはダメ！
<!DOCTYPE html>
ここはダメ！
<html lang="ja">
ここはダメ！
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タイトル</title>
<link rel="stylesheet" href="./.css" media="all">
ここが推奨位置
</head>つまり <head> よりも「前」「上」に入れては絶対にダメです。即 クリティカル(致命的)構文エラー です。開始タグと終了タグの違いをしっかり認識してくださいね。とても重要なことです。開始タグは <head>、終了タグは </head> です。
このエラーを生じさせると、以降のmeta要素など全てエラーになりますので レイアウト, OGPなどの取得情報 など視覚的な影響も出ます。ところが影響が出てもみなさん自分が追加した内容ないし追加した位置が原因とはなかなか気づかないんですね。「FC2の不具合？」「テンプレート不具合？」みたいな(笑)
html5テンプレートは末尾のスラッシュ不要
例えばTwitterカードに必要なmeta要素は以下の通りです。
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@xxx" />
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@xxx">
赤字の にしましたが実際にはこれはエラーではありません。
自身が利用しているテンプレートが現在のweb標準である html5であると確定している場合 には末尾のスラッシュ(closing slash)は 不要 です。これが必要なのはxhtmlやxmlであってhtmlではそもそも要りません。
OGP関連のmeta情報の末尾スラッシュ有り・無しはいずれかに統一してくれ、という仕様書を読んだ記憶があります。随分経っているので出典を探せませんし、今はどうこう言われていないかもしれませんが。いずれにしろ不要なものを書く必要はありません。FC2ブログが挿入するOGPも末尾スラッシュは付いていません。
しつこいですがTwitterカードのmeta要素も記載する位置は </head> の直前ですYO (o'ω')ﾉ
まとめ
よく引き起こしがちなエラーについて説明をしました。もうワケガワカラナイヨ… という状態に陥ったときにはともかく テンプレートの再ダウンロード を行ってください。そして追加する内容があれば上記説明・手順に従って慎重に行う、と。
「省略できるタグ」について少し触れ、「省略する = 補完が働く」という説明もしました。省略が許可されているタグを実際に書かない、というのは 上級者向け です。上級者が何故省略を行うかというと、構文が間違っていないという確信 と ファイルサイズをわずかでも減らせるから で、Googleも「極力省略してほしい」という意向です。実際にページスピード検証してみると省略が意外と有効であることもわかります。
GoogleのHTML/CSS Style GuideをFC2ブログユーザー向けに解説
GoogleによるhtmlやCSSでの推奨の「書き方」指南が HTML/CSS Style Guide で、たくさんの方が既に翻訳されていますので私ごときがいまさらやる必要も無いのですが ← 個人的見解を含め FC2ブログユーザー 向け解説を交えていこうと思います。 (明らかに個人ユーザーに関係ないと思われる項目は省きます)...
上級者の自覚が芽生えた方は省略の練習をされるのも良いかもしれません。他にも省略できる属性値、ダブルクォーテーションやイコールの記号を省略できるパターンなどもあります。タグの省略は厳格なルールがありますので勉強になりますしいろいろな発見があるはずです。ただしゆめゆめ初心者さんは手を出さないようにしましょう ^^;
Twitterでブログカードが表示されない、という問題が解決した直後で、問題発生中にhead内を触ってしまった方も少なくないと思います。修正のためのtipsとしてお役に立てれば幸いです。
There are no comments yet.