Twitterカードの画像が表示できない。前へ次へ検索TwitterRSSFeedlyホーム>WordPressTwitterカードの画像が表示できない。WordPressタイムラインにブログの記事を貼ると、サムネイル入りで素敵に表示されるTwitterカード。他の記事も、アイキャッチ画像として使っているのではない画像が表示されてたり。(記事のアイキャッチを設定していればTwitterカードにその画像が使われるはずというのは自分の取り違えだったんですけど💦)こんにちは、野分です。今回の記事はTwitterカードの画像を表示できない場合に試すべきことについての記事です。Twitterカードで画像が表示できない。重要な追記Twitterカードで画像が表示できない。この解決方法はこのブログで使用しているLuxeritasというテーマで有効でした。以下の方法で画像を表示させることができました。テーマはLuxeritasです。twitter:image"の画像」という項目で表示させたい画像を選択し直す。OGP設定で「Twitterカードを追加」にチェックを入れる。重要な追記2019年9月1日現在、このブログのLuxeritasテーマのバージョンは3.6.0です。このバージョンには、「最初に投稿した画像が自動的にツイッターカードになる」という仕様がありません。いうわけではなく、「『下書き保存』をすると、最初に投稿した画像が自動的にツイッターカードの画像になる」というのがLuxeritasの仕様のようです。twitter:image"の画像」を確認してみてください。そこになんの画像もなければ、「画像を設定」というボタンを押すと、メディア一覧が表示されますので、お好きな画像を選択しましょう。最後に「更新」も忘れずに。Twitterカードで画像が表示されない?!画像が出てないときの表示は、こういう感じでした。それであわてていろんな記事をTwitterにシェアしてみたんですけど、サムネが表示される記事と表示されない記事がありました。なにか規則性があるんじゃないかと探しましたが、わからず。validatorとその使い方そうそう、「シェアしてみた」っていう部分で...。途中で便利なツールを知ったので、初心者の方向けにメモしておきます。validatorというTwitterのツールがあったんですね。card」を押すだけです。Twitterカードで画像が表示されない時にやってみたことあまり投稿ツイートをしないのですが、これまではこんなふうになったことはありませんでした。validatorでチェックしてみました。エラーはないんですよね...。基本的なことかもと思い、いつもお世話になっているサルワカさまの以下の記事をもう一度読みました。...https://saruwakakun.com/html-css/reference/twitter-card画像を呼び出す場所の設定によって読み込めなくなる場合があるらしいのでそれかなと思い、こちらを参考にコードを全部チェックしましたが問題ありませんでした。そもそも普通に表示されている記事もあるので、そういうエラーじゃなさそうだと見当がつきます。表示できたりできなかったりするのはどういう原因なのか...。「画像が大きすぎる(4096×4096以上/5MB以上)」「画像が小さすぎる(144×144以下)」という理由でも画像が表示されないらいのですが、その点も問題ないし。́-ω-`)もともとそんなにTwitterと連携していないので、「もういいや...」と諦めました。説明文を変更しようとしてLuxeritasの機能に気づいた数日後、なんとなく個別の記事の要約文みたいなものを書いてみようかと思い、編集画面でずっと下の方を見ていました。するとそこにこんな項目が。通常は閉じられているのですが開いてみると、こうなっていました。これは偶然にも、「この画像が表示されるはずじゃないんだけどなー」と思ってた「TestMySiteが動かない。「画像を設定」「画像を削除」というボタンがあったので、そこで設定し直せばできるんだ!と気づきました。シェアした時の見え方)の設定をする画面があったなーと思い出して確認しました。するとそこにあった「Twitterカードを追加」という項目にチェックが入っていないのを発見したので入れました。ここにチェックが入ってないのにコードのエラーがなかったのは、「OGPを追加」にチェックが入っていたからなのでしょうか。これで直りました〜〜〜✨そして直ってから思ったんですけど、そもそも「アイキャッチ画像」というのはTwitterカードのそれのことで、投稿記事に設定しているアイキャッチ画像ってことじゃなかったんでしょうね。twitter:image"の画像」で設定されているものが「Twitterカードのアイキャッチ画像」になるようです。twitter:image"の画像」を確認すると、「その記事の中で一番目に貼り付けた画像」になっていることがわかりました。これは新しく記事を書き始めてから最初に貼った画像、という意味です。後で編集したりして「記事の中での順番的に一番目になっている画像」ではありません。この「ページスピードが遅くなっていた理由。」という記事を見ると、最初に貼ってある画像は「投稿記事のアイキャッチ画像」と同じです。記事を書き始めて最初に貼った画像はこれでした。大満足♡』という記事。なっていましたが、新規に記事を書き始めてから一番最初に貼った画像はうさぎの画像でした。twitter:image"の画像」は以下のようになっていました。この画像は大きさが120×94ピクセルで、Twitterカードに表示できる最小の大きさに満たないものです。私は「記事に設定したアイキャッチ画像が表示される」と思い込んでいるので、「この記事のアイキャッチ画像は要件を満たしているのになー??」と頭をひねっていたわけです。́・_・`)そしてOGPのところの「Twitterカードを追加」なんですが...。働きがよくわからないのですが、未知のエラーを防ぐんじゃないかと思って今回の解決方法にも入れました。validatorでチェックしてみると、こうなっていたので、あながち間違いでもないのかもしれませんが...。́▽`)/とりあえず直ったので良しとします。validatorで確認。画像のサイズが規格に合っているか確認。(144×144から4096×4096までで5MB以下)OGPを設定する部分があったらそこを見直す。Twitterカードのコードに間違いがないか確認する。(特に画像の呼び出し)Twitterカードの画像の設定をする項目が編集画面にあるかもしれない。確認してみよう!以下の方法で画像を表示させることができました。テーマはLuxeritasです。twitter:image"の画像」という項目で表示させたい画像を選択し直す。OGP設定で「Twitterカードを追加」にチェックを入れる。重要な追記2019年9月1日現在、このブログのLuxeritasテーマのバージョンは3.6.0です。このバージョンには、「最初に投稿した画像が自動的にツイッターカードになる」という仕様がありません。twitter:image"の画像」を確認してみてください。そこになんの画像もなければ、「画像を設定」というボタンを押すと、メディア一覧が表示されますので、お好きな画像を選択しましょう。最後に「更新」も忘れずに。早とちりなために解決が遅れたしっぱいでした。Luxeritasはとても高機能で細やかな心配りがされたテーマです。知らない便利な機能があるにちがいないですね。itLinkedInPocketCopyスタマイのミッドナイトブルーのコスメが気になる!NextB’s-LOG5月号がアツい!Prev関連記事エラー:個別ページの上の方にWarningが表示される。ブログのテーマがなかなか決まらず、短期間に転々と変えてしまった。...Luxeritasのことと、カスタマイズでつまずいたこと。...ブログカード:ビジュアル編集では投稿できないと思い込んでいました。...ページスピードが遅くなっていた理由。PMさくまさん、コメントありがとうございます。はまっちゃうときあるんですよね。私もよくわからないでやっているのですが、お役に立てて嬉しいです。PM初めましてJamesといいます。メールで失礼いたします。初心者なもので、もしもよろしければ教えていただけませんでしょうか。validatorでチェックすると記事内容も写真も出てくるのですが、twitterに投稿すると写真が出なくなってしまうんです。こんなこともあるのですか?なにか原因があるのでしたら教えていただけませんでしょうか。PMjamesさん、はじめまして。実のところ私も初心者で、記事内にあることをお試しになってもなおも表示ができないとなると、原因を探すのはむずかしいです、ごめんなさい。あれっでも試しに、ツイッターでjamesさんの最新記事をシェアしてみましたが、きちんと表示されてますよ?!?!?!ちゃんとアイキャッチ画像も出ます。キャッシュをクリアしてみてはいかがでしょうか。ブラウザを再起動してみるとか。jamesさんだけに見えないとしたら、それしか思いつきません。PCから見て表示されないとしたら、スマホからお試しください。́◒`●)解決しますように。コメントをキャンセルメールアドレスが公開されることはありません。́◒`●)このブログと私についてゲームの記事に使用している画像の著作権は各会社に帰属します。該当画像の転載・配布等は禁止しております。各社の利用規約に則り使用していますが、不適切な記事や画像、リンクなどがありましたら『contact』からご連絡ください。早急に対応させていただきます。あやかしお宿に帰りましょう。entry.スタマイ:1月25日ミニトーク♡(ログスト)スタマイの1月25日のミニトーク。新堂さんの病院を訪れた宏弥くん。...スタマイ:1月24日ミニトーク♡(ログスト)スタマイの1月24日のミニトーク。...スタマイ:1月23日ミニトーク♡(ログスト)スタマイの1月23日のミニトーク。ある夜の、Revelのバーでの幼馴染みの会話。...スタマイ:1月22日ミニトーク♡(ログスト)スタマイの1月22日のミニトーク。教授への手土産を調達中の郁人さん。