LoginSignup
71

More than 5 years have passed since last update.

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

Posted at

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" />

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
71