HTMLの雛形にあるからなんとなく記述していたmetaタグですが、Googleの検索結果（SEO）で上位をとるために欠かせないHTMLのタグです。
この記事では、コーディングする上で必要なmetaタグについて紹介・解説を行います。ここで紹介するものは必ずと言っていいほど書いておきたいタグになるので、覚えておきましょう。
目次
metaタグとは
metaタグ（メタタグ）とは、Webページの情報を記載するためのタグで、検索エンジンやブラウザなどに対してWebページの情報を伝えます。
適切に設定することで、Googleの検索結果でも上位に表示され、記事の内容にマッチしたユーザーを呼び込むことができます。
metaタグを使って表示されている箇所
あるキーワードで検索して、結果として表示されたページ情報の「タイトル」や「説明文」もmetaタグを用いて反映されています。
metaタグの記述する場所
多種多様なmetaタグが存在しますが、記述する箇所は同じ位置になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ここに記述する -->
</head>
<body>
</body>
</html>このようにheadタグ内に記述します。
押さえておきたいmetaタグ
metaタグはいろいろ存在しますが、設定しておくべきものは限られているので押さえておきましょう。
charset（文字コード）
<meta charset="utf-8" />
このHTMLファイルがどの文字コードで保存されているのか指定する属性で、文字化けを防ぐ。
HTML5ではUTF-8が推奨されている。
viewport
<meta name="viewport" content="width=device-width,initial-scale=1" />
Webサイトのページが表示される画面の表示領域です。
ページを表示するときにどの大きさで表示するかを指定できます。
PCとスマートフォンでは画面幅が違うため、ページが小さく表示されてしまったりしますが、viewportを記述することでその問題を解消します。
title
<title>ZeroPlus Media</title>Webページのタイトルを指定することができます。
titleタグに設定した内容は、検索エンジンの検索結果、ページを開いているときのブラウザタブ、ページをブックマークした際のデフォルトの名称に反映されます。
description
<meta name="description" content="ZeroPlus Mediaは完全0からWebデザイン/プログラミング始める方向けの学習メディアです。フリーランス特化型プログラミングスクールZeroPlusが運営しています。" />Webページの説明、概要を設定することができます。
検索結果のタイトルの下に表示されます。
format-detection
<meta name="format-detection" content="telephone=no" />
電話番号の自動リンク機能を制御することができる設定です。
スマートフォン向けの設定で、スマートフォンでページを表示中に、Webページ内に電話番号のような記述があると自動的にリンクします。
ユーザーが誤ってそのまま架電してしまわないようにするために、この機能を無効化しておきましょう。
favicon（ファビコン）
<link rel="icon" href="favicon.ico" />ファビコンとは、ブラウザのタブなどに表示されるアイコンのことです。
サイトの信頼にもつながるので、設定しておきましょう。
apple-touch-icon（Webクリップアイコン）
<link rel="apple-touch-icon" href="webclip.png" />Webページのショートカットを作成したとき、Webページをスマートフォンのホーム画面に追加したときに表示されるアイコンを設定することができます。
OGP関連
OGPとは、Open Graph Protocolの略で、WebページをSNSなどでシェアされたときに表示される情報です。
タイトルや説明文、URL、画像などを設定することができます。
og:site_name
<meta property="og:site_name" content="サイト名" />Webページのサイト名を設定します。
og:url
<meta property="og:url" content="URL" />WebページのURLを絶対パスで設定します。
og:type
<meta property="og:type" content="website or article" />Webページの種類を設定します。
種類は様々ありますが、以下の項目が代表例です。
website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
基本的には、トップページであればwebsiteと設定し、それ以外はarticleを設定します。
og:title
<meta property="og:title" content="ページのタイトル" />Webページのタイトルを設定します。
titleタグと同様の記述で問題ありません。
og:description
<meta property="og:description" content="ページの説明" />Webページの説明、概要を設定します。
descriptionと同様の記述で問題ありません。
og:image
<meta property="og:image" content="URL" />シェアされた時に表示したい画像（OGP画像）を絶対パスで設定します。
OGP画像の推奨サイズは1200px × 630pxです。
og:locale
<meta property="og:locale" content="ja_JP" />Webページの言語を設定します。
日本語の場合はja_JPと記述します。
デフォルトはアメリカ英語のen_USです。
fb:app_id
<meta property="fb:app_id" content="AppID">Facebook専用の設定で、これを設定するとFacebook版Google Analyticsのようなサービスを使用することができるようになります。
twitter:card
<meta name="twitter:card" content="summary_large_image or summary" />Twitter専用の設定で、Twitterカードの出力種類を設定できます。
種類としては、以下があります。
summary（デフォルト）
summary_large_image
app
player
appは、アプリカードという種類でアプリのインストール画面がツイート上に表示されます。
playerは、動画を埋め込むことができるカードです。
Webページであれば、おおよその場合、summaryかsummary_large_imageを設定します。
twitter:site
<meta name="twitter:site" content="@ZeroPlus_Japan" />Twitter専用の設定で、サイトの運営のTwitterアカウントがある場合に設定することができます。
twitter:description
<meta name="twitter:description" content="ページの説明" />Twitter専用の設定で、Webページの説明、概要を設定します。
twitter:image:src
<meta name="twitter:image:src" content="URL" />Twitter専用の設定で、Twitterでシェアされた時に表示したい画像を絶対パスで設定します。
metaタグまとめ
これまでに説明してきたWebページに最低限書いておくべきmetaタグをまとめておきますので、制作時にぜひご利用ください。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ページタイトル</title>
<meta name="description" content="ページの説明" />
<meta name="format-detection" content="telephone=no" />
<link rel="icon" href="favicon.png" type="image/png" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="webclip.png" />
<meta property="og:site_name" content="ページタイトル" />
<meta property="og:url" content="URL" />
<meta property="og:type" content="website or article" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="URL" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="summary_large_image or summary" />
<meta name="twitter:site" content="@twitter_id" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image:src" content="URL" />
