LoginSignup
19
17

More than 5 years have passed since last update.

HTML:OGPまわり メタ設定

Last updated at Posted at 2015-11-02

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://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>
19
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
17