Edited at

HTML:OGPまわり メタ設定

More than 3 years have passed since last update.


Facebook

<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://dev.twitter.com/ja/cards/types/summary-large-image

検証ツール

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="画像パス">

https://developers.google.com/+/web/snippet/?hl=ja


まとめ

<!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>