URL 付きのツイートをした際に、アイキャッチ画像と概要を表示させる方法をまとめてみました。サイトを DokuWiki で構築している人向けの情報です。twitter card なにそれ？って人にも解るように導入から始めますので、手っ取り早く設定したい方は読み飛ばしてプラグインの導入と設定にジャンプしてください。
DokuWiki を twitter card に対応させる
twitter card とは？
URL 付きのツイートをしたとき（または、されたとき）に、該当ページの概要やアイキャッチ画像を表示させるものです。設定すると、右図のようなものがツイートに自動挿入されます。
この機能を、twitter 社は「 Card 」「カード」などと表現しているようです。「 twitter card 」「 twitter カード」などでウェブ検索すると、数多くの情報を目にすることができます（以下、「カード」と表記します）。
カードを埋め込めるようになると、単にリンク先の URL が青文字で挿入されるよりもはるかに目を引きますし、クリックする前に概要が把握できるので目にする人に対して親切でもあります。特に、twitter は短縮 URL がらみで、URL を見ただけではいったいどんなサイトに飛ばされるのかさっぱり判らないことがあります。短縮 URL のクリックをためらった経験をお持ちの方もいらっしゃるのではないでしょうか。カードを使うと、そのような不信感がずいぶん解消されるのではないかと思います。
では、このカードの仕組みはいったいどうなっているのでしょうか？
カードの仕組み
URL 付きのツイートがなされたとき、twitter 社のクローラは実際に該当ページをチェックし、<head> ～ </head> 内に以下のようなメタタグが設定されているかどうかを調べます。
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:site" content="@otama_2006"/> <meta name="twitter:creator" content="@otama_2006"/> <meta name="twitter:title" content="DokuWiki を twitter card に対応させる"/> <meta name="twitter:description" content="URL 付きのツイートをした際に、アイキャッチ画像と概要を表示させる方法をまとめてみました。サイトを DokuWiki で構築している人向けの情報です。twitter card なにそれ？って人にも解るように詳しい説明から入りますので、手っ取り早く設定したい方は読み飛ばして"/> <meta name="twitter:image" content="http://fk0724.com/_media/pc/socialcard-eyecatch.png"/>
各プロパティの説明
| プロパティ | 概要 | 必須項目 |
|---|---|---|
| twitter:card | カードの種類 | ✓ |
| twitter:site | ウェブサイト所有者の twitter アカウント | |
| twitter:creator | ページ著者の twitter アカウント | |
| twitter:title | ページのタイトル | ✓ |
| twitter:description | ページの概要 | ✓ |
| twitter:image | アイキャッチ画像 | ✓ |
これらの情報が正しく記載されていればカードが掲載され、記載されていなければ単に URL が挿入されるだけになります。
ツイートする際に裏コマンド的なものがあるわけではなく、サイト側で対応しておく必要があるわけですね。
まずは自分のサイトをチェックしてみよう
https://cards-dev.twitter.com/validator にアクセスし、自分のサイトの URL を入力してみましょう。Preview card ボタンを押した結果はどうでしょうか？ 次のようにカードのプレビューが表示されたら大丈夫。表示されない場合は、正しく設定をする必要があります。
こうなれば OK
表示されないときは？
このまま読み進めて、プラグインを導入してください。
プラグインの導入と設定
DokuWiki を twitter のカードや他の SNS に対応させるプラグインは、SocialCards Plugin です。DokuWiki の「拡張機能管理」を使ってインストールできます。インストール後は、「サイト設定」の「プラグイン」のところに設定項目が現れます。
SocialCards Plugin の設定
このうち、twitter のカードに関係ある項目は以下の３つです。
カードに関する設定項目
サイト所有者
twitter:site に対応します。@アカウント名の形で入力します。
コンテンツ著者
twitter:creator に対応します。同様、@アカウント名の形で入力します。多くの場合、この２つのアカウントは同一であると思います。どちらか片方だけの入力でも問題ないようですし、そもそも必須項目ではないので両方空欄でも良いのかもしれません。
代替画像
このプラグインは、各ページの最初の画像を twitter:image の項目に割り当てるようです。代替画像は、ページ内にひとつも画像がない場合に割り当てる画像のことです。「Now Printing」的なものか、サイト全体に関係しそうなロゴ画像を設定すると良いかもしれません。
DokuWiki 標準形式で指定するか、http://～ と直接 URL を指定するいずれの方法にも対応しているようです。
［上級者向け］大きい画像にできないの？
現時点（ 2018-07-06 版）では、「サイト設定」にて twitter:card の種類を変更できないようです。以下は自己責任ですが、コード自体に手を加えることで設定を変更することは可能です。該当コードは lib/plugins/socialcards/action.php で、67～68行目 を以下のように書き換えます。
見やすいカードを目指して
設定が完了した後は、サイトのアクセスアップに向けて次の項目を見直してみてはいかがでしょうか？
アイキャッチ画像の適正サイズは？
せっかくカードに対応させたのに、アイキャッチ画像が変にトリミングされてしまってはだいなしですよね。トリミングの影響を受けないためには、画像を以下のサイズで作るのが良いようです。
summary の場合の例
summary_large_image の場合の例
これはあくまでも例で、これ以外のサイズでもアスペクト比を正しく保つとトリミングはされません。
twitter:card を summary にした場合は正方形で表示されますので、「正方形である」ことさえ守れば他のサイズでも大丈夫です。問題はsummary_large_image で、こちらはアスペクトが 300 : 157 でないと不必要にトリミングされてしまいます。上記のサイズは数ピクセルの誤差がありますが、キリが良い数字で覚えやすく、またページ最上段にタイトル代わりに表示するにも十分な大きさで実用的だと思います。
ページの概要を最適化するには？
DokuWiki の仕様上、ページの概要（ twitter:description ）の項目は wiki 本文の頭から 250 ～ 500 文字が切り取られ自動生成されます。そのため、「 <h1> タグなどでページタイトルを指定した後で本文を記入する」という通常のスタイルでは、カードの概要欄にページタイトルが重複して記載されてしまいます。また、「各ページのはじめの方に必ずしも概要が書かれているとは限らない」という問題もあります。
カードの概要が死んだ情報であっては効果が薄れてしまいます。こうならないためには、記事の書き方を工夫する必要があるでしょう。次の例は、実際に当サイトで実践しているものです。
例：fk0724.com の場合
- ページのはじめにアイキャッチ画像を配置
- 続いて、ページの概要を記載
- その下に <h1> タグでページタイトルを指定
これが正解というわけではありませんが、うまく工夫してみてください。
ツイートしてもすぐにカードが表示されないんだけど？
ツイート後にカードが表示されるようになるまで若干のタイムラグがあるようです。ツイートしたタイミングで即座にカードを表示させたい場合は、次の手順で twitter クローラにあらかじめカードの存在を知らせておくと良いようです。
- ツイート前にあらかじめ Card Validator でテストする
- その数分後に URL 付きでツイートする
また、ページの内容を更新したり、アイキャッチ画像を変更したい場合も、変更後に Card Validator を使うとツイート済みのカードが更新されるようです。
終わりに
いかがでしたか？ 無事に、カードが表示されましたでしょうか？
間違いの指摘・ご質問などは @otama_2006 までお願いします。