Twitter カードを適切に使用してソーシャル メディア ゲームを向上させる方法

動画に出会ったり、GIF を見て笑ったり、その魅力的な画像に惹かれて記事を読んだりしたことがあるなら、あなたはすでに Twitter カードを操作したことがあるでしょう。

Twitter カードは、ツイートを通常のツイートよりもクリックしやすく、目を楽しませる素晴らしい方法です。

この記事では、Twitter カードについて、定義から種類、正しい使い方まで、ステップバイステップのガイドで説明します。

早速、早速見ていきましょう。

ツイッターカードとは何ですか？

Twitter カードは、Twitter ユーザーにとって目立ち、画像、ビデオ、オーディオを使用してコンテンツをより魅力的かつインタラクティブに見せるメディアリッチなツイートです。

カードは当初、ユーザー、特にブランドが 140 文字の制限を超えられるようにするために導入されましたが、その後 2017 年に 280 文字に増加されました。

それに加えて、Twitter カードはブランドが魅力的でクリック可能なツイートを作成する方法でもありました。ユーザーにブログのリンクをクリックしてもらうことも、モバイル アプリのダウンロードを促進することもできます。以下の例は、Neil Patel が Twitter ユーザーとブログを共有するために使用する概要カードを使用しているものです。

このようなカードを使用すると、文字数制限を気にせずに、画像、タイトル、リンクを含む標準的なツイートよりも多くの情報を表示できます。

しかし、これらのカードはどのように機能するのでしょうか? 🤔

技術的には、Twitter でリンクを公開すると、Twitterbot のユーザー エージェントがリンクを巡回し、Web ページ上のメタ タグ マークアップを検索します。特定の URL でメタ タグが利用可能な場合、リンクは画像と短いコンテンツ説明を含むカードに自動的に変換されます。

さらに、あなたのコンテンツへのリンクをツイートしたユーザーのツイートには「カード」が追加され、フォロワーに表示されます。

Twitterカードの使用の重要性

Twitter カードを使用すると、文字数制限を超えずに有益で豊富な情報を配信できます。しかし、これとは別に、これが依然としてユーザーのお気に入りのツールである理由が 4 つあります。 Twitter カードを使用すると、次のことが可能になります。

視認性の向上

画像付きのツイートは、画像なしのツイートよりもリツイートされる 可能性が 34% 高い ことは事実です。

そのため、Twitter カードを使用して投稿を共有すると、ユーザーには記事の注目の画像と CTA ボタンが表示されます。

こうすることで、あなたの投稿は Twitter のアルゴリズムによって優先され、できるだけ多くの人の目に触れられるようになります。

コンバージョンとウェブサイトのトラフィックを増加

Twitter カードは、退屈なスタンドアロン リンクを廃止するのに役立ちます。彼らはリンクをクロールして Web コンテンツから良いものをすべて引き出し、それを魅力的なスニペットに変換して、視聴者を誘惑して Web サイトをクリックして訪問させます。

この点を理解するには、以下の画像を見てください。

交流を促進する

Twitter カードにはテキストベースの専門用語は含まれません。代わりに、画像/ビデオ、タイトル、きちんとした CTA を含むスニペットのように機能します。

適切なメタタグを使用すると、Twitter カードに、見出し、ソーシャル メディア ハンドル、ブランドのハッシュタグ、CTA などをこれまでにないほど大きく表示する画像プレビューを表示できます。インタラクティブな要素が非常に多いため、ユーザーはいくつかの要素をチェックするようになります。

より多くのアプリをダウンロードする

コンテンツを可能な限り最適な方法で表示するために、カードにはさまざまなスタイルとレイアウトがあります ( これについては次のセクションで詳しく説明します )。その1つがアプリカードです。アプリ カードを使用すると、フォロワーは手間をかけずにクライアントのアプリ ダウンロード ページに直接アクセスできます。

同様に、ユーザーとの交流を促進するために使用できるさまざまな形式の Twitter カードがあります。

Twitterカードの種類

#1. サマリーカード

概要カードは、リンクをクリックする前に読者にコンテンツのプレビューを提供するように設計されています。タイトル、説明、サムネイルで構成されます。

ブログ、ニュース記事、製品を共有したり、ユーザーを特定のランディング ページに誘導したりする場合に最適です。

以下の例では、Monday.com は概要カードを使用して、新しい応募者を獲得するためのリンクを使用して成果を共有しました。

#2. 大きな画像を含む概要カード

大きな画像を含む概要カードは、ツイートを視覚的に豊かに体験できるように設計されています。カードには全幅の注目の画像があり、クリックするとユーザーが Web サイトにリダイレクトされます。

下の画像は、大きな画像を含む概要カードを示しています。サムネイルが通常の概要カードよりも比較的大きいことがわかります。

#3. アプリカード

名前が示すように、これらの Twitter カードは、企業がプラットフォーム上でアプリを宣伝できるように作成されました。

アプリ カードは、App Store または Google Play から直接情報を取得します。これには、名前、説明、アイコンが含まれ、評価や価格などの属性も強調表示されます。

あるいは、カードにアプリの新しい説明を書くこともできます。

アプリ カードの画像も、アプリが存在するアプリ ストアから直接ダウンロードされます。

App カードが適切に動作することを確認するには、iTunes/Google Play ストアにアップロードされる画像は 1MB 未満である必要があります。

#4. 選手カード

プレーヤー カードを使用すると、ユーザーはツイートのビデオとオーディオ エクスペリエンスを提供できます。

これらは、タイムラインやフィード上でビデオを自動的にループ再生するため、ユーザーはアプリを離れることなくリッチなマルチメディアを操作でき、コンテンツが視聴されるようになります。

ほとんどの場合、プレーヤー カードは、幅広い視聴者へのプロモーションを通じてブランド イメージを向上させます。

Twitter カードとは何か、そして特定の目的に応じてさまざまなカードを選択する方法がわかったので、次は Twitter カードを作成して設定する方法を理解しましょう。

Twitterカードの使い方は？

ステップ1。 ご希望のカードの種類をお選びください

まず、目的と目標に基づいて、キャンペーンに適切な Twitter カードを選択する必要があります。

例えば：

• サマリーカードはブログの共有に適しています
• 長い形式の画像を含む概要カードは、魅力的なビジュアルを紹介するのに最適です
• モバイルアプリのダウンロードを促進するにはアプリカードが最適です
• プレーヤー カードは、ビデオをループで表示する必要がある場合に適しています。

選択したら、Web サイトのページにメタ タグを追加します。

ステップ2。 メタタグマークアップの実装

コードを書くのが好きでも、専門用語が嫌いでも、Twitter カードを実装する方法はたくさんあります。次の場合にできることは次のとおりです。

あなたはコーダーです

まず、 対応するメタ タグを Web ページのソース コードに追加します。 1 ページに追加できるカードの種類は 1 つだけであることに注意してください。以下は概要カード用です。

 <meta name="twitter:card" content="summary"></meta>

上で見たように、カード プロパティは単純なキーと値のペアであり、それぞれ HTML メタ タグで定義されます。

プロパティを適切に組み合わせることで、Twitter での全体的なカード エクスペリエンスが定義され、各カード タイプは特定のプロパティ セットをサポートし、必要とします。

たとえば、概要カードの HTML コードをいくつか示します。

 <meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”Twitter user handle here“ />
<meta name=”twitter:title” content=”Card title/headline here” />
<meta name=”twitter:description” content=”Card description here” />
<meta name=”twitter:image” content=”Image URL here” />

上記の各コードを詳しく見てみましょう。

• twitter:card カードタイプを定義するために使用されます
• twitter:title はカードのタイトルまたは見出しです (最大 70 文字)
• twitter:site 属性としてアカウントの @username を提供します
• twitter:description にはカード内の説明が含まれます (最大 200 文字)
• twitter:image には、カードで使用する画像へのパスが含まれています

👀 注: twitter:image は JPG、PNG、WEBP、GIF をサポートしています (最初のフレームのみがインポートされます)。

あなたはプログラマーではありません

コーディングの仕方がわからなくても、専用プラグインを介して Twitter カードを使用できます。

wordpress.org を使用している場合、Twitter は WordPress サイトを Twitter カードと統合するための 3 つのプラグイン、 Jetpack 、 JM Twitter Cards 、および Yoast の WordPress SEO を提案しています。

👀 注: デフォルトでは、WordPress でホストされているブログでは Twitter カードが有効になっています。 WordPress は投稿の内容を自動的にスキャンし、最適なカードの種類を決定します。

Tumblr や Blogger のブログをお持ちの場合は、開発者を見つけるか、簡単なコーディングに慣れてください。メタ タグを追加するのがここでの方法です。

ただし、どのような方法やプラグインを使用する場合でも、ブログや Web サイトから URL を取得し、それを Twitter カード検証ツール を通じて実行することで、プロセスを終了する必要があります。これにより、次のステップに進みます。

ステップ 3。 Twitter カードの検証

予期せぬ事態を避けるために、 Twitter カード検証ツールは、 入力された URL に Twitter カードのメタ タグが追加されているかどうかをチェックします。

まず、Twitter カードを作成しようとしているページの URL を貼り付けます。

数秒以内に、ツールによって検証ログが表示されます。ログにはカードの仕様と内容が含まれます。

すべての緑色の線は、クローラーが Web ページの HTML コード内で Twitter Card メタデータを見つけたことを意味します。 Twitter でこのリンクを使用すると、選択した Twitter カードが自動的に生成されます。

次に、公開する前に Twitter カードをプレビューする方法を見ていきます。

ステップ4。 Twitter カードのプレビュー

当初、Twitter カード検証ツールには、リンクを含むツイートのプレビューも表示されていました。ただし、最近 Twitter はカード Validator からプレビュー機能を削除しました。

現在、プレビューは Tweet Composer で利用できる一方で、カード バリデーターは他のデバッグ目的で引き続きアクセスできます。

URL をコピーして Tweet Composer に貼り付けるだけで、Twitter カードのプレビューが表示されます。

ツイート コンポーザーにアクセスできない場合心配ない！

Twitter カード検証ツールはたくさんあります。 Typeful の Twitter カード Validator のようなものです。

これを使用すると、メタデータを含む共有 Web ページのリンクが Twitter ユーザーにどのように表示されるかをプレビューできます。

カードが表示されない場合は、 Twitter Developer Platform のトラブルシューティング カード ガイドを確認してください。

Twitter カード検証ツール

前述したように、 Twitter カード バリデーターは、 Twitter で共有している URL が、自分または他の人によって使用されるたびに Twitter カードの作成に慣れているかどうかを確認するために使用される無料のツールです。 Web ページの URL を入力するだけで、バリデーターがページの HTML コードをクロールしてメタ タグを見つけます。

バリデーターの利点

• メタ タグの識別: バリデータは、Twitter カードのメタ タグが Web ページの HTML コードに正しく埋め込まれているかどうかを識別するのに役立ちます。さらに、特定の URL でどのようなカード タイプが使用されているかも表示されます。
• リアルタイムで検証を確認する: Twitter カード検証ツールは、URL を即座に検査する必要がある場合に便利です。このツールは、Web ページ上の HTML コードをクロールし、結果をリアルタイムに反映する Twitter ボットを使用します。
• カード関連の問題のトラブルシューティング: エラーが発生した場合、カード検証ツールはエラーの原因を特定するのに役立ちます。たとえば、バリデーターによって引用される一般的なエラーには、クローラーのブロック、無効なカード タイプ、無効な画像などが含まれます。

カード検証ツールに起因する問題のトラブルシューティングを行うには、この ガイド を参照してください。

壊れたTwitterカードを修復する方法?

• メタ タグを確認する: Web ページの HTML に必要な特定のメタ タグを確認します。確認すべき内容は次のとおりです。

 <meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="[title]" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="[image link]" />

👀 注: Web サイトに合わせてすべての「コンテンツ」属性を変更してください

• Twitter のキャッシュをクリアする: Twitter はカードを一定期間キャッシュします。メタ タグに変更を加えた場合、キャッシュが原因でこれらの変更がすぐに表示されない可能性があります。検証ツールの [カードのプレビュー] ボタンを使用して、ページのキャッシュを更新します。
• SSL 証明書エラーを確認する: サイトで HTTPS を使用している場合は、有効な SSL 証明書があることを確認してください。証明書が適切に設定されていない場合、または有効期限が切れている場合、Twitter はメタタグをスクレイピングできません。
• Robots.txt のブロックを確認する: Web サイトが Twitter のユーザー エージェント (Twitterbot) によるサイトのクロールをブロックしていないことを確認します。 robots.txt ファイルで Twitterbot が禁止されている場合、Twitter カードは正しく表示されません。
• 画像の問題を確認する: Twitter カードの画像が正しく表示されない場合は、画像のサイズまたは形式が原因である可能性があります。 Twitter では、画像のサイズは 1MB 未満であり、CMYK カラー形式ではないことを推奨しています。

まとめ

ソーシャル メディアでの存在感を高めたい場合は、Twitter カードが肝心です。これらのカードは、ツイートに動的でインタラクティブな要素を提供することで、ユーザー エンゲージメントを高めるのに役立ちます。

魅力的なタイトル、キャッチーな説明、そして見事な画像を備えた Twitter カードを作成できれば、ソーシャル メディアでの成功を誰も止めることはできません。

したがって、ガイドに段階的に従って、すぐに Twitter カードを作成してください。

また、バイラル化に最適な Twitter スレッド ツールをいくつか検討することもできます。