4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

metaタグってなに

Last updated at Posted at 2020-04-22

概要

htmlのmetaタグってなんじゃい。

目次

そもそもmetaってなに?

概説(Wikipedia)

メタ(meta-)とは、「高次な-」「超-」「-間の」「-を含んだ」「ーを入れた」「-の後ろの」等の意味の接頭語。ギリシア語から。
例えば物質界の現象を超越した世界を取り扱う学問を「形而上学」というが、これは英語でmetaphysicsであり、physics(物理学)の後の学問として存在する(詳しくは「形而上学」の項を参照のこと)。

なに言ってるかよくわからないね。

狭義のメタ(Wikipedia)

ある対象を記述したものがあり、さらにそれを対象として記述するものを、メタな○○、あるいは単にメタ○○と呼ぶ。

ほう

広義のメタ(Wikipedia)

広義に、何かを取り込んだ何か、何かについての何か、といったものがメタと呼ばれる場合がある。たとえば、Wikipediaの記事一覧の一覧などはメタ的な記事の一つだろう。情報理論では、情報に付加されるそれ自身に関する情報がメタデータ(メタ情報)と呼ばれる。

へぇ

htmlのmetaタグっていう文脈でのmetaとはつまり

何かについての何か

言い換えると

情報についての情報

つまり

サイト内情報についての情報

意訳すると(少し違うけど)

サイトの付属情報

結論htmlのmetaタグはなんなの?

htmlファイルのheadタグ内に記述する、サイトの付属情報的な感じでしょうか。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- headタグの中にはWebサイトに関する情報(サイトの付属情報)を記述します -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="desctiption" content="ブラウザで検索したときに検索結果に表示される説明文です">
  <title>This is title.</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- bodyタグの中に記述したものがブラウザに表示されます -->
  Hello, World!
</body>
</html>

よく使うmetaタグ

charset

文字エンコーディングの設定。今はもうとりあえずUTF-8って書けばいいと思います。

<meta charset="UTF-8">

name="description"

googleの検索結果に表示されたりするページの説明です。

<meta name="description" content="ページの概説をここに書きます。">

この画像の赤く囲まれた部分
スクリーンショット 2020-04-22 16.40.12.png

name="viewport"

ビューポートの初期サイズに関する設定です。(モバイル端末のみで使用されます。)
レスポンシブ化するときとかに使うよ。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http-equiv

プラグマディレクティブを定義します。属性名が http-equiv(alent) なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

metaタグの詳しい使い方

<meta>: 文書レベルメタデータ要素 - HTML: HyperText Markup Language | MDNを参照

ちなみに

ちなみにエディタ(下のはvscode)でhtmlの雛形一気に生成できるよ。
ezgif.com-crop.gif

参考サイト

最後に

ここ違うよっていうところがあればいつでもコメントお待ちしております🙇‍♂️🙇‍♂️

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?