メタ情報したい(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リダイレクトを設定できる場合は、そちらを使うほうがよいです。

リファレンス