Meta Tag Generator
SEO、Open Graph、Twitter Card向けのHTML meta tagsを生成します。GoogleおよびSNSでのページ表示をプレビュー。
動作方法: 下のページ詳細を入力 → GoogleおよびSNSでの表示をライブプレビュー → 生成されたHTMLをコピーしてWebサイトの<head> tagに貼り付け。
Google検索結果でのクリック可能なヘッドラインとして表示されます。60文字以下に保つ。
Google検索結果のタイトル下に表示されます。160文字以下に保つ。説得力のあるものにしましょう！
ページの完全なURL。SNSプレビューで使用されます。
複数のURLからページにアクセスできる場合のみ必要。Googleに「正式な」バージョンを伝えます。
Google Preview
https://example.com
My Awesome Website — Build Something Great
A modern web application that helps developers build better products faster. Free tools, guides, and resources.
Social Media Preview
example.com
My Awesome Website — Build Something Great
A modern web application that helps developers build better products faster. Free tools, guides, and resources.
Meta Tagsとは？
Meta tagsはWebページの<head>セクション内に配置されるHTML要素で、検索エンジンとSNSプラットフォームにページのメタデータを提供します。これらはGoogle検索結果でのページ表示、Twitter、Facebook、LinkedInおよび他のプラットフォームでの共有時の表示方法に影響します。
SEOに必須のMeta Tags
SEOで最も重要なmeta tagsはtitle tagとmeta descriptionです。title tag（50～60文字）は検索結果でのクリック可能なヘッドラインとして表示されます。meta description（150～160文字）はタイトル下のスニペットです。説得力のあるdescriptionはランキングに直接影響しなくても、クリック率を大幅に向上させることができます。
Open Graph Tags
Open Graph（OG）tagsはFacebook、LinkedIn、WhatsAppおよびOGプロトコルをサポートする他のプラットフォームでのコンテンツ表示方法を制御します。主要なtagsはog:title、og:description、og:image、og:urlです。専用のog:image（推奨サイズ：1200x630px）を使用することで、コンテンツ共有時のエンゲージメントが大幅に向上します。
Twitter Card Tags
Twitter Card tagsはTwitter/Xで共有されたときのコンテンツ表示方法を定義します。twitter:card typeはsummary、summary_large_image、app、またはplayerです。高品質な画像を使用したsummary_large_imageはプラットフォーム上でのエンゲージメントを大幅に増加させます。
Meta Tagsの追加方法
生成されたHTMLをコピーして、ページの<head>セクションに貼り付けます。Next.jsではlayout.tsxまたはpage.tsxでMetadata APIを使用します。WordPressではYoastまたはRankMathなどのSEOプラグインを使用します。GoogleのRich Results TestおよびSNS debuggerツールでtagsを検証します。