WordPress|Twitterカードを表示させる方法[備忘録]

WordPress

サイトが全部飛んだので少しずつ中身を充実させていっている段階ですが、少しいじった後に「これどうやったんだっけ?」となることが多いので、変更した内容はすぐに記事にして、メモとして残すのがいいのかなあ、なんて思ったので試しに載せてみます。

今回変更したのはTwitterカードです。

ここのブログにとても詳しく書いてあったので参考にさせて頂きました。
https://investmoneyds.com/twitter-card/

スポンサーリンク

Twitterカードとは

まずTwitterカードとは何か、という話なのですが、ツイートの中にURLがある際、その記事のアイキャッチ画像や文章が表示される機能のことです。

実際のTwitterカードはこんな感じ。

この画像には alt 属性が指定されておらず、ファイル名は card3.png です
留研トップページのTwitterカード。ファビコンが使われちゃってるよぉ…ふえぇ

なんかすごいことになっていますが気にしないでください。
このカード状に表示されている画像と文章(サイトの内容)がTwitterカードです。

Twitterカードを設定しないと…

先程のTwitterカードはトップページのものでしたが、適当に書いた記事をTwitterに投稿したらデフォルトっぽい画像になってしまいました。

Cocoonというテンプレートを使用しているので、その画像がTwitterカードに表示されちゃっていますね。

なんか違う!となってしまったTwitterカード

これはTwitterカードを設定しなかったために起こってしまったようです。

とりあえずすぐに改善したくて適当に見つかった情報で対策をしましたが、いちいち記事ごとに設定しなければならないのですごく面倒です。

Twitterカードの設定方法

というわけでTwitterカードの画像を記事のアイキャッチ画像にするための設定方法を書いていきます。

Twitterカードの設定はブログ側とTwitter側、両方で設定しなければなりません。
留研ではWordPressを使用しているので、WordPressのプラグインを使った設定を紹介します。

 

WordPress側の設定

まず、「All in One SEO Pack」というプラグインをインストール。

その後All in One SEOの「機能管理」からソーシャルメディアを有効に。

ソーシャルメディアの画像設定で、「OG:Imageソースを選択」を「アイキャッチ画像」にすることで、Twitterカードにアイキャッチ画像が表示されます。

次にTwitter設定のデフォルトTwitterカードで「要約の大きい画像」を選ぶことでサイズの大きい画像が表示されます。

Twitterサイトには自分の@含んだTwitterID、
TwitterドメインにはURL(https://twitter.com/〇〇)を入力して完了。

最後に「設定を更新」をクリック。

WordPress側ではこれで終わりです。

Twitter側の設定

次にTwitter側の設定ですが、「Card validator」を使用します。

「Card URL」にTwitterカードを作りたい記事のURLを入力し、「Preview card」を押すと…

お……?

ちゃんとアイキャッチ画像が表示されたー!!!

申請してから少し時間はかかりますが、Twitterで確認するとちゃんと変わってるはずです。よかった。

Card Previewの下にLogが表示されますが、Logの4行目が「 INFO:  Card loaded successfully 」になっていれば成功です。

一応Twitter側でも確認してみます。

大丈夫ですね!!よかった!!

Twitterカードをいちいち設定するのは面倒ですが、設定しなければしないでなんだかモヤモヤするのでこれからはちゃんと設定していきたいと思います……

こんな感じでブログやサイトを運営する上でのメモを今後はしっかり残していきたいです。

あとは定期的にバックアップ取らないとだめですね、消えたら元も子もないので……