SEOに必須のメタタグ（title、description、canonical、robots等）を一覧で解説。無料チェック方法、よくある設定ミス、自サイトのメタタグチェッカーの使い方も紹介します。

公開: Apr 16, 2026 by ToolCraft Lab 約10分で読めます

SEOメタタグ完全ガイド — 必須タグ一覧・チェック方法・よくある設定ミスと対処法

SEOに必須のメタタグ（title、description、canonical、robots等）を一覧で解説。無料チェック方法、よくある設定ミス、自サイトのメタタグチェッカーの使い方も紹介します。

#SEO#メタタグ#Web制作

メタタグとは？ — 検索エンジンとブラウザに情報を伝えるHTMLタグ

「記事の内容は良いのに検索順位が上がらない…」 その原因、メタタグの設定ミスかもしれません。正しいメタタグ設定は、SEOの最も基本的で重要な施策です。

メタタグは、HTML の <head> セクション内に記述するタグで、ページの内容や設定をブラウザや検索エンジンに伝える役割を持ちます。ユーザーの目には直接見えませんが、検索結果の表示やSNSシェア時の見え方に大きく影響します。

メタタグが重要な理由

検索結果の表示制御: title と description が検索結果のスニペットに表示される
クリック率に直結: 魅力的なスニペットはクリック率を大幅に改善する
クロール制御: robots タグで検索エンジンのクロール動作を制御できる
重複コンテンツ対策: canonical タグでURLの正規化を行える

SEOに必須のメタタグ一覧

重要度別メタタグ一覧表

メタタグ	重要度	役割	SEOへの影響
`<title>`	★★★★★	ページのタイトル	直接的（ランキング要因）
`<meta name="description">`	★★★★★	ページの説明文	間接的（CTR向上）
`<link rel="canonical">`	★★★★★	正規URL指定	直接的（重複排除）
`<meta name="robots">`	★★★★☆	クロール制御	直接的（インデックス制御）
`<meta name="viewport">`	★★★★☆	モバイル表示設定	直接的（モバイルフレンドリー）
`<meta property="og:*">`	★★★☆☆	OGP（SNSシェア）	間接的（ソーシャルシグナル）
`<meta charset>`	★★★☆☆	文字コード	直接的（正しい表示）
`<link rel="alternate" hreflang>`	★★☆☆☆	多言語対応	直接的（多言語SEO）

title タグ — 最も重要なSEO要素

基本構文

<title>ページのタイトル | サイト名</title>

titleタグのベストプラクティス

項目	推奨	理由
文字数	30〜35文字	検索結果で切れない範囲
キーワード	先頭に配置	検索エンジンが重視する位置
区切り文字	`	`or`—`or`-`
ユニーク性	ページごとに固有	重複titleはSEOマイナス

良い例と悪い例

<!-- 良い例 -->
<title>cron式の書き方を完全解説 — 毎日・毎時のパターン網羅 | ToolCraft Lab</title>

<!-- 悪い例1: 長すぎる -->
<title>2026年版cron式の書き方を初心者から上級者まで完全解説！毎日・毎時・毎週・毎月のパターンをすべて網羅したガイド | ToolCraft Lab</title>

<!-- 悪い例2: キーワードなし -->
<title>記事ページ | ToolCraft Lab</title>

<!-- 悪い例3: キーワード詰め込み -->
<title>cron cron式 cron書き方 cron毎日 cron毎時 | ToolCraft Lab</title>

meta description — クリック率を左右するスニペット

基本構文

<meta name="description" content="ページの説明文をここに記述します。" />

descriptionのベストプラクティス

項目	推奨	理由
文字数	70〜120文字	PC・スマホ両方で表示される範囲
キーワード	自然に含める	検索語がボールド表示される
CTA	含めると効果的	「詳しく解説」「無料で使える」など
ユニーク性	ページごとに固有	重複は検索結果の品質低下

効果的なdescriptionの書き方

<!-- パターン1: 課題 → 解決策 -->
<meta name="description"
  content="cronの書き方が分からない方へ。毎日・毎時・毎週のパターンを表で網羅し、GitHub ActionsやCloud Schedulerでの使い方も解説します。" />

<!-- パターン2: 内容の要約 + 差別化 -->
<meta name="description"
  content="SEOに必須のメタタグを重要度別に一覧解説。title、description、canonical、robotsの正しい書き方と、無料チェックツールの使い方を紹介します。" />

<!-- パターン3: 数字 + ベネフィット -->
<meta name="description"
  content="AIコードレビューツール5選を徹底比較。機能・料金・対応言語を表で整理し、チーム規模別のおすすめを紹介。導入手順付きですぐに始められます。" />

canonical タグ — 重複コンテンツ対策の要

基本構文

<link rel="canonical" href="https://example.com/blog/original-article" />

canonical が必要なケース

ケース	例	canonical の指定先
URL パラメータ違い	`?page=1` `?sort=date`	パラメータなしのURL
www あり/なし	`www.example.com` / `example.com`	統一したい方のURL
HTTP/HTTPS	`http://` / `https://`	`https://` のURL
末尾スラッシュ	`/blog/` / `/blog`	統一したい方
記事の転載	Zenn、Qiita へのクロスポスト	元記事のURL
ページネーション	`/articles?page=2`	状況により異なる

canonical設定の注意点

<!-- 正しい例: 絶対URLで指定 -->
<link rel="canonical" href="https://example.com/blog/my-article" />

<!-- 間違い: 相対URLで指定 -->
<link rel="canonical" href="/blog/my-article" />

<!-- 間違い: 別ドメインの低品質ページを指定 -->
<link rel="canonical" href="https://spam-site.com/article" />

⚠️ 注意: canonical タグの設定ミスは、せっかくの記事がインデックスされない原因になります。特にCMS やフレームワークの自動生成に頼る場合は、実際の出力を必ず確認しましょう。

robots メタタグ — インデックスとクロールの制御

基本構文

<meta name="robots" content="index, follow" />

robots の値一覧

値	意味	使い所
`index`	ページをインデックスする	デフォルト（通常は指定不要）
`noindex`	インデックスしない	管理画面、検索結果ページ、テストページ
`follow`	リンクを辿る	デフォルト（通常は指定不要）
`nofollow`	リンクを辿らない	ユーザー投稿コンテンツ
`noarchive`	キャッシュを保存しない	頻繁に更新されるページ
`nosnippet`	スニペットを表示しない	あまり使わない
`max-snippet:N`	スニペットの最大文字数	スニペットの長さを制御
`max-image-preview:large`	画像プレビューサイズ	Google Discover 向け

実際の使用例

<!-- 通常の公開ページ（明示する場合） -->
<meta name="robots" content="index, follow" />

<!-- 検索結果から除外したいページ -->
<meta name="robots" content="noindex, nofollow" />

<!-- インデックスは不要だがリンクは辿ってほしい -->
<meta name="robots" content="noindex, follow" />

<!-- Google Discover での大きな画像プレビューを許可 -->
<meta name="robots" content="max-image-preview:large" />

viewport メタタグ — モバイルフレンドリーの必須設定

基本構文

<meta name="viewport" content="width=device-width, initial-scale=1" />

各属性の意味

属性	値	説明
`width`	`device-width`	デバイス幅に合わせる
`initial-scale`	`1`	初期ズーム倍率
`maximum-scale`	`1`（非推奨）	最大ズーム倍率の制限
`user-scalable`	`no`（非推奨）	ユーザーのズーム無効化

⚠️ 注意: maximum-scale=1 や user-scalable=no はアクセシビリティの観点から非推奨です。視覚障がいのあるユーザーがズームできなくなります。

その他の重要なメタタグ

文字コード指定

<!-- 必ず <head> の最初に配置 -->
<meta charset="UTF-8" />

多言語対応（hreflang）

<link rel="alternate" hreflang="ja" href="https://example.com/ja/article" />
<link rel="alternate" hreflang="en" href="https://example.com/en/article" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/article" />

構造化データ（JSON-LD）

メタタグではありませんが、SEOに重要な要素です。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事のタイトル",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "datePublished": "2026-04-16",
  "image": "https://example.com/ogp-image.jpg"
}
</script>

メタタグのよくある設定ミスと対処法

ミス1: title タグの重複

<!-- 問題: 複数のtitleタグ -->
<title>記事タイトル</title>
<title>サイト名</title>

<!-- 対処: titleタグは1つだけ -->
<title>記事タイトル | サイト名</title>

ミス2: description が全ページ同じ

<!-- 問題: テンプレートのまま全ページ同じ -->
<meta name="description" content="このサイトはツールを提供しています" />

<!-- 対処: ページごとに固有の説明を書く -->
<meta name="description" content="cronの書き方をゼロから解説。毎日・毎時・毎週のパターン表付き。" />

ミス3: canonical の自己参照忘れ

<!-- 問題: canonicalタグがない -->
<!-- 検索エンジンが正規URLを推測してしまう -->

<!-- 対処: すべてのページに自己参照canonical を設定 -->
<link rel="canonical" href="https://example.com/current-page" />

ミス4: noindex の消し忘れ

開発・ステージング環境で設定した noindex を本番に持ち込んでしまうケースです。

<!-- 開発環境で設定して、本番で消し忘れ -->
<meta name="robots" content="noindex, nofollow" />

対処法: デプロイパイプラインで環境変数に応じてrobots タグを切り替えましょう。

// Astro での例
const robotsContent = import.meta.env.PROD
  ? 'index, follow'
  : 'noindex, nofollow';

<meta name="robots" content={robotsContent} />

ミス5: OGP画像のURL が相対パス

OGP画像のサイズや設定について詳しくはOGP画像サイズ完全ガイドで解説しています。

<!-- 問題: 相対パスだとSNSが取得できない -->
<meta property="og:image" content="/images/ogp.jpg" />

<!-- 対処: 絶対URLで指定 -->
<meta property="og:image" content="https://example.com/images/ogp.jpg" />

メタタグのチェック方法

ブラウザのDevToolsで確認

# Chrome DevTools でメタタグを確認する手順
1. F12（または Cmd+Option+I）でDevToolsを開く
2. Elements タブで <head> セクションを展開
3. meta タグを確認

# またはコンソールで一括取得
# document.querySelectorAll('meta') で全メタタグを取得可能

Google Search Console で確認

Google Search Console の「URL検査」ツールで、Google がページをどう認識しているか確認できます。

Search Console にログイン
上部の検索バーに対象URLを入力
「ページのインデックス登録」セクションを確認
「ライブテスト」で最新の状態を確認

Lighthouse でのチェック

# Lighthouse CLI でSEOスコアをチェック
npx lighthouse https://example.com --only-categories=seo --output=json

# ブラウザからの場合
# Chrome DevTools → Lighthouse タブ → SEO カテゴリにチェック → 分析

ToolCraft Lab のメタタグチェッカー

当サイトでは、URL を入力するだけでメタタグの設定状況を無料で診断できる メタタグチェッカー を提供しています。

主な機能

メタタグ一覧表示: 設定されているすべてのメタタグを一覧で確認
SEOスコア: メタタグの設定状況を100点満点でスコアリング
問題点の検出: 不足タグ、重複タグ、不適切な値を自動検出
改善提案: 具体的な修正方法をコード例付きで提示
OGPプレビュー: SNSシェア時の表示をプレビュー

使い方

メタタグチェッカーにアクセス
チェックしたいURLを入力
「チェック開始」をクリック
結果を確認し、指摘事項を修正

エンジニアの方なら、結果をもとにコードを修正し、再度チェックするだけで SEO の基本対策が完了します。

Astro / Next.js でのメタタグ設定テンプレート

Astroでブログを構築する方法はAstroブログチュートリアルで詳しく解説しています。

Astro テンプレート

---
// src/components/SEOHead.astro
interface Props {
  title: string;
  description: string;
  canonical?: string;
  ogImage?: string;
  noindex?: boolean;
}

const {
  title,
  description,
  canonical = Astro.url.href,
  ogImage = '/default-ogp.jpg',
  noindex = false,
} = Astro.props;

const fullOgImage = new URL(ogImage, Astro.site).href;
const robotsContent = noindex ? 'noindex, nofollow' : 'index, follow';
---

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content={robotsContent} />
<link rel="canonical" href={canonical} />

<!-- OGP -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={fullOgImage} />
<meta property="og:url" content={canonical} />
<meta property="og:type" content="article" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={fullOgImage} />

メタタグ SEO チェックリスト

記事やページを公開する前に確認しましょう。

まとめ — メタタグの基本を押さえてSEOの土台を固めよう

メタタグの設定は SEO の最も基本的な施策ですが、意外と見落としやミスが多い箇所でもあります。特に title、description、canonical、robots の4つは必ず正しく設定しましょう。

設定後は、当サイトのメタタグチェッカーで確認するのがおすすめです。URL を入力するだけで、不足しているタグや設定ミスを自動検出し、具体的な改善提案を受けられます。メタタグの設定と合わせて、AI SEO記事作成の手法を取り入れると、コンテンツ面でもSEO効果を高められます。

SEOメタタグ完全ガイド — 必須タグ一覧・チェック方法・よくある設定ミスと対処法

メタタグとは？ — 検索エンジンとブラウザに情報を伝えるHTMLタグ

メタタグが重要な理由

SEOに必須のメタタグ一覧

重要度別メタタグ一覧表

title タグ — 最も重要なSEO要素

基本構文

titleタグのベストプラクティス

良い例と悪い例

meta description — クリック率を左右するスニペット

基本構文

descriptionのベストプラクティス

効果的なdescriptionの書き方

canonical タグ — 重複コンテンツ対策の要

基本構文

canonical が必要なケース

canonical設定の注意点

robots メタタグ — インデックスとクロールの制御

基本構文

robots の値一覧

実際の使用例

viewport メタタグ — モバイルフレンドリーの必須設定

基本構文

各属性の意味

その他の重要なメタタグ

文字コード指定

多言語対応（hreflang）

構造化データ（JSON-LD）

メタタグのよくある設定ミスと対処法

ミス1: title タグの重複

ミス2: description が全ページ同じ

ミス3: canonical の自己参照忘れ

ミス4: noindex の消し忘れ

ミス5: OGP画像のURL が相対パス

メタタグのチェック方法

ブラウザのDevToolsで確認

Google Search Console で確認

Lighthouse でのチェック

ToolCraft Lab のメタタグチェッカー

主な機能

使い方

Astro / Next.js でのメタタグ設定テンプレート

Astro テンプレート

メタタグ SEO チェックリスト

まとめ — メタタグの基本を押さえてSEOの土台を固めよう

関連記事

コーディング用プロンプトの書き方10パターン — AI を最大限に活かすプロンプトエンジニアリング

Claude Code ultrathink 完全ガイド — 拡張思考モードの使い方と効果的な活用法

cron式の書き方を完全解説 — 毎日・毎時・毎週のパターンを網羅【2026年版】