FacebookやTwitterカードなどで用いられるOGPタグの設定を（なんとなく流行りに乗りたいがために）せっせとやっておったのですが、Facebookさんすぐ仕様変更してしまうし、気付けば20行以上とかになっていたりしたので改めて調べなおしてみました。

結論から先に申しますと、

<meta property="og:title" content="FacebookとかTwitterとかmixiとかいろんなSNSで利用されるOGPを見直してみた"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="https://doocts.com/webdesign/open-graph-protocol.html"/>
<meta property="og:image" content="img_200_200.png"/>
<meta property="og:site_name" content="ドークツ"/>
<meta property="og:description" content="FacebookやTwitterカードなどで用いられるOGPタグの設定を（以下略）"/>
<meta property="fb:admins" content="294655003920574"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@miiracode"/>

といった形がいいのかなー、と思いました（面倒臭いので思うに留まっています。次から本気出す）。
以下はちょっとした解説です。

og:title

ページのタイトル。 Facebookでは225バイトまで、Twitterでは70文字までだそうです。必須。

og:type

ページの種類。 結構な種類があるようですが「article」「blog」「website」おさえておけば何とかなる感。
詳しくはThe Open Graph protocol。必須。

og:url

ページのURL。必須。

og:image

ページを表す画像。
Facebookでは154px四方以上200px四方表示、Twitterでは60px四方以上120px四方表示だそうですが、これがちょくちょく変更されるので要注意です。
取り敢えず200px四方で行くことにしました。必須。

og:site_name

サイトのタイトル。

og:description

サイトの説明。Facebookで最大300文字、Twitterで最大200文字らしいですが、100文字以内に収めるのが良さそうです。

fb:admins

fb:app_idを使って自動化する方法もあるようです。

ここからTwitterカード用の独自設定です。利用は要申請。
尚、OGPと共用出来る部分は省略し、二点のみ設定しています。

twitter:card

「summary」「photo」「player」から選択。
「photo」にするとTwitpicみたいに画面いっぱいに画像を表示したりも出来るようなので、その場合は別途大きい画像を「twitter:image」で設定すると良さそうですね。
詳しくはこちらに詳しい説明があります。

twitter:site

Twitterアカウント。

以上、これらをしっかり設定したところでそもそも共有されないコンテンツだとただの自己満足になってしまいますが、自己満足って大切ですよね。

ではでは。