はじめに
今更なんですがランディングを増やすためにTwitter（X）でも記事の通知をしようと思いました。しかし、ただ文字だけでは味気ないし、それじゃあ来てもらえないしで、いろいろ考えた結果。TwitterカードをTwitter（X）に設置することを考えました。
でも今まで全くやったことないし、設定もしたことないしで四苦八苦した結果、簡単にTwitterカードを作る方法を見つけたので備忘録がわりに記事にします。もしかするとTHE THOR関係なくTwitterカードを簡単に作れるかも。
Twitterカードとは
Twitterカード（Twitter Cards）とは、Twitter上でリンク先のコンテンツの概要を直接表示できる機能です。これにより、ツイートに含まれるURLが単なる文字列ではなく、画像や説明付きのカード形式で表示されます
最近ハマっているperplexity aiより。つまるところ、Twitterの投稿をパッと見で何なのかが把握しやすくなるというわけです。目を引くアイキャッチ画像であれば、余計にランディングが増えるはずです。実際に今回ご紹介する方法では以下のように表示されます。
さっそく簡単にではありますが紹介します。
実装の流れ
大きく流れは以下の通りです。
1. プラグイン「All in One SEO」を入れる。
2. プラグイン「All in One SEO」の設定をする。
3. 作成した記事下部のTwitter共有アイコンで共有する。
たったこれだけのことでTwitterカードが実装できます。ちなみにですが、このサイトである「生成ai.net」は日本語ドメイン。ここが引っかかると思い、たしかに引っかかったのですが簡単にクリアできますのでご安心を。
また下記のCard validatorを利用することで状況を確認できますが、私の場合はいつまで経ってもプレビュー画面が表示されませんでした。よってプレビューを見るためではなく、状況確認に用いるだけで良いかと思います。
1. プラグイン「All in One SEO」を入れる。
プラグインの新規追加から「All in ONE SEO」を追加し、有効化しましょう。普段からプラグインを触っているTHE THORの利用者の方であれば問題なくできるはずです。
2. プラグイン「All in One SEO」の設定をする。
上記で追加したAll in One SEOの設定をします。
「Xカードを有効化」はオンにして、「デフォルトの投稿画像ソース」はアイキャッチ画像にします。「デフォルトの投稿 X 画像」も念のため指定しておきましょう。
ここら辺はテキトウでいいかも。あまり気にしていません。
すると、プレビュー画面が表示されます。「カードの種類」はお好みで、「ホームページのイメージ」も画像を指定しましょう。
ここもテキトウでいいかも。最後に「変更を保存」をクリックして変更します。
たったこれだけで前準備完了です。念のために上記でも紹介しているCard validatorで確認するといいかも。エラーが出ていなければOKです。
私の場合、はじめ何度もCard validatorでエラーが出ていました。おそらく日本語ドメインであることや、記事のURLが日本語だったこともあったのかもしれません。しかし、次の方法でそこが一気に解決します。
3. 作成した記事下部のTwitter共有アイコンで共有する。
1番重要な作業です！自分では普通やらないと思うのですが、自身の記事の下にあるTwitter共有ボタンをクリックします。THE THORを使われていると、記事の1番下の方にあるボタンです。以下画像の赤枠部分をご参照ください。
ここをクリックすると・・なんぞー、英語と文字列だらけになるが・・・。
日本語ドメイン＋日本語URLの部分が勝手にエンコード？されるのです。「このままでもTwitterカード化されるの？」と思いますよね。念のために上記URLをコピーしてCard validatorで確認しましょう。
見ての通り上記赤枠の通りエラーが出ておりません。これでOKなのです。早速Twitter（X）で投稿しましょう。すると・・
「それっぽくなってるけどアイキャッチ画像がないぞ？」と思いますよね。慌てることなかれ。約2〜3分後。
ご覧の通り、サムネイルでアイキャッチ画像が追加されてTwitterカード形式で投稿されています（フォロワー0人は気にしないでください、本人も気にしていません笑）。
おわりに
いかがでしたでしょうか。とりあえず「All in One SEO」を入れて、記事を作成し、作成した記事を自分でTwitter共有すれば、自動的にTwitterカード化されて投稿できるのです。ぜひ、お試しください！
追記
※2024年6月19日
THE THORにてサイトカードが有効にならない件についても、上記で表示されるURLを設定することで表示されるようになりました！どうやら日本語ドメインや日本語URLがよくなかったみたい？とりあえず、様子見です。