はじめに
Twitterカードは、ウェブサイトのコンテンツをTwitterでの共有時に豊かな情報と共に表示するための仕組みです。WordPressでブログや記事を公開している場合、この機能を利用することでユーザーにより魅力的な情報を提供できます。しかし、設定が不十分な場合や他の問題により、Twitterカードが正しく表示されないことがあります。
症状・背景
- ウェブページの内容が反映されていない
- 画像が表示されず、代替テキストのみが表示される
- Twitterのプレビューでエラーメッセージが表示される
- 検証ツールを使ってTwitterカードをチェックしても正しく読み込まれない
手順・設定方法
ステップ1: Twitterアプリケーションアカウントを作成
まず、公式Twitter Developer Portalから「アプリケーション」を追加し、必要情報を入力して作成します。
# ログイン後、https://developer.twitter.com/ にアクセスする。
cd /path/to/projectステップ2: WordPressプラグインの導入
Twitterカード用のWordPressプラグインを導入します。代表的なものは「Social Sharing & Discovery by AddToAny」や「Simple Twitter Share Buttons and Cards」などがあります。
# パッケージマネージャーを使ってプラグインをインストールする。
cd /path/to/wordpress/wp-content/plugins/
wget https://downloads.wordpress.org/plugin/social-sharing-and-discovery-by-addtoany.zip
unzip social-sharing-and-discovery-by-addtoany.zip
rm -rf social-sharing-and-discovery-by-addtoany.zip
# プラグインをアクティベートする。
cd /path/to/wordpress/wp-admin
php plugins.php?action=activate&plugin=social-sharing-and-discovery-by-addtoany/social-sharing-and-discovery-by-addtoany.phpステップ3: Twitterカードの設定
プラグインを通じてTwitterカード用のメタ情報を設定します。公開ページや投稿記事で特定の画像を指定するか、全般設定でデフォルト画像を選択します。
# プラグイン管理画面にログインし、「Social Sharing & Discovery」メニューを開く。
cd /path/to/wordpress/wp-admin/
php admin.php?page=atoa_admin
# 「サイトのシェアとディスカバリー設定」でメタデータを編集する。ステップ4: サイトの公開とテスト
Twitterカードが正しく表示されるか確認します。記事やページを開き、Twitter共有ボタンをクリックしてプレビューをチェックし、必要であれば修正を行います。
# ブラウザでサイトを開く。
cd /path/to/wordpress/
php -S localhost:8000
# Twitterの「ツイート」ボタンを使って記事をシェアする。注意事項
- サイトがHTTPS化されていることを確認してください。TwitterカードはHTTPS接続のページでのみ機能します。
- プラグインやテーマによっては、独自のメタデータを上書きしたり、Twitterカードに対応していない可能性があります。その場合は開発者に連絡するか、他のプラグインを使用することをお勧めします。
- サーバー側でPHP設定が制限されている場合（特に「open_basedir」や「allow_url_fopen」）、プラグインの正常な動作を妨げる可能性があります。サーバー管理者と相談して適切に設定してください。
まとめ
1. アプリケーションアカウントの作成: Twitter Developer Portalから、サイトに関連する情報を含むTwitterアプリケーションアカウントを作ります。
2. プラグインの導入: WordPressプラグインをインストールし、その設定を行います。
3. メタデータの設定: プラグインを通じて、個々の記事やページに適切なTwitterカードメタデータを追加します。
4. 公開とテスト: Twitterカードが正しく表示されるか確認するために、サイトを公開し、ツイートボタンを使ってテストを行います。
関連記事: