Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
65
Help us understand the problem. What is going on with this article?
@sutara79

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

More than 3 years have 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" />
65
Help us understand the problem. What is going on with this article?
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
sutara79
宮崎 雄策。1979年生まれ。PHP(Laravel)、 JavaScript(jQuery)、英語を勉強中の文系Webプログラマ。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
65
Help us understand the problem. What is going on with this article?