[砂塵の彼方] OGP及びTwitter Cards対応（超不定期日記）
- 2013/11/09 02:43
- カテゴリー：サイト作成メモ, 砂塵の彼方::History, 小ネタ
- タグ：サイト＠砂塵の彼方, Twitter
Twitterに更新情報を流すので、OGPとTwitter Cardsに対応してみました。
その手順記録です。
（1）OGP対応
Twitter Cardsには専用の設定タグがありますが、その多くはOGPの設定で代用できます。
OGPの方が汎用性がありますので、書けるところはOGPで書いてしまう事にしました。
HTMLファイルのヘッダ部分に専用のタグを入れます。
サイトやブログの個別の記事ならこんな感じ。
↓
<meta property="og:title" content="※記事タイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="※記事のURL" />
<meta property="og:image" content="※サムネイル画像URL" />
<meta property="og:description" content=" ※記事概要（200文字以内、100文字以内推奨）" />
<meta property="og:site_name" content="※ブログタイトル" />
OGPの仕様で上から4つは必須、その下の2つは任意です。
が、og:imageは敢えて空欄にしてあります。記事毎に画像を準備はできないし、かと言って記事内容に関係ない共用画像の指定は不可らしく。Twitter Cardsの方ではサムネイル画像は任意項目のため、無しでいきます。
og:descriptionは任意項目ですが、Twitter Cardsで必須項目の代わりとして使われます。必ず何か入れるようにしてあります。
OGP絡みでやる事はこれで終わりです。
申請等は必要ありません。
（2）Twitter Cards対応
HTMLファイルのヘッダ部分に専用のタグを入れます。
↓
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="※サイトオーナーのTwitterID" />
<meta name="twitter:creator" content="※記事執筆者のTwitterID" />
同時にOGP対応する場合は、この3つだけ書けば大丈夫です。
twitter:cardに指定できるカードの種類はいくつかあります。更新情報のお知らせなら記事のタイトルと概要ぐらい表示されればいいので、今回はSummary Cardを選びました。
記事に関する情報は、og:～の方から読んでくれます。
（3）ファイルのアップロード
タグを追加したファイルを、サーバにアップロードします。
（4）Twitter Cards利用申請
最後に、Twitter Cardsの利用申請を行います。
Twitter公式のvalidator toolにChromeなどWebKit系のブラウザで（※1）アクセスし、Twitterアカウントでログイン。
「Validate ＆ Apply」のタブをクリックし、タグを追加したページのURLを入力して情報が正常に表示されるか確認します。
（↑Enter URL to validate の所にURLを入力、Go!ボタンを押す）
表示項目の取得状況やテスト表示を見て問題が無ければ「Request Approval」をクリックし、次に出てくる連絡先やサイト情報を書く欄で必須項目を埋めて（※2）申請を実行します。
正常に申請が終わると、Twitterから通知のメールが届きます。
……が、これが短い英文＋URLの一見怪しい感じだったりしましてですね。。
いつまでも届かない場合は、一度迷惑メールフィルタに引っかかっていないか確認することをお勧めします。
（※1）Firefoxではカードのテスト表示ができませんでした。ただ、実際の表示が見えなくても、表示項目がきちんと取得できていれば問題ないと思います。
（※2）だいたいの項目は、申請に使ったTwitterアカウントの登録情報や、直前にvalidator toolで取得した情報を利用して自動入力済みです。私が手入力したのは、サイトの概要とサイトオーナーのTwitterID欄だけでした。
これで全て完了です。
前からやろうと思っていたのを、やっと実行しました。
テンプレートに細工すれば簡単なここだけでもやっとこうかと、、、。
※Twitter Cards補足メモ
- Twitter Cardsは、申請した後、反映されるまでにしばらくかかるようです。
私はほぼ直後と言って良いタイミングで使えるようになりましたが、検索で探すと、もっと時間がかかったという話も出ています。 - 申請はカードの種類ごとに必要です。（今回はSummary Cardのみ申請）
- 申請は、指定したドメイン内の記事全てに適用されます。独自ドメインでない場合は記入に工夫が必要かもしれません。（独自ドメインと違いがあるのかは調べてません）
- 基本的に、TwitterにURLが書き込まれた時点の情報が表示されます。
validator toolで表示のチェックを行ったURLについては、その都度情報が更新されるようです。 - Twitter CardsのSummary Cardにもサムネイル画像の表示機能があり、twitter:image:srcに画像のURLを指定します。画像は120×120ピクセル以上、サイズは1MBまで。表示は120×120ピクセル固定です。
指定が無い場合はog:imageから読み込んでくれるのですが、og:imageの推奨サイズは非常に大きく、共通で使うのはかなり無理がありそうです。
