Twitterカードがウェブサイトのタイトルを取得できないのをどうにかしたっていうお話

ウェブ制作勉強日記

どうも、とるねもです。

今回は、Twitterにワードプレスサイトのリンクを埋め込んだ時の表示がおかしくなったのをどうにかしたというお話を備忘録にしておきます。

どんな不具合が起きたか

ブログなどのURLをTwitterに貼ると出てくるこんな表示(Twitterカードというらしいです。今回初めて知りました)

の、この部分↓

上の画像で青く囲っている、ページのタイトルが正しく表示されないというものです。

不具合が起きたサイトはちょっとお見せできないものなので説明できる素材がこれぐらいしかないです、すみません…。

ちなみに今回の不具合では、ウェブサイトのトップページurlを埋め込んでいるのにTwitterカード上ではサイト名ではなく、『非公開:(記事タイトル)』、つまり非公開状態にしているはずの新着記事タイトルが表示されるという状態でした。

原因はTwitterカード設定とそれに使うプラグイン

で、この不具合を調べた結果原因がわかりましたので以下に書いておきます。

結論を言えば、原因はTwitter側ではなくサイト側のTwitterカード設定にありました。

Twitterカードは実は自動で生成されるものではなく、サイトの方にOGPなるものを設定することで使えるようになるみたいなんです。

OGPとはなんぞやという方は以下の記事(デジタルマーケティングブログ様)を参考にしてみて下さい。

OGPを設定しよう!SNSでシェアされやすい設定方法とは?
OGPの設定していますか?設定することでFacebookやSNSでURLが共有された際に、サイトの情報をユーザーに対して正確に伝えることができます。今回はOGPの基本的な設定方法やポイント、困った時の対処法などをご紹介します!

で、このOGPですが上の記事のようにコードを書かないといけないのかというとそんなことはなく、プラグインを使えば手軽に設定できます。代表的なものですとみんな大好き『All in One SEO Pack』などですね。

All in One SEO – Best WordPress SEO Plugin – Easily Improve SEO Rankings & Increase Traffic
元祖 WordPress SEO プラグイン。 包括的な SEO ツールとスマートな SEO 最適化を使用して、WordPress SEO のランキングとトラフィックを改善します。

しかし今回の場合、別のOGPプラグインを使用していた事が原因でした。使っていたのは『VK All in One Expansion Unit(ExUnit)』。

VK All in One Expansion Unit
このプラグインは、強力なWebサイトとなるさまざまな機能を備えた統合プラグインです。

使っているテーマ『Customizr』との相性が悪かったのか、はたまた別の原因かはわかりませんが、ExUnitでTwitterカード設定をすると、トップページをTwitterに貼る際サイトタイトル以外のものをタイトルとして認識・取得してしまう場合があるようです。

私の場合はブラウザ上で右クリックして『ページのソースを表示』→<meta property=”og:title” content=”〇〇○○” />の「〇〇○○」に書いてあるものを確認し、タイトルの取得ができていないという事実を発見できました。

そこでカード設定をExUnitからAll in One SEO Packに切り替えたところ、正常にTwitter上でページタイトルを取得してくれるようになりました。めでたしめでたし。

終わりに

突貫工事で記事を書いてみました。わかりにくい説明だったらすみません。

不明点あればコメントや私のTwitterで可能な限りお答え致します。

それではここまでお読み頂き、ありがとうございました!

コメント

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