ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【Web制作】Twitter Cards設置方法!ツイッター投稿時にサムネイル画像表示

Twitter Cards

ツイッターでブログ記事の更新情報を投稿する時、サムネイル画像や説明文は表示されますか。Twitter Cardsを設定すればツイートやリツイートにブログ記事のサムネイル等が表示されクリック率も上がるかも。その設置方法を解説します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

今回はWordPress限定ではなく、プラグインも利用しませんので、どんなサイトやブログにも適用できます。

(2014年5月16日追記)ちなみにこの記事には、新しいバージョンもあります。

ツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよ28 shares

Twitter Cards(ツイッターカード)を設定すれば、ツイッターでシェアさ…

FacebookのOGP設定を先にすると楽ちん

まず最初にFacebookのOGP設定することをオススメします。OGP設定すると2大SNS(ツイッターとFacebook)に対応できます。そしてTwitter Cards登録も超簡単になります!

WordPressでプラグインを用いないOGP設定は、下の記事を参考にしてみてください。

【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK64 shares

OGPとはブログ記事がFacebookでシェアやいいね!された時に、表示される写…

OGP設置後、ツイッターカードの設定方法

OGP設定が完了してる人は下の内容だけで充分です。ヘッダー部分(</head>の直前など)にコピペして下さい。タイトルやサムネイル画像などはOGP設定の項目からコピーされるので心配ありません。

WordPressを利用してる人は「外観」の「テーマ編集」で「header.php」の[/head]の直前にコピーして下さい。

FacebookのOGP設定をしない場合

OGP設定した人は、ここを読み飛ばして先へ進んでください。それ以外の人はサイトやブログのヘッダー部分(</head>の直前など)に次の内容をコピーしてください。

「content」の中身はあなたのブログやサイトの内容によって、書きなおしてくださいね。

Twitter Cardsの登録申請の方法

次にツイッター公式サイトにて、Twitter Cardsの登録申請をする必要があります。

Twitter Cardsの登録申請:Twitter Developers

「Validate & Apply」タブをクリック。トップページのURLを入力してGoを押して下さい。右の「Card Preview」で期待どおり表示されてるか確認。表示されないか抜けてる場合は上でコピーした内容を確認して下さい。

twittercards

ちなみにツイッターカードには現在7種類の表示形式があります。標準は「summaly」ですが左の「Try Cards」の「Choose Cards…」を押せば変更できます。変更すると上のコピー項目も少し変わるかもしれません。

表示内容に問題なければ左の「Request Approval」を押すと、ほとんど入力されたフォームが現れるので抜けてる項目をうめて申請して下さい。私はすぐにreadyメールがきましたが、数日待たされる時もあるようです。card項目(表示形式)を変更したら再申請が必要になります。

まとめ:今日のゆめぴょんの知恵

以上で設定完了です。さっそくツイートして見て下さい。上画像のようにサムネイル画像や説明文が表示されてれば成功です。ちなみに上の2枚目の画像はcard項目「summary_large_image」です。

参考:【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards(ツイッターカード)に対応する方法

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:はてなブックマーク-はてブの人気エントリーに入る条件を調べてみたよ【Web制作】feedlyとlivedoorのRSS登録ボタン設置方法:次記事»
ページ
↑先頭
ホーム