HTML meta SEO

HTMLメタタグとSEO入門
検索エンジンとSNSに最適化する

HTMLのメタタグの種類と役割を解説。SEO基本設定、OGP、Twitter Card、faviconまで、Webサイトの最適化を学べます。

こんな人向けの記事です

HTMLのmetaタグの種類を理解したい
SEOの基本設定を行いたい
OGPやTwitter Cardを設定したい

Step 1metaタグとは

metaタグは、HTMLドキュメントの <head> 内に記述する要素で、ページの「メタ情報」（ページそのものについての情報）をブラウザや検索エンジンに伝える役割を持ちます。

ユーザーの目には直接見えませんが、検索結果の表示、SNSでのシェア時のプレビュー、ブラウザの動作制御など、Webサイトの品質に大きく影響します。

HTML — head内の基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- ここにmetaタグを記述する -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ページの説明文">
  <title>ページタイトル</title>
</head>
<body>
  <!-- ページ本文 -->
</body>
</html>

metaタグの記述形式は大きく2種類あります：

形式	書き方	用途
`name` 属性	`<meta name="..." content="...">`	description, viewport, robots など
`http-equiv` 属性	`<meta http-equiv="..." content="...">`	文字コード、リダイレクト、キャッシュ制御

metaタグは自己閉じ要素

metaタグは閉じタグが不要な空要素（void element）です。<meta ... > と書くだけで完結します。XHTMLでは <meta ... /> とスラッシュを付けますが、HTML5では不要です。

Step 2必須metaタグ（charset, viewport）

すべてのHTMLページで必ず設定すべきmetaタグが2つあります。これらがないと、文字化けやスマホでの表示崩れが起きます。

charset — 文字エンコーディング

<meta charset="UTF-8"> は、ページの文字エンコーディングを指定します。これがないと、日本語が文字化けする原因になります。

HTML

<!-- 必ずhead内の最初に記述する（先頭1024バイト以内） -->
<meta charset="UTF-8">

charsetは最優先で記述

charset はブラウザがページを解析する前に読み取る必要があるため、<head> 内の最初の要素として記述してください。他のmetaタグやtitleタグより前に置くのがルールです。

viewport — レスポンシブ対応

viewport メタタグは、モバイルブラウザでの表示領域を制御します。これがないと、スマホでPCサイトが縮小表示されてしまいます。

HTML

<!-- レスポンシブデザインの基本設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewportの主要なプロパティ：

プロパティ	値	説明
`width`	`device-width`	デバイスの画面幅に合わせる
`initial-scale`	`1.0`	初期ズーム倍率（等倍）
`maximum-scale`	`1.0`	最大ズーム倍率（非推奨）
`user-scalable`	`no`	ズーム操作の無効化（非推奨）

user-scalable=no は使わない

user-scalable=no や maximum-scale=1.0 はユーザーのズーム操作を制限するため、アクセシビリティの観点から使用しないでください。視覚に障害のあるユーザーがページを拡大できなくなります。

Step 3SEO用metaタグ（title, description, robots）

検索エンジン最適化（SEO）に直接影響するmetaタグを3つ紹介します。これらを正しく設定することで、検索結果での表示を改善できます。

title — ページタイトル

厳密にはmetaタグではなく <title> 要素ですが、SEOにおいて最も重要な要素です。検索結果のタイトルとして表示されます。

HTML

<title>HTMLメタタグとSEO入門｜検索エンジンとSNSに最適化する</title>

効果的なtitleのポイント：

30〜60文字程度に収める（超過分は検索結果で省略される）
重要なキーワードを前方に配置する
ページ固有のタイトルにする（全ページ同じはNG）
「サイト名」は ｜ や - で区切って末尾に置く

description — ページの説明文

meta description は検索結果のスニペット（説明文）として表示されます。直接のランキング要因ではありませんが、クリック率（CTR）に大きく影響します。

HTML

<meta name="description" content="HTMLメタタグの種類と役割を解説。SEO基本設定、OGP、Twitter Card、faviconまで、Webサイトの最適化を網羅します。">

効果的なdescriptionのポイント：

70〜120文字程度が最適（PC: 約120文字、モバイル: 約70文字で切れる）
ページの内容を具体的に要約する
行動を促すフレーズを入れる（「解説します」「学べます」）
各ページでユニークにする

robots — クロール制御

meta robots は検索エンジンのクローラーに対してページのインデックス登録やリンクのフォローを制御します。

HTML

<!-- デフォルト（省略可）: インデックスする、リンクをフォローする -->
<meta name="robots" content="index, follow">

<!-- インデックスさせない（管理画面、テストページなど） -->
<meta name="robots" content="noindex, nofollow">

<!-- インデックスするが、リンクはフォローしない -->
<meta name="robots" content="index, nofollow">

<!-- キャッシュを保存させない -->
<meta name="robots" content="noarchive">

ディレクティブ	効果	使用場面
`index`	検索結果に表示する	デフォルト（省略可）
`noindex`	検索結果に表示しない	管理画面、重複ページ
`follow`	ページ内リンクをたどる	デフォルト（省略可）
`nofollow`	ページ内リンクをたどらない	ユーザー投稿コンテンツ
`noarchive`	キャッシュを保存しない	頻繁に更新するページ
`nosnippet`	スニペットを表示しない	特殊なケース

keywordsメタタグは不要

<meta name="keywords"> はかつてSEOに重要でしたが、現在Googleはランキング要因として無視しています。スパムに悪用されたためです。記述しても害はありませんが、効果もありません。

Step 4OGP（Open Graph Protocol）

OGP（Open Graph Protocol）は、Facebook が策定したメタデータ規格で、WebページがSNSでシェアされたときの表示内容を制御します。現在ではFacebook以外にも、LINE、Slack、Discordなど多くのサービスが対応しています。

HTML — OGP基本設定

<!-- OGP基本タグ -->
<meta property="og:title" content="HTMLメタタグとSEO入門">
<meta property="og:description" content="HTMLメタタグの種類と役割を解説。SEO基本設定からOGP、faviconまで網羅。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article/meta-tags-seo/">
<meta property="og:image" content="https://example.com/images/ogp-meta-tags.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">

OGPの主要プロパティ：

プロパティ	必須	説明
`og:title`	必須	シェア時に表示されるタイトル
`og:description`	推奨	シェア時の説明文
`og:type`	必須	コンテンツタイプ（website, article など）
`og:url`	必須	ページの正規URL
`og:image`	必須	シェア時のサムネイル画像URL
`og:site_name`	推奨	サイト名
`og:locale`	推奨	言語・地域（ja_JP）

og:image の推奨サイズ

OGP画像の推奨サイズは 1200×630ピクセル（アスペクト比 1.91:1）です。このサイズであれば、Facebook、LINE、Slackなど主要サービスできれいに表示されます。最低でも600×315ピクセル以上を推奨します。

og:type の主な値：

website — トップページ、一般的なページ
article — ブログ記事、ニュース記事
profile — 個人プロフィールページ
product — 商品ページ

OGP画像URLは絶対パスで

og:image の値は https:// から始まる絶対URLで指定してください。相対パス（/images/ogp.png）ではSNSのクローラーが画像を取得できません。

Step 5Twitter Card

Twitter Card は、X（旧Twitter）でURLがシェアされたときにリッチなプレビューを表示する仕組みです。OGPと似ていますが、Twitter独自のmetaタグを使います。

HTML — Twitter Card設定

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<meta name="twitter:title" content="HTMLメタタグとSEO入門">
<meta name="twitter:description" content="HTMLメタタグの種類と役割を解説。">
<meta name="twitter:image" content="https://example.com/images/twitter-card.png">

Twitter Cardには4種類のカードタイプがあります：

カードタイプ	表示	用途
`summary`	小さいサムネイル + タイトル + 説明	一般的な記事
`summary_large_image`	大きな画像 + タイトル + 説明	ブログ記事（推奨）
`app`	アプリダウンロード用カード	モバイルアプリ紹介
`player`	動画・音声プレーヤー埋め込み	動画コンテンツ

OGPとの併用がベストプラクティス

Twitter CardとOGPは併用するのが一般的です。Twitterのクローラーは、twitter:title が未設定の場合 og:title をフォールバックとして使用します。両方設定しておけば、あらゆるSNSで最適な表示が得られます。

OGPとTwitter Cardを統合した実用的なテンプレート：

HTML — OGP + Twitter Card 統合テンプレート

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル｜サイト名</title>
  <meta name="description" content="ページの説明文（70〜120文字）">

  <!-- OGP -->
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:image" content="https://example.com/images/ogp.png">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@your_account">
</head>

Twitter Cardのプレビュー確認

Twitter Card が正しく設定されているか確認するには、Twitter Card Validator を使います。OGPの確認には Facebook Sharing Debugger が便利です。キャッシュが残る場合があるので、変更後はツールで再スクレイピングしてください。

Step 6faviconと構造化データ

最後に、metaタグ以外で <head> 内に設定すべき重要な要素を紹介します。

favicon — サイトアイコン

faviconはブラウザのタブ、ブックマーク、スマホのホーム画面などに表示されるサイトのアイコンです。

HTML — favicon設定

<!-- 基本的なfavicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- SVGアイコン（モダンブラウザ推奨） -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Apple Touch Icon（iPhoneホーム画面用） -->
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

<!-- Web App Manifest（PWA用） -->
<link rel="manifest" href="/manifest.webmanifest">

favicon のポイント：

ICO形式は互換性が高いが、SVGの方がモダンで拡大縮小に強い
Apple Touch Iconは 180×180px が推奨
ダークモード対応が必要な場合はSVG内で prefers-color-scheme メディアクエリを使用

構造化データ（JSON-LD）

構造化データは、ページの内容を検索エンジンが理解しやすい形で記述するマークアップです。Googleの検索結果でリッチスニペット（評価、FAQ、パンくずリストなど）として表示されます。

HTML — JSON-LD構造化データ（記事）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTMLメタタグとSEO入門",
  "description": "HTMLメタタグの種類と役割を解説",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "datePublished": "2026-02-18",
  "dateModified": "2026-02-18",
  "publisher": {
    "@type": "Organization",
    "name": "サイト名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "image": "https://example.com/images/meta-tags-seo.png"
}
</script>

よく使われる構造化データの種類：

スキーマタイプ	表示効果	用途
`Article`	記事のリッチリザルト	ブログ、ニュース
`BreadcrumbList`	パンくずリスト	サイトナビゲーション
`FAQPage`	Q&Aの展開表示	FAQ、ヘルプページ
`HowTo`	手順のステップ表示	チュートリアル
`Product`	価格・評価の表示	ECサイト
`Organization`	企業情報パネル	コーポレートサイト

構造化データのテストツール

構造化データが正しいか確認するには、Google リッチリザルトテストを使います。エラーや警告をチェックし、リッチスニペットとして表示されるかプレビューできます。

canonical URL

同じコンテンツが複数のURLでアクセスできる場合、正規のURLを指定して重複を防ぎます。

HTML

<!-- 正規URLの指定 -->
<link rel="canonical" href="https://example.com/article/meta-tags-seo/">

✓まとめチェックリスト

charset — <meta charset="UTF-8"> をhead最初に記述
viewport — レスポンシブ対応の基本設定を入れる
title — 30〜60文字でキーワードを含むタイトルを設定
description — 70〜120文字でページ内容を要約
robots — インデックス不要なページには noindex を設定
OGP — og:title, og:description, og:image, og:url を設定
Twitter Card — summary_large_image + OGPの併用
favicon — ICOまたはSVG + Apple Touch Icon を設定
canonical — 正規URLを指定して重複コンテンツを防止
構造化データ — JSON-LDで記事情報をマークアップ

HTML — 完全なheadテンプレート

<head>
  <!-- 必須 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル｜サイト名</title>
  <meta name="description" content="ページの説明文">

  <!-- SEO -->
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/page/">

  <!-- OGP -->
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:image" content="https://example.com/ogp.png">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@your_account">

  <!-- favicon -->
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

  <!-- 構造化データ -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "ページタイトル",
    "description": "ページの説明文"
  }
  </script>
</head>

HTMLメタタグとSEO入門検索エンジンとSNSに最適化する

こんな人向けの記事です

Step 1metaタグとは

Step 2必須metaタグ（charset, viewport）

charset — 文字エンコーディング

viewport — レスポンシブ対応

Step 3SEO用metaタグ（title, description, robots）

title — ページタイトル

description — ページの説明文

robots — クロール制御

Step 4OGP（Open Graph Protocol）

Step 5Twitter Card

Step 6faviconと構造化データ

favicon — サイトアイコン

構造化データ（JSON-LD）

canonical URL

✓まとめチェックリスト

HTMLメタタグとSEO入門
検索エンジンとSNSに最適化する