1. sutara79

    Posted

    sutara79
Changes in title
+OGPで本当に必要なメタタグは?
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,82 @@
+OGP。Facebookなどの投稿時にURLが含まれてたら見栄えの良いリンクにしてくれるアレです。
+使い方を知りたくていろんな記事を読みましたが、最新の正しい情報を得るには、やはり公式ドキュメントを読むのが一番でした。
+
+:link: [OGP公式ドキュメント](http://ogp.me/)
+
+:link: [Facebook公式ドキュメント](https://developers.facebook.com/docs/sharing/webmasters/)
+:link: [Facebookアプリの新規作成ページ](https://developers.facebook.com/apps/)
+:link: [Facebook用表示テスト](https://developers.facebook.com/tools/debug/sharing/)
+
+:link: [Twitter公式ドキュメント](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)
+:link: [Twitter用表示テスト](https://cards-dev.twitter.com/validator)
+
+
+# 2017年11月13日時点で
+
+## 一番シンプルな例
+個人製作で、FacebookとTwitterにだけ対応すればいいのなら。
+
+```html
+<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](https://qiita-image-store.s3.amazonaws.com/0/27816/ab881364-df1a-ec57-4959-7b1ec7236ba1.png)
+
+Facebook
+![Facebook-simple.png](https://qiita-image-store.s3.amazonaws.com/0/27816/a89d816c-23a5-d54d-f116-84c2320a70a3.png)
+
+### 画像あり
+画像の元サイズは250x250です。
+
+Twitter
+![Twitter-normal.png](https://qiita-image-store.s3.amazonaws.com/0/27816/795fab46-b2c2-5463-92d1-ada488c13096.png)
+
+Facebook
+![Facebook-normal.png](https://qiita-image-store.s3.amazonaws.com/0/27816/a40c4360-caa7-4220-b40d-102c7c826c7a.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](https://qiita-image-store.s3.amazonaws.com/0/27816/a0e9d8b2-423f-5915-ee11-35402e7cad59.png)
+
+
+## 推奨されている例
+お仕事ならば、それぞれの公式ドキュメントに従って正しく記述した方がいいと思います。
+調べていませんが、他のSNSでは必要かもしれませんし。
+
+```html
+<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" />
+```