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

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

ツイッターカードで目立てる!

Twitter Cards(ツイッターカード)を設定すれば、ツイッターでシェアされた時にブログ記事のアイキャッチ画像や説明文などを表示させられます。今回はその設定方法を紹介します。

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

Twitter Cards(ツイッターカード)の設定方法については以前も記事にしてますが、少しやり方が変わったようなので改めて記事にしてみます。

私の新ブログも登録を忘れてたので、やってみましたがかなり簡単に設定できるようになりました。

Twitter Cards(ツイッターカード)とは?設置メリットは?

Twitter Cardsを設定すると、ツイッターでURLがシェア・言及・リツイートなどされた時に、その記事のタイトル・画像・説明文・リンクなどが表示されます。

FacebookのOGPと似ていますが、大きな違いは、Twitter Cards(ツイッターカード)を設定・登録していないと何も表示されないことです。

Facebookの場合は、OGP設定がなくても一番上の画像などを見つけて表示してくれます。もちろん間違ってることもあるので、制作者が設定しておくのが望ましいです。

Twitter Cards(ツイッターカード)の設置メリットは、シェアされた時に目立つことです。目立つとクリックや更なるシェアもされやすいと思います。

具体的な設置コード

記事のヘッダー部分に、下のようなコードを設置する必要があります。下はツイッターのサンプルコードなので、まだコピペしないように!

Twitter Cards(ツイッターカード)の登録方法

それでは実際にTwitter Cardsを登録する手順について説明します。

カードタイプの選択

まずは下リンクから、ツイッターにログインしてください。

Card Validator | Twitter Developers

するとカードのタイプが表示されます。最初は標準の「Summary」でいいと思います。私は「Summary Large Image」が好みです。

このカードタイプはあとで変更が可能ですが再申請の流れになります。だから使う可能性があるタイプは、1回づつ申請してください。

設置コードの作成

カードタイプを選択してクリックすると、次は設置コードの情報の入力画面になります。

FacebookのOGPコードを設置済の場合

下のようなコードを、あなたのサイト・ブログのヘッダー部分(</head>タグの直前など)のOGPの下にコピペするだけで完了です。

【 】の中の部分は、あなたの情報を入力してください。個人の場合は、サイトと制作者のアカウントは同じでいいでしょう。

WordPressを利用してる場合は、OGPもTwitterCardsも下記事のコードだけで実装できます。

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

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

OGPを設置していない場合

TwitterCards Setting

「Try Cards」の下の入力欄に、あなたのサイト・ブログの情報を入力していってください。「Mobile App …」以下の入力は不要です。

最後に下方の「Update Preview」ボタンを押してください。すると右下のコードが更新されます。

この右下のコードを、あなたのサイト・ブログのヘッダー部分(</head>タグの直前など)にコピペするだけで完了です。

または下コードの【 】内に、あなたのサイト・ブログ情報を入力してから、ヘッダー部分にコピペしても同じです。

カードコードの確認の手順

TwitterCards Setting

コードを設置後に、今度は左側のタブを「Validate & Apply」に切り替えてください。

そしてあなたのサイトURLを入力してください。必ずコードが設置されているページを選んでくださいね。トップページでなくても問題ありません。

コードが正しければ、すべての項目に緑信号が付いて「Request Approval」ボタンが表示されるので、ポチッと押してください。

コードに間違ったタグが含まれていると、赤信号になるので緑になるまでコードを修正しましょう。

カードの申請方法

TwitterCards申請フォーム

「Request Approval」ボタンを押すと申請フォームが表示されます。全ての項目を入力しましょう。

フォームは全て英語ですが「Name」や「Description(サイトの説明)」項目は日本語を入力しても問題ありません。

TwitterCards申請フォーム

途中にある「Mark my cards as containing sensitive content」にはチェックしないように。暴力表現・アダルトなどを扱う場合はチェックが必要です。

すべての項目が入力できたら、一番下の「Request Approval」ボタンを押せば申請は完了します!

申請結果の通知とカードの確認

TwitterCards申請受理メール

数週間かかることもあるようですが、サイト・ブログ内容とカードに問題がなければ、数分で登録メールアドレス宛てにメールが届きます。

するとTwitter Cards(ツイッターカード)が表示される状態になっているはずです。さっそく記事のURLをツイートして確認してみてください。

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

今回の記事内容をざっくり言うと。

  • Twitter Cards(ツイッターカード)を設定するとクリックやシェアが増えるかも
  • Twitter Cardsは、FacebookのOGPと違い申請登録が必須
  • カードのコードを設置後に申請。作業時間は10分程度
  • 申請から受理まで数分〜数日
  • 受理されたら、記事URLをツイートして確認できる

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

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

«前記事:【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOKシェア数を高速表示!WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速い:次記事»
ページ
↑先頭
ホーム