メタ情報したい（`meta`）

<head>
    <meta name="キー" content="値">
</head>

metaタグやheadタグの中に配置します。基本的にkey-valueペアで設定します。

文字エンコーディングしたい（`charset`）

<meta charset="utf-8">

文書の文字エンコーディングを宣言します。といっても、utf-8以外の値は指定できません。また、この宣言は文書の最初の方に書いておく必要があります。

ビューポートしたい（`viewport`）

<meta name="viewport" content="width=device-width">

ビューポートのサイズを設定できます。画面の幅はデバイスによって異なるため、width=device-widthを設定しておきましょう。また、initial-scaleで読み込んだときの表示倍率を設定できます。よくinitial-scale=1を書いているサンプルがありますが、デフォルトで1倍なので省略してよいと思います。

サイトを説明したい（`description`）

<meta name="description" content="サイトの説明">

OGPしたい

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title>ページのタイトル</title>
<meta property="og:type" content="ページの種類（website / article）" />
<meta property="og:url" content="ページのパーマリンク（絶対URL）" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:image" content="ページのサムネイル画像（絶対URL）" />
<meta property="og:site_name" content="サイト名" />

OGP（The Open Graph Protocol）はウェブサイトや記事が、SNSなどシェアされたときに利用されるメタデータです。適切に設定しておくと、シェアされたときにいい感じに表示されます。 OGPが適切に設定できたかどうかはOGP確認ツールなどの外部ツールで確認できます。

CMSではプラグインが用意されている場合もあり、自分で書く必要はないかもしれませんが、その構成要素は理解しておくとよいと思います。また、上記のサンプルは必要最低限の要素を抜粋したものです。 OGPの公式ページを読むと、もっと広く表現できるようです。

OGP画像したい

<meta propery="og:image:url" content="og:imageと同じ">
<meta propery="og:image:secure_url" content="HTTPSが要求されたときの画像URL">
<meta propery="og:image:type" content="画像のMIMEタイプ">
<meta propery="og:image:width" content="画像の幅（px）">
<meta propery="og:image:height" content="画像の高さ（px）">
<meta propery="og:image:alt" content="画像の代替テキスト">

画像の設定項目はオプションがあります。

Twitter Cardしたい

<meta name="twitter:card" content="カードの種類（summary / summary_large_image / app / player）" />
<meta name="twitter:site" content="@サイトのユーザー名" />
<meta name="twitter:creator" content="@ページ作成者のユーザー名" />

TwitterにはCardという専用のOGPがあります。これも追加で設定しておくとよいでしょう。

リダイレクトしたい

<meta http-equiv="refresh" content="秒数;url=リダイレクト先のURL">

リダイレクトの設定もmetaタグに書きます。リダイレクトするのに、そのページを読み込むのはもったいないので、この設定もはじめのほうに書いておくとよいです。

メタ情報したい（meta）

文字エンコーディングしたい（charset）

ビューポートしたい（viewport）

サイトを説明したい（description）