ドキュメント構造のセクションでは、HTML ドキュメントの <head> に（ほぼ）必ず記述するコンポーネントについて学習しました。<title>、<link>、<script>、<style>、あまり使用されていない <base> など、<head> 内のすべてが実際には「メタデータ」ですが、これらの他の要素では表現できないメタデータ用の <meta> タグがあります。
この仕様にはいくつかのメタタイプが含まれています。公式仕様にはない、アプリケーションでサポートされているメタタイプが他にも多数あります。このセクションでは、仕様に含まれる属性と値、一般的なメタ名とコンテンツの値、検索エンジンの最適化、ソーシャル メディアへの投稿、ユーザー エクスペリエンスに非常に役立ついくつかのメタタイプについて説明します。これらのメタタイプは、WHATWG や W3C では正式には定義されていません。
必須の <meta> タグ（復習）
すでに説明した 2 つの必須の <meta> タグ、文字セット宣言と viewport メタタグを見直し、このプロセスにおける <meta> タグについての理解を深めましょう。
<meta> 要素の charset 属性は、独自の方法で発生します。もともと文字セットのメタデータは <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> と記述されていましたが、多くのデベロッパーにより content 属性を content="text/html" charset="<characterset>" と誤って入力していたため、ブラウザでは属性として文字セットがサポートされるようになりました。現在、HTML では <meta charset="<charset>" /> として標準化されています。HTML の場合、<charset> は大文字と小文字を区別しない文字列「utf-8」です。
元の文字セットのメタ宣言に http-equiv 属性が含まれていたことにお気づきでしょうか。メタタグは基本的に HTTP ヘッダーで設定可能なものを複製するので、これは「http と同等」の略です。charset 例外を除き、WHATWG HTML 仕様で定義されているその他すべてのメタタグには、http-equiv 属性または name 属性のいずれかが含まれます。
正式に定義されたメタタグ
メタタグには主に 2 つのタイプがあります。1 つは、以前の charset メタタグのような http-equiv 属性を持つ pragma ディレクティブ、ドキュメント構造セクションで説明した name 属性を含むビューポート メタタグのような名前付きメタタイプです。name メタタイプと http-equiv メタタイプの両方に content 属性を含める必要があります。この属性は、リストにあるメタデータのタイプのコンテンツを定義します。
プラグマ ディレクティブ
http-equiv 属性の値は、プラグマ ディレクティブです。これらのディレクティブでは、ページの解析方法を記述します。HTTP ヘッダーを直接設定できない場合にディレクティブを設定できるようにするには、サポートされている http-equiv 値を使用します。
この仕様では 7 つのプラグマ ディレクティブが定義されていますが、ほとんどは他の方法で設定されます。たとえば、<meta http-equiv="content-language" content="en-us" /> で言語ディレクティブを含めることはできますが、代わりに HTML 要素の lang 属性の使用についてすでに説明しました。
最も一般的なプラグマ ディレクティブは、refresh ディレクティブです。
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
content 属性で設定した秒数で更新するようにディレクティブを設定したり、別の URL にリダイレクトしたりすることもできますが、この方法はおすすめしません。ユーザーの明示的なリクエストなしにコンテンツを更新したりリダイレクトしたりすると、ユーザビリティが低下し、アクセシビリティに悪影響を及ぼします。段落の途中でページがリセットされるのも気にしませんか？認知や視覚に問題が生じたとしたらどうでしょうか。リダイレクトを使って更新を設定する場合は、ユーザーがページを読むのに十分な時間があること、処理を早めるリンク、該当する場合は「タイマーを停止」してリダイレクトが行われないようにするボタンがあることを確認してください。
ユーザー セッションをタイムアウトにするのは訪問者を不快にさせる以外にないため、この点はサイトには記載しません。
最も便利なプラグマ ディレクティブは content-security-policy です。これにより、現在のドキュメントのコンテンツ ポリシーを定義できます。コンテンツ ポリシーは主に、許可するサーバーオリジンとスクリプト エンドポイントを指定することで、クロスサイト スクリプティング攻撃からの保護に役立ちます。
<meta http-equiv="content-security-policy" content="default-src https:" />
HTTP ヘッダーを変更するアクセス権がない場合（またはアクセス権がある場合）は、content-security-policy ディレクティブのコンテンツ値（スペース区切り）をご覧ください。
名前付きメタタグ
ほとんどの場合、名前付きメタデータが含まれます。name 属性を含めます。この属性値にはメタデータの名前を指定します。プラグマ ディレクティブと同様に、content 属性は必須です。
name 属性は、メタデータの名前です。viewport に加えて、description と theme-color も含めることができますが、keywords は含めないことをおすすめします。
キーワード
検索エンジン最適化のヘビ油の営業担当者は、キーワード メタタグを悪用して、関連するキーワードのリストではなくスパムワードのカンマ区切りのリストを詰め込みました。そのため、検索エンジンはこのメタデータを役に立たないと見なしました。データの追加に時間、労力、バイト数を費やす必要はありません。
説明
ただし、description 値は SEO に役立ちます。多くの場合、説明のコンテンツの値は、検索エンジンが検索結果でページのタイトルの下に表示されます。Firefox や Opera などの一部のブラウザでは、ブックマークしたページのデフォルトの説明としてこの説明が使用されます。説明は、ページのコンテンツを簡潔かつ正確に要約したものである必要があります。
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
説明の後半が意味をなさないのであれば、映画「ズーランダー」をご存じない方もいらっしゃるでしょう。
ロボット
サイトが検索エンジンのインデックスに登録されないようにするには、そのことを Google にお知らせください。<meta name="robots" content="noindex, nofollow" /> は、サイトをインデックスに登録せず、リンクをたどらないよう bot に指示します。bot はリクエストを受け入れる必要がありますが、リクエストに従うことを義務付ける法律はありません。HTTP ヘッダーで特に指定がない限り、サイトのインデックス登録とリンクのインデックス登録をリクエストするために <meta name="robots" content="index, follow" /> を含める必要はありません。これはデフォルトです。
<meta name="robots" content="index, follow" />
テーマカラー
theme-color の値で色を定義して、ブラウザのインターフェースをカスタマイズできます。content 属性の色の値は、サポート対象のブラウザとオペレーティング システムで使用されます。これにより、タイトルバー、タブバーなどの Chrome コンポーネントの色付けをサポートするユーザー エージェント向けの推奨色を指定できます。このメタタグは、プログレッシブ ウェブアプリで特に便利です。ただし、PWA に必要なマニフェスト ファイルを追加している場合は、マニフェスト ファイルにテーマカラーを含めることができます。ただし、HTML で定義すると、レンダリング前に色をすぐに特定できるため、マニフェストを待つよりも初回読み込みのほうが高速になる可能性があります。
テーマカラーをサイトの背景色のブルートーンに設定するには、以下を含めます。
<meta name="theme-color" content="#226DAA" />
テーマカラーのメタタグに media 属性を含めると、メディアクエリに基づいてさまざまなテーマカラーを設定できます。media 属性は、このメタタグにのみ含めることができます。他のすべてのメタタグでは無視されます。
name メタ値は他にもいくつかありますが、これまでに説明した最も一般的なものがあげられます。メディアクエリごとに異なる theme-color 値を宣言する場合を除き、各メタタグを 1 つだけ含めます。従来のブラウザをサポートするために複数のタイプのメタタグを含める必要がある場合は、以前の値が新しい値の後に来るようにする必要があります。これは、ユーザー エージェントは、一致するものが見つかるまで連続したルールを読み取るためです。
グラフを開く
Open Graph や同様のメタタグ プロトコルを使用して、Twitter、LinkedIn、Facebook などのソーシャル メディア サイトでコンテンツへのリンクをどのように表示するかを制御できます。この属性を使用しない場合、ソーシャル メディア サイトはページのタイトルと description メタタグから説明を正しく取得します。検索エンジンと同じ情報が使用されますが、サイトへのリンクが投稿されたときにユーザーに表示される内容を意図的に設定できます。
Facebook や Twitter に MachineLearningWorkshop.com または web.dev へのリンクを投稿すると、画像、サイトのタイトル、サイトの説明が記載されたカードが表示されます。カード全体が、指定した URL へのハイパーリンクになっています。
Open Graph メタタグには、それぞれ name 属性ではなく property 属性と、そのプロパティのコンテンツまたは値という 2 つの属性があります。property 属性は正式な仕様では定義されていませんが、Open Graph プロトコルをサポートするアプリで広くサポートされています。property などの「新しい」属性を作成すると、プロトコルの属性用に作成された属性値が、将来の name 属性または http-equiv 属性の値と競合しなくなります。
Facebook メディアカードを作成するには:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
表示する投稿のタイトルを含めます。このタイトルは通常、画像の下、説明の上に表示されます。説明は、投稿を要約した 3 文以内で記述してください。これは、og:title で定義された広告見出しの後に表示されます。https:// プロトコルなど、表示するバナー画像の絶対 URL を指定します。HTML に画像を含める場合は、その画像が他の場所に表示される場合でも、必ず代替テキストによる説明を追加してください。Open Graph のソーシャル メディア カードの場合は、og:image:alt プロパティのコンテンツ値として alt を定義します。og:url を使用して正規 URL を指定することもできます。
これらのメタタグはすべて Open Graph プロトコルで定義されています。値には、サードパーティのウェブ アプリケーションで表示するコンテンツを指定する必要があります。
他のソーシャル メディアには、Twitter カードのマークアップなど、独自の構文があります。これにより、リンクが表示される場所に応じて異なるエクスペリエンスを提供したり、URL の末尾にパラメータを追加してリンク トラッキングを有効にしたりできます。
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Twitter のカードデータの場合、name 属性の値が将来の仕様と競合しないように、Open Graph の property 属性などの新しい属性を使用するのではなく、すべての名前の値の先頭に twitter: を付けます。
ソーシャル メディア カードが Twitter や Facebook でどのように表示されるかを確認できます。
ソーシャル メディア サイトやリンク パラメータごとに異なるカード画像、タイトル、説明を使用できます。たとえば、https://perfmattersconf.com では、URL のパラメータに応じて og:image、og:title、og:description に異なる値が設定されます。
Twitter の Card Validator に「https://perfmattersconf.com?name=erica」と「https://perfmattersconf.com?name=melanie」と入力すると、この 2 種類のカードが表示されます。どちらも同じ会議ホームページにリンクしていますが、表示されるコンテンツは異なります。
その他の有用なメタ情報
ユーザーがサイトをブックマークに登録してホーム画面に追加した場合や、プログレッシブ ウェブ アプリケーションなどのサイトでオフライン時やブラウザの Chrome 機能が表示されなくても動作するサイトの場合、モバイル デバイスのホーム画面にアプリケーション アイコンを指定できます。
<link> タグを使用して、使用する起動イメージにリンクできます。メディアクエリを使用した画像の追加例を次に示します。
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
サイトまたはアプリケーションがウェブ アプリ対応の場合、つまり [戻る] ボタンがないなど、最小限の UI でサイトをそのまま使用できる場合は、メタタグを使用してブラウザに次のように指示できます。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
実際にアプリに対応できる場合にのみ使用してください。そうしないと、サイトをホーム画面に追加した熱心なサポーターがセットアップされ、ユーザー エクスペリエンスに悪影響が及ぶことになります。愛を失うことになるよ！
ユーザーがアイコンを小型デバイスのホーム画面に保存する場合は、オペレーティング システムに短い名前を付けて、小型のデバイスのホーム画面の占有スペースを大きくしないようにします。そのためには、メタタグを含めるか、ウェブ マニフェスト ファイルを使用します。メタタグによる方法を以下に示します。
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
いくつかのメタタグについて説明しましたが、いずれもヘッダーを長くします。ウェブアプリ対応でオフライン対応のプログレッシブ ウェブ アプリケーションを実際に作成する場合は、これら 2 つのメタタグを追加する代わりに、ウェブマニフェスト ファイルに short_name: MLW をシンプルかつ簡潔に含めることができます。
マニフェスト ファイルを使用すると、<link> タグと <meta> タグでいっぱいの扱いにくいヘッダーを防ぐことができます。通常は manifest.webmanifest または manifest.json と呼ばれるマニフェスト ファイルを作成できます。次に、rel 属性を manifest に設定し、href 属性をマニフェスト ファイルの URL に設定した、便利な <link> タグを使用します。
<link rel="manifest" href="/mlw.webmanifest" />
このシリーズでは HTML に重点を置いていますが、プログレッシブ ウェブ アプリケーションに関する web.dev コースや MDN のウェブアプリ マニフェストに関するドキュメントもご覧ください。
HTML は次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
長い時間がかかりますが、これで終了です。
<head> がほぼ完成したら、セマンティック HTML に進みましょう。
理解度をチェックする
メタデータに関する知識をテストする
refresh プラグマ ディレクティブ。
Graph メタタグを開きます。