HTML ドキュメントの head 内に配置する <meta> タグは、検索エンジンのクローラー、SNS でのシェア表示、モバイル端末の表示最適化に必要なメタデータを提供します。
基本設定と SEO 向け Meta タグ
<!-- Character Encoding -->
<meta charset="UTF-8" />
<!-- Responsive Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO Meta Description -->
<meta name="description" content="HTML meta タグのリファレンス：SEO メタデータ、viewport のレスポンシブ設定、Open Graph (Facebook)、Twitter Cards、PWA アイコン設定。" />
<!-- Search Engine Indexing Directives -->
<meta name="robots" content="index, follow" />
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page" />
Open Graph プロトコル (Facebook, LinkedIn 等)
<meta property="og:type" content="article" />
<meta property="og:site_name" content="SiteName" />
<meta property="og:title" content="HTML Meta タグとソーシャルプレビュー チートシート" />
<meta property="og:description" content="HTML meta タグのリファレンス：SEO メタデータ、viewport のレスポンシブ設定、Open Graph (Facebook)、Twitter Cards、PWA アイコン設定。" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
ブログ記事向け拡張メタタグ
<meta property="article:published_time" content="2026-11-08T00:00:00+08:00" />
<meta property="article:author" content="https://example.com/author" />
<meta property="article:tag" content="Technology" />
Twitter / X Cards
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@MyBrand" />
<meta name="twitter:creator" content="@AuthorHandle" />
<meta name="twitter:title" content="HTML Meta タグとソーシャルプレビュー チートシート" />
<meta name="twitter:description" content="HTML meta タグのリファレンス：SEO メタデータ、viewport のレスポンシブ設定、Open Graph (Facebook)、Twitter Cards、PWA アイコン設定。" />
<meta name="twitter:image" content="https://example.com/images/card.jpg" />
PWA (プログレッシブウェブアプリ) とモバイルアプリアイコン
<!-- ブラウザのステータスバーのテーマカラー -->
<meta name="theme-color" content="#1a73e8" />
<!-- ウェブアプリマニフェスト -->
<link rel="manifest" href="/manifest.json" />
<!-- Apple Touch アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 標準ファビコン -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />