はじめに

当エンジニアブログには 非常によく滑る Twitterアカウント、シャチがおります。
先日、シャチの中の人からこんなことを言われました。

Twitterで記事を引用するとき、画像を大きめに表示したいんですけど〜。
設定してもらって良いですか〜?

そんなことはあなたがやりなさい。
そういえば、OGP周りのメタタグをいじることはあまりなかったので、ちょっとやってみました。

Twitterの中の人がやりたいこと

後述しますが、デフォルトの設定だと、下図のように「左半分が画像、右半分に記事の説明」となります。

12585f7c 1c08 488f 82fb 2eb895b0e58e

これを、「上半分を画像、下半分で説明」というように画像を目立たせるようにします。

D99b1132 b1d6 4168 9793 33266f59f0fb

OGPとは

TwitterやFacebookなどでリンクをシェアした時に、OGPが設定してあるとタイトルや概要、画像を表示してくれます。
Open Graph Protocolの略です。
これはメタタグで設定しておきます。
本エンジニアブログでは以下のように設定しています。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="記事のトップ画像パス" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="概要" />
<meta property="og:locale" content="ja_JP" />

ただし、これだけだと、画像を大きく表示させることはできません。
(手動で1つずつ設定することはできそうですが。。。)
そのため、Twitter用の設定を追記していく必要があります。

Twitterカードとは

Twitterが提供するツイートの装飾のようなもので、設定しておくと画像や動画などを埋め込むことができるようです。
OGPと同様、メタタグの中に埋め込むことで設定できます。
メタタグ内の記述はこちら。

特に、twitter:cardプロパティが重要で、この設定値によりカードの種類が判定されます。
カードタイプはこちらから。

ただ、OGPと重複している内容は記述しなくても良さそうです。
本エンジニアブログではOGPと重複している部分を抜き、以下のようになりました。

<meta property="twitter:card" content="summary_large_image" />
<!-- siteとcreatorは。Twitterアカウントを設定するようです。 -->
<meta property="twitter:site" content="@blue_blog_orca" />
<meta property="twitter:creator" content="@blue_blog_orca" />

Card Validatorで確認

Card Validator
さて、メタタグの設定が終わったら、Twitterが提供しているCard Validatorで確認します。
滞りなく設定されていれば、メタタグが検知されて、Twitterカードに変換されています。

466f9ca3 0013 47e7 9ccb e765163b75d5

さいごに

Twitterカード導入当初は申請が必要だったようですが、今はメタタグの設定さえすれば良さそうなので、かなり楽ですね!
うちのシャチも自分でやってほしいものです。

Twitterカード関連で別の問題

Twitterでシェアした時に画像が表示されない問題が発生しました。
こちらはどうやら画像サイズに問題があったようで、サイズを小さくして再度アップロードしたら表示されました!

Shere
  • はてなブログ
  • Twitter
  • Facebook
Twitterカードを設定してみる

Writer

  • Name

    Naoki

  • Position

    RubyやPHPが書きたい雑用

  • Profile

    最近、(自称)PHPerから(自称)Rubyistに移行しようと考えている雑用です。Rubyのオブジェクト 指向はすごい分かりやすいので好きになりました。また、メソッド名に?が使えるのも良いですよね!