WordPressで壊れたTwitterカード画像を修正する方法

新しいブログ記事をTwitterで共有したのに、せっかくデザインしたグラフィックの代わりに壊れた画像プレースホルダーが表示された時のフラストレーションを今でも覚えています。それは、あなたのブランドをプロフェッショナルに見せなくし、貴重なクリックを失う可能性のある小さな不具合です。

これは、X(旧Twitter)があなたのサイトで適切なデータを見つけられない場合に発生し、多くのWordPressユーザーにとって一般的な悩みです。画像がないと、あなたのコンテンツが受けるべきエンゲージメントを真剣に損なう可能性があります。

WPBeginnerでは、私たち自身のサイトや読者のために、この問題を何度もトラブルシューティングしてきました。良いニュースは、簡単な修正方法があるということです。それをステップバイステップでご紹介します。

WordPressで壊れたり欠落したりするTwitterカード画像の修正

一部のウェブサイトでTwitterカード画像が壊れるのはなぜですか?

Twitterカード画像の破損の根本原因は、多くの場合メタデータの欠落です。Xでリンクを共有すると、プラットフォームは、どの画像とテキストを表示するかを知るために、あなたのウェブサイトのコードにある特定の「Twitterカード」タグ(Open Graphメタタグに似ています)を探します。

問題はこうです。WordPressには標準でOpen Graphメタタグが含まれていません。これらのタグがないと、Xはどの画像がコンテンツを表しているのかを知ることができないため、壊れたプレースホルダーが表示されるか、まったく画像が表示されなくなります。

共有時に画像が表示されない、壊れたTwitterカードの例

この壊れた体験は、ソーシャルメディアのパフォーマンスに深刻な影響を与える可能性があります。

競合他社が適切な Twitter カードを持っているのに、自分のリンクが専門的に見えない場合、信頼性とクリックを失います。

この問題を修正するだけで、ソーシャルメディアのクリック率が増加したウェブサイトを見てきました。

大きな画像プレビューを備えた正しく機能する Twitter カードの例

良いニュースは、Twitterカード画像の破損を修正することは、何をすべきかを知れば簡単だということです。数百のWordPressサイトでテストした最も効果的な解決策をいくつか見ていきましょう。

この記事で取り上げるトピックの簡単な概要を以下に示します。興味のあるセクションにジャンプするか、手順をステップバイステップで実行してください。

  1. All in One SEOを使用した壊れたTwitterカード画像の修正
  2. デフォルトのTwitterカード画像の設定
  3. WordPressホームページのデフォルトTwitterカード画像を設定する
  4. WordPress の投稿またはページごとにカスタム Twitter カード画像を使用する
  5. カテゴリとタグのカスタムTwitterカード画像の設定
  6. 有効なTwitterカード画像を持つ投稿をテストする
  7. WordPressで壊れたTwitterカード画像のトラブルシューティング
  8. よくある質問 (FAQ)
  9. 追加リソース

All in One SEOを使用した壊れたTwitterカード画像の修正

まず、WordPress用All in One SEOプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

All in One SEOは、市場で最高のWordPress SEOプラグインです。これにより、Xを含む検索エンジンやソーシャルメディアプラットフォーム向けにWordPressウェブサイトを簡単に最適化できます。これは、Xがコンテンツを正しく読み取るために必要な非表示コード(メタタグと呼ばれる)を自動的に追加することで機能するため、コードを一切触る必要がありません!

注意: Twitter カード画像を修正するために使用できる All in One SEO の無料版もあります。ただし、Pro 版にはより強力な SEO 機能が付属しています。

このチュートリアルのため、Proバージョンを使用しているためProバージョンでデモンストレーションしますが、無料バージョンでも手順は同様です。

有効化したら、ライセンスキーを入力するために**All in One SEO » 一般設定**ページにアクセスする必要があります。この情報はAIOSEOウェブサイトのアカウントで見つけることができます。

All in One SEO ライセンス

All in One SEO は、ウェブサイトの Twitter カードに使用される画像を完全に制御できます。すべての手順を説明します。

まず、ソーシャルメディアプロフィールのURLを追加する必要があります。これにより、ウェブサイトがX(Twitter)プロフィールやその他のソーシャルメディアプラットフォームと関連付けられます。

単純に All in One SEO » ソーシャルネットワーク ページに移動し、X を含むソーシャルメディアプロフィールの URL を入力します。

ソーシャルメディアプロフィールURLを追加する

デフォルトのTwitterカード画像の設定

次に、「Twitter」タブに切り替え、「Twitterカードを有効にする」オプションの横にあるトグルをクリックする必要があります。

AIOSEOでTwitterカード設定をオンにする

その下には、ほとんどのウェブサイトで機能するTwitterサマリーカードのデフォルト設定が表示されますが、必要に応じて変更できます。

特に、「デフォルトの投稿画像ソース」を変更したいでしょう。All in One SEOには多くのオプションがあります。

例えば、アイキャッチ画像、添付画像、コンテンツ内の最初の画像、カスタムフィールドの画像、投稿作成者の画像、または利用可能な最初の画像を選択できます。

ほとんどのWordPressテーマは、Twitterカード画像に適したアイキャッチ画像に対応しているため、アイキャッチ画像の使用をお勧めします。

その下に、デフォルトのターム画像ソースを選択するオプションがあります。この画像は、誰かがカテゴリ、タグ、またはその他のタクソノミータームアーカイブページへのURLを共有したときに使用されます。

デフォルトのターム画像を設定する

ここにデフォルトの画像をアップロードすることも、各カテゴリまたはタグにカスタム画像をアップロードすることもできます。後でその方法を説明します。

デフォルトの Twitter カード画像のソースを選択した後、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。

WordPressホームページのデフォルトTwitterカード画像を設定する

さて、ウェブサイトのホームページのデフォルトのTwitterカード画像をどのように設定するか見てみましょう。

静的なホームページを使用していない場合は、**All in One SEO » Social Networks**ページのTwitterタブでデフォルトのTwitterカード画像を直接設定できます。

ホームページにカスタム画像を追加する

ただし、静的なフロントページ(設定 » 表示設定)を使用している場合、プロセスは少し異なります。ホームページは特定の「ページ」であるため、ページエディターで直接Twitterカード画像を​​設定します。AIOSEOは、そこへ直接移動するための便利なリンクを提供します。

その場合、ホームページを編集する設定へのリンクが直接表示されます。

カスタムTwitterカード画像を追加するためにホームページを編集する

ページの編集画面で、コンテンツエディターの下にある「AIOSEO設定」ボックスまでスクロールするだけです。

ここから、「ソーシャル」タブに切り替えてから、Twitter を選択する必要があります。

WordPressホームページのTwitterカード画像を修正する

Twitter設定の下で、デフォルトのオプションを上書きできます。

ここで、ホームページに specifically 使用されるカスタム Twitter カード画像を提供できます。

WordPress ホームページのカスタム Twitter カード画像

「画像ソース」の横にあるドロップダウンメニューをクリックするだけで、選択肢が多数表示されます。オプションのいずれかを選択するか、使用したい新しい画像をアップロードできます。

完了したら、変更を更新して保存することを忘れないでください。

WordPress の投稿またはページごとにカスタム Twitter カード画像を使用する

多くのブロガーは、Facebook、X、Pinterestなどのさまざまなプラットフォームに合わせてカスタムソーシャルメディア画像を作成するのが好きです。

All in One SEO を使用すると、デフォルトの Twitter カード画像のカスタム設定を簡単にオーバーライドし、任意の投稿またはページにカスタム画像を提供できます。

投稿またはページを編集し、コンテンツエディターの下にある「AIOSEO設定」ボックスまでスクロールダウンします。ここから、「ソーシャル」タブに切り替え、「Twitter」を選択する必要があります。

AIOSEO を使用した WordPress の個々の投稿およびページでの Twitter 設定

次に、カスタム画像を含め、この投稿専用に使用されるカスタムTwitterカードデータを設定できます。

「画像のソース」セクションまでスクロールし、ドロップダウンメニューをクリックするだけです。

投稿またはページのカスタムTwitter画像を設定する

提供されている画像の中から1つを選択するか、「カスタム画像」を選択して新しい画像をアップロードできます。

その後、「画像のアップロードまたは選択」ボタンをクリックしてコンピューターから画像をアップロードするか、WordPressメディアライブラリから画像を使用できます。

完了したら、変更を保存するために投稿またはページを更新または公開することを忘れないでください。

カテゴリとタグのカスタムTwitterカード画像の設定

投稿やページと同様に、All in One SEOは、個々のカテゴリ、タグ、WooCommerceの製品カテゴリ、その他のタクソノミー用のカスタム画像をアップロードしやすくします。

投稿 » カテゴリーページに移動し、カスタムTwitterカード画像をアップロードしたいカテゴリーの下にある「編集」リンクをクリックするだけです。

カテゴリの編集

これで「カテゴリ編集」画面に移動します。ここで下にスクロールして「AIOSEO設定」ボックスを見つけます。

ここから、「ソーシャル」タブに切り替え、その下の「Twitter」を選択します。

WordPressカテゴリのTwitterカード画像の設定

次に、「画像ソース」セクションまで下にスクロールし、ドロップダウンメニューをクリックします。

提供されている画像オプションのいずれかを選択するか、「カスタム画像」を選択して新しい Twitter 画像をアップロードできます。

カテゴリのTwitterカードとして使用するカスタム画像の追加

その後、「画像アップロードまたは選択」ボタンをクリックするだけで、コンピューターから画像をアップロードしたり、WordPressメディアライブラリの画像を使用したりできます。

完了したら、「更新」ボタンをクリックして変更を保存してください。

有効なTwitterカード画像を持つ投稿をテストする

Twitterカード画像を​​設定したら、テストしたいはずです。これの公式ツールはカードバリデーターです。

重要:このツールは、もはや視覚的なプレビューを表示しません。その主なジョブは、URLのエラーをチェックし、特にXのリンクのキャッシュバージョンを更新することです。

まず、Xカードバリデーターのウェブサイトにアクセスします。投稿のURLを「Card URL」フィールドに貼り付け、「Preview card」ボタンをクリックします。

Twitterカードバリデーター

バリデーターは下にログを表示します。「Card loaded successfully」と表示され、エラーが表示されない限り、問題ありません!

カードの実際の視覚的なプレビューを表示するには、X.comにアクセスし、新しい投稿の作成を開始して、URLを貼り付けます。カードは作成ボックスに表示され、タイムラインにどのように表示されるかが正確にわかります。

WordPressで壊れたTwitterカード画像のトラブルシューティング

上記の手順に従っても、正しいTwitterカード画像が表示されない場合は、カードエラーのトラブルシューティングのための簡単なヒントを試すことができます。

WordPress のキャッシュをクリアする

Xで画像が表示されない最も可能性の高い原因は、WordPressのキャッシュプラグインです。All in One SEOでTwitterカードの画像を設定していても、キャッシュプラグインが古いバージョンを表示している可能性があります。

これを修正するには、WordPressのキャッシュをクリアしてから、Twitterカードバリデーターツールを使用して再度テストしてください。

正しい画像サイズを選択する

使用している画像がXのガイドラインを満たしていることを確認してください。大きな要約カードの場合、理想的なサイズは1200 x 600ピクセル(2:1の比率)です。すべての画像は5MB未満である必要があります。

ヒント: WordPress初心者のためのソーシャルメディアチートシート完全版で、ソーシャルメディアの画像サイズについてすべて学ぶことができます。

よくある質問 (FAQ)

WordPressでTwitterカードの画像を修正することについて、よく寄せられる質問をいくつかご紹介します。

1. Twitterカードの正しい画像サイズは何ですか?

大きな画像プレビューで最良の結果を得るために、Xは2:1のアスペクト比の画像の使用を推奨しています。目指すべき理想的なサイズは1200 x 600ピクセルです。このサイズにより、画像が切り取られることなく、シャープでプロフェッショナルに見えます。また、画像ファイルが5MB未満であることを確認してください。

2. Twitterカードの画像が機能しているかテストするにはどうすればよいですか?

Xの公式カードバリデーターツールを使用できます。ツールの投稿URLを貼り付けるだけで、エラーを確認し、Xのキャッシュを更新できます。視覚的なプレビューを確認するには、X.comの投稿コンポーザーにURLを貼り付けることができます。

3. 画像を修正しましたが、Twitterには古い画像が表示されます。どうすれば修正できますか?

Twitterは画像とデータを約7日間キャッシュします。画像を更新した場合は、このキャッシュをクリアする必要があります。TwitterカードバリデーターでURLを再度実行するだけで、Twitterにカードの最新バージョンを取得させることができます。

4. Twitterカードの画像がぼやける、または正しく切り取られないのはなぜですか?

画像がぼやけたり、うまく切り取られなかったりするのは、通常、解像度の低い写真を使用しているか、アスペクト比が2:1に合っていないことが原因です。画像を鮮明に見せるためには、少なくとも1200ピクセル幅の高品質な写真を使用してください。

追加リソース

Twitterカードの画像を修正したので、ソーシャルメディアでの存在感とウェブサイトのパフォーマンスをさらに向上させるために、これらの他のガイドも確認することをおすすめします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

3 CommentsLeave a Reply

  1. Yoast SEOでも同じ問題がありました。各記事は同じように設定されていました。一部では画像がロードされ、一部ではまったくロードされませんでした。設定は同じです。問題の原因を突き止めることはできませんでした。アドバイスに従ってソーシャルカードは記入されていました。Yoast SEOをAIO SEOに置き換えることで、問題は完全に解消されました。

    • カードバリデーターを使用する前に、サイトのすべてのキャッシュをクリアしていることを確認してください。これは、更新されない最も一般的な理由です。

      管理者

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。