Softonic

メタタグジェネレーター

ステップ 1 / 3
基本 SEO
0/60
0/160
Robots
次へ

フォームを記入する、ページタイトル、説明、canonical URL、ソーシャル画像、著者、サイト名、Twitterハンドル、と、ジェネレーターはSEOの基本、Open Graph（Facebook、LinkedIn、Discord、Slack向け）、Twitter Card、ファビコン／Appleタッチアイコン、そして任意でArticleやProduct向けのSchema.org JSON-LDをカバーする、貼り付け可能なメタタグのブロックを出力します。静的サイトを手作業で組んでいるとき、または生の <head> エディタしか公開しないCMSにメタデータを追加するときに便利です。

headスニペットの作り方

  1. 1

    ページのメタデータを入力

    タイトル、説明、canonical URL、著者、サイト名。

  2. 2

    ソーシャル画像URLを追加

    `og:image` と `twitter:image` の両方に使われます。1200×630が理想的です。

  3. 3

    オプションを選択

    Twitterカードのタイプ、robotsディレクティブ、テーマカラー、Schema.orgのタイプ。

  4. 4

    出力をコピー

    `<head>...</head>` の間に貼り付け可能なHTMLの `<meta>` タグのブロック。

ジェネレーターが生成するもの

<!-- Primary Meta -->
<title>Page title、Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

フィールドごとの手引き

  • タイトル: 50〜60文字。主要なキーワードを含めます。ブランドは末尾に置きます: Page title、Brand。
  • 説明: 140〜160文字。単独でも読みやすく。ページ間で繰り返されるありきたりの文は避けます。
  • Canonical: https:// を含む絶対URL。og:url と一致させます。
  • OG画像: 最小1200×630 px（Facebookが好む比率1.91:1）。JPGまたはPNG。8 MB未満。
  • Twitterカード: 良い画像があれば summary_large_image、小さなサムネイルなら summary。
  • robots: 公開ページには index, follow、ステージングや内容の薄いページには noindex, nofollow。

任意の追加項目

  • JSON-LD をArticleやProductに使うと、Googleがリッチリザルト（著者、公開日、価格、レビューの星）を表示できます。
  • theme-color は、Android ChromeとiOS Safariでブラウザのクロムに色を付けます。
  • og:locale は多言語サイト向けです（例: en_US、es_ES）。
  • og:type=article の追加項目: article:published_time、article:author、article:section、article:tag。

このジェネレーターが防ぐよくある間違い

  • viewportタグの忘れ。 モバイルでページがデスクトップ幅、ズームレベル0.3で表示されます。
  • <title>、og:title、twitter:title で異なるタイトル。 シェアカードが一貫しなくなります。
  • og:image の相対画像URL。 Facebookはそれらを解決できず、カードのレンダリングに失敗します。
  • og:type の欠如。 デフォルトでも機能しますが、Facebookは明示的な値があるほうが好みます。

よくある質問

技術的には、Twitterは独自のタグがない場合にOpen Graphにフォールバックします。そのため、OGだけを設定してもTwitterはカードをレンダリングします。Twitter固有のタグを追加すると、体験をカスタマイズできます（例: 異なる画像のアスペクト比）。

1200×630 px（1.91:1）です。FacebookとLinkedInはこれをフルサイズで表示し、Twitterはサマリーカード用に切り抜きます。端に重要なコンテンツを置かないでください、中央の60%が安全地帯です。

いいえ。ページはそれがなくても問題なくランクされます。JSON-LDは、コンテンツの種類がSchema.orgのスキーマに一致するとき、リッチリザルト機能（レシピカード、FAQアコーディオン、商品リスト）を可能にします。合う場所に追加してください。

HTMLの <head> と </head> の間で、パーサーがそこに到達するのを遅らせる可能性のある外部スタイルシートやスクリプトの前に貼り付けてください。

いいえ。すべてはお使いのブラウザ内でローカルに生成されます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

このツールは他の言語でも利用できます