metaタグって正直たくさんあって何を記述したらいいかわからないと思います。
中にはSEOに効果が無いものもあります。
不要なものは書かないにこしたことはないので記述する必要はないでしょう。
そんなたくさんあるmetaタグの中で、「書いておくべきmetaタグ」をまとめました。
それが以下のコードになります。
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>ページのタイトル</title>
<meta name="description" content="説明文"/>
<meta name="keywords" content="キーワードを,で区切って指定"/>
<meta name="twitter:card" content="カード種類（summary / summary_large_image）"/>
<meta name="twitter:site" content="@Twitterユーザー名"/>
<meta name="twitter:creator" content="@Twitterユーザー名"/>
<meta name="twitter:title" content="記事のタイトル"/>
<meta name="twitter:description" content="記事の説明文"/>
<meta name="twitter:image" content="カードに表示する画像のURL"/>
<meta property="og:url" content="記事ののURL"/>
<meta property="og:title" content="記事のタイトル"/>
<meta property="og:description" content="記事の概要"/>
<meta property="og:type" content="ページのタイプ（website/article など）"/>
<meta property="og:image" content="画像のURL"/>
<meta property="fb:app_id" content="FacebookのアプリID"/>上記コードをサイトの<head></head>内に記述してください。
基本的には上記のmetaタグを設定しておけば大丈夫です。
書いておくべき共通のmetaタグ（メタタグ）
いきなりコードを設定しておけば大丈夫と言われても、わからないと思うので、１つずつ解説していきます。
charset
<meta charset="utf-8" />HTML文章の文字コードを指定するためものです。日本語のサイトであれば、必ず書く必要があります。<head>タグのすぐ下に書くようにしましょう。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>レスポンシブデザイン（スマホやタブレットでも表示を最適化）で表示するために書いておく必要があります。
ビューポートタグをしっかり設定することで、スマホへの対応を行い、モバイルファーストインデックスに対応しましょう。
title
<title>ページのタイトル</title>こちらはmetaタグではありませんがSEO対策では必須なのでついでに紹介しておきます。
タイトルタグは、サイト名やページのタイトルを記述するHTMLのタグです。
検索結果に大きく表示され、検索ユーザーの一番目に付く部分であるため、検索エンジンが、そのページにはどんな情報があるのかを知るために重要視しているとみられます。
ですがタイトルを長く記述しても検索結果には全文が表示されるわけではありません。ページの内容が分かって、おもわずクリックしたくなるタイトルを付け、文字数は最大でも32文字以内に収めるようにするとよいでしょう。
description
<meta name="description" content="説明文"/>検索結果の記事タイトル下に表示されます。そのページがどんな内容なのかを検索ユーザーに伝える役割を持っています。
検索キーワードが太字で表示されるので、適切なキーワードを散りばめておくとよいでしょう。
あくまでもクリック率を左右するものなので、SEO検索上位を目的として設定をする必要はありません。
keywords
<meta name="keywords" content="キーワードを,で区切って指定"/>そのページの内容を表すキーワードを半角カンマ（,）区切りで書きます。ですがクローラーは検索順位を決めるうえでメタキーワードを一切見ていません。
キーワードを書きすぎると、検索エンジンによってはスパム判定されてしまうこともあるようなので、キーワードは３〜５つ程度にしておきましょう。
書いておくべきOGPタグ
OGPとは、「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトル・ページの画像・説明文などが表示されるプロトコルを指します。
OGPを正しく設定することで、記事がSNS上でシェアされる確率が高くなります。
タイトルや説明文をそのままのせるのではなく、どんな文章にしたらクリックしたくなるか、考えながら設定するとよいでしょう。
twitter:card
<meta name="twitter:card" content="カード種類"/>「Summaryカード」ならsummary、「大きな画像付きのSummaryカード」ならsummary_large_imageと指定します。
<!-- 例：Summaryカード -->
<meta name="twitter:card" content="summary">
<!-- 例：大きな画像付きのSummaryカード -->
<meta name="twitter:card" content="summary_large_image">twitter:site
<meta name="twitter:site" content="@Twitterユーザー名"/>@から始まる、Twitterのアカウント名を入力します。
twitter:creator
<meta name="twitter:creator" content="@Twitterユーザー名"/>コンテンツ作成者/著者の@ユーザー名を入力します。
twitter:title
<meta name="twitter:title" content="記事のタイトル"/>Twitter用の記事のタイトルを入力します。
twitter:description
<meta name="twitter:description" content="記事の説明文"/>Twitter用の記事の説明文を入力します。
twitter:image
<meta name="twitter:image" content="カードに表示する画像のURL"/>Twitter用のカードに表示する画像のURLを入力します。
Twitterカードによって適切な縦横比が変わるので、必要に応じて設定しましょう。
og:url
<meta property="og:url" content="記事のURL"/>OGPを設定するWEBページのURLを指定します。
og:title
<meta property="og:title" content="記事のタイトル"/>SNSでシェアされた際のページのタイトルを指定します。
一般的には記事のタイトルと同じ内容を設定しますが、SNSでは違うタイトルにしたいといった場合に設定します。
og:description
<meta property="og:description" content="記事の概要"/>SNSでシェアされた際のページの説明文を指定します。
og:type
<meta property="og:type" content="ページのタイプ（website/article など）"/>ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。
og:image
<meta property="og:image" content="画像のURL">SNSでシェアされた際に表示させたい画像を絶対パスで指定します。
Facebookでは画像サイズを1200×630、比率で「1.91：1」を推奨しています。
fb:app_id
<meta property="fb:app_id" content="FacebookのアプリID"/>FacebookのアプリIDを設定します。
サイトやブログの管理者をFacebookに伝えるためのタグになります。
他に知っておいたほうがいいmetaタグ
他にも知っておくべきmetaタグがあるのでご紹介しておきます。
robots
<meta name="robots" content="noindex,nofollow">Webページの情報を検索エンジンにインデックス（掲載）することを拒否したり、クローラーの動作を制御することができます。低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめです。
低品質なページをインデックスしないことによって、SEOのマイナス評価を避けることができます。
指定したページのインデックスを拒否する場合はnoindexとします。
検索エンジンがたどる必要のないリンクが掲載されているページにnofollowを設定しておくことで、ページのリンクの質を高めることが期待できます。
- noindex：検索結果にインデックス（掲載）しない
- nofollow：クローラーに巡回させない
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge">IE（Internet Explorer）の互換モードを指定することができます。「IE=edge」と指定すると最新のモードで表示することができます。
過去のバージョンで表示させたいのであれば、IE11は「IE=11」、IE9は「IE=9」と指定すればOKです。
しかし、わざわざ過去のバージョンを指定しないですし、記述を推奨されているわけでもないので、特別記述する必要はないでしょう。
refresh
<meta http-equiv="refresh" content="秒数;url=リンク先のURL">ページ遷移までの秒数とURLを指定することで、他のページへとリダイレクトすることができます。
まとめ
紹介したmetaタグの一部は、書いたからといって検索順位に直接影響があるわけではありません。
しかし適切なmetaタグを設定することで、ユーザーが検索時にクリックする確率が上がったり、SNSで記事がシェアされる確率が上がるなど、より多くのユーザーに見てもらえる確率が上がります。
まだmetaタグを設定していないのであれば、自身のサイトにも設定しましょう。
