やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > HTMLメタデータを書く１

HTMLメタデータを書く１

HTML

　ざっくり大雑把に。

おさらい

　メタデータはHTML文書自体を説明するデータである。それは<head>タグ内に書く。

index.html

<!DOCTYPE html>
<html>
    <head>ここにメタデータを書く</head>
    <body>ここに表示コンテンツを書く</body>
</html>

メタデータ用タグ

要素 概要
<title> タイトルバーに表示される文字列を指定する
<base> 文書内で共通するURL部分を指定する
<meta> サイトの説明や著者名などを指定する。Open Graphもね
<link> 外部CSSファイルを参照する
<style> 内部にCSSを書く
<script> JSファイルを外部参照したり内部に書いたりする
<noscript> スクリプトが実行できないとき、代わりに表示する内容

　以下2種類に大別できる。

  • 基礎系
    • <title>
    • <base>
    • <meta>
  • 外部ファイル系
    • <link>
    • <style>
    • <script>,<noscript>

基礎系

　基礎系は、HTML文書ファイル内に、その文書自体のことを説明するメタデータ用タグである。

<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
    <meta charset="UTF-8">
    <title>キャッチコピー - サイト名</title>
    <base href="https://example.com/">
    <meta property="og:image" content="https://example.com/eye-catch.jpg">
    <meta name="description" content="サイト説明。Google検索結果では80字以降が…になり省略される。">
</head>

　たったこれだけのコードに、以下のような注意点が含まれる。

  • <meta charset="UTF-8">
    • 基本的にはUTF-8を使うこと
    • どのメタデータよりも最初に書くこと（HTMLファイルの先頭から1024バイト以内）
    • <title>や<meta>などよりも先に書くこと
  • <base>
    • OpenGraphのメタタグは<base>を認識しないため絶対URLで書くこと
  • <head>
    • OpenGraphを書くときは所定のprefix属性値を書くこと

　罠だらけ。こんなことを毎回意識して書けるわけがない。順序をまちがえたり、<base>で指定したから相対URL指定できると勘違いしてしまったり。そのようなミスがしばしば起こるであろうことは想像に難くない。

　OpenGraphは一言で言うとツイッターカードである。詳しい話は次回以降にやる。じつは<meta>タグだけで超大変だから。

<title>

<title>キャッチコピー - サイト名</title>

　タイトルバーに表示される文字列。大抵はキャッチコピー - サイト名というフォーマットで書かれいている。HTML文書を要約したテキスト。

　できるだけ短くすべき。現代のブラウジングは１画面あたりタブになって小さな領域しか表示されない。ファビコンしか表示されなかったりする。マウスオーバーしたらタイトルが表示されたりもする。いずれにせよ、表示される文字数はかなり短くなってしまう。私の環境（chromium 92）では24字まで表示され、以降は…となり省略されていた。

<base>

<base href="https://example.com/">

　相対パス指定したときのベースURL。OpenGraphでは使えないというが、ではどこで使うのか。それ以外のすべてである。たとえばリンクとか。

<head>
    <base href="https://example.com/">
</head>
<body>
    <a href="img/some.png">
    <a href="content/some.html">
</body>
入力 結果
img/some.png https://example.com/img/some.png
content/some.html https://example.com/content/some.html

　こんな感じで<base>を指定すれば、共通部分であるhttps://example.com/を省略して書ける。ドメイン名だけではなくパスが含まれてもいい。たとえばhttps://example.com/content/article/2022-01-01/など。

　残念ながらOpenGraphは<base>を認識しないため絶対URLで書かねばならない。

<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
    <base href="https://example.com/">
    <meta property="og:image" content="https://example.com/eye-catch.jpg"><!-- ここは絶対パスで書く！ -->
</head>

　使い分けるのが面倒くさい。

外部ファイル系

　外部ファイル系は、基礎系よりあとに書くこと。

  • <link>
  • <style>
  • <script>,<noscript>

　CSSやJavaScriptを書くときに使う。

外部ファイルに書く

<head>
    <link rel="stylesheet" src="style.css">
    <script src="main.js"></script>
    <noscript>このブラウザはJavaScriptに対応していません。</noscript>
</head>

　じつは以下のように色々と細かい考慮点がある。

  • CSSはメディアクエリによって適用するファイルを分岐できる
  • JavaScriptはtype="module"とすることでES6のESModuleが使える（import,export構文）
  • ファイル分割するとレスポンスが遅くなる
    • 原因は処理やHTTPS通信量が増えるため
    • これを避けるためにwebpackなどのツールでひとつのファイルにまとめる

　大変すぎるので後回し。

内部に書く

<head>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    </style>
    <script>
        alert('Hello JS !!')
    </script>
    <noscript>このブラウザはJavaScriptに対応していません。</noscript>
</head>

　CSSやJavaScriptをHTML要素内に直接書く。

　CSSやJavaScriptについてはHTMLが終わってから学習する予定。

所感

　大体はこんな感じ。まだまだ説明不足。これから以下の項目について詳しい記事を書くつもり。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux