この記事にはプロモーションが含まれていることがあります

SNSにブログのプレビュー画像を表示させる方法

IT
スポンサーリンク

OGP(Open Graph Protcol)を設定する

皆さん、ブログ書いてますかー?

自分のブログをSNSでお知らせしたい時ってありますよね。例えばTwitterでお知らせするだけなら、記事のURLを貼り付けてツイートするだけでOKですが、OGPの設定をしていないと、ただのリンクになってしまいます。

私は、WordPressCocoonテーマブログを書いていますが、OGPを設定しないでSNSにリンクを貼るとこんな感じになります。Cocoonの画像になってしまいます。せっかくなら、自分のブログのヘッダ画像を表示したいですよね!

やり方は簡単です。さっそく設定してみましょう。

OGPってなに?

Open Graph Protcolの略です。難しいことは置いといて、これを設定すると、リンクを貼った時に、指定した画像をSNS上に表示してくれるようになります。

スポンサーリンク

設定方法

WordPress(テーマ:Cocoon)の場合の設定方法を紹介します。

設定方法

①Cocoon設定をクリックし、②のOGPタブをクリックします。次に③のOGPタグの挿入のチェックボックスにチェックを付けます。

次に画面を下にスクロールすると、①Twitterカードタグの挿入のチェックボックスがありますので、こちらもチェックを付けます。②で表示のタイプを指定します。通常サイズと大きな画像でどう違うのか書こうと思ったのですが、私の環境では同じなってしまいました。ここはお好みでOKです。

ちなみに、Facebookの設定もできるようですが、私はFacebookをやっていないので確認できないため、スキップします。

最後にTwitter上に表示する画像をアップロードします。アップロードが完了すると、プレビューが表示されますので、それを確認して設定を保存します。これで設定は完了です。

スポンサーリンク

確認方法

Twitterの場合は、Card Validatorという確認用のツールが提供されていますので、それを使ってどのような表示になるか確認できます。

2023.11.11 追記

Card Validatorは2022年の8月に削除されてしまったようです。
今後はX(旧:ツイッター)のポスト画面にURLを貼り付けてプレビューで確認するしかなさそうです。

Card Validator - preview removal
We’ve recently removed the preview functionality from the Card Validator. Previews are still available in the Tweet Comp...

Card URLにブログのURLを入力して、Preview cardボタンをクリックすれば右側にプレビューが表示されます。

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

OGP未設定状態

OGP設定済み状態

確認ができたら、実際にTwitterでブログのリンクを貼って、ツイートしてみましょう。せっかく書いたブログですから、どんどん宣伝して行きましょう!

コメント

タイトルとURLをコピーしました