🏷️ メタタグ生成
<title>My Awesome Page</title> <meta name="description" content="A short description of the page for search engines." /> <meta property="og:type" content="website" /> <meta property="og:title" content="My Awesome Page" /> <meta property="og:description" content="A short description of the page for search engines." /> <meta property="og:url" content="https://example.com/" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:site_name" content="My Site" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Page" /> <meta name="twitter:description" content="A short description of the page for search engines." /> <meta name="twitter:image" content="https://example.com/og-image.png" />
ページタイトル・説明文・URL・画像URLなどを入力するだけで、基本的なSEOメタタグに加えて、OGP(Open Graph)タグとTwitterカードタグをまとめて生成できるツールです。SNSでシェアされたときの表示を整えたいときに便利です。
使い方
- ページタイトルと説明文を入力します。
- ページURL・画像URL・サイト名を入力します。
- Twitterカードの種類を選ぶと、HTMLタグが自動的に生成されます。「コピー」でコピーして<head>内に貼り付けます。
計算の仕組み
このツールは、検索エンジンやSNSでページがどう表示されるかを決める、HTMLの<head>に入れるタグをまとめて作ります。 ・<title>: ブラウザのタブや検索結果の見出しになるページのタイトル ・meta description: 検索結果でタイトルの下に表示されることがある説明文 ・Open Graph（og:〜）: Facebook、LINE、Slackなどでリンクを共有したときのタイトル・説明・画像 ・Twitterカード（twitter:〜）: X（旧Twitter）で共有したときの表示形式 タイトルや説明に「"」「<」「&」などが含まれていても、HTMLとして正しくなるように自動で変換（エスケープ）します。Twitterカードの形式は、小さい画像の「summary」と、大きい画像の「summary_large_image」から選べます。
計算例
出力例（一部） <title>My Awesome Page</title> <meta name="description" content="A short description of the page for search engines." /> <meta property="og:title" content="My Awesome Page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta name="twitter:card" content="summary_large_image" /> タイトルに「Tom & Jerry」と入力すると、Tom & Jerry に変換されます。
使用上の注意
- og:imageは、1200×630ピクセル（比率1.91:1）程度の画像がよく推奨されます。URLはhttps://から始まる絶対URLで指定してください。
- Googleは、meta descriptionをそのまま使わず、ページの本文から説明を作ることもあります。
- SNSは共有されたページの情報を一時的に保存するため、タグを変えてもすぐには反映されないことがあります。
よくある質問
OGP画像の推奨サイズはどのくらいですか?
一般的には1200×630ピクセル程度が推奨されています。
summaryとsummary_large_imageの違いは何ですか?
summaryは小さな正方形の画像、summary_large_imageは横長の大きな画像でカードが表示される形式です。ほとんどの場合summary_large_imageが見栄えが良く推奨されます。
生成されたタグはどこに貼り付ければいいですか?
HTMLファイルの<head>タグ内に貼り付けてください。