metaタグ完全ガイド｜SEO・OGP・viewportの書き方と早見表
生徒metaタグって種類が多すぎて、結局どれを書けばいいのか分かりません…。
ペン博士大丈夫、必須は4つだけだよ。残りは目的別に足していけばいい。今日は必ず書くものから、SNS共有・検索エンジン制御まで、コピペできる形で整理して渡すね。
<head>の中に書くmetaタグは、画面には表示されないのにサイトの評価を左右する情報です。検索結果の見え方、SNSでシェアしたときの見た目、スマホでの表示崩れまで、ここで決まります。
ところが種類が多く、古い情報も大量に残っているため「とりあえず全部書く」という状態になりがちです。中には現在ではまったく効果のないものも含まれています。
この記事では、必ず書く4つを最初に示し、そのうえで目的別に必要なものを整理します。不要になったタグも明記するので、既存サイトの棚卸しにも使えます。
- 必ず書く4つのmetaタグ
- 検索結果の見え方を決めるタグ（title・description）
- SNS共有の見た目を決めるOGP
- 検索エンジンの動きを制御するrobots
- スマホ表示に必須のviewport
- 書かなくてよくなった古いタグ
- テーマカラー・アイコンなどの補助的なタグ
- WordPressでの設定方法
- 確認・検証のやり方
- コピペで使えるhead一式と早見表
目次
必ず書く4つのmetaタグ
どんなサイトでも例外なく必要なのは、次の4つです。まずこれだけ入っていれば、致命的な問題は起きません。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページのタイトル｜サイト名</title>
<meta name="description" content="このページが何を説明しているかを120字前後で書きます。">
</head>| タグ | 役割 | 書かないとどうなるか |
|---|---|---|
charset | 文字コードの指定 | 日本語が文字化けする |
viewport | スマホでの表示幅 | PCサイトが縮小表示される |
title | ページの名前 | 検索結果でURLが表示される |
description | 内容の要約 | 本文から自動抽出される |
charsetはheadの先頭に書くのが決まりです。ブラウザは文字コードを判定してから解析を始めるため、後ろに書くと一部が化けることがあります。
検索結果の見え方を決めるタグ
検索結果に表示されるのは、主にtitleとdescriptionです。クリック率に直結するため、機械的に埋めず1ページずつ書きます。
title
<title>metaタグ完全ガイド｜SEO・OGP・viewportの書き方と早見表</title>- 全角30〜32文字が目安。長いと検索結果で省略される
- 重要なキーワードは前半に置く
- サイト名は末尾に区切り文字（｜や−）で添える
- 全ページで同じtitleにしない
description
<meta name="description" content="metaタグの書き方を必須の4つから目的別に整理。SEO・OGP・viewportの指定方法と、不要になった古いタグまで早見表つきで解説します。">全角120文字前後が目安です。descriptionは検索順位そのものには影響しませんが、検索結果に表示される説明文になるため、クリックされるかどうかを左右します。
なお、検索エンジンは記述を無視して本文から抜粋を作ることもあります。書いた通りに出ないのは異常ではありません。
SNS共有の見た目を決めるOGP
XやFacebook、LINEでURLを共有したときのカード表示を決めるのがOGPです。指定がないと、リンクが味気ないテキストのまま流れます。
<!-- 基本のOGP -->
<meta property="og:title" content="metaタグ完全ガイド｜SEO・OGP・viewportの書き方">
<meta property="og:description" content="必須の4つから目的別まで、metaタグの書き方を整理しました。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-meta-tags/">
<meta property="og:image" content="https://example.com/img/ogp.jpg">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!-- X（旧Twitter）用 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@account_name">| 項目 | 推奨値 | 備考 |
|---|---|---|
| 画像サイズ | 1200×630px | 1.91:1。上下が切れにくい |
| 画像の容量 | 300KB以下 | 重いと読み込まれない |
| 画像のURL | 絶対URL | 相対パスは表示されない |
og:type | 記事はarticle | トップはwebsite |
twitter:card | summary_large_image | 大きい画像で表示される |
最も多いミスが画像を相対パスで指定することです。OGPは外部サービスが読み取るため、必ずhttps://から始まる絶対URLで書きます。
検索エンジンの動きを制御するrobots
インデックスさせたくないページや、リンクを辿らせたくない場合に使います。指定を誤ると検索結果から消えるため、意味を正確に理解して使ってください。
<!-- 検索結果に出さない（会員ページ・サンクスページなど） -->
<meta name="robots" content="noindex, follow">
<!-- リンクを辿らせない -->
<meta name="robots" content="index, nofollow">
<!-- 両方止める -->
<meta name="robots" content="noindex, nofollow">
<!-- 検索結果のスニペット長やキャッシュを制御する -->
<meta name="robots" content="max-snippet:-1, max-image-preview:large">| 値 | 意味 | 使う場面 |
|---|---|---|
noindex | 検索結果に出さない | サンクス・テスト・重複ページ |
nofollow | リンクを辿らせない | 外部リンクが大量にある一覧 |
max-image-preview:large | 大きな画像を許可 | ほぼ全ページで推奨 |
noarchive | キャッシュを保存させない | 頻繁に内容が変わるページ |
noindexとnofollowを同時に指定すると、そのページから先のリンクを検索エンジンが辿れなくなります。noindexにしたいだけならnoindex, followにしてください。
スマホ表示に必須のviewport
1行ですが、これが無いとスマホでPC用の画面が縮小表示され、レスポンシブ対応が完全に無効になります。
<!-- 標準。基本はこれだけでよい -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ノッチのある端末で画面端まで使う場合 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">よく見かけるuser-scalable=noやmaximum-scale=1は避けてください。拡大したい利用者が拡大できなくなり、アクセシビリティ上の問題になります。
<!-- 避けるべき書き方 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">入力欄をタップした際の自動ズームを止めたい場合は、viewportで拡大を禁止するのではなく入力欄のfont-sizeを16px以上にするのが正しい対処です。
書かなくてよくなった古いタグ
解説記事に今も残っていますが、現在では効果がない、または不要なものです。既存サイトから削除して構いません。
| タグ | 現在の扱い | 備考 |
|---|---|---|
keywords | 検索エンジンは無視 | 2009年にGoogleが明言 |
author | 評価には使われない | 書いても害はない |
revisit-after | どの検索エンジンも非対応 | 削除してよい |
X-UA-Compatible | IE用。IEは終了済み | 削除してよい |
format-detection | 電話番号の自動リンク抑制 | 必要な場合のみ |
<!-- 現在は不要（削除して問題ない） -->
<meta name="keywords" content="metaタグ,SEO,HTML">
<meta name="revisit-after" content="7 days">
<meta http-equiv="X-UA-Compatible" content="IE=edge">削除しても順位や表示に影響はありません。headが短くなるぶん、必要なタグが見つけやすくなります。
補助的に使えるタグ
必須ではありませんが、体験を細かく整えるものです。目的が明確なときだけ足します。
<!-- スマホのブラウザUIの色（Androidのアドレスバーなど） -->
<meta name="theme-color" content="#0ea5e9">
<!-- ライト・ダークで色を変える -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
<!-- 電話番号の自動リンク化を止める -->
<meta name="format-detection" content="telephone=no">
<!-- 正規URL（重複ページの統合） -->
<link rel="canonical" href="https://example.com/html-meta-tags/">
<!-- ファビコンとApple用アイコン -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">canonicalはmetaタグではなくlinkですが、実務では必ずセットで扱います。同じ内容が複数のURLで見られる場合に、どれを正規とするかを検索エンジンへ伝えます。
WordPressでの設定方法
WordPressではテーマがheadを出力するため、原則としてHTMLを直接編集しません。SEOプラグインで設定します。
- title・description：All in One SEO や Yoast SEO の投稿ごとの設定欄
- OGP：同じくプラグイン側。アイキャッチ画像が自動でog:imageになる
- robots：投稿編集画面の「高度な設定」でnoindexを切り替え
- viewport・charset：テーマが出力済み。触らない
- theme-color：テーマのカスタマイザー、または子テーマで追加
<?php
// 子テーマのfunctions.phpでheadに追記する例
add_action( 'wp_head', function () {
echo '<meta name="theme-color" content="#0ea5e9">' . "\n";
}, 5 );注意点として、プラグインとテーマの両方がOGPを出力すると重複します。ソースを確認して、og:imageが2つ出ていないかを必ずチェックしてください。
確認・検証のやり方
書いたあとは必ず出力を確認します。手順は3つです。
1. ソースを直接見る
# headだけ取り出して確認する
curl -s https://example.com/ | sed -n '/<head>/,/<\/head>/p' | grep -i "meta"2. 重複していないか数える
# descriptionが2つ出ていないか確認
curl -s https://example.com/ | grep -c 'name="description"'3. SNSのデバッガで表示を確認する
- OGPを変更したら、各SNSのキャッシュ削除が必要
- 画像を差し替えたのに古い画像が出る場合は、ほぼキャッシュが原因
- 検索結果の見え方はSearch Consoleの「URL検査」で確認する
特にOGP画像は、一度読み込まれると各サービス側に保存されます。更新したら必ずデバッガで再取得させてください。
コピペで使えるhead一式
記事ページを想定した実用的な構成です。値を差し替えればそのまま使えます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 検索結果 -->
<title>ページタイトル｜サイト名</title>
<meta name="description" content="このページの内容を120字前後で説明します。">
<link rel="canonical" href="https://example.com/page/">
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- SNS共有 -->
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="このページの内容を120字前後で説明します。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:image" content="https://example.com/img/ogp.jpg">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<!-- 表示まわり -->
<meta name="theme-color" content="#0ea5e9">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/style.css">
</head>目的別・早見表
何をしたいときにどのタグを触るか、逆引きで整理しました。
| やりたいこと | 使うタグ | 備考 |
|---|---|---|
| 検索結果のタイトルを変える | title | 全角32字以内 |
| 検索結果の説明文を変える | description | 順位への影響はない |
| SNSの画像を変える | og:image | 1200×630・絶対URL |
| 検索結果に出したくない | robots: noindex | followは残す |
| スマホ表示を直す | viewport | 拡大禁止は書かない |
| 重複ページを統合したい | canonical | linkタグ |
| ブラウザUIの色を変える | theme-color | 主にAndroid |
| 文字化けを直す | charset | headの先頭に置く |
迷ったら「必須の4つが入っているか」「OGPの画像が絶対URLか」「noindexが意図せず入っていないか」の3点だけ確認してください。事故の大半はこの3つで起きます。
ページ種別ごとの書き分け
同じサイトでも、ページの役割によって必要なmetaタグは変わります。代表的な4種類を整理します。
トップページ
<title>サイト名｜何をしているサイトかを一言で</title>
<meta name="description" content="サイト全体で何が得られるかを説明します。個別ページの説明にしない。">
<meta property="og:type" content="website">トップはog:typeをwebsiteにします。titleはサイト名を先頭に置くのが一般的で、記事ページとは逆の順序になります。
記事ページ
<title>記事タイトル｜サイト名</title>
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-08-23T09:00:00+09:00">
<meta property="article:modified_time" content="2026-08-23T09:00:00+09:00">記事は公開日と更新日を持たせられます。更新日を正しく出しておくと、検索結果に日付が表示されたときの情報が正確になります。
一覧・カテゴリページ
<title>カテゴリ名の記事一覧｜サイト名</title>
<meta name="robots" content="index, follow">
<!-- 2ページ目以降は説明文を変えるか、noindexにする -->
<meta name="description" content="カテゴリ名に関する記事の一覧です。">ページ送りのある一覧は、全ページで同じtitle・descriptionになりがちです。ページ番号を含めるか、2ページ目以降をnoindexにするかを決めておきます。
問い合わせ完了・会員専用ページ
<meta name="robots" content="noindex, follow">検索から直接到達されると困るページはnoindexにします。ただしfollowは残し、サイト内のリンク構造は辿れるようにしておきます。
| ページ種別 | og:type | robots | titleの形 |
|---|---|---|---|
| トップ | website | index | サイト名が先頭 |
| 記事 | article | index | 記事名が先頭 |
| 一覧 | website | index | カテゴリ名＋一覧 |
| 完了ページ | website | noindex, follow | 任意 |
よくある失敗と直し方
実際の案件で見かける不具合を、症状から逆引きできるようにまとめます。
| 症状 | 原因 | 直し方 |
|---|---|---|
| 検索結果にURLだけ出る | titleが無い | 各ページに固有のtitleを書く |
| 全ページ同じ説明文 | 共通descriptionのまま | ページごとに書き分ける |
| SNSで画像が出ない | 相対パス・容量超過 | 絶対URL・300KB以下にする |
| スマホで文字が極小 | viewportが無い | 標準の1行を追加する |
| 日本語が化ける | charsetが後ろ | headの先頭へ移動 |
| 急に検索から消えた | noindexが残っている | 公開時に外す |
| 説明文が2つ出力される | テーマとプラグインの重複 | どちらかを無効化する |
最後の重複は、WordPressでSEOプラグインを後から入れたサイトで頻発します。テーマ側にもOGP出力機能があると、og:imageが2つ出て、意図しない画像が使われることがあります。
# 重複チェック：それぞれ 1 が返れば正常
curl -s https://example.com/ | grep -c 'name="description"'
curl -s https://example.com/ | grep -c 'property="og:image"'
curl -s https://example.com/ | grep -c 'rel="canonical"'公開前にこの3行を流すだけで、重複による事故はほぼ防げます。テンプレートを修正したときにも必ず確認してください。
まとめ
metaタグは種類が多く見えますが、必ず必要なのはcharset・viewport・title・descriptionの4つだけです。そこにSNS共有用のOGP、検索エンジン制御用のrobots、重複統合のcanonicalを目的に応じて足していきます。OGP画像は1200×630pxの絶対URLで指定し、viewportでは拡大を禁止しないこと。keywordsやX-UA-Compatibleのような古いタグは削除して構いません。書いたあとはソースを直接確認し、descriptionやog:imageが重複していないかを必ずチェックしてください。
よくある質問（FAQ）
meta keywords は今も書くべきですか？
書く必要はありません。Googleは2009年に検索順位の判断材料として使っていないと明言しており、他の主要な検索エンジンも同様です。既存サイトにある場合は削除して構いません。害はありませんが、効果もありません。
descriptionを書けば検索順位は上がりますか？
上がりません。descriptionは順位の評価要素ではなく、検索結果に表示される説明文の候補になるだけです。ただしクリック率には影響するため、内容を的確に要約した文を書く価値はあります。なお検索エンジンが本文から別の抜粋を作ることもあります。
OGP画像が古いまま更新されません。
各SNS側に画像がキャッシュされているためです。X・Facebook・LINEそれぞれのデバッグツールでURLを再取得すると更新されます。あわせて、画像URLが相対パスになっていないか、1200×630px前後で軽量かも確認してください。
viewportで user-scalable=no を指定してもいいですか？
避けてください。拡大表示が必要な利用者が拡大できなくなり、アクセシビリティ上の問題になります。スマホで入力欄をタップした際の自動ズームを防ぎたい場合は、入力欄のfont-sizeを16px以上にするのが正しい対処です。
noindexとnofollowはセットで書くべきですか？
多くの場合は不要です。検索結果に出したくないだけならnoindex, followとしてください。nofollowを付けるとそのページ内のリンクを辿らなくなるため、リンク先のページが発見されにくくなります。
あわせて読みたい関連記事
AIスキルで、未来の自分をアップデート！
今なら完全無料でAIを学べる！
- 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
- スマホ・PCどちらでもOK：好きな時間に学習できる
- 料金は一切ナシ：0円でAIスキルが身につく
目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！
