HTML
Facebook
Twitter

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>