すべてのWebサイトに必要なメタタグ：HTML メタタグ完全ガイド

メタタグはすべてのウェブページの見えない骨格です。検索エンジンにページの内容を伝え、SNSでのコンテンツ表示を制御し、ブラウザの動作に影響を与えます。この完全なHTML メタタグガイドは、2026年にあなたのウェブサイトに必要なすべてのメタタグをカバーします。

無料のメタタグジェネレーターで完璧なメタタグを生成 →

すべてのページに必要な基本メタタグ

これらはすべてのHTMLページに含めるべき最低限のメタタグです。

charset

The charset meta tag declares the character encoding for the HTML document. UTF-8 is the universal standard that supports all languages and special characters.

<meta charset="UTF-8">

Always place this tag as the first element inside <head>. If the browser encounters content before knowing the encoding, it may re-parse the entire page, causing a flash of garbled text.

viewport

The viewport meta tag is essential for responsive design. It tells mobile browsers how to scale and size the page.

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

Without this tag, mobile browsers render the page at a desktop width (typically 980px) and then shrink it to fit the screen. This makes text unreadable and buttons untappable. Google uses mobile-first indexing, so a missing viewport tag directly hurts your search rankings.

title

While technically not a meta tag, the <title> element is the single most important tag for SEO. It appears in browser tabs, search results, and social shares.

<title>Your Page Title — Brand Name</title>

Best practices for title tags:

Keep it under 60 characters to avoid truncation in search results
Put the primary keyword near the beginning
Make each page title unique across your entire site
Use a separator (—, |, or :) between the page title and brand name

description

The meta description provides a summary of the page content. Search engines display it below the title in search results.

<meta name="description" content="A concise, compelling summary of your page content. Include your target keyword naturally. Keep between 120-160 characters.">

A well-written meta description can significantly improve your click-through rate (CTR) from search results, even though Google has confirmed it is not a direct ranking factor. Think of it as your page's advertisement in the search results.

SEOメタタグ

SEOメタタグは、Google、Bingなどの検索エンジンがコンテンツを理解し、適切にインデックスするのに役立ちます。

robots

The robots meta tag controls how search engines crawl and index your page. It is one of the most powerful — and most dangerous — meta tags if misconfigured.

<!-- Allow indexing and following (default behavior) -->
<meta name="robots" content="index, follow">

<!-- Block indexing but allow link following -->
<meta name="robots" content="noindex, follow">

<!-- Block everything -->
<meta name="robots" content="noindex, nofollow">

<!-- Prevent caching of the page -->
<meta name="robots" content="noarchive">

<!-- Prevent snippet in search results -->
<meta name="robots" content="nosnippet">

<!-- Specific to Google -->
<meta name="googlebot" content="index, follow">

Common robots directives include: index / noindex (whether to include in search results), follow / nofollow (whether to follow links on the page), noarchive (prevent cached copies), nosnippet (prevent text snippets), and max-snippet:[number] (limit snippet length).

canonical

The canonical link element tells search engines which URL is the "master" version of a page. This is critical for avoiding duplicate content penalties.

<link rel="canonical" href="https://example.com/blog/meta-tags-guide">

Use canonical tags when: the same content is accessible via multiple URLs (with/without trailing slash, with/without www, HTTP vs HTTPS), you have paginated content, or URL parameters create duplicate pages (e.g., ?sort=price).

hreflang

If your site serves content in multiple languages or targets different regions, hreflang tags tell search engines which version to show to which audience.

<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="de" href="https://example.com/de/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">

The x-default value specifies the fallback URL for users whose language is not explicitly listed. Always include it as a best practice.

Open Graphメタタグ

Open GraphタグはFacebook、LinkedIn、Discord、Slackなどでコンテンツが共有された際の表示を制御します。

<!-- Required Open Graph Tags -->
<meta property="og:title" content="Meta Tags Every Website Needs">
<meta property="og:description" content="A complete guide to HTML meta tags for SEO, social sharing, security, and performance.">
<meta property="og:image" content="https://example.com/images/meta-tags-guide.jpg">
<meta property="og:url" content="https://example.com/blog/meta-tags-guide">
<meta property="og:type" content="article">

<!-- Recommended Open Graph Tags -->
<meta property="og:site_name" content="DevToolBox">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Meta tags guide cover image">

Key points about Open Graph tags:

og:image should be at least 1200 x 630 pixels for high-resolution displays
Use an absolute URL for og:image, not a relative path
og:type should be website for homepages and article for blog posts
og:url should match your canonical URL
Facebook caches Open Graph data aggressively — use the Sharing Debugger to refresh it after changes

Twitter Cardメタタグ

Twitter（X）はリッチリンクプレビュー用の独自のメタタグを使用します。

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags Every Website Needs">
<meta name="twitter:description" content="A complete guide to HTML meta tags for SEO, social sharing, and performance.">
<meta name="twitter:image" content="https://example.com/images/meta-tags-guide.jpg">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:creator" content="@authorhandle">

Twitter Card types:

summary — Small square image with title and description (default)
summary_large_image — Large rectangular image above the title (recommended for articles)
player — For video or audio content with an inline player
app — For mobile app deep links with install buttons

For most websites, summary_large_image is the best choice as it provides the most visual impact in the Twitter timeline. The recommended image size is 1200 x 600 pixels with a 2:1 aspect ratio.

セキュリティメタタグ

セキュリティ関連のメタタグは、一般的なWeb脆弱性からサイトとユーザーを保護します。

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'">

<!-- Prevent clickjacking (X-Frame-Options equivalent) -->
<meta http-equiv="X-Frame-Options" content="DENY">

<!-- Control referrer information -->
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Prevent MIME type sniffing -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">

<!-- Prevent DNS prefetching (privacy) -->
<meta http-equiv="x-dns-prefetch-control" content="off">

Important notes about security meta tags:

Content-Security-Policy (CSP) — Prevents XSS attacks by restricting where resources can be loaded from. While HTTP headers are preferred, the meta tag version works for static sites without server control.
referrer — The strict-origin-when-cross-origin value is the best balance between privacy and functionality. It sends the full URL for same-origin requests but only the origin for cross-origin requests.
X-Frame-Options — Prevents your page from being embedded in iframes on other sites (clickjacking protection). Use DENY to block all framing or SAMEORIGIN to allow same-domain framing only.

パフォーマンスメタタグ

パフォーマンスメタタグは、必要なリソースに関する早期ヒントを提供し、ブラウザがページをより速く読み込むのに役立ちます。

<!-- DNS Prefetch: resolve DNS for external domains early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- Preconnect: establish full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

<!-- Preload: fetch critical resources immediately -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/images/hero.webp" as="image">

<!-- Prefetch: fetch resources for likely next navigation -->
<link rel="prefetch" href="/next-page.html">

<!-- Module preload for ES modules -->
<link rel="modulepreload" href="/js/app.js">

Performance hint priority guide:

dns-prefetch — Cheapest hint. Use for any third-party domain you will reference. Saves 20–120ms per domain.
preconnect — More expensive but faster. Use for critical third-party resources (fonts, CDN). Limit to 2–4 domains to avoid connection contention.
preload — Forces immediate download. Use sparingly for above-the-fold critical resources (hero image, critical CSS, web fonts). Overuse can actually hurt performance by competing for bandwidth.
prefetch — Low-priority download during idle time. Use for resources needed on the next likely page navigation.

モバイル＆アプリメタタグ

これらのメタタグは、モバイルデバイスでのサイトの動作を制御します。

<!-- Theme color for browser chrome (address bar, task switcher) -->
<meta name="theme-color" content="#1a1a2e">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

<!-- Apple iOS Web App -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyApp">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-config" content="/browserconfig.xml">

<!-- Disable auto-detection (prevent phone numbers from becoming links) -->
<meta name="format-detection" content="telephone=no">

The theme-color meta tag is particularly impactful on mobile. It colors the browser's address bar and UI elements to match your brand. With the media attribute, you can set different colors for light and dark mode, creating a polished native-app feel.

構造化データ用メタタグ

これらのメタタグは、構造化データとコンテンツの帰属に役立つ追加のコンテキストを提供します。

<!-- Author information -->
<meta name="author" content="John Doe">
<link rel="author" href="https://example.com/about/john-doe">

<!-- Article metadata (for blog posts) -->
<meta property="article:published_time" content="2026-02-10T08:00:00Z">
<meta property="article:modified_time" content="2026-02-10T12:00:00Z">
<meta property="article:author" content="https://example.com/about/john-doe">
<meta property="article:section" content="Web Development">
<meta property="article:tag" content="meta tags">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="HTML">

<!-- Generator (if using a CMS or framework) -->
<meta name="generator" content="Next.js 16">

The article:published_time and article:modified_time tags use the ISO 8601 date format. Search engines use these dates to display "Published on" and "Updated on" labels in search results, which can improve click-through rates for fresh content.

避けるべき一般的な間違い

重複するメタディスクリプション——各ページにユニークな説明が必要です。
viewportタグの欠如——これがないとモバイルフレンドリーになりません。
meta keywordsの使用——Googleは2009年から無視しています。
タイトルが長すぎる——60文字以内に保ちましょう。
説明が長すぎる——120〜160文字に保ちましょう。
Open Graph画像の欠如——画像なしの共有はエンゲージメントが低下します。
画像サイズの間違い——Open Graphには1200×630pxを使用。
canonical URLの忘れ——これがないと重複コンテンツがSEO権威を分散させます。
誤ってインデックスをブロック——robotsタグを再確認してください。
ソーシャルプレビューのテスト忘れ——Facebook デバッガーとTwitterバリデーターで必ずテストしてください。

完全なメタタグテンプレート

以下は本番環境で使えるHTMLヘッドテンプレートです。コピーしてプレースホルダーを置き換えてください：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Essential -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title — Brand Name</title>
  <meta name="description" content="A compelling description of this page (120-160 characters).">

  <!-- SEO -->
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/current-page">
  <link rel="alternate" hreflang="en" href="https://example.com/en/current-page">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/current-page">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/current-page">

  <!-- Open Graph -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A compelling description of this page.">
  <meta property="og:image" content="https://example.com/images/page-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Description of the image">
  <meta property="og:url" content="https://example.com/current-page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Brand Name">
  <meta property="og:locale" content="en_US">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="A compelling description of this page.">
  <meta name="twitter:image" content="https://example.com/images/page-image.jpg">
  <meta name="twitter:site" content="@brandhandle">

  <!-- Security -->
  <meta http-equiv="X-Content-Type-Options" content="nosniff">
  <meta name="referrer" content="strict-origin-when-cross-origin">

  <!-- Performance -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Mobile & App -->
  <meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

  <!-- Structured Data -->
  <meta name="author" content="Author Name">
  <meta property="article:published_time" content="2026-01-15T08:00:00Z">

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
</head>
<body>
  <!-- Your content here -->
</body>
</html>

よくある質問

メタディスクリプションの最適な長さは？

最適な長さは120〜160文字です。Googleはデスクトップで最大155〜160文字、モバイルで約120文字を表示します。

meta keywordsはまだSEOに重要ですか？

いいえ。Googleは2009年にmeta keywordsをランキング要因として使用しないことを公式に確認しました。

Open GraphとTwitter Cardsの違いは？

Open GraphはFacebookが作成し、ほとんどのSNSで使用されます。Twitter CardsはTwitter独自のシステムです。Twitter固有のタグがない場合、OGタグにフォールバックします。

メタタグが正しく機能しているか確認するには？

Facebook共有デバッガー、Twitter Cardバリデーター、Googleリッチリザルトテストを使用してください。

すべてのページで同じメタタグを使うべきですか？

いいえ。charsetやviewportなどの構造タグは一貫させますが、title、description、og:imageなどのコンテンツタグはページごとにユニークにすべきです。

メタタグジェネレーターを試す →