【WordPress】Twitterカードを思ったように表示させる設定に苦戦したので簡単にまとめてみた

スポンサーリンク
WordPress

Twitterカード用Wordpress設定の今のところの自分の理解図

ブログ記事の告知をTwitterで流す際に画像とタイトルを目立たせる「Twitterカード」。Wordpressの設定であちこちつまずいたりしているうちに理解できたこともあるので、いったん図でまとめてみた。

↓ ↓ ↓ 頑張って作ったw ↓ ↓ ↓

詳細で正確な情報はリンクを貼った参考記事をご覧ください。参考記事執筆の各位に感謝!

そもそもTwitterカードとは

Twitterで自分のブログ記事へのリンクを掲載する際に画像やタイトルを目の引きやすい形で表示させる仕組み。大まかに言ってサムネールが大きい長方形のものと小さい正方形のものの2種類ある。

【2020年版】Twitterカードとは?使い方と設定方法まとめ
「Twitterカードとは何か」から「メリット」「使い方」「表示されない時の対処法」まで徹底解説します。設置方法はブログサービス別にまとめました。
Twitterカードでリンクを魅せる方法
Twitterを見ていて、「せっかくリンク載せてるのに目立ってなくてもったいない!」と思うことがあります。そんなときはTwitterカードでリンクを魅せていきましょう。カードを表示すれば、サムネイル画像やサイトタイトル、説明文も表示されて、それらもリンクとなるのです!
Twitterカードの導入方法を解説!
Twitterで企業アカウントを運用されている方は、「Twitterカード」の設定は行われているでしょうか。今回は、企業としてのアカウント運用するのであれば設定しておいた方が良いTwitterカードの設定方法を解説します。

まずはAll in One SEO Pack

●Wordpressプラグイン「All in One SEO Pack」を設定。
●最初に「機能管理」→「ソーシャルメディア」→「Activate」する
●「Activate」したことで「ソーシャルメディア」の項目が表示される
●「Twitter設定」でカードに表示する画像の種類選択(「要約」or「要約の大きい画像」)
●記事投稿画面の下部にも「All in One SEO Pack」→「ソーシャル設定」の項があり、ここでも「Twitterカードタイプ」を選択する(※この部分は同じ設定が次の投稿時にも引き継がれるので一回設定すれば大丈夫のようだ)
●記事ページのソースコードで<head>内に「Twitter Card」のメタタグが記述されていればOK。(とことは単純にいかず色々戸惑ってしまったが)

All in One SEO Pack ソーシャルメディアを有効化して設定する ~WordPress~ | そう備忘録
All in One SEO Packに入っている「ソーシャルメディア」機能を有効化して設定した。SNSでシェアされた時にタイトル、写真、本文(抜粋)、ホームページのURL等、リッチに表示される。OG(Open Graph)画像の設定、Facebook、Twitterの設定。

↓自分も同じ箇所でつまずいて大変役に立った記事

Twitterカードのサイズが大きくならない時の対処法 | フォトロマ
Twitterカードの画像サイズを小さいサイズから大きいサイズに変更する方法について紹介してます。

ここがつまずきがちなJetpack

●「Jetpack」→「設定」→「パフォーマンス」で「画像の読み込みをスピードアップ」の項目のチェックは入れない

スピードアップとあるので「それはいいじゃん!」とうっかりチェックを入れてあった。ここにチェックを入れると画像のURLが「https://i2.wp.com/(自サイトの画像のアドレス)」と「i2.wp.com/」が自動で付けられているのをソースコードで確認できる。

Twitterカードに載せたい画像が自サイトとは別のドメインにあると、Twitterカードに画像が表示されなくなるのだそう。ここが一番悩んだというかつまずいた箇所だった。

i1.wp.com とは | クロジカ
wordpressを使っていて画像関連のトラブルでよくお目にかかるのが i1.wp.co
Twitterカードの設定は正しいのに画像が表示されない原因
Twitterカード(Twitter Cards)は、ツイートしたリンク先に関連する画像や動画などの情報を、自動で表示してくれるサービスです。Webページにほんの数行 Twitterカード用のタグを追加するだけで簡単に使うことができます。こ

Twitter Card Validatorでチェック

https://cards-dev.twitter.com/validator

ここで想定通りに表示されない限りTwitterで投稿しても結果はNG。上記のプラグインの各所の設定が飲み込めず、何度チェックしても思うようにいかず結構イライラさせらレてしまった。

最終的に全てをクリアし、無事思ったように表示できました。色々勉強になったー。

タイトルとURLをコピーしました