Web サイトに Twitter カードをインストールする 5 つの簡単な方法

Twitter では、誰かが自分の Web サイトへのリンクを投稿すると、サムネイル画像、タイトル、説明、リンク先ページの URL を含むボックスが作成されることをご存知ですか? それは本当に一般的です。 これにより、標準のリンク投稿がタイムラインでより見やすくなり、リンク先について少し紹介され、ユーザーのやり取りが促進されます。

それがツイッターカードです。 具体的には、ウェブサイトに統合できる数種類の Twitter カードの 1 つである、ウェブサイトの概要カードです。 他にはどんな種類があるの？

• 前述のように、概要カードは Web サイトのプレビューです。 これは、ユーザーがリンクをクリックしたときに表示される内容の適切なプレビューを保証する、メタ情報から取得されたカスタム イメージとテキストです。
• 概要カード (大きな画像付き) は… 概要カードと同じです。 正直なところ、なぜ違いがあるのか​​ わかりません。 各リンクをクリックし、プレビューされたツイートを表示して、私の意図を確認してください。 Twitter が最新のデザイン変更を行う前は、見た目が違っていたかもしれませんが、今日ではすべてが大きな画像カードのように見えます。
• 選手カードを野球やその他のスポーツ カードと混同しないでください。 画像が何らかの形式のアニメーション メディアであることを除いて、これらは本質的に大きな画像カードです。 それらがどのように表示されるかに応じて、それらはメディアに展開される小さなプレビューおよび説明ボックスである場合もあれば、メディア自体が再生する準備ができている場合もあります。 WebM の人気が高まっていますが、一般的にこれらは YouTube ビデオのような埋め込みビデオです。
• アプリ カードは、アプリ ストア ページからデータを取得して、カスタマイズされたアプリ プロモーション ウィンドウを作成するボックスです。 ツイートにリンクされているアプリの顕著な詳細と、ユーザーにアプリをすぐにインストールさせるための CTA ボタンが表示されます。

Twitter カードは以前はもっと複雑でした。 以前は、画像ギャラリー、製品、およびその他のオプション用の特定の種類のカードがありましたが、Twitter はそれらを削除しました。 ノスタルジアが必要な場合は、ここでそれらがどのように見えるかを見ることができますが、執着しすぎないでください。 今日それらを作ることはできません。

Twitterカードの基本

すべてのページに個別のコードを指定したい場合は、Web サイトごと、または少なくとも Web ページごとに 1 種類の Twitter カードしか持つことができません。 ほとんどの人は基本的な大きな画像の概要カードを選択し、コードをサイト テンプレートのヘッダーに配置して、すべてのページに表示されるようにします。 YouTube などの一部のサイトでは、プレーヤー カードがヘッダーに挿入されます。 ここで重要なことは、特定のページのヘッダー メタ データに含めることができるカード情報は 1 セットだけであるということです。

カードは、伝達できるデータにおいて非常に堅牢です。 コンテンツの作成者とページの所有者をカードに自動的に認識させることができます。両者が異なる場合は、両方を同時に認識させることもできます。 ロードするメディアを指定したり、名前や追跡コードを指定したり、その他多くのことができます。 実際、このページを読んで、カードに具体的に使用できる属性のアイデアを得ることができます。 また、Open Graph 属性を結び付けて、より堅牢なデータにすることもできます。

今日ここでやろうとしていることは、サイトに Twitter カードを追加する方法を説明することです。 すべての属性について説明するつもりはありません。Twitter のドキュメントで十分です。さまざまな CMS でそれを行う方法の概要を説明するだけです。

始める前に; どのインストール方法でも、検証が必要です。 カードを有効にしたら、URL をこのバリデーターにコピーしてください。 これにより、カードが実際に機能するかどうかがわかります。

1: ワードプレス

WordPress はおそらく、Twitter カードを実装するための最も簡単なプラットフォームです。ほぼ組み込みのものを含め、さまざまな方法でそれを行うことができるからです。

Twitter カードを実装するための推奨される方法は、公式の Twitter プラグインを使用することです。 他のプラグインと同じようにインストールでき、そこから Twitter カードを自動的に生成できます。 また、共有ボタン、ツイート/フォロー ボタン、埋め込みツイート処理、および分析追跡用のショートコードも有効にします。 ここでドキュメントを読み、プラグイン自体をここからダウンロードできます。

公式の Twitter プラグインを使用したくない場合、またはホストされている WordPress.com を使用している場合は、Jetpack を使用できます。 Jetpack で、共有セクションを見つけて構成します。 Twitter セクションがあり、ここで Twitter アカウントを Web サイトに認証します。

3 番目のオプションは、JM Twitter カード プラグインを使用することです。 Julien Maury によるこのプラグインは、いくつかの基本設定で Twitter カードの互換性を追加します。 注目の画像ではなく、ページの最初の画像を使用するように選択したり、Twitter カードのレンダリングをプレビューしたり、投稿を作成するときに各投稿のカードをカスタマイズしたりできます。 プラグインを構成するには、サイドバーに移動し、管理ダッシュボードのプラグイン パネルをクリックします。 カードの種類を選択し、残りのボックスに Twitter アカウント、サイトのアカウント、説明の長さ、その他追加したいものを入力します。

それらのいずれもニーズに合わない場合、またはたまたますでに持っている場合は、Yoast による WordPress SEO も Twitter カードを処理します。 管理パネルで SEO に移動し、[ソーシャル] セクションをクリックします。 Twitter のユーザー名をボックスに追加できる [Twitter] タブがあります。 残念ながら、私が最後に読んだところによると、Yoast は要約カードしかサポートしていません。 他のタイプのカードが必要な場合は、より高度なプラグインが必要です。

2: タンブラー

Tumblr は、驚くほど人気のあるブログ プラットフォームであり、多くの人が気付いていません。 Tumblr ネットワークは、.tumblr.com でマークされたブログだけにとどまりません。 実際、いくつかの有名なサイトでは、ベース アーキテクチャとして Tumblr を使用しています。 カスタム ドメインを作成すると、他のバックエンド アーキテクチャと同じようになります。 またはそれは？

実際のところ、Tumblr のアーキテクチャは拡張性がなく、WordPress のようなものほどカスタマイズ可能ではありません。 ブログに特定のカスタマイズされた Twitter カードを実装するには、いくつかのカスタム コードを使用する必要があります。 Quora の Dan Leveille による回答で、コードとその背後にある説明を読むことができます。

カードを手動でカスタマイズするには、このコードが必要であることに注意してください。 単に要約カードを用意する必要はありません。 Twitter は、リンクの公開時に自動的にカードを生成する Tumblr.com を既にホワイトリストに登録しているため、特定のデータを含む特定のカードが必要な場合やカスタム ドメインを使用している場合を除き、デフォルトで実装されているものをそのまま使用できます。 Tumblr サイト用のカスタム ドメインを持っている場合、または Twitter が自然に収集しないデータが必要な場合にのみ、彼のコードに頼ります。

3: ブロガー

Blogger ブログに Twitter カードをインストールするかどうかは、テンプレート次第です。 一般的な手順を説明しますが、サイト テンプレートが標準と大きく異なる場合は、私が提供する手がかりに基づいて自分で判断する必要があります。

万が一に備えて、テンプレートを改ざんする前にバックアップすることを常にお勧めします。 ダッシュボードに移動し、テンプレートをクリックし、バックアップ ボタンをクリックして、後で復元するためにコピーを保存します。

次に、ブログ テンプレートのライブ プレビューの下にある [HTML の編集] ボタンをクリックします。 そのコード内で、「<b:includable id='post' var='post'>」を検索します。 その行はそのままにして、そのすぐ下に次を貼り付けます。


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


明らかに、自分自身の上のデータを編集する必要があります。 @yourname を Twitter のユーザー名に変更し、www.yoursite.com をサイトの URL に変更して、正確であることを確認してください。

もちろん、必要に応じてこのコードをカスタマイズできます。 別の種類のカードを使用する場合は、一番上の行を「概要」以外に変更し、残りのコードを必要なデータに合わせます。

上に貼り付けたコードが機能しない場合は、これが元のページです。 適切にコピーしたこと、または正しくコピーしたことを再確認できます。また、更新されていて、投稿に更新が反映されていない場合は、そこで確認できます。 そういえば、うまくいかない場合は、私に知らせてください。 私はそれを修正するために最善を尽くします。

4: ジュムラ

Joomla は、Tumblr や Blogger のような表面的な拡張機能を備えた限られたプラットフォームではなく、拡張機能によるカスタマイズに重点を置いた CMS である限り、WordPress と多くの共通点があります。 そのため、さまざまなJoomla 拡張機能を使用して Twitter カードを実装する方法はいくつかあります。

Tweet Cards は、ほとんどの人が好む拡張機能の 1 つです。 無料でダウンロードして使用でき、Joomla ベースの Web サイトに Twitter カードを追加します。 それでおしまい; 構成に凝ったものは何もなく、その機能や実装に例外的なものは何もありません。それは缶に書かれていることを実行するだけです。

2 番目のオプションは、プロ拡張機能の Open Graph と Twitter カード タグです。 Twitter と Facebook の両方にタグを追加する、より堅牢な拡張機能です。 投稿に必要な特定の画像とデータを選択するためのカスタマイズオプションがたくさんあります. Open Graph の Facebook 統合は素晴らしいです。さらに、Twitter と Google の両方がノックすると、追加のメタデータが追加されます。 唯一の欠点は、プロの拡張機能として、これには費用がかかることです. ただし、安いです。 ライセンスはわずか7ユーロです。 必要に応じて追加のサポートを購入できますが、正直に言いましょう。 これは単なるメタデータであり、コードが苦手な人にとっては、美化されたコピー アンド ペーストの仕事です。 サポートは必要ありません。

3 つ目のオプションは、Joomla サイトで記事を作成および公開するためのフロント エンド ポスト エディターである TEXTman を使用することです。 Twitter カードが機能するために何も構成する必要はありません。 エディターとして TEXTman を使用するだけで、機能が自動的に提供されます。 ここでの欠点は、それがプロのツールでもあり、はるかに高価なことです. これは完全なテキスト エディターと関連ツールであるため、いくつかの拡張機能が追加された大きなライセンスです。 すべてのサブスクリプションで 99 ドル、TEXTman 自体と限定サポートと更新ライセンスだけで 40 ドルです。 欲しいのがTwitterカードだけなら非常に高価です。

最後に、もちろん、以下の方法またはこの投稿で説明されている方法を使用して、それらを手動で実装できます。

5: カスタム コンテンツ管理システム

上記のコードのメタデータの例を既に投稿しました。 これは基本的に、使用しているアーキテクチャに関係なく、サイトのヘッダーに貼り付けるコードと同じです。 サイトのニーズに合わせて微調整し、コードをサイト ヘッダーにコピーします。 サイトの上部にある <head> タグと </head> タグの間であれば、特に場所は問いません。

タグをカスタマイズすることを忘れないでください。 注意を払う必要がある主なものは、カード、サイト、作成者、およびドメインのタグです。 必要なカードの種類、サイトとコンテンツ作成者の Twitter ハンドル、ドメインの URL を記入する必要があります。 変更を実装したら、カードを検証します。

検証後もカードが機能しない場合は、Twitter のトラブルシューティング ガイドをお読みください。 数秒で修正できる単純なエラーがどこかにある可能性があります。