0/60 文字
0/160 文字

生成されたメタタグ

0 タグ
<!-- 上のフォームに入力するとメタタグが生成されます -->

Googleプレビュー

ページタイトル
https://example.com
メタディスクリプションがここに表示されます。検索結果で省略されないよう、150〜160文字程度にするのがおすすめです。

SNSプレビュー

画像が設定されていません
example.com
ページタイトル
Open Graphの説明文がここに表示されます。

プリセット

SEOのヒント

タイトル

60文字以内を目安にし、主要キーワードをできるだけ前半に入れます。

説明文

160文字以内を目安にし、クリックしたくなる要約と行動喚起を書きます。

OG画像

SNSで最適に表示されるよう、1200x630pxの画像を使用します。

Canonical URL

重複コンテンツ問題を防ぎます。必ず完全な絶対URLを使用してください。

メタタグジェネレーターについて

検索エンジンでの表示とSNS共有を改善するためのHTMLメタタグを作成できます。ページ情報を入力するだけで、Google検索とSNSプレビューを確認しながら、すぐ使えるメタタグを生成できます。

✓基本SEOメタタグ（title、description、keywords）
✓FacebookとLinkedIn向けOpen Graphタグ
✓X（Twitter）向けTwitter Cardタグ
✓Google検索とSNS共有のライブプレビュー
✓SEO推奨に沿った文字数カウント
✓よく使うページタイプ向けプリセット6種類

HTMLメタタグの完全ガイド

無料オンラインメタタグジェネレーター

この無料オンラインツールで、Webサイト向けに最適化されたHTMLメタタグを生成できます。基本SEOタグ、SNS共有向けOpen Graphタグ、Twitter Cardタグをまとめて作成できます。

メタタグとは？

メタタグはWebページのheadセクションに配置されるHTML要素です。検索エンジン、SNSプラットフォーム、ブラウザへページのメタデータを伝え、検索結果や共有リンクプレビューでの表示を制御します。

SEOに重要なメタタグ

<!-- Basic Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title - Site Name</title>
<meta name="description" content="Page description here">
<meta name="keywords" content="keyword1, keyword2">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">

Open Graphメタタグ

Open Graphタグは、Facebook、LinkedIn、メッセージアプリなどでページが共有されたときに表示されるタイトル、説明、画像、リンクプレビューを制御します。

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:site_name" content="Site Name">

Twitter Cardメタタグ

Twitter Cardタグは、X（Twitter）でリンクがどのように表示されるかを制御します。Twitter専用タグがない場合、多くのプラットフォームは対応するOpen Graphの値を使用します。

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yoursite">

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

推奨文字数

  • Title: 50〜60文字
  • Description: 150〜160文字
  • OG title: 最大95文字
  • OG description: 最大200文字
  • Twitter title: 最大70文字

画像の推奨設定

  • OG image: 1200x630ピクセル
  • Twitter image: 1200x628ピクセル
  • 最大ファイルサイズ: 5MB未満
  • 形式: JPG、PNG、WebP
  • 大きな画像のアスペクト比: 1.91:1

SEOでメタタグが重要な理由

検索エンジンでの利点

  • 検索結果スニペットを制御
  • クリック率を改善
  • 重複コンテンツ問題を防止
  • robotsタグでクローラー動作を指示
  • canonical URLを指定

SNSでの利点

  • 目を引く共有プレビューを作成
  • プラットフォームごとにタイトルと説明を調整
  • 各SNSに合わせて画像を最適化
  • 共有リンクのエンゲージメントを増加
  • ブランド表現を一貫させる

このツールの使い方

  1. 基本メタ情報を入力: ページタイトル、説明、キーワード、著者、canonical URLを入力します。
  2. Open Graphタグを設定: Facebook、LinkedInなどでの表示をカスタマイズします。
  3. Twitter Cardを設定: X（Twitter）共有用タグとプレビューテキストを設定します。
  4. プレビュー: GoogleとSNSプレビューでページの見え方を確認します。
  5. プリセットを使用: ブログ、商品、ポートフォリオ、ランディングページなどの一般的なページタイプからすばやく開始できます。
  6. コピーまたはダウンロード: 生成されたメタタグをコピーまたはHTMLファイルとしてダウンロードし、ページのheadに貼り付けます。

こんな人に最適

  • Web開発者とデザイナー
  • SEO担当者
  • コンテンツマーケター
  • デジタルマーケティングチーム
  • ブロガーとコンテンツ制作者
  • ECサイト運営者
  • SNSマネージャー
  • スタートアップ創業者
  • フリーランス開発者
  • Webサイト管理者
  • WordPressサイト運営者
  • SEOを学ぶ学生

完全なプライバシー保護

すべてのメタタグ生成はJavaScriptを使ってブラウザ内で行われます。データがサーバーへ送信されることはないため、ページ情報やSEO詳細はプライベートに保たれます。

関連するSEO・Web開発ツール

</>&&amp;&lt; &gt;

HTMLエンティティエンコーダー

メタタグ内のコンテンツを安全に扱うため、HTMLエンティティをエンコード・デコードできます。

JSONフォーマッター

SEOスキーママークアップ向けのJSON-LD構造化データを整形・検証できます。

HTML圧縮

ページ読み込みを速くするため、メタタグを含むHTMLコードを圧縮できます。

Markdownエディター

適切なメタタグが必要なページ向けに、コンテンツを作成・プレビューできます。

HTMLテーブルジェネレーター

Webページ上の構造化データ向けにHTMLテーブルを生成できます。

<meta>

CSSグラデーションジェネレーター

WebサイトデザインやSNSプレビュー画像向けにCSSグラデーションを作成できます。