HTMLの雛形にあるからなんとなく記述していたmetaタグですが、Googleの検索結果（SEO）で上位をとるために欠かせないHTMLのタグです。
この記事では、コーディングする上で必要なmetaタグについて紹介・解説を行います。ここで紹介するものは必ずと言っていいほど書いておきたいタグになります。
ただし、これらの内容は暗記する必要はありません。必要性だけ理解し、実際に制作するときにはこの記事など参考サイトを参照して記述します。
ぜひブックマークして見返してみてください！
- metaタグとはなにか
- metaタグを書く場所
- 代表的なmetaタグの種類
目次
metaタグとは
metaタグ（メタタグ）とは、Webページの情報を記載するためのタグで、検索エンジンやブラウザなどに対してWebページの情報を伝えます。
適切に設定することで、Googleの検索結果でも上位に表示され、記事の内容にマッチしたユーザーを呼び込むことができます。
metaタグを使って表示されている箇所
あるキーワードで検索したとき、結果として表示されたページ情報の「タイトル」や「説明文」も実はmetaタグを用いて反映されています。
metaタグの記述する場所
多種多様なmetaタグが存在しますが、記述する箇所は同じで、すべてheadタグ内になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ここに記述する -->
</head>
<body>
</body>
</html>押さえておきたい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" />まとめ
今回は、metaタグの解説をしました。
- metaタグとはなにか
- metaタグを書く場所
という点を把握することができれば問題ありません。改めてですが、metaタグ一つ一つを覚える必要はないので、実際に記述する際に確認してください。今はこんな内容をmetaタグに設定できるんだな、と思っておくので大丈夫です！
metaタグを適切に記述して、Webサイトを上位に表示させることができるようになりましょう！
