メタ情報したい(meta)
<head>
<meta charset="utf-8">
<meta name="description" content="サイトの説明">
<meta name="viewport" content="width=device-width">
<!-- name属性は自由なキーを設定できる -->
<meta name="キー" content="値">
</head>
メタ情報はheadタグの中に記述します。
metaタグを使ってkey-valueペアで設定します。
文字エンコーディングしたい(charset)
<meta charset="utf-8">
charsetキーで、文書の文字エンコーディングを設定できます。
HTML標準で使えるのはutf-8のみです。
この宣言は省略不可で、headの最初の方(titleより前)に書いておく必要があります。
サイト説明したい(description)
<meta name="description" content="サイトの説明">
descriptionキーで、ページの内容を要約する説明文を設定できます。
contentに設定できる値は任意の文字列です。
省略すると、検索エンジンが本文から抜粋してスニペットを作ります。
検索結果のスニペットとして表示されることがあるため、ページごとに簡潔で具体的な説明を書いておくとよいです。
クロール制御したい(robots)
<meta name="robots" content="index,follow">
robotsキーで、検索エンジンのクローラーへの指示を設定できます。
contentに設定できる値は
index/noindex(インデックスするか)と
follow/nofollow(リンクを辿るか)の
組み合わせです。
デフォルトはindex,followです。
下書きページや検索結果に出したくないページにはnoindexを明示しておくとよいです。
ビューポートしたい(viewport)
<meta name="viewport" content="width=device-width">
viewportキーで、
ビューポート
のサイズを設定できます。
contentに設定できる値は
width(表示幅)や
initial-scale(初期表示倍率)などのカンマ区切りです。
省略するとブラウザ標準のレイアウト幅で表示されます。
画面の幅はデバイスによって異なるため、width=device-widthを設定しておきましょう。
よくinitial-scale=1を書いているサンプルがありますが、initial-scaleのデフォルトは1倍なので省略してよいと思います。
リダイレクトしたい
<meta http-equiv="refresh" content="秒数;url=リダイレクト先のURL">
http-equiv="refresh"キーで、ページのリダイレクトを設定できます。
contentに設定できる値は「待機秒数」と「リダイレクト先URL」をセミコロンでつないだ文字列です。
警告
metaによるリダイレクトは、利用者の予告なくページが切り替わるためアクセシビリティ上の問題があります。
サーバー側で301/302リダイレクトを設定できる場合は、そちらを使うほうがよいです。