中国製、韓国製を買わないために日常の買い物で注意するべき買い物リストはこちら
PR

Simplicityのツイッターカード表示にバラツキが起こる原因はOGP設定の重複

スポンサーリンク

先日、最新記事をツイートしたときに吐き出される「ツイッターカード」のデザインにばらつきがあることに気がついて困っていたのですが、無事解決できました。その顛末です。

ワードプレスの悩み

スポンサーリンク

無料のテンプレート「Simplicity」

このサイトは、わいひら氏の無料テンプレート「Simplicity」を利用しています。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

Googleアナリティクスのアクセス解析やデザイン、文字サイズの変更など、何から何まで素人にも判りやすく作られている素晴らしいテンプレートです。

しかし、私の知識、問題解決能力の無さからトラブルに遭遇することもあります。というわけで、またしても問題に遭遇した私ですが、解決できたので記事にしておきます。

問題発覚のきっかけ

Simplicityはバージョンが上がるほどに進歩しており、今では個別ページのディスクリプション記載ができるようになり、SEO対策も万全になりました。

個別ページのディスクリプションやツイートした時のアイコンや説明文を「All in one SEO pack」を使ってコントロールしていた私は、それを機にプラグインを停止することにしました。しかしその結果、ツイートした時の「ツイッターカード」のデザインがころころ変わるようになったのです。

ツイッターカードとは

「ツイッターカード」とは、URLをツイートしたときにアイコンと説明文が表示されるカードです。自信満々で説明しておりますが、今回のトラブルに遭遇し、フォーラムで相談するまでその名称を知らなかった上、設定出来る事も知りませんでした。

「ツイッターカード」のデザインは、Simplicityの設定します。場所は、カスタマイズメニューの「SNS」の中にある「ツイッターカード」設定です。

表示は「大きな画像+説明文」「小さなアイコン+説明文」の二つがあり、ご覧の通り、私はしっかり小さいアイコンの方を選んで、設定していました。(いつ設定したか記憶にないんですがw)

Twitterカード設定 Simplicity

ツイートするたびに変わるデザイン

設定は正しかった。でもツイートすると、以下のようなばらついた表示だったのです。

小さい時

ツイッターカード S

大きい時

ツイッターカード 大

私はこの現象の原因を「All in pne SEO pack」をオフにしたせいだと思い、ツイートする時だけ「All in one SEO pack」を有効にしてツイートしました。が、流石にそれは手間だし、何とかならないかと思ったのです。

で、アッフォな私は「Simplicity」のフォーラムで「表示結果」を設定できるようにしてほしいと頓珍漢な要望を書いたのです(恥ずかしい・・・)

その時のフォーラムのトピックです。

URLをツイートする際の表示が大きいのとコンパクトなのと選べると嬉しいと思いました
Simplicityの特徴 › フォーラム › 要望・機能追加など › URLをツイートする際の表示が大きいのとコンパクトなのと選べると嬉しいと思いました このトピックには4件の返信

このトピックの中で、私は「Twitterカード」という名称や設定できることを知りました。

でも拙い私にかうたっく様という方が丁寧に答えて下さった結果、呆気なく解決。感謝しています。

SimplicityとJetpackのOGP設定が重複

ツイッターカードの表示にバラつきがあった原因は、OGP設定の重複でした。かうたっく様が参考に貼付けたURLのソースを見て下さって、その重複を見つけて下さったのです。

で、その重複していた設定の犯人は、プラグインの「Jetpack」で、このプラグインの「SNS sharing」という機能がオンになっていたことで、OGP設定がダブっていたのです。私はすぐにその設定をオフにしました。

ところで「OGP設定」ですが、簡潔に説明すると「他のSNSへどんな風に表示させるかの設定」です。これが二つあったため、表示結果にバラツキがでちゃったんですね。で、オフにした結果、Simplicityの設定通りにツイッターカードが表示されるようになったのです。

ツイッターカードの表示を確認できる「Card Validator」

ツイッターカードの表示状態をチェックするのに便利なツールがあります。それが「Card Validator」です。

ツイッターカード検証ページ Card Validator

ここで調べたいURLを入力するとツイッターカードの確認が出来るので試してみて下さい。

最後にひとこと

今回の問題はとても単純な原因であっという間に解決しました。しかしやはりプラグインはできるだけダイエットした方がいいんだなあと痛感しました。でもJetpackは見ていて楽しいので切り捨てるのは惜しいので、また別のトラブルの原因にならない限りは使いたいと思います。

ここまでお読み下さり、ありがとうございました。

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