Twitterカードを使ってブログ記事を効果的に紹介する方法:Cocoonテーマを活用した手順ガイド

Twitterカードを使ってブログ記事を効果的に紹介する方法:Cocoonテーマを活用した手順ガイド よく使う機能

ブログのアクセス数を増やすために、Twitter(現X)アカウントを開設しました。X開設の記事はこちらをご覧ください。この記事では、WordPressのテーマCocoonを使用してブログ記事のアイキャッチ画像を含むTwitterカードを投稿する手順を詳しく説明します。この方法を使って、次のような投稿を目指します。

Twitterカードを使った投稿方法として、「All in One SEO」プラグインを検討しましたが、Cocoonの機能と重複するため、共存は推奨されていません。また、セットアップもやや複雑だったため、Cocoonの機能を使用することにしました。

この記事でわかること
  • Twitterカードを使ってブログ記事を効果的に紹介する方法
  • Cocoonテーマを活用したTwitterカードの設定手順
スポンサーリンク

条件

  • WordPressを使用し、外観のテーマに「Cocoon」を採用しています
  • PCからChromeを使ったポストを基本とします
  • Xアカウントは無料サービスの範疇でひとまず利用してます
    いわゆる未認証アカウントとなりバッチがないアカウントです。

準備編

CocoonのOGP設定

OGPとはOpen Graph Protocolのことで、WepページがSNSでシェアされた際に、そのページのタイトル・URL・画像・説明文などの情報を正確に表示するための仕組みで、これによりシェアされたコンテンツが視覚的に魅力的に見えます。

CocoonのOGP設定手順
  • Step1
    WordPressの管理画面にアクセスして、①[Cocoon設定]➡②[OGP] を選択します。
  • Step2
    設定画面で、「OGP設定」と「Twitterカード設定」が下記であることを確認します。
  • Step3
    続いてホームイメージを変更します。
    デフォルトの「ホームイメージ」は、Cocoonテーマのデフォルトイメージになっています。これを「TKDタワー個人商店について」で設定したアイキャッチ画像に変更します。最後に「変更をまとめて保存」をクリックして終了です。

動作確認 - Card Validator

以前はTwitterの Card Validator(カード バリデーター) のサイトで、プレビュー画像を確認することができましたが、2022年8月にはプレビュー機能が廃止されました。現在は「Card preview has moved to Tweet Composer」のメッセージが表示されます。
画面下のLOG欄に「INFO:  Card loaded successfully」と表示されれば問題ありません。実際の動作確認は、ポストの下書き中に行えます。

運用編(ブログ記事の投稿)

ポスト(ツイート)の手順

ブログ記事作成して公開したらポストします。ポスト方法は2パターン考えられます。

  1. ブログ記事のURLをコピーして、Twitterのポストに貼り付けます
  2. ブログ記事にSNSシェアボタン設定している場合(本ブログではCocoon設定でボトム表示しています)、「Twitter」ボタンをクリックしてポストします

簡単な方法である2の手順で進めます。

ポスト(ツイート)手順
  • Step1
    公開した記事のボトムに配置した「Twitter」ボタンを押します

    ChromeでX(旧Twitter)にログイン済なので下記画面となります。ただし、想定していたポスト画像ではない場合があります。

  • Step2
    画像が表示されなかった場合の対処です

    Twitterの Card Validator(カード バリデーター) のサイトで公開記事のURLを「Preview card」で一度実行してから、再度「Twitter」ボタンを押すと、想定画像が表示されます。

  • Step3
    投稿内容を編集してポストします
  • Step4
    ポスト結果を確認します

    「ポストする」を押すと、次のようにポストできました。

まとめ

この記事では、Twitterカードを使用してブログ記事を効果的に紹介する手順を説明しました。これにより、ブログ記事の作成と更新時にポストすることで、読者をブログに誘導しやすくなり、より多くのアクセスが期待できます。

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