【WordPress】初心者だけどTwitterカードを表示させたい!


知ってる! ワードプレスってなんでもできるんでしょ!
というアホなことを考えてると色々な壁にぶち当たります。
その一つがTwitterカードの表示です。全然できないぞ!

検索すればある程度ヒントは出てくるのですが、まずは情報を整理いたしましょう。
自分のために。全てはn秒後の自分のために。n秒後の自分は他人なので。

サーバ関係ではバリバリ初心者ですが、CSSとかFTPとかの知識はちょこっとあります。
というかWordPress(以下WP)自体はちょこちょこ弄っているので初期設定ではありません。悪しからず。

ちなみに

↓当方の環境
サーバ:ロリポップ
テーマ:cocoon(1.9.9.5.3)

↓陥った状況
・サーバでSSL設定をした
・WPのテーマで検索除けの設定+OGP設定+メディアのパス変更設定をした
上記の設定をした上で、TwitterにURLを載せたところ何も起こらず。

↓望む状況
・https~のURLでTwitterカードが出るようになる
・個別記事や固定ページでもTwitterカードが出るようにする

↓Twitterカードの表示チェック
https://cards-dev.twitter.com/validator
左のCard URLに該当URLを入力して、右の表示欄にTwitterカードが出ればこの記事とは晴れておさらばです。
何か設定変更をしたら、Ctrl+F5で反映されていないかチェックしましょう。

ちなみに当方はhttpsでもhttpでも下記のエラーと対面するところからスタートでした。
ERROR: Fetching the page failed because it's denied by robots.txt.
なんでさ!

解決に向けるべく行ったこと

とりあえずリストでばばっと書き出します。
検索すれば引っかかるものも多いと思われますので、そこは逐次スルーで。
結果として要因ではなかったものもありますが、調べた順序で一応記載します。

①WPのテーマ設定でOGPの設定
②「インデックスされない設定」の解除
③中間証明書とやらのチェック
④WP側でのSSL設定
⑤相対パスから絶対パスへ

①WPのテーマ設定でOGPの設定

参考:意外と見落としがちなやっておいた方が良い Cocoonの設定

CocoonではポチポチするだけでTwitterカードが作成出来てしまいます。
無料なのにすごいですね。よく見かける言葉ですが切に思います。

Cocoon 設定 > OGP
・ OGPの有効化
・ Twitterカードの有効化
・ 画像のアップロード

上記の3項目にチェックを入れたり画像をアップロードしたりすれば、CocoonでのTwitterカードの設定はおしまいです。
とっても簡単なので、周知されている方のほうが多いとは思います。

ちなみに他のテーマでは「All in one SEO pack」というプラグインを使うとTwitterカードを比較的容易に設定出来るようです。
参考:「All in one SEO pack」でTwitterカードを簡単に設定する方法

そしてCocoonのOGP設定をした上で上記のプラグインを設定すると、Twitterカードは表示されませんでした。
設定が重複しているのか、プラグインの設定の方が優先されているのか真偽は不明です。
(確かめてないので)

そんな(自分と似たようなアホっぽい)ことをする人はいないと思いますが、
もし二重に設定しているならプラグインの停止をオススメします。

②「インデックスされない設定」の解除

参考:Twitterカードの反映、エラー

WPには「検索エンジンがサイトをインデックスしないようにする」
という所謂検索除け設定がチェックボタン一つで設定出来てしまいます。

設定 > 表示設定
・検索エンジンでの表示

上記の項目のチェックを外すとサイトがインデックスされます。
(古のオタクなので)WEB検索でサイト名を検索されたら嫌だなあと思って、
反射的に設定していましたが、本来はサイト公開前などに設定する項目のようです。

……と思っていたようですが違うようです

ですが、当方はこちらのチェックを外したところ「httpのURLで」Twitterカードが表示されるようになりました。
インデックスされる=検索エンジンがサイトをクローリングしてくれる、なので当然といえば当然ですが。

目標は「httpsのURL」で表示することなので、ひとまず一段階目はクリアです。
SSL接続って言った方が良いと思います。

③中間証明書とやらのチェック

参考:HTTPS接続の場合でだけTwitter Cardが表示されない問題

これじゃね!? と思いましたが結論から言うとこれじゃありませんでした。
さくらじゃないのに「こんな画面ないよ!?」と該当画面を大捜索していましたが、
お前はロリポップだろうが! と最終的にセルフツッコミして終焉いたしました。

要約すると、SSL接続の際には中間証明書というものがないとだめなようです。
詳しくは参考のサイトを!

↓中間証明書がインストールされているかのチェック
https://www.digicert.com/help/
Server Addressの欄にURLを入力してチェックしましょう。
当方はエラーが出なかったので、インストールされているようでした。
エラーが出るときは中間証明書をインストールしましょう! そのまんまですね。

よくわかっていませんが、ロリポップありがとう。

④WP側でのSSL設定

参考:WordPressで無料テーマ「Cocoon」を使う、常時SSL化は最初にやった方が楽

結論から言うと、この設定で二段階目をクリアしました。
やっぱりSSL接続が悪かったんや!! (知識不足を棚に上げながら)

手順
1.WordPressの 設定 > 一般設定 に移動
2.WordPressアドレス(URL)とサイトアドレス(URL)を「https」に変更
3.Cocoon設定 > その他 に移動
4.内部URLをSSL対応(簡易版)にチェックを入れて保存

この設定で「httpsのURLで」Twitterカードが表示されるようになりました。
しかしTOPページしかTwitterカードの画像が表示されません。
望む表示まであと一歩!

⑤相対パスから絶対パスへ

参考:Twitterカードを設定しているのにタイムラインにアイキャッチが表示・反映されない場合の対処方法

思い当たる節しかありませんでしたね。

WPのメディアアップロード場所を相対パスで指定すると、アップロードした画像が全て相対URLになります。
①のOGP設定を行うと、アイキャッチ画像を自動でTwitterカードのサムネイルに設定してくれますが(多分)、その画像は絶対パスでなければ表示されません。
何を言っているんだ貴様という感じですね。

つまり、こちらのサイトをよく読まなかった弊害です。
参考:画像の保存先フォルダとimgタグ内のパスを変更する設定方法
画像をアップした際の保存場所が指定出来るというもの。

となれば、やるべきことは簡単です。
前準備としてFTPを使って予めディレクトリを作っておく必要があります。
FTPが分からない方はロリポップ限定ですが、こちらを参考にすると良きです。

余談ですが、画像のパス指定が煩わしかったので、アイキャッチ用の画像以外は専らFTPでサーバに直接ぶんなげることにしました。
THE二度手間。

手順
1. http://[ドメイン名].com/wp-admin/options.php にアクセス
2. Ctrl+Fでupload_path,upload_url_pathの項目まで移動
3. upload_pathにディレクトリ名を入力(例 img)
4. upload_url_pathにディレクトリ名を絶対パスで入力(例 http://[ドメイン名].com/img)

相対パス事件を起こらないようにするためには4の設定が重要です。ディレクトリ名だけだとだめです。
スクリーンショットのない説明で申し訳ないですが、詳しく知りたい方は上記の参考サイトを!

上記の手順に沿ってぽちぽちしたところ、望むようなTwitterカードの表示が実現できました!
万歳! やったね!

まとめ

・Twitterカードを出したいなら検索除けは止めよう
・サーバの設定をしたらWPの設定もしよう
・画像のパスは絶対パスにしよう

と設定したものの、静的サイトへの気持ちが昂る今日この頃。
静的サイトだったらこんなプラグインないから、自分で設定するはめになるんだろなあ。