下記のメタタグを設定することで、SNS（旧TwitterやFacebook）で、リンクを共有する際に、タイトル、説明、画像などを取得できるようになります。
目次
X（旧Twitter）向けメタタグ
Xでのカード表示のために使用されるメタタグ（Twitter Cards用メタタグ）を使用します。
|
1 2 3 4 5 6 7 8 9 10 |
<!-- X Cards（旧Twitter Cards）基本タグ --> <meta name="twitter:card" content="summary_large_image"> <!-- カードのタイプ（例: "summary", "summary_large_image"） --> <meta name="twitter:site" content="@あなたのアカウント名"> <!-- サイトのXアカウント（例: "@example"） --> <meta name="twitter:title" content="ページのタイトル"> <!-- ページのタイトル --> <meta name="twitter:description" content="ページの説明"> <!-- ページの説明 --> <meta name="twitter:image" content="画像URL"> <!-- ページの代表画像URL --> <meta name="twitter:image:alt" content="画像の説明"> <!-- 画像の代替テキスト --> <meta name="twitter:creator" content="@作成者のアカウント名"> <!-- コンテンツ作成者のXアカウント --> |
Facebook向けメタタグ（Open Graph）
Facebook向けのタグは、Open Graphプロトコルを使用します。
LinkedInなども同様となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Open Graph基本タグ --> <meta property="og:type" content="website"> <!-- コンテンツの種類（例: "website", "article"） --> <meta property="og:title" content="ページのタイトル"> <!-- ページのタイトル --> <meta property="og:description" content="ページの説明"> <!-- ページの説明 --> <meta property="og:image" content="画像URL"> <!-- ページの代表画像URL --> <meta property="og:url" content="ページのURL"> <!-- ページのURL --> <meta property="og:site_name" content="サイト名"> <!-- サイトの名前 --> <meta property="og:locale" content="ja_JP"> <!-- 言語と地域（例: "ja_JP"） --> <!-- Facebookアプリ固有タグ（オプション） --> <meta property="fb:app_id" content="アプリID"> <!-- FacebookアプリID --> <meta property="fb:admins" content="管理者ID"> <!-- Facebook管理者ID --> |
