URLを貼り付けるか、以下のフィールドを入力すると、Facebook・Twitter・LinkedIn・Google検索でページがどのように表示されるかをリアルタイムでプレビューできます。 OGプロパティ設定 <div class="og-section-label">基本タグ</div> <div class="og-field"> <label for="og-title">og:title（タイトル）</label> <input type="text" id="og-title" placeholder="ページのタイトル" maxlength="200"> <div class="og-char-info" id="og-title-count">0 / 60</div> </div> <div class="og-field"> <label for="og-description">og:description（説明文）</label> <textarea id="og-description" placeholder="ページ内容の簡潔な説明..."></textarea> <div class="og-char-info" id="og-desc-count">0 / 160</div> </div> <div class="og-field"> <label for="og-url">og:url（ページURL）</label> <input type="url" id="og-url" placeholder="https://example.com/page"> </div> <div class="og-field"> <label for="og-image">og:image（画像URL）</label> <input type="url" id="og-image" placeholder="https://example.com/image.jpg"> <div class="og-img-hint">推奨サイズ: <span>1200 × 630 px</span>（比率 1.91:1）· 最小 600 × 315 px · 最大 8 MB</div> </div> <div class="og-field"> <label for="og-type">og:type（コンテンツ種別）</label> <select id="og-type"> <option value="website">website（Webサイト）</option> <option value="article">article（記事）</option> <option value="product">product（商品）</option> <option value="video.other">video.other（動画）</option> <option value="music.song">music.song（楽曲）</option> <option value="book">book（書籍）</option> <option value="profile">profile（プロフィール）</option> </select> </div> <div class="og-field"> <label for="og-site-name">og:site_name（サイト名）</label> <input type="text" id="og-site-name" placeholder="あなたのサイト名"> </div> <div class="og-section-label" style="margin-top:22px;">Twitterカード設定</div> <div class="og-field"> <label for="tw-card">twitter:card（カード種別）</label> <select id="tw-card"> <option value="summary_large_image">summary_large_image（大きな画像）</option> <option value="summary">summary（正方形の小さな画像）</option> </select> </div> <div class="og-field"> <label for="tw-title">twitter:title <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:title を使用）</em></label> <input type="text" id="tw-title" placeholder="Twitter専用タイトル（任意）"> <div class="og-char-info" id="tw-title-count">0 / 70</div> </div> <div class="og-field"> <label for="tw-description">twitter:description <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:description を使用）</em></label> <textarea id="tw-description" placeholder="Twitter専用説明文（任意）"></textarea> <div class="og-char-info" id="tw-desc-count">0 / 200</div> </div> <div class="og-field"> <label for="tw-image">twitter:image <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:image を使用）</em></label> <input type="url" id="tw-image" placeholder="https://example.com/twitter-image.jpg"> <div class="og-img-hint">summary_large_image: <span>1200 × 628 px</span> · summary: <span>144 × 144 px</span></div> </div> <div class="og-btn-row"> <button class="og-btn og-btn-primary" id="og-generate-btn">HTMLメタタグを生成</button> <button class="og-btn og-btn-secondary" id="og-clear-btn">全てクリア</button> </div> 画像サイズ推奨一覧 <table class="og-dim-table"> <thead> <tr> <th>プラットフォーム</th> <th>推奨サイズ</th> <th>比率</th> <th>上限</th> </tr> </thead> <tbody> <tr> <td><strong>Facebook</strong></td> <td>1200 × 630 px</td> <td>1.91:1</td> <td>8 MB</td> </tr> <tr> <td><strong>Twitter 大画像</strong></td> <td>1200 × 628 px</td> <td>約1.91:1</td> <td>5 MB</td> </tr> <tr> <td><strong>Twitter 小画像</strong></td> <td>144 × 144 px</td> <td>1:1</td> <td>5 MB</td> </tr> <tr> <td><strong>LinkedIn</strong></td> <td>1200 × 627 px</td> <td>1.91:1</td> <td>5 MB</td> </tr> <tr> <td><strong>Google検索</strong></td> <td>（テキストのみ）</td> <td>—</td> <td>—</td> </tr> </tbody> </table> <div style="margin-top:20px;"> <div class="og-section-label">文字数の目安</div> <table class="og-dim-table"> <thead> <tr><th>プラットフォーム</th><th>タイトル</th><th>説明文</th></tr> </thead> <tbody> <tr><td><strong>Facebook OG</strong></td><td>約60文字</td><td>約160文字</td></tr> <tr><td><strong>Twitter</strong></td><td>約70文字</td><td>約200文字</td></tr> <tr><td><strong>LinkedIn</strong></td><td>約119文字</td><td>約300文字</td></tr> <tr><td><strong>Google検索</strong></td><td>約60文字</td><td>約160文字</td></tr> </tbody> </table> </div> <div style="margin-top:20px;"> <div class="og-section-label">設定のコツ</div> <ul style="font-size:12.5px;color:#374151;padding-left:18px;line-height:1.9;"> <li>画像URLは必ずHTTPSを使用してください（HTTPはブロックされる場合があります）。</li> <li>FacebookはOGデータをキャッシュします。<a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener" style="color:#4f6ef7;">シェアデバッガー</a>でキャッシュを更新できます。</li> <li>Twitterは初回シェア時に画像をクロールします。144×144 px未満の画像は無視されます。</li> <li>LinkedInは7日間キャッシュされます。新しいURLを投稿すると再クロールされます。</li> <li>タイトルは60文字以内にするとGoogle検索での切り詰めを防げます。</li> <li>og:titleと&lt;title&gt;タグの重複は可能な限り避けましょう。</li> </ul> </div> ライブプレビュー <!-- Facebook --> <div> <div class="og-card-label">Facebook</div> <div class="og-card-fb" id="prev-fb"> <div class="og-card-img" id="prev-fb-img-wrap"> <span>画像URLを入力してください</span> </div> <div class="og-card-body"> <div class="og-card-domain" id="prev-fb-domain">example.com</div> <div class="og-card-title" id="prev-fb-title">ページタイトルがここに表示されます</div> <div class="og-card-desc" id="prev-fb-desc">ページの説明文がここに表示されます。</div> </div> </div> </div> <!-- Twitter --> <div> <div class="og-card-label">Twitter / X</div> <div class="og-card-tw summary-large" id="prev-tw"> <div class="og-tw-inner"> <div class="og-card-img-tw" id="prev-tw-img-wrap" style="aspect-ratio:2/1;"> <span>画像URLを入力してください</span> </div> <div class="og-card-body-tw"> <div class="og-card-domain-tw" id="prev-tw-domain">example.com</div> <div class="og-card-title-tw" id="prev-tw-title">ページタイトルがここに表示されます</div> <div class="og-card-desc-tw" id="prev-tw-desc">ページの説明文がここに表示されます。</div> </div> </div> </div> </div> <!-- LinkedIn --> <div> <div class="og-card-label">LinkedIn</div> <div class="og-card-li" id="prev-li"> <div class="og-card-img-li" id="prev-li-img-wrap"> <span>画像URLを入力してください</span> </div> <div class="og-card-body-li"> <div class="og-card-title-li" id="prev-li-title">ページタイトルがここに表示されます</div> <div class="og-card-domain-li" id="prev-li-domain">example.com</div> </div> </div> </div> <!-- Google SERP --> <div> <div class="og-card-label">Google検索結果</div> <div class="og-card-google"> <div class="og-serp-url"> <span id="prev-g-sitename">あなたのサイト</span> &rsaquo; <span class="og-serp-breadcrumb" id="prev-g-breadcrumb">example.com</span> </div> <div class="og-serp-title" id="prev-g-title">ページタイトルがここに表示されます</div> <div class="og-serp-desc" id="prev-g-desc">ページの説明文がここに表示されます。Googleはクエリに関連性が高いと判断したページ内のテキストで説明を上書きする場合があります。</div> </div> </div> 生成されたHTMLメタタグ クリップボードにコピー コピーしました! 📊 ビジネスの会計・経理もスマートに管理しませんか？ freeeなら請求書発行・確定申告・給与計算をクラウドで一元管理。個人事業主から法人まで対応。面倒な帳簿作業を自動化して、本業に集中できます。 ...

プリセット フェードイン フェードアウト 左からスライド 右からスライド 下からスライド 上からスライド バウンス パルス シェイク スピン フリップ スウィング アニメーションプロパティ 時間（秒） 1s ...

年齢計算 日数計算 生年月日 基準日（デフォルト: 今日） 計算する リセット 満年齢 総月数 ヶ月 総週数 週 総日数 日 総時間数 時間（概算） 📅 生まれた曜日 🌟 星座 🐉 干支（十二支） 🏯 和暦（生年） 🏯 和暦（基準日） 🎂 誕生日の元号 🎉 次の誕生日まで 🏆 人生のマイルストーン 開始日 終了日 計算する リセット 期間 日間 週数 週 月数（概算） ヶ月 年数（概算） 年 時間数 時間 📅 開始日の曜日 📅 終了日の曜日 正確な年齢の計算方法 年齢の計算は「誕生日の前日が終わった瞬間に年齢が加算される」という「年齢計算ニ関スル法律（明治35年）」に基づいています。つまり、誕生日の前日の午後12時（深夜0時）に満年齢が1つ増えるため、法律的には誕生日当日ではなく「誕生日の前日」に年齢が変わります。このツールでは、より直感的な「誕生日当日に年齢が増える」計算を採用しています。月・日の計算については、基準日の日付が誕生日の日付より小さい場合は前の月に繰り戻して残り日数を計算する「満年齢方式」を用いています。 ...

コードのインデントスタイルを瞬時に変換。2スペース・4スペース・タブを自由に切り替え、混在インデントを修正し、空白文字をプレビューしながら結果をコピーできます。 タブ変換 → タブ⇔スペース変換 HTMLを整形 → HTML整形ツール 事業の請求書・経費管理もかんたんに freee会計なら、請求書作成・経費精算・確定申告までクラウドで一元管理。無料トライアル実施中。 freeeを無料で試す → 変換元： 自動検出 2スペース 4スペース タブ コードを貼り付けて検出 変換先： 2スペース 4スペース タブ レベル調整： − 減らす + 増やす 行末空白を除去 混在インデントを修正 空白文字を表示 変換 入出力を入替 クリア ファイルを開く 入力 貼り付け 出力 コピー コピーしました！ 行数: 0 入力文字数: 0 出力文字数: 0 タブインデント行: 0 スペースインデント行: 0 混在行: 0 使い方： ...

数字 サイコロ コイン リスト 最小値 最大値 生成数 <div class="rng-toggle-row"> <label class="rng-toggle" for="rng-no-dup"> <input type="checkbox" id="rng-no-dup"> <span class="rng-toggle-slider"></span> </label> <span class="rng-toggle-label">重複なし</span> </div> <div class="rng-result-box" id="rng-number-result-box"> <div id="rng-number-output" class="rng-result-number">—</div> <div class="rng-result-label" id="rng-number-label">生成ボタンを押してください</div> </div> <div class="rng-btn-row"> <button class="rng-btn rng-btn-primary" onclick="rngGenerateNumber()">&#9656; 生成する</button> <button class="rng-btn rng-btn-secondary" onclick="rngCopyResult()">&#128203; コピー</button> </div> サイコロの数： − 2個 + サイコロを振るボタンを押してください ▸ サイコロを振る ? コインを投げるボタンを押してください ▸ コインを投げる リスト（1行に1項目） — ▸ ランダムに選ぶ 生成履歴 クリア まだ履歴がありません。 使い方 数字モード： 最小値・最大値・生成数を入力して「生成する」を押すだけ。重複なしトグルをオンにすると、同じ数字が出ない抽選が可能です。 ...

CSS Flexbox プレイグラウンド すべてのFlexboxプロパティをビジュアルで実験できます。アイテムをクリックして個別プロパティを調整。生成CSSはそのままコピー可能。 ...

すべて 1xx 情報 2xx 成功 3xx リダイレクト 4xx クライアントエラー 5xx サーバーエラー 条件に一致するステータスコードが見つかりません。 ...

Cron式をビジュアル作成 毎分 毎時00分 毎日深夜0時 毎日9時 毎週日曜深夜 毎月1日深夜 平日9時 5分ごと 15分ごと 元日深夜（年次） 分（Minute） 時（Hour） 日（Month） 月（Month） 曜日（Week） * * * * * コピー 日本語での説明 毎分実行 次回5回の実行予定時刻 既存のCron式を検証 検証 クリア 確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。 ...

前景色（テキスト色）と背景色を入力するだけで、WCAG 2.1 コントラスト比を即座に計算します。通常テキスト・大きなテキスト・UIコンポーネントそれぞれについて、AA・AAAレベルの合否をリアルタイムで確認できます。 ...

ブラウザタブ・ブックマーク・Google検索結果・スマホのホーム画面でファビコンがどう見えるかを確認できます。すべてブラウザ内で完結し、画像はサーバーにアップロードされません。 関連ツール： ファビコンを生成 → ファビコンジェネレーター | メタタグ → メタタグジェネレーター ここにファビコンをドラッグ＆ドロップ ...