<meta property="og:title" content="タイトル">
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="サイトURL">
<meta property="og:description" content="説明がここに入ります。説明がここに入ります。">
<meta property="fb:app_id" content="[FB_APP_ID]">
<meta property="og:type" content="website">
<meta property="og:image" content="OGP画像パス">
参考
https://developers.facebook.com/docs/sharing/best-practices#tags
- 画像サイズは 1200 x 630px(600x315pxより小さい場合は、大きな画像で表示されない)
- 最小サイズは200x200px(それより小さいとエラー)
デバッガー - 開発者向けFacebook
https://developers.facebook.com/tools/debug/
Twitter Cards
Summary with Large Imageカード
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明がここに入ります。説明がここに入ります。">
<meta name="twitter:image:src" content="OGP画像パス">
検証ツール
https://cards-dev.twitter.com/validator
Google+
<!-- 次のように html タグを更新して、itemscope 属性と itemtype 属性を含めてください。 -->
<html itemscope itemtype="http://schema.org/Product">
<!-- head 内に次の 3 つのタグを追加してください。 -->
<meta itemprop="name" content="タイトル">
<meta itemprop="description" content="ここに説明が入ります。ここに説明が入ります。">
<meta itemprop="image" content="画像パス">
まとめ
<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/Product">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="説明がここに入ります。説明がここに入ります。">
<meta name="Keywords" content="キーワード">
<meta property="og:title" content="タイトル">
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="サイトURL">
<meta property="og:description" content="説明がここに入ります。説明がここに入ります。">
<meta property="fb:app_id" content="[FB_APP_ID]">
<meta property="og:type" content="website">
<meta property="og:image" content="OGP画像パス">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明がここに入ります。説明がここに入ります。">
<meta name="twitter:image:src" content="OGP画像パス">
<meta itemprop="name" content="タイトル">
<meta itemprop="description" content="説明がここに入ります。説明がここに入ります。">
<meta itemprop="image" content="OGP画像パス">
</head>
<body>
コンテンツ
</body>
</html>