2020年08月18日

TwitterのOGP設定が「All in One SEO」で上手く作動しない場合の対応方法

OGP:Twitterの設定方法+ALL In One SEOでのバグの対処方法

こんにちは!SeekNextの佐藤です。今回は『TwitterのOGP設定が「All in One SEO」で上手く作動しない場合の対応方法』について書いていこうと思います。

前回の記事にて基本的なOGPの設定方法に関しては解説しましたが、TwitterのOGPを設定するためには前回の記事に加えて以下の設定が必要となります。
前回の記事をご覧になってない方は以下をご覧下さい!

TwitterのOGPを設定するために必要なコード

<head>のなかに以下のコードの追加が必要です。

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

Twitterカード(Twitte:card)

Twitter上での表示タイプを指定するタグになります。
カードの種類はブログやwebサイト用、アプリ配布用、動画サイト用と全部で4種類あり、それぞれ見せ方が変わってきます。

  • Summary Card:タイトル、説明、およびサムネイル。
  • Summary with Large Image:summary cardと同じ形ですが、画像の大きさが大きいものになります。
  • App Card:アプリ配布用の表示カード。
  • Player Card:ビデオ/オーディオ/メディアを表示できるカード。

ホームページでの設定を考えれば、「Summary Card」か「Summary with Large Image」を設定しておけば問題ありません。

「Summary Card」の見た目

「Summary with Large Image」の見た目

設定するOGPの画像の種類や大きさによって使い分ければベストかなと思います。

ちなみに以下のサイトですぐにOGPの設定を確認することができます!

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

TwitterのOGP設定が「All in One SEO」で上手く作動しない場合の対応方法

SEOからOGPの設定まで全部を担ってくれる「All in One SEO」?

以上のような設定をサイト毎やブログ記事毎に設定するのは大変ですよね?そんな時に便利なのが、SEOの定番プラグインの「All in One SEO」なのですが、環境によってはOGPの設定をしても上手く設定されないことがあります。(All in One SEOでのOGP設定方法は別記事にまとめたいと思います。)

上手く表示されない原因は「コードにミスがある」「PHPのバージョンがあって居ない」「プラグインが最新バージョンではない」など色々とありますが、どうしても解決できない場合は以下の方法にて対応するといいと思います。
実際私がこの上記のtwitterのOGPが表示されない時に、以下の方法で解決しました!

具体的な対処方法

「WordPressの管理画面」→「外観」→「テーマエディター」→「header.php」の<head></head>の中にOGP設定コードを直接書き加える。

端的に言ってしまえば、プラグインの力を借りずに、コードに直接書いてしまおうということです。もちろん、初心者がテーマエディタをむやみに改変するとテーマが壊れてしまうことがありますが、ある程度コードの中身が分かる方なら難なくこなせると思います。(<head></head>がどこに設定されているかでどのコードを改変するかは変わります。)

私自身が上記の現象に出くわした時、ネットでかなり対応方法を探しましたが、見つからなかたので、お困りの方は是非、こちらの記事を参考にして頂ければと思っています!