Twitter カードを WordPress ウェブサイトに追加する方法

公開: 2023-12-10

Twitter でコンテンツを共有することは、サイトへのトラフィックを増やす優れた方法です。ただし、実際のツイート自体は、共有されているコンテンツに関する情報をあまり提供しません。最良の場合、標準ツイートには、ユーザーがツイートすることによって書かれた少量の説明テキスト、コンテンツへのリンク、手動でアップロードされた画像、およびおそらく 1 つまたは 2 つの #ハッシュタグまたは @メンションが含まれるだけです。

すべて非常に標準的なもので、動的に取得されたものはありません。さらに、あなたのツイートがリツイートされている場合、元のツイート (およびツイートされたコンテンツ) の露出は最小限に抑えられます。Twitter カードはこれをすべて変えます。 Twitter カードは、一般的な Open Graph プロトコルを使用して、ツイートされている URL からコンテンツを自動的に取得する機能を提供します。

ツイッターカード — 画像ソース: airrayagroup – Pixabay.com / ライセンス: CC0 パブリックドメイン

テキストの抜粋、画像、ビデオなどのコンテンツをすべて動的に取得し、関連する Twitter カード内に表示できます。それだけでなく、各カードにはあなたの Twitter 名への直接リンクも表示され、ワンクリックでフォローすることもできます。つまり、あなたのツイートがリツイートされた場合、リツイートを行っているユーザーではなく、あなたの情報 (および共有コンテンツ) が注目を集める絶好の場所にあることになります。これはTwitterのフォロワー数を増やすのに最適です。

Twitter カードを統合する 2 つの方法

この革新的な機能を WordPress サイトに実装する方法を詳しく見てみましょう。 Twitter カードを WordPress に実装するには、複数の方法があります。 1 つはプラグインを使用する方法です。 2 番目に、子テーマを使用してテーマコードを変更します。

最初に検討するオプションは、プラグインを使用することです。 Twitter カードを WordPress ウェブサイトに簡単に実装できるプラグインが複数あります。この目的のために利用可能な一般的なプラグインの 1 つをダウンロードしてインストールするだけです。プラグインは、プラグインディレクトリを通じて、または WordPress ダッシュボード内で[プラグイン]に移動してダウンロードできます。

Twitter カードメタプラグイン

Twitter カードのメタ — 画像ソース: スクリーンショット – WordPress.org

Twitter Cards Meta プラグインを使用すると、WordPress ウェブサイトやブログに Twitter Cards を簡単に実装できます。プラグインをアクティブ化すると、WordPress ダッシュボード内のオプションページが作成されます。 Twitter Cards管理メニューからアクセスできます。

これで、Twitter Cards Meta プラグインの構成を開始できるようになりました。 Twitter アカウントに関連する詳細を入力し、デフォルトの画像 URL を追加して、Twitter カード内に表示する画像を選択します。最後に、 「オプションを保存」ボタンをクリックしてオプションを保存します。

Yoast SEO プラグイン

WordPress SEO ヨースト — 画像ソース: スクリーンショット – WordPress.org

WordPress で利用できる最も人気のあるプラグインの 1 つは Yoast SEO です。現在、アクティブなインストール数は 100 万を超えています。この強力な WordPress プラグインには、すぐにTwitter Card が統合されています。ほとんどの人は SEO 最適化のためにこのプラグインをインストールしています。したがって、この特定の機能は、気づかないうちにすでに利用可能になっている可能性があります。

通常どおりプラグインをダウンロードしてインストールし、WordPress ダッシュボード内のSEO => ソーシャル管理メニューにアクセスします。「Twitter ユーザー名」とマークされたフィールドにTwitter ユーザー名を入力し、 「変更を保存」ボタンをクリックします。ページの上部には、さまざまなソーシャルメディアのタブがあります。次に、 「Twitter」タブをクリックして、Yoast SEO プラグインを含む Twitter 固有のオプションページを開きます。

[Twitter カードメタデータの追加]スライダーが[有効] の位置にあることを確認し、ドロップダウンリストから使用するカードの種類を選択します。この手順を完了したら、もう一度[変更を保存]ボタンを押してオプションを保存します。

最後のステップは、Twitter ユーザー名をサイトのユーザーアカウントに追加することです。これは、WordPress ダッシュボードの[ユーザー] => [プロフィール]管理メニューから行うことができます。 「For Twitter Cards Meta」という見出しが表示されるまで、ユーザープロフィールページを下にスクロールします。そこで、表示されたフィールドに Twitter ユーザー名を追加できます。必ず「プロファイルの更新」ボタンをクリックして、変更を適切に保存してください。

JM Twitter カードプラグイン

JMツイッターカード — 画像ソース: スクリーンショット – WordPress.org

JM Twitter Cards は、Twitter Cards を WordPress ウェブサイトに簡単に統合できるようにするもう 1 つのプラグインです。すべてのカードタイプをサポートしており、Yoast SEO と競合しません。これにより、Twitter カードのニーズに合わせてこのプラグインを使用したい場合でも、他の Yoast 機能を引き続き利用できるようになります。

プラグインを有効にすると、 JM Twitter Cardsをクリックして、WordPress ダッシュボードのオプションページにアクセスできます。 Twitter のユーザー名、カードの種類、画像サイズなど、必要な詳細を入力するだけです。ここで、投稿画像が存在しない場合に表示されるフォールバック画像をアップロードします。

また、 Google Playや Apple Storeなどのさまざまなモバイルデバイスストアにリンクする追加データを提供することもできます。これにより、共有されているコンテンツに関連する可能性のあるアプリを自己宣伝できるようになります。オプションページの上部にある[投稿タイプ]タブを使用すると、投稿、ページ、添付ファイル、あるいはその両方で Twitter カードを投稿ごとにさらにカスタマイズする機会を提供するかどうかを選択できます。

プラグインなしで Twitter カードを追加する

テーマ開発者も、コードを実際に試してみたい人も、比較的簡単に Twitter カードを WordPress テーマに実装できます。アクティブ化した特定のテーマの子テーマを使用して、そのfunction.phpファイルに次のコードを追加するだけです。

関数 my_twitter_cards() {
    if (is_singular()) {
        グローバル $post;
	$twitter_user = str_replace('@', '', get_the_author_meta('twitter'));
	$twitter_url = get_permalink();
	$twitter_title = get_the_title();
	$twitter_excerpt = get_the_excerpt();
	$twittercard_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
	$twittercard_thumb = $twittercard_image[0];
	if (!$twittercard_thumb) {
	    $twittercard_thumb = 'https://www.example.com/default-image.png';
	}
	if ($twitter_user) {
	    echo '<meta name="twitter:creator" value="@' . esc_attr($twitter_user) . '" />' . "\n";
	}
	echo '<meta name="twitter:card" value="summary" />' 。 "\n";
	echo '<meta name="twitter:url" value="' . esc_url($twitter_url) . '" />' . "\n";
	echo '<meta name="twitter:title" value="' . esc_attr($twitter_title) . '" />' . "\n";
	echo '<meta name="twitter:description" value="' . esc_attr($twitter_excerpt) . '" />' . "\n";
	echo '<meta name="twitter:image" value="' . esc_url($twittercard_thumb) . '" />' . "\n";
	echo '<meta name="twitter:site" value="@mhthemes" />' 。 "\n";
    }
}
add_action('wp_head', 'my_twitter_cards');

ここで行ったことは、 my_twitter_cardsという PHP 関数を作成したことだけです。この関数はwp_headアクションにフックされ、現在表示されている投稿からのデータをいくつかの PHP 変数に割り当てます。 $twitter_userの値を個人のニーズに合わせて変更し、 $twittercard_thumbのフォールバック画像の URL を指定することを忘れないでください。このデータは投稿のメタデータとして使用されます。 Twitter Cards が取得して画面上に表示するのは、まさにこのデータです。

URL を検証する

上記のオプションのいずれかを実行して Twitter カードを WordPress Web サイトまたはブログに実装する際には、Twitter に共有できる投稿 URL の 1 つが有効であることをテストする必要があります。こうすることで、Twitter カード機能が正しく実装され、WordPress Web サイト上で期待どおりに正しく動作していることを確認できます。

場合によっては、選択したカードの種類によっては、ドメインが自動的にホワイトリストに追加されます。このため、この検証プロセスを実行することを強くお勧めします。これを行うには、投稿の 1 つから URL をコピーして Twitter Card Validator に貼り付けます。検証が完了すると、その特定の投稿が Twitter に共有されたときにどのように表示されるかのプレビューが表示されます。これで、Twitter カードを使用してコンテンツを世界と共有する準備が整いました。