• HOME
  • HTML/CSS
  • 【HTML】メタタグとは？(メタタグのよくある使い方も紹介)
  • HTML/CSS
  • html
  • meta
  • metaタグ
  • SEO
  • メタタグ

【HTML】メタタグとは？(メタタグのよくある使い方も紹介)

【HTML】メタタグとは？(メタタグのよくある使い方も紹介)

「最近HTMLを書き始めたけど、メタタグがよくわからない…。」そんなお悩みありませんか？

HTMLのコードを書く際に、基本的にメタタグは使われます。

よってメタタグに関してしっかりおさえておく必要があります。

この記事では、メタタグのよくある使い方の例を示し、メタタグがどういったものなのかを紐解いていきます。

それでは、みていきましょう。

メタタグとは？

簡単にいうと、メタタグとは、Webページの設定などをするためタグです。

また、メタタグのコードの内容はWebページ上では見えないようになっています。

コードは以下のように書きます。

<meta 属性名="値">

先頭に「meta」と書き、そのあとに「属性」を書いていく形式になります。

ちなみにメタ(meta)タグは、HTMLファイルの「head要素」の中に書きます。

下のコードを見てください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

メタタグ(<meta>のように書かれたタグ)が、<head>と</head>の間に書かれているのがわかります。

metaタグは、<head>(headタグ)と</head>に囲まれた「head要素」に書きます。

head要素に書かれたコードは、ブラウザで見たときに見えないようになっています。

逆に、Webページで目に見えている部分は<body>と</body>(bodyタグ)に囲まれたbody要素の部分になります。

以上、メタタグの簡単な説明でした。

次に、具体的な使い方を見ていきましょう。

メタタグのよくある例

HTMLの雛形から見るメタタグ

ここからは、メタタグを具体的にみていきます。

そのために、HTMLの雛形(よく使うコードの型)を見ます。

下のコードを見てください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

先ほども出てきたものになります。

実は、このコードがHTMLの雛形になります。

ちなみにこのコードは、「Visual Studio Code」というテキストエディタのHTMLファイル内で「!」と入力してエンターキーを押すと、表示されます(下図を参照)。

それでは、先ほど示した雛形の中の<meta>(メタタグ)の部分を順番に見ていきましょう。

まずは、下のコードです。

<meta charset="UTF-8">

タグの中に「charset=”UTF-8″」と書かれています。

このコードを書くことにより、HTMLファイルがどの文字コードで書かれているかを指定することができます。

先ほどのコードだと、UTF-8という文字コードに設定しています。

次に、下のコードです。

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

このコードは、IE(インターネットエクスプローラー)を使っている場合に、最新バージョンのブラウザでページを表示させるためのコードです。

ただし、このコードは先ほど紹介した「Visual Studio Code」というMicrosoftが開発したテキストエディタの雛形に組み込まれているものであり(IEやEdgeはMicrosoftが開発したブラウザです)、このコードをわざわざ書くことは少ないようです。

次に、下のコードです。

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

このコードは重要なコードになります。

まず、「name=”viewport”」と「content=”width=device-width」と書かれています。

「viewport(ビューポート)」を「width=device-width」設定することで、ユーザーが使用しているデバイス(スマホやパソコンなどの機器)の横幅に合わせてWebページが表示されます。

viewportを上記のように設定することで、Webページをレスポンシブ対応(マルチデバイス対応)にすることもできます。

Webページをレスポンシブ対応にする方法は以下の記事を参考にしてみてください。

CSSで簡単にHTMLをレスポンシブ対応にする方法を解説

また、後半の「initial-scale=”1.0″」の部分は、Webページが表示されるとき、画面の倍率が1倍(つまりズームなし)になっている状態にするという意味です。

以上、HTMLのコードの雛形に書いてあるメタタグの説明でした。

SEOに関するメタタグの書き方(補足)

SEOに関するメタタグの書き方として、name=”description”とする場合を見ていきます。

※SEOとは、Search Engine Optimization(検索エンジン最適化)の略です。検索エンジン(主にGoogle)で、Webページを検索結果の上位に表示するようにすることです。

<meta name="description" content="ここに説明文が入ります。">

上のコードは、Webページの説明を示すために書きます。contentの中に書いた内容は、ネットの検索結果のタイトルの下に表示されます。

ちなみに、検索結果に表示されるWebページの説明の文字数は、パソコンだと100~130字程度、スマホだと50~80字程度のようなので、それを考慮して文字数を調節しましょう。

Webページをしっかり説明するとSEOに役に立つ可能性があります。

metaタグのname属性をdescriptionとする書き方をおさえておきましょう。

まとめ

いかがでしたでしょうか。

HTMLのメタタグに関して理解が深まったことでしょう。

メタタグはHTMLのコードを書く際、必ず書くものなのでしっかりおさえておきましょう。

実際に、コードを書いて確かめてみてください。

今回の知識が役に立てば幸いです。