ザツログ

雑学、幕末、80年代、ブログカスタマイズ、ITトラブルシューティングなど。

MENU

『Twitterカード』を使って『はてなブログ』の記事更新をつぶやいてみよう

f:id:maekeeeeen:20141127234935j:plain

Twitterカードは、記事の概要、アイキャッチ画像、動画などをカード形式で自動でツイートの中に表示させる事ができる機能です。
これをはてなブログの記事更新連絡と連携する手順です。

 

『Twitterカード』の種類を選択してmetaタグを設定する

①『Twitterカード』のサイトにアクセスします。

 

②あらかじめ利用したいカードタイプを決めておきます。

f:id:maekeeeeen:20141128005615p:plain

 

③画面下部に表示されている『カードタイプ』をクリックします。

f:id:maekeeeeen:20141128005344p:plain

 

④利用するカードタイプ(例では『Summary Card』)をクリックします。

f:id:maekeeeeen:20141128005907p:plain

 

⑤『Sample Code』に表示されている『metaタグをコピーします。

f:id:maekeeeeen:20141128010133p:plain

 

⑥はてなブログ管理画面の、『設定』 > 『詳細設定』 > 『headに要素を追加』 に、コピーした『metaタグ』を貼り付けて適切に編集し、『変更する』をクリックして保存します。

f:id:maekeeeeen:20141128024239p:plain

なお、『metaタグのうち、以下3つは必須項目です。

twitter:card
twitter:title
twitter:description

各『metaタグについての説明は下記のページを参照して下さい。

 

『Twitterカード』の利用を申請する

①再度『Twitterカード』のサイトにアクセスし、『検証ツール』をクリックします。

f:id:maekeeeeen:20141128010941p:plain

 

②運営しているブログのURLを入力し、『Preview card』をクリック、『Request Approval』をクリックします。

f:id:maekeeeeen:20141128011352p:plain

 

③『Description』にブログの説明を英語で入力し、『Request Approval』をクリックします。
※私は『Personal blog』と入力しました。
その他の情報も必須入力ですが、Twitterのアカウント情報等からあらかじめデータを引っ張ってきて表示されています。

f:id:maekeeeeen:20141128011849p:plain

 

④しばらく待って、『検証ツール』のテキストボックスに運営しているブログのURLを入力し、下記の画面が表示されれば申請が通っています。
※『whitelist request for card is pending approval』と表示される場合は、まだ申請が通っていません。

f:id:maekeeeeen:20141128012815p:plain

 

ツイートしてみる

 記事タイトルとURLをツイートした画面。

f:id:maekeeeeen:20141201010549j:plain

概要を表示』をクリックすると、下記のように記事の概要やアイキャッチ画像などが自動で追加されます。

 

 

f:id:maekeeeeen:20141201011007j:plain

 

通常のツイートと比較して目立つのでクリックされやすく、アクセスアップに貢献するツールだと思いますので、一度試してみてはいかがでしょうか。