どうも、とるねもです。
今回は、Twitterにワードプレスサイトのリンクを埋め込んだ時の表示がおかしくなったのをどうにかしたというお話を備忘録にしておきます。
どんな不具合が起きたか
ブログなどのURLをTwitterに貼ると出てくるこんな表示（Twitterカードというらしいです。今回初めて知りました）
の、この部分↓
上の画像で青く囲っている、ページのタイトルが正しく表示されないというものです。
不具合が起きたサイトはちょっとお見せできないものなので説明できる素材がこれぐらいしかないです、すみません…。
ちなみに今回の不具合では、ウェブサイトのトップページurlを埋め込んでいるのにTwitterカード上ではサイト名ではなく、『非公開:（記事タイトル）』、つまり非公開状態にしているはずの新着記事タイトルが表示されるという状態でした。
原因はTwitterカード設定とそれに使うプラグイン
で、この不具合を調べた結果原因がわかりましたので以下に書いておきます。
結論を言えば、原因はTwitter側ではなくサイト側のTwitterカード設定にありました。
Twitterカードは実は自動で生成されるものではなく、サイトの方にOGPなるものを設定することで使えるようになるみたいなんです。
OGPとはなんぞやという方は以下の記事（デジタルマーケティングブログ様）を参考にしてみて下さい。
で、このOGPですが上の記事のようにコードを書かないといけないのかというとそんなことはなく、プラグインを使えば手軽に設定できます。代表的なものですとみんな大好き『All in One SEO Pack』などですね。
しかし今回の場合、別のOGPプラグインを使用していた事が原因でした。使っていたのは『VK All in One Expansion Unit（ExUnit）』。
使っているテーマ『Customizr』との相性が悪かったのか、はたまた別の原因かはわかりませんが、ExUnitでTwitterカード設定をすると、トップページをTwitterに貼る際サイトタイトル以外のものをタイトルとして認識・取得してしまう場合があるようです。
私の場合はブラウザ上で右クリックして『ページのソースを表示』→<meta property=”og:title” content=”〇〇○○” />の「〇〇○○」に書いてあるものを確認し、タイトルの取得ができていないという事実を発見できました。
そこでカード設定をExUnitからAll in One SEO Packに切り替えたところ、正常にTwitter上でページタイトルを取得してくれるようになりました。めでたしめでたし。
終わりに
突貫工事で記事を書いてみました。わかりにくい説明だったらすみません。
不明点あればコメントや私のTwitterで可能な限りお答え致します。
それではここまでお読み頂き、ありがとうございました！
コメント