meta要素
meta要素は、文書に関する情報を定義するために使用されます。
<head>
<meta 属性=”属性値”/>
</head>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>meta要素に関して</title>
</head>
<body>
</body>
</html>属性値
charset属性
文書の文字エンコーディングを指定します。
※一般的にはUTF-8が使用される
<head>
<meta charset=”UTF-8″/>
</head>
viewport属性
ページの表示領域や拡大縮小設定を指定します。
※主にモバイルデバイスで利用されます。
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
| content属性値 | 説明 |
|---|---|
| initial-scale | webページが読み込まれた時の、最大・最小率を0.0〜10.0の数値で指定する |
| width | webページをレンダリングをするレビューポートの幅をピクセル数、または[device-width](100vwとして扱われる)を指定する |
| height | webページをレンダリングをするレビューポートの幅をピクセル数、または[device-height](100vhとして扱われる)を指定する |
| user-scalable | ユーザーにwebページの拡大・縮小を許可するかをyes/noで指定する(デフォルトyes) |
| minimum-scale | 許可する最大率の下限を0.0〜10.0の数値で指定する |
| maximum-scale | 許可する最大率の上限を0.0〜10.0の数値で指定する |
description属性
ページの簡潔な説明を提供します。
※検索エンジンなどで表示されることがある
<head>
<meta name=”description” content=”ページの説明文”>
</head>
keywords属性
ページのキーワードを指定します。
※検索エンジンによる検索結果に影響を与える
<head>
<meta name=”keywords” content=”キーワード1, キーワード2, キーワード3″>
</head>
og属性
ソーシャルメディアでシェアされる際の情報を指定します。
<head>
<meta property=”og:title” content=”ページのタイトル”>
<meta property=”og:description” content=”ページの説明文”>
<meta property=”og:image” content=”画像のURL”>
</head>
author属性
ページの著者を指定します。
<head>
<meta name=”author” content=”著者名”>
</head>
generator属性
生成ツールやソフトウェアの情報を提供するためのものです。
※人の手によって作成されたもには必要なし
<head>
<meta name=”generator” content=”ツールやソフトウェアの名前”>
</head>
application-name属性
アプリケーションの名前を指定するためのメタデータ属性です
<head>
<meta name=”application-name” content=”アプリケーション名”>
</head>
robots属性
ウェブページが検索エンジンに対してどのような振る舞いを期待するかを指定するためのメタデータ属性です。
<head>
<meta name=”robots” content=”index, follow”>
</head>