HTML を貼り付けて、Facebook・Twitter・LinkedIn・Slack のシェアカード表示をプレビューします。
HTML はブラウザ内で解析されます。サーバーへの送信も URL の取得も行いません。
How to brew the perfect cup of green tea
A complete guide to brewing Japanese green tea, covering water temperature, steep time, and tea-to-water ratios.
| htmlTitle | How to brew the perfect cup of green tea |
| metaDescription | A complete guide to brewing Japanese green tea, covering water temperature, steep time, and tea-to-water ratios. |
| title | How to brew the perfect cup of green tea |
| description | A complete guide to brewing Japanese green tea, covering water temperature, steep time, and tea-to-water ratios. |
| image | https://example.com/og/green-tea.jpg |
| url | https://example.com/blog/green-tea-guide |
| type | article |
| siteName | Tea Journal |
| twitterCard | summary_large_image |
| twitterSite | @teajournal |
| canonical | https://example.com/blog/green-tea-guide |
Article、Product、FAQ、LocalBusiness、Person、Event、Breadcrumbs の schema.org JSON-LD マークアップを生成。フォームベース、コピペで使えます。
utm_source / utm_medium / utm_campaign パラメータ付きの追跡可能 URL を生成。QR コード自動生成。GA4 / Universal Analytics 互換。
sitemap.xml の構造、lastmod 形式、hreflang 代替、URL 数制限をブラウザ内で検証します。
Googlebot などのクローラーが robots.txt の Allow/Disallow ルールを特定 URL にどう適用するかをシミュレートします。
Facebook・LinkedIn・Slack・Discord で URL を共有したり、Twitter/X にリンクを投稿すると、各プラットフォームは HTML <head> 内の Open Graph(og:*)と Twitter Card(twitter:*)メタタグを読み取り、タイトル・説明・画像付きのプレビューカードを生成します。og:image が欠けるとクリック率が 5〜10 倍下がることもあり、70 文字を超えるタイトルは目に見えて切り詰められます。Open Graph プレビューツールでは、任意の HTML を貼り付けるだけで、主要 4 プラットフォームでの表示を正確に確認できます — サーバーへのアップロードも、リモート URL の取得も一切行いません。バリデーターは必須タグの欠落、長すぎるタイトル/説明、相対パスの og:image、Twitter Card タイプの未設定なども指摘します。メタデータ変更を push する前の開発時や、デプロイ後に CMS・ヘッドレスフレームワーク・静的サイトジェネレーターが期待通りのメタデータを出力しているかを検証するのにご利用ください。
Facebook・LinkedIn・Slack はいずれも同じ 4 つのプロパティを基本要件とします: og:title(50〜60 文字)、og:description(150〜200 文字)、og:image(絶対 https URL、推奨 1200×630)、og:url(canonical)。Twitter/X では加えて、小さなサムネイルではなく大きなプレビューを表示したい場合に twitter:card を "summary_large_image" に設定する必要があります。og:site_name・og:type・twitter:site/twitter:creator は推奨ですが必須ではありません。