metaタグの使い方について

2019年5月16日

metaタグとは?

metaタグとはメタ要素とも言って、

Webページの情報を検索エンジンやブラウザなどに伝えるタグのことです。

 

metaタグの場所

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
    <body>
        本文の内容
    </body>
</html> 

 

metaタグは上記の例のようにheadタグ内の中に配置します。

例ではcharsetのみの配置となっていますが、metaタグには様々なタグがありますので、

次の項で詳しく見ていきましょう。

 

<charset>文書の文字コードを指定する

<meta charset=”UTF-8″>

HTML内で使用する文字コードを1つだけ指定します。(2つ以上は指定できません。)

charsetはhtmlファイルの中で必ず配置が必要になり、

適切な文字コードを指定する必要がありますのでぜひ覚えておきましょう。

 

<viewport>スマートフォン向けに文書の表示方法を指定する

<meta name=”viewport”>

viewportを指定することで仮想ウインドウが作成され、スマートフォンの画面幅に合わせて表示することができます。

そのためレスポンシブ対応のページではviewport指定を指定することを推奨します。

 

viewportはcontent属性で詳細な画面幅や高さの設定を行うことも可能ですので見ていきましょう。

 

content属性:initial-scale

webページが最初に読み込まれたときの拡大・縮小率を指定します。

初期状態ではWebページを端末画面に合わせます。

 

content属性:width

表示する幅を指定します。初期値は980pxです。
device-widthを指定することで端末の画面の幅を指定することができます。

 

content属性:height

表示する高さを指定します。
device-heightを指定することで端末の画面の高さを指定することができます。

 

content属性:user-scalable

閲覧者にwebページの拡大・縮小を許可するかをyes/noで指定します。

初期値はyesで拡大・縮小が可能です。

 

content属性:minimum-scale

許可する拡大率の下限を0~10の数値で指定します。

初期値は0.25です。

 

content属性:maximum-scale

許可する拡大率の上限を0~10の数値で指定します。

初期値は1.6です。

 

<description>文書に関する説明を記載する

<meta name=”description” content=”ITをもっと身近に”>

descriptionには文書に関する説明を記載します。

検索エンジンの中にはこのdescriptionを解釈してくれるものがありますので、

SEOのメリットを享受したいのであれば必ず指定するようにしましょう。

 

<keywords>文書のキーワードを指定する

<meta name=”keywords” content=”HTML,meta”>

この文書のキーワードをカンマ(,)区切りで指定します。

検索エンジンの中にはこのキーワードを解釈してくれるものがありますので、

SEO上のメリットを享受したい場合には必ず指定するようにしましょう。