Twitterカード用Wordpress設定の今のところの自分の理解図
ブログ記事の告知をTwitterで流す際に画像とタイトルを目立たせる「Twitterカード」。Wordpressの設定であちこちつまずいたりしているうちに理解できたこともあるので、いったん図でまとめてみた。
↓ ↓ ↓ 頑張って作ったw ↓ ↓ ↓
詳細で正確な情報はリンクを貼った参考記事をご覧ください。参考記事執筆の各位に感謝!
そもそもTwitterカードとは
Twitterで自分のブログ記事へのリンクを掲載する際に画像やタイトルを目の引きやすい形で表示させる仕組み。大まかに言ってサムネールが大きい長方形のものと小さい正方形のものの2種類ある。
まずは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。（とことは単純にいかず色々戸惑ってしまったが）
↓自分も同じ箇所でつまずいて大変役に立った記事
ここがつまずきがちなJetpack
●「Jetpack」→「設定」→「パフォーマンス」で「画像の読み込みをスピードアップ」の項目のチェックは入れない
スピードアップとあるので「それはいいじゃん!」とうっかりチェックを入れてあった。ここにチェックを入れると画像のURLが「https://i2.wp.com/（自サイトの画像のアドレス）」と「i2.wp.com/」が自動で付けられているのをソースコードで確認できる。
Twitterカードに載せたい画像が自サイトとは別のドメインにあると、Twitterカードに画像が表示されなくなるのだそう。ここが一番悩んだというかつまずいた箇所だった。
Twitter Card Validatorでチェック
ここで想定通りに表示されない限りTwitterで投稿しても結果はNG。上記のプラグインの各所の設定が飲み込めず、何度チェックしても思うようにいかず結構イライラさせらレてしまった。
最終的に全てをクリアし、無事思ったように表示できました。色々勉強になったー。
