【HTML】ソーシャルメディアでリンク共有された時の表示のさせかたを調整できるメタタグ集

metaタグ

head内に記述する項目は前回まとめましたが、番外編としてソーシャルメディアで共有された時の表示を設定できるタグを紹介します。

OGPタグ

<meta property="og:url" content="ページURL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ">
<meta property="og:description" content="ページの要約" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="summaryかsummary_large_imageを入力" />
<meta name="twitter:site" content="自身のTwitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

Twitter でどのように表示されるか確認

以下のページの入力欄に表示確認したいページのURLを入力する事で表示を確認する事ができます。

Card Validator | Twitter

タイトルとURLをコピーしました