ダイダロス・メモ

文月夕(もしくは悠)の覚え書きです。

*

Twitter Cardの導入は思ったよりすごく簡単

   


上に埋め込みました先日のツイート、下半分に小説タイトルとか紹介文とか画像とかが添えられていますよね。

Twitterのweb画面で見ると微妙に表示が違って、こんな感じに見えてます。

名称未設定-2

この機能をTwitter Cardと言います。

仕組みは簡単。

ツイート内にURLがあるとき、そのURLのページのmetaタグに「このページがツイートされたときはこれこれこういう情報を掲載しておいてください」と記載があれば、自動的に表示されるのです。

(ただし、最初の一回はそのサイトの管理者がTwitterに「このサイトはTwitter Card使ってるからリストにのっけておいてね~」と申請しておく必要があります)

上記のページですと、

宝珠物語~白珠の巫女 作品紹介

のソースに

と記入しておきました。

タグの書き方は、今回はこちらの記事を参考に。

【Twitter:概要を表示させる方法 Twitter Cards & Open Graph protocol - ホームページの作り方 - MB-Support パソコン初心者のサポートページ】

Twitter:概要を表示させる方法 Twitter Cards & Open Graph protocol - ホームページの作り方 - MB-Support パソコン初心者のサポートページ

こちらの記事の「Twitter Developers に申請」というところの仕様は変わったらしく、とても簡単になっています。

  1. Card Validator | Twitter Developersにアクセス
  2. 「Card URL」のところにmetaタグを記入したページのURLを入力
  3. 「Preview Card」をクリック
  4. タグに問題なければ「xxx.xxx is whitelisted for yyy card」(xxx.xxxのところにドメイン名、yyyのところにカードのタイプが入ります)と表示される

現在はこれだけの作業で登録完了となるようです。(1ドメインにつき1回必要の模様)

サードパーティ製のクライアントソフトでは表示されない、タイムラインでも標準では表示されないなど、Twitter Cardが実際に表示される機会はそれほど多くないかもしれませんが、サイト運営者にはけして難しい技術ではないので、トップページや作品ページなど主要なところに仕込んでおいて損はないように思います。

なお、Wordpressを利用している場合は「Twitter Card Meta」など、記事ごとに適切なmetaタグを挿入するプラグインがあり、より簡単に導入できますのでおすすめです。

 

 - Twitter関連, Wordpress, サイト製作関連