WordPressの記事をTwitterに投稿してもTwitter Cardが表示されないサイトがある問題。原因はテーマによるOGP対応・非対応の違いでした。

何やってんだかよくわからないと言うお声を時々いただいております。オケタニです。毎日、朝の連続テレビ小説で広瀬すずと中川大志の恋の行方にドキドキしたり、吉本興業のゴタゴタをワイドショーで楽しく眺める日々を送っております。楽しいな!! 楽しいな!!(←という「仕事下さい!!」という悲痛な心の叫び。)

そんな毎日ですが、このブログをはじめ、いくつかのサイトを WordPress で作っては消し、作っては消し、という賽の河原で石ころを積み上げては鬼にブッ壊されるようなことをしたりもしています。色々と試してみたい病が持病にあるものですから、テーマやプラグインを色々と試してみては「これは違う…」「あれはうまくいかない…」とモン★モン Days を送っているのですが、その中で困っていたのが、

「WordPress で記事を公開した後にTwitterに記事のURLを投稿すると、そのツイートにTwitter Cardがちゃんと投稿されるサイトとされないサイトがある」

という事でした。

Twitter Card sample

以前仕事で WordPress をいじっていた時は特に何も考えずともTwitter Cardが表示されていたので、そのノリで続けていたんですけども、どうやらこれはちゃんと確認しないとこのモヤッとした状態が解消されないよねぇ…という事でちょいちょいっと調べてみたらあっさり解決しました。

原因その1:テーマがOGPに非対応

WordPressテーマとプラグインの相性 OGPの重複出力にはご注意 | うれしデザイン

WordPressで書いた記事をTwitterやFacebookでシェアした時、意図した通りのアイキャッチ画像が出ないことがありませんか?

SNSでシェアしたときにアイキャッチ画像を付けるには、OGP(Open Graph Protocol)の設定が必要です。

正に今回問題になっているポイントがここ。SNS でシェアする時に OGP が適切に設定されていないとならないというのは一応知識とは知ってましたが、具体的に何をどうするの?はほとんど今まで意識してなかったわけです。

で、ここで知ったのが…

最近の高機能な有料テーマではOGPの設定がテーマの機能として組み込まれていることが多く、プラグインを使う必要はほとんどなくなっています。

つまり裏を返せばテーマ側に機能がなければ、プラグインで追加してやらなければならないというわけです。

今回問題になっていたサイトのテーマは有料のテーマだったので、「まさか対応してないって事はないだろう…」と思いつつ記事のソースを見てみると…

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

手順3:「ページのソースを表示」をクリック

ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。

手順4:「og:」で検索

すると、そのページを構成しているHTMLタグがずらっと表示されます。

<(;´・ω・)> 「対応されてねェーッ!!!」

という事が判明。Twitterカードなんぞ出てこなくて当然、だったわけです。有料のテーマなのに… 有料なんですけど…(※ちなみにテーマの公式 Q&A を確認したら「手動かプラグインで対応してね★エヘッ」って書いてありました。ぎゃふん)

原因2:JetPack プラグインでSNS連携を切っていた

OGP 機能を追加するプラグインはいくつかあります。

WordPressテーマとプラグインの相性 OGPの重複出力にはご注意 | うれしデザイン

OGPの出力機能があるプラグイン

1. All in One SEO Pack
2. Yoast SEO
3. Jetpack
4. Open Graph Pro

OGPタグの設定とWordPress(ワードプレス)用プラグイン。 これからのホームページにOGPタグは必須の設定項目です。 | 小さな会社の経営者の最強ホームページ戦略

WP-OGP
Open Graph Proとほぼ同じシンプルなプラグインです。

オケタニはほとんどのサイトに JetPack を導入しているので、既に OGP を出力する環境にはなっているはず。

(;´・ω・) 「でも現実には出力されていない… 何故だ。」

Jetpack OGPとTwitterカードタグのカスタマイズ – セルティスラボ

JetPackプラグインでパブリサイズ共有や共有を有効にすれば自動的に出力されます

通常、WordPress の記事を Twitter に投稿する際は色々と手を加えたりすることが多いので JetPack のパブリサイズ共有は OFF にしているのですが、これがダメだった模様。

そこで JetPack の [設定] → [共有] → [パブリサイズの接続] → [投稿をソーシャルネットワークに自動共有] を ON にして、Twitter を該当のアカウントに接続するように設定します。

これで記事のソースを再度確認すると無事に OGP 設定が反映され、OGP の準備は整いました。

原因3:サイトが Twitter の Card Validator で認証されていなかった

Twitter カードに関する解説ページを色々見ておりますと、

Jetpack OGPとTwitterカードタグのカスタマイズ – セルティスラボ

Twitter で画像イメージ等を表示するには Twitter カードの申請が必要です

Twitterカードに関しては下記参照
https://dev.twitter.com/ja/cards/overview

申請しないと Twitter カード情報のメタタグが出力されていても使われません
申請は、使用するカードタイプ毎に必要なので注意です

という記載があちこちで見られるんですが、今はこの申請作業は不要との事。「下記参照」のページも既に削除されています。

Twitter Cardの登録申請は簡易化されてほぼ無いので古い情報には注意してね! – LIFE-IDEA

検索結果に出て来る古い記事を参考にしているとここでつまづく人が多いかと思われます。
古い記事はここで面倒な手入力があったそうですが、今はそんなものはございません。

古いページで紹介されている申請ページのURLはいかの通り。
https://cards-dev.twitter.com/validator

じゃあ何もしなくても OGP が出力されていれば自動的に Twitter Card も表示されるようになるのか?と言うと決してそんな事はなく、申請作業はちゃんとしなければなりません。オケタニ、これに気付かず

(;´ーω-) 「何故出ない… 何故出ない…」

と小一時間悩みに悩みました。

具体的にどうすればいいのかと言いますと…

いまどきの申請ページは以下の通りです。
https://cards-dev.twitter.com/validator

承認が完了すると以下の画像の通りになります。

自分のサイトのどこかのページを上記の申請ページ「Card Validator」にて入力、[Preview card] をクリックしてページの右側に Twitter Card が適切に表示され、Log 欄にエラーが出てなければサイトの申請は無事に完了となります(らしい)。これ1回やれば、後は同じドメインのサイト(サブドメインも含む)のページは全て Twitter Card 対応となります。

以上で WordPress の記事を Twitter Card に対応させる作業は完了でございます。また新しいサイトを立ち上げる時はこれを忘れないようにしなければなりません、っつーわけですね。


PlayStation4 2019年・夏ラインナップのプロモーションムービーのオシャレ臭がすごくてやっぱりSIEってSIEなのよねぇ…と思う2019年・夏。

PlayStation4 2019年・夏ラインナップ PV

新作ラインナップの PR でこういうのを作っちゃうところが SCE…じゃなくて SIE の SIE らしいところだとは思うけど、オジサンなオケタニにはちょっとオシャレ番長すぎて「ゲームのワクワク感はゲームの映像で見せてくれよ!!」って思っちゃったりもする。

そういう点では任天堂の見せ方はうまいなーといつも感心する。

PlayStation®4 Lineup Music Video 「夢の中へ」ft. suis from ヨルシカ – YouTube


開店!! カブトムシのレストラン!! → そして事態は予想外の方向へ…【18禁】

いよいよ今週は梅雨も明けようかという7月下旬。子供も夏休みに入り、お盆進行も目前に控え、「夏!!」感も高まってまいりました。オケタニです。今年の夏は去年ほど暑くないといい…暑くないといいな!!!

とは言え、まだ梅雨明け前ってー事でお天気もグズり気味でいまいち。家のベランダから空を見上げて、

( ´・ω・) 「あ~、中々日差しが出てこないな~。」

などとひとりごち、ふと視線を下に落としてみると、夏のお客様の訪れが。

カブトムシ 1

カブトムシさんでございます。今年も来たやね!!!

カブトムシ 2

天を貫くその角。威風堂々たるクロビカリ・ボディー。やっぱりカブトは昆虫の王様よ!!

家の近所にまあまあ大きな林があるからか毎年カブトなりクワなりご来訪いただく我が家なんですけども、その御姿を拝見致しますと、やっぱりオトコノコですからね。ズッキュン★キュン★キュンするもんですよ。

今週から夏休みに入ったムスメさんに

( ´・ω・)ノノ 「おーい、カブトムシさんおるでやでぇ~。」

と声をかけると、

\( ・∀・)ノ 「うわーい!かわいいー!」

と、大はしゃぎ。

( ´・ω・) 「そうだろ。ほら、触ってみ。」

(・ω・ )彡フイッ 「ウウン。いらない。」

( ´・ω・)ノ 「かわいいよ。ほら。」

(・ω・;)ノノ 「やだやだやだ!こわいぃぃぃー!!」

(;´・ω・) 「えぇー。」

小学生になったムスメさん、今年から夏休みの自由研究が始まるという事で、

( ´・ω・) 「そうだ。パパ良い事思いついた。カブトムシ育てて観察日記つけなよ。」

( ・ω・) 「やだ。」(←即答。)

やっぱり女子にカブトムシはあかんか~。

( ´・ω・) 「そっか~… じゃあこれどうする?」

( ・ω・) 「逃して。」(←即答。)

( ´・ω・) 「ハァ~イ…(ショボーン」

仕方がないので、庭の木にでも逃がすか…という事で、庭に生えている木にカブトムシを逃してやることにしました。

( ´・ω・)ノ 「今年も来てくれてありがとう。ほら、ここで一休みして適当な時間に裏の林にでも飛んでいきな。」

…と、カブトムシを庭の木(A)にたからせつつ、何の気なしにその隣に生えている庭の木(B)に目をやると…

カブトムシ 9

ゲェーッ!!! カブトムシの団体様御一行、ご来店中~ッ!!!

カブトムシ 3

何と都合5匹ものカブトムシが木に張り付き蠢いているという意外な状態に…!!! (※ベランダに来ていたヤツは別にして)

カブトムシ 4 女子会

こちらは女子会。

カブトムシ 5 カップル

そしてこちらはカップルでのご来店。アツアツでございますな!!

それにしても、こんなにカブトムシが、あたかもゴ○ブリの如く群がるとは…今までこの家に住んできて10年超、全く気が付きませんでした。

よくよく木を見てみると、

カブトムシの木 1

カブトムシの木 2

あちこちに皮を削り取ったような線状の跡が付いている。

カブトムシ 8 食事中

よくよく見てみるとガッツリと木を齧り取って樹液をチューチューなされているご様子なので、これは樹液を吸うために徐々に徐々に削り取りながらにじり寄っているからこうなっているわけですかね…

とすると、木に付いている跡の数が相当あることを考えると…

(;´・ω・) 「もしかしてうちってまあまあ評判の良いレストランだったりするん?」

まぁ今日だけのスペシャル・デーなのかもしれませんけども。

ところでこれって何の木なんだろう…? 今までこれが何の木なのかも知らんままに過ごしてきてしまった、そんなボクを許してほしい。

 

ちなみに、この様子を見るなり、

( $m$) 「これ売れるね!? 売ったらいいんじゃな~い!?」

と、おばあちゃんのテンションが爆騰していました。おばあちゃん、カブトムシ相場ってのはそんなに甘いものじゃあないんですよ…

【追記】カブトムシレストランのその後

カブトムシ 10 交尾中

(;´・ω・) ラブホになってました

これ見ていてビックリしたんですが、カブトムシのピストンってメチャクチャ速いのな!!! ガクガク震えていてオケタニちょっと怖かったです。

しかも、終わった後にですね… オスが角でそのメスを見事に投げ飛ばして、メスが吸っていた樹液場を奪い取って悠々と1人樹液を吸ってましてね…

何なん、この溢れんばかりのクズっぷりは。カブトムシこわい。