【コピペOK】初心者向けの必須metaタグ一覧と書き方ガイド
はじめに
Webサイトやブログを作り始めたばかりの方、学校や仕事で初めてHTMLに触れる方にとって、metaタグは「よく分からないけど何となく入れておくもの」と感じるかもしれません。しかし、metaタグを正しく使うことで、検索結果での見え方やクリック率、SNSでシェアされた際の表示内容など、ユーザー体験を向上させることができます。
この記事では、初心者向けにmetaタグの基本や書き方、役割、SNSでの活用ポイントを、実例やコピペOKのテンプレートとともにわかりやすく解説します。
▼HTMLの基本タグ一覧はこちらから
metaタグ（メタタグ）とは？
metaタグは、HTMLの<head>の中に書く特別なタグで、Webページの「自己紹介カード」のようなものです。
サイトページの見た目そのものには影響しないけれど、「このページはどんな内容か」といった情報をパソコンやスマホ、検索エンジン、SNSに伝えるために使います。
特にdescriptionタグは検索結果の説明文として使われることが多く、クリック率（CTR）の向上に役立ちます。ただし、metaタグだけで検索順位が大きく変わることはありません。
▼metaタグでできること
| 使い道 | 説明 |
|---|---|
| 検索エンジン向け | ページの要約を伝えることで、Googleなどの検索結果に表示される説明文に影響します |
| ブラウザ向け | 文字コード（例：UTF-8）や、ページをどんなルールで表示するかを伝えます |
| SNS向け | X（旧Twitter）やFacebookなどでシェアされたときの、タイトル・画像・説明などをコントロールできます |
初心者が必ず押さえたいmetaタグ一覧
さっそく「これだけあれば大丈夫！」なmetaタグをまとめたコードをご紹介します。
サイト制作で迷ったらこれをコピペすればOKです！
▼基本のmetaタグ
<head>
<meta charset="utf-8">
<title>ページタイトル</title> <!-- これはmetaタグではありませんが、SEOに重要なタグです -->
<meta name="description" content="ディスクリプション">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og:site_name" content="サイトの名前">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL（絶対パス）">
<meta property="og:image" content="SNSで表示する画像のURL（絶対パス）">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="favicon.icoのURL（相対・絶対パスどちらでも可）">
<link rel="apple-touch-icon" href="apple-touch-icon.pngのURL（相対・絶対パスどちらでも可）">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>各タグの役割
<meta charset=”utf-8″>
このタグは「このページはUTF-8という文字コードを使っています」とブラウザに伝えるためのものです。
UTF-8は日本語や英語など、いろいろな言語に対応できる便利な文字コードです。
このタグがないと、文字がうまく表示されず「文字化け」することがあります。
▼そもそも「文字コード」って？
パソコンやスマホの中では、文字も実は全部「数字」で保存されています。
例：「A」は「65」、「あ」は「12354」
でも、この数字が何の文字を表すかは、「ルール（文字コード）」によって変わります。
違うルールで読むと「変な記号」や「文字化け」になってしまうことがあります。
<title>ページタイトル</title>
タグはmetaタグではありませんが、ページのタイトルを指定する重要なタグです。metaタグと同じく<head>内に記述し、ブラウザのタブや検索結果に表示されるタイトルを決めます。
<meta name=”description” content=”ディスクリプション”>
Webページの「説明文（ディスクリプション）」を検索エンジンに伝えるためのタグです。
descriptionタグに記載した内容は、Googleなどの検索結果で説明文として使われることが多いですが、ページ内容と一致しない場合や検索キーワードとの関連性が低い場合は、Googleがページ本文から自動的に抜粋することもあります。
検索順位を直接上げるものではありませんが、クリック率やインデックス制御に役立ちます。
<meta property=”og:title” content=”ページタイトル”>
SNSでWebページがシェアされたときに表示されるタイトルを決めるタグです。
基本的には<title></title>で設定したものと同じタイトルにします。
SNSの時はこのタイトルで表示したい！というものがあったら違うタイトルにしても問題ありません。
<meta property=”og:description” content=”ディスクリプション”>
SNSでWebページがシェアされたときに表示される「説明文（ディスクリプション）」を決めるタグです。
基本的にはで設定したものと同じもので大丈夫です。
<meta property=”og:site_name” content=”サイトの名前”>
このタグは、SNSでシェアされたときに「どのサイトのページか」を示すためのものです。ただし、通常はog:titleが表示されるため、目立たないこともあります。
<meta property=”og:type” content=”website”>
SNSでWebページがシェアされるときに「どんな種類のページか」を伝えるためのタグです。
たとえばシェアされたWebページが「記事」なら日付や著者などの情報も優先して表示されたりするので、正しく使うことで見栄えが整い、信頼感もアップします。
| 内容 | タグの例 |
|---|---|
| トップページ 個別ページ | <meta property="og:type" content="website"> |
| 記事 | <meta property="og:type" content="article"> |
| プロフィール | <meta property="og:type" content="profile"> |
▼紹介したもの以外もあるので興味があれば確認してみてください。
<meta property=”og:url” content=”ページのURL（絶対パス）”>
SNSでWebページがシェアされたときに「正しいURL」を伝えるためのタグです。
もし同じページにアクセスできるURLが複数あった場合に、SNS側が「同じページだ」と認識できるように設定します。
URLは絶対パス（ドメインから全部書いたURL）で指定するようにしましょう。
<meta property=”og:image” content=”SNSで表示する画像のURL（絶対パス）”>
SNSでWebページがシェアされたときに表示される「画像」を指定するタグです。
指定することでシェアされたときに意図しないバラバラな画像が出るのを防ぐことができます。
URLは絶対パス（ドメインから全部書いたURL）で指定するようにしましょう。
▼画像サイズのおすすめ
- 横1200px × 縦630px がベスト（Facebook・X対応）
- JPGまたはPNG形式
- 1MB以下が推奨（重すぎると表示されないことがあります）
<meta name=”twitter:card” content=”summary_large_image”>
Webページが「X（旧Twitter）」でシェアされたときの見え方を指定するタグです。
主に2種類ありますが「summary_large_image」の方が大きくて目立つため、いちばんよく使われています。
| 値（content） | 説明 |
|---|---|
| summary | 小さな画像と一緒に、タイトル＋説明が表示されるカード。シンプルな内容向け。 |
| summary_large_image | 大きな横長画像で目立つカード。ブログや商品紹介などにおすすめ。 |
<link rel=”icon” href=”favicon.icoのURL（相対・絶対パスどちらでも可）”>
「ファビコン（favicon）」と呼ばれる小さなアイコン画像をWebページに設定するためのものです。
.ico 形式が定番ですが、 .png など他の形式にも対応しています。（ただし古いブラウザでは非対応のことも）
ファビコンのサイズはブラウザ用なので 16×16ピクセル や 32×32ピクセル が一般的です。
▼画像からfavicon.icoに変換できるツールもあります
https://favicon-generator.mintsu-dev.com/#google_vignette
<link rel=”apple-touch-icon” href=”apple-touch-icon.pngのURL（相対・絶対パスどちらでも可）”>
iPhoneやiPadなどの Apple製品のホーム画面に追加したときに表示されるアイコンを指定するためのものです。
apple-touch-iconはスマホのホーム画面用のため、PNG形式で少し大きめの120×120～180×180のサイズ推奨です。
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
スマホやタブレットは画面が小さいので、PC用のページをそのまま表示すると文字が小さすぎたり、画面がズームアウトされたりして見にくいです。
このタグを指定することでデバイスの画面幅と同じにするように調節することができます。
モバイル対応のウェブページでは必須の設定です。
知っておくと便利なmetaタグ
<meta name=”robots” content=”index, follow”>
このタグは、検索エンジンに「このページを検索結果に載せていいか」を伝えるものです。通常は書かなくても問題ありませんが、明示したい場合や他のページと区別したい場合に使います。
下記の記述ではこのページは検索結果に載せないで、リンクもたどらないでという指示になります。
<meta name="robots" content="noindex, nofollow"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
このmetaタグは、Internet Explorer（IE）に「最新の表示方法でページを見せて」と指示するためのものです。古いIEでは正しく表示されないことがありましたが、今はIEを使う人がほとんどいないので、重要度は低いです。古いIEに対応したい場合だけ使えば大丈夫です。
まとめ
metaタグを正しく使うことで、検索エンジンにもユーザーにも伝わるサイトになります。初心者の方も、まずは紹介した基本タグから実践してみてください。
