Help us understand the problem. What is going on with this article?

OGPで本当に必要なメタタグは?

More than 1 year has passed since last update.

OGP。Facebookなどの投稿時にURLが含まれてたら見栄えの良いリンクにしてくれるアレです。
使い方を知りたくていろんな記事を読みましたが、最新の正しい情報を得るには、やはり公式ドキュメントを読むのが一番でした。

:link: OGP公式ドキュメント

:link: Facebook公式ドキュメント
:link: Facebookアプリの新規作成ページ
:link: Facebook用表示テスト

:link: Twitter公式ドキュメント
:link: Twitter用表示テスト

2017年11月13日時点で

一番シンプルな例

個人製作で、FacebookとTwitterにだけ対応すればいいのなら。

<head><!-- prefixは不要 -->
<title>普通のタイトル</title>
<meta name="description" content="普通のディスクリプション">
<meta property="og:title"       content="OGPのタイトル">
<meta property="og:description" content="OGPのディスクリプション">
<meta property="og:url"         content="http://foo.com">
<meta name="twitter:card"       content="summary">

<!-- 画像を載せたい場合 -->
<meta property="og:image"       content="http://foo.com/bar.jpg">

画像なし

Twitter
Twitter-simple.png

Facebook
Facebook-simple.png

画像あり

画像の元サイズは250x250です。

Twitter
Twitter-normal.png

Facebook
Facebook-normal.png

Facebookのデバッガーでは「修正が必要な問題」としてfb:app_idなどが不足していることが警告されますが、無視してかまわないと思います。
なお、Twitterではog:titleが必須です。
ないとTwitterのバリデーターでは下記のように警告され、実際の投稿でもカードが表示されません。

INFO:  Page fetched successfully
INFO:  6 metatags were found
INFO:  twitter:card = summary tag found
ERROR: Possibly invalid value (if specified) (og:title)
ERROR: Possibly invalid value (if specified) (twitter:text:title)
ERROR: Possibly invalid value (if specified) (twitter:title)

また、Twitterではog:descriptionがないと、タイトルのみの寂しいカードになってしまいます。
Twitterディスクリプションが必要.png

推奨されている例

お仕事ならば、それぞれの公式ドキュメントに従って正しく記述した方がいいと思います。
調べていませんが、他のSNSでは必要かもしれませんし。

<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<title>普通のタイトル</title>
<meta name="description" content="普通のディスクリプション">
<meta property="og:title"       content="OGPのタイトル">
<meta property="og:description" content="OGPのディスクリプション" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="http://foo.com" />
<meta property="og:image"       content="http://foo.com/bar.jpg" />
<meta property="fb:app_id"      content="1234567890123456" />
<meta name="twitter:card"       content="summary" />
<meta name="twitter:site"       content="@foo_bar" />
<meta name="twitter:creator"    content="@foo_bar" />
sutara79
宮崎 雄策。1979年生まれ。PHP(Laravel)、 JavaScript(jQuery)、英語を勉強中の文系Webプログラマ。
https://ja.gravatar.com/sutara79
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした