SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのmetaタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:46動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の五十本目は、メタタグです。
  4. 0:09メタは、ページそのものについての情報、つまりメタデータをブラウザーや検索エンジンに伝えるためのタグです。
  5. 0:17画面には何も表示されない裏方ですが、文字コードやスマートフォン表示、検索結果の説明文など、
  6. 0:22大切な設定が集まっています。
  7. 0:27今回は基本の書き方から、文字コード、ビューポート、説明文の三つの代表設定、
  8. 0:32そして注意点まで順に学んでいきましょう。
  9. 0:36小さなタグですが、すべてのページに必ず登場する、主役級の裏方です。
  10. 0:42まず役割と置き場所を整理します。
  11. 0:44メタタグは、ヘッド要素の中にだけ書きます。
  12. 0:48本文や見出しのように読者へ直接見せる内容ではなく、ブラウザーや検索エンジンといった機械に向けた設定です。
  13. 0:56たとえば、このページは何の文字コードで書かれているか、スマートフォンではどう表示するか、
  14. 1:01どんな内容のページか、といった情報です。
  15. 1:06設定が間違っていても画面が真っ白になることは少ないのですが、文字化けや表示崩れの原因になります。
  16. 1:13地味でも土台になるタグだと覚えてください。
  17. 1:16ページを作り始めたら、本文の前にこの設定から整える習慣が役立ちます。
  18. 1:21設定が正しく書けているかどうかは、公開前のチェック項目にも入れておきたいところです。
  19. 1:28基本の形を確認します。
  20. 1:30メタは空要素と呼ばれる種類で、終了タグは書きません。
  21. 1:34閉じタグのような書き方や、タグの内側に文章を入れることもありません。
  22. 1:39設定はすべて属性で表し、一つのメタタグで一つの設定を伝えます。
  23. 1:44違う種類の設定をしたいときは、メタタグを必要な数だけ並べます。
  24. 1:49画面の例のように、ヘッドの中にメタやタイトルを並べるのが基本形です。
  25. 1:54書く場所はヘッドの中、形は属性だけ、と覚えれば迷いません。
  26. 1:59まずはこの形を手で書けるようになりましょう。
  27. 2:02並べる順番は基本的に自由ですが、文字コードだけは先頭に置くのが原則です。
  28. 2:08代表設定の一つ目が、文字コードの宣言です。
  29. 2:11キャラクターセット属性にユーティーエフエイトを指定します。
  30. 2:15これは、この文書がユーティーエフエイトという文字コードで書かれていることをブラウザーに伝える宣言です。
  31. 2:22これがない、あるいは実際の保存形式と食い違うと、日本語が記号の羅列になる、
  32. 2:26いわゆる文字化けが起きます。
  33. 2:30大切なのは置く位置で、ヘッドのなるべく早い位置、先頭に近い場所に書くのが決まりです。
  34. 2:35ブラウザーが文書の先頭付近で宣言を見つけられるよう、タイトルなどより前に置きましょう。
  35. 2:42新しいページを作るときは、まずこの一行から書き始めるのがおすすめです。
  36. 2:46二つ目はビューポートの設定です。
  37. 2:49ネーム属性にビューポート、コンテンツ属性に画面幅への合わせ方を書きます。
  38. 2:54幅をデバイスの幅に合わせる指定と、初期倍率を一にする指定が基本の組み合わせです。
  39. 3:00これがあると、スマートフォンがページをパソコン幅で縮小表示するのではなく、
  40. 3:04端末の画面幅に合わせて表示してくれます。
  41. 3:08レスポンシブデザインの前提になる設定です。
  42. 3:11注意点として、利用者がピンチ操作で拡大することを禁止する指定は書かないでください。
  43. 3:17文字を大きくして読みたい人の妨げになってしまいます。
  44. 3:21パソコンでの表示だけ確認して終わりにしないことが大切です。
  45. 3:25三つ目はページの説明文です。
  46. 3:27ネーム属性にディスクリプションと書き、コンテンツ属性にそのページの概要を文章で入れます。
  47. 3:33メタタグの多くは、このネームとコンテンツのペアで種類と中身を伝える形になっています。
  48. 3:40説明文は検索結果のタイトルの下に表示される候補になりますが、必ずそのまま使われるとは限りません。
  49. 3:47検索エンジンが、探している言葉に合わせて本文から別の部分を抜き出すこともあります。
  50. 3:53それでも、ページごとに内容に合った概要を書いておくことは、読み手にも検索エンジンにも親切な基本設定です。
  51. 4:01長すぎず短すぎない分量で、要点を絞って書くと読みやすくなります。
  52. 4:06もう一つの属性が、エイチティーティーピーエクイーブです。
  53. 4:10これは、本来サーバーが送る応答ヘッダーに近い設定を、エイチティーエムエルの側から一部だけ行うためのものです。
  54. 4:19代表例はリフレッシュで、指定した秒数がたつと別のページへ自動で移動させることができます。
  55. 4:26画面の例は、五秒後に新しいページへ移る指定です。
  56. 4:30ただし注意点があります。
  57. 4:32この属性でできるのは一部の設定だけで、すべてのヘッダーの代わりにはなりません。
  58. 4:38本来サーバー側で設定すべきものはサーバーで設定するのが基本で、メタは補助的な手段と考えましょう。
  59. 4:46使う場面は限られるので、まずは基本の三つの設定を優先しましょう。
  60. 4:51記事の活用事例を読み解いて、実践形を組み立てます。
  61. 4:55ヘッドの先頭に文字コードの宣言、続いてビューポート、最後にページの説明文という並びです。
  62. 5:02順番のポイントは、文字コードを一番前に置くことです。
  63. 5:06こうすると、ブラウザーが読み込みの早い段階で文字の解釈を決められます。
  64. 5:12この三行がそろえば、文字化けの心配が減り、スマートフォンでも画面幅に合った表示になり、
  65. 5:17検索結果にも概要が伝わりやすくなります。
  66. 5:22新しいページを作るときの定番の書き出しとして、この形をそのまま覚えてしまいましょう。
  67. 5:29順番と役割をセットで覚えるのがコツです。
  68. 5:32よくある失敗も確認しておきます。
  69. 5:34一つ目は、同じ種類のメタを重複して書くことです。
  70. 5:38どれが有効になるか分かりにくくなるので、設定は一つに統一しましょう。
  71. 5:43二つ目は、すべてのページで同じ説明文を使い回すことです。
  72. 5:47説明文はページごとに内容へ合わせて変えるのが基本です。
  73. 5:51三つ目は、メタで見た目や本文の意味まで変えようとすることです。
  74. 5:55メタはあくまで文書の設定であり、見出しや文章の意味は本文のタグで表します。
  75. 6:00画面の例のような拡大を禁止する指定も避けたい書き方です。
  76. 6:04一つずつ直すだけでも、読みやすさは大きく変わります。
  77. 6:08公開前にヘッドの中を見直す習慣をつけましょう。
  78. 6:11ブラウザー互換性を確認します。
  79. 6:14記事が参照するエムディーエヌの記録では、メタタグ本体はクロームが一以降、
  80. 6:21エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで古くから広く対応しています。
  81. 6:29文字コードの属性はサファリが三以降、その他の属性も同様に古いバージョンから使えます。
  82. 6:36作ったあとの確認では、三百二十ピクセル程度の細い画面幅や、文字を拡大した状態でも内容が欠けないかを見てください。
  83. 6:45文字化けがないか、スマートフォンで意図した幅で表示されるかも、あわせて確かめると安心です。
  84. 6:52スマートフォンの実機でも表示を確かめられると、さらに安心です。
  85. 6:57最後にまとめです。
  86. 6:59メタタグは、ヘッドの中で、ページ自体についての情報をブラウザーや検索エンジンへ伝えるタグでした。
  87. 7:07ポイントは三つです。
  88. 7:08一つ目、終了タグのない空要素で、一つのタグに一つの設定を書くこと。
  89. 7:14二つ目、基本の三点セットは、文字コード、ビューポート、ページの説明文であり、
  90. 7:19文字コードはヘッドの早い位置に置くこと。
  91. 7:23三つ目、ビューポートで利用者の拡大を禁止しないこと、そして説明文は検索結果に必ずそのまま出るとは限らないことです。
  92. 7:33練習として、自分のページのヘッドに三点セットを書き入れてみてください。
  93. 7:38お疲れさまでした。
  94. 7:40画面に出ない部分こそ丁寧に書くことが、サイト全体の品質につながります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

metaタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文字コード、概要、viewportなどを属性で指定します。終了タグはありません。

解説記事・サンプルコードを読む：HTMLのmetaタグとは？属性・使い方・ブラウザー互換性と活用例 →