読者です 読者をやめる 読者になる 読者になる

はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

はてなブログがTwitter Cardsに対応しました。ツイートで記事の概要が表示されます[追記あり][再追記あり]

新機能

※【追記 2015-01-29】より画像が大きなTwitterカードにも対応しました。次の告知を参照してください。
Twitterで画像が大きく、見やすくシェアされるようにしました

はてなブログでは、TwitterでWebページがきれいにシェアされる「Twitter Cards」に対応しました。ブログ記事をツイートすると、タイトルや写真・本文の概要がわかりやすく表示され、Twitterからブログを見に来る読者が増えることも期待できます。

Twitter Cardsの表示例

はてなブログで運営されている多くのブログで有効になっています[3月26日修正]。どうぞご利用ください。

[4月2日再追記]全ドメインTwitter Cards対応されました

下記で追記したように「hatenablog.jp」ドメインの申請処理が遅れておりましたが、無事に登録され、「○○.hatenablog.jp」のブログをお使いの皆さまもTwitter Cardsをご利用いただけるようになりました。お待たせして申し訳ありません。

また、別途申請していた「d.hatena.ne.jp」ドメインでも、Twitter Cardsに対応しました。

お待たせしました。はてなブログとはてなダイアリーの全ドメインでTwitter Cardsに対応しました - はてなブログ開発ブログ

はてなで管理している全ブログドメインの全ブログでTwitter Cardsが有効になっています(ユーザー様の管理による独自ドメインを除きます)。改めて、どうぞご利用ください。

[3月26日追記]一部ブログのTwitter Cardsは対応中です

はてなブログで管理している「hatenablog.com」などのドメインのうち、「hatenablog.jp」のみがTwitter Cards対応について申請処理中でした。「○○.hatenablog.jp」のブログをお使いの皆さまには申し訳ありません。ドメインが登録され次第、改めてアナウンスいたします。

はてなブログTwitter Cardsを利用するには

このTwitter Cards対応は、外部サービス連携 機能の一部になります。ブログの更新通知やツイート貼り付けでTwitterと連携を済ませている方は、とくに何も設定しなくてもすでにTwitter Cardsが表示される状態になっています。ブログ記事をツイートしてご確認ください。

まだTwitterと連携していない方は、「付記1.はてなブログをTwitterと連携するには」をご参照ください。

また、独自ドメインを利用している方は、Twitterに対してご自分のドメインを別途申請する必要があります。「付記2.はてなブログで独自ドメインをTwitter Cardsに対応させる」を参照してください。

その他の機能変更について

アクセス解析に自分のアクセスを含めないようにしました

本日、はてなブログで提供している「アクセス解析」機能で、自分自身によるアクセスを除外するようにしました。より正確なアクセス数が表示されます。

この変更は、2013年3月25日14時43分ごろから有効になっています。

付記1.はてなブログTwitterと連携するには

はてなブログTwitterと連携すると、次の機能が利用できます。

  • ブログ更新時に、自分のTwitterアカウントで更新通知をツイートする
  • 編集サイドバーから「Twitter貼り付け」を利用する
  • ツイート内のリンクが「Twitter Cards」で表示できる(今回の機能追加)

Twitter連携は、はてなブログの設定画面から 外部サービス連携 ページで設定できます。

外部サービス連携

Twitter連携設定」欄が「現在無効です」となっている方は、「有効にする」のリンクをクリックすると、Twitter側の認証ダイアログが開いて連携を設定できます。

Twitter連携設定」欄が「現在有効です」となっていれば、連携が完了しています。

なお、Twitter連携で利用できる機能のうち、いくつかだけを選択することはできません。自分のブログをTwitter Cardsで表示されたくない方は、「無効にする」のリンクからTwitter連携自体を解除してください。

Twitter Cardsでは、シェアされたブログ記事にTwitterアカウントが記載されます。連携アカウントの表示については「はてなIDと外部アプリケーションアカウント紐付け情報の取扱いについて」もご参照ください。

付記2.はてなブログ独自ドメインTwitter Cardsに対応させる

一般に、Twitter Cardsに対応させるには次の2つの作業が必要です。

  1. HTMLヘッダーに必要なタグを挿入する
  2. ブログのドメインTwitterに登録する

はてなブログ独自ドメインを利用されている方も、今回の機能追加で1は完了しています。

Twitter Cardsはドメインごとに申請が必要なため、あとは利用しているドメインTwitterに申請し、登録されればTwitter Cardsが表示されます。

参考として、当ブログが申請した際の手順を以下に掲載します。実際の手順や詳細は下記のドキュメントなどを参照してください。

Twitter Cards | Twitter Developers(英語サイト)

※【追記】Twitterカードの申請方法は変更されています。下記の説明は利用できません。最新の申請方法は上記のドキュメントサイト、またはその日本語版を参照してください
Twitterカード | Twitter Developers

1. Twitter Cards登録サイトにログインする

Sign in with your Twitter account | Twitter Developers (英語サイト)

上記の登録サイトに、申請するブログと連携しているTwitterアカウントでログインします。

Twitterアカウントでログイン

2. 登録フォームに必要な情報を入力する

ログイン後、登録に必要な情報を入力します。

上半分の「Contact information」は連絡先情報で、Twitterに登録してあるメールアドレスなどがデフォルトで入力されています。

下半分の「Website Information」欄に、申請する独自ドメインの情報を入力します。

Twitter Cardsの登録申請
入力欄 入力内容
Website domain 自分のブログのドメインhttp://は不要)
例) 自分のブログのURLhttp://staff.hatenablog.com/の場合は「staff.hatenablog.com」を入力する
Website description 自分のブログの説明
例) 「official blog of Hatena Blog」
Twitter Username associated with that domain 申請するブログと連携しているTwitterアカウント名
例) 「hatenablog」
Example Summary Card URL 自分のブログ記事のURL
例) 「http://staff.hatenablog.com/entry/2013/03/15/122810
Example Photo Card URL 空のまま
Example Player Card URL 空のまま

3. 申請する

最後に、一番下の[Submit]ボタンを押する申請が完了します。申請時に確認画面やメール通知などはとくにないので注意してください。申請後、実際に反映されるまで1〜2週間かかることもあります。上記の申請に関する疑問や問題点は、Twitterが公開しているドキュメントや窓口をご利用ください。