MENU
CLOSE
STUDYWEBSITE Edit : 2023.12.04 Update : 2023.12.04

記事ごとのアイキャッチ画像をOGP画像に設定する方法(WordPress)

2023年10月5日、X(旧Twitter)のOGPの仕様が大きく変更となリました。
そこで今回は、前回のアイキャッチの設定に関する記事に引き続き、WordPressのアイキャッチを使用し、X(旧Twitter)のOGPを設定する方法をご紹介したいと思います。
前回のWordPressの記事投稿でアイキャッチ画像を設定する方法はこちら。

OGPとは

Open Graph Protocolの略称で、SNSでWebページをシェアした際に「タイトル」「画像」「URL」「説明文」などが表示される仕組みのことです。
LINEでシェアした際のOGの見え方 ※弊社で制作したサイトをLINEでシェアした際のOGの見え方

X(旧Twitter)のOGP仕様変更について

X(旧Twitter)は2023年10月5日、「ポスト(投稿)内に掲載された外部リンクのタイトル・見出しを削除するアップデート」を実施しました。
これによってポスト(投稿)にリンクを埋め込むと、記事の見出しなどを自動表示せず、画像とリンク先のドメイン名だけ表示されるようになりました。

WordPressのアイキャッチ画像をOGPに設定する方法

今回は、All in One SEOというWordPress用のプラグインを使用します。
All in One SEOとは、WordPressでのSEO対策を簡単にするためのプラグインです。
このAll in One SEOのソーシャルネットワーク設定を利用すれば、SNSのOGP設定が簡単にセットアップできるようになります。

All in One SEOでのOGP設定について

  1. All in One SEOのダウンロードと初期設定を行う
  2. ※今回は、ダウンロードと初期設定の方法を割愛します。
  3. All in One SEOのダッシュボードからソーシャルネットワーク設定の管理をクリック
  4. WordPressのアイキャッチをOGPに設定する方法01 WordPressのアイキャッチをOGPに設定する方法02
  5. ソーシャルプロフィールから連携したいSNSアカウントのURLを入力
  6. ※今回はX(旧Twitter)アカウントとの連携となるため、弊社のXアカウントの情報を入力します。
    WordPressのアイキャッチをOGPに設定する方法03
    当メディアのXアカウントはこちら。
    Webに関する様々な情報をお届けしております。
    https://twitter.com/webtrendslab

  7. 変更を保存をクリック(連携するSNSアカウントの設定完了)
  8. 次にTwitter > Twitterカード設定を行う
  9. WordPressのアイキャッチをOGPに設定する方法04
    Twitterカードは下記のように設定します。
    WordPressのアイキャッチをOGPに設定する方法05
    • Twitterカード有効化:ON
    • カードタイプのデフォルト:大きな画像で要約
    • デフォルトの投稿画像ソース:アイキャッチ画像
    • デフォルトの投稿Twitter画像:任意の画像を設定*
    • *任意の画像を設定しておくと、アイキャッチ画像が設定されていない場合もここで指定した画像が表示されるようになります。

  10. 変更を保存をクリック → 設定完了

Word Pressの投稿画面でのOGP設定について

  1. Word Pressメニュー内の投稿一覧より記事の編集画面へ

  2. 編集画面の下部にあるAIOSEO設定よりSocial > Twitterタブをクリック

  3. Twitterプレビューを確認しながら下記の設定を行う

    • イメージソース:アイキャッチ画像
    • Twitter カードタイプ:大きな画像で要約

  4. 記事の更新or公開を選択 → 設定完了

X(旧Twitter)にてOGP設定を確認する

  1. X(旧Twitter)のポストするをクリック
  2. (OGP設定済みの)記事のURLを入力
  3. プレビュー表示
  4. ※URL入力後、しばらくするとプレビューが表示されます


まとめ

いかがでしたでしょうか。
All in One SEOを使用すると、簡単にアイキャッチ画像をOGP画像として設定することができました。
また、OGPの推奨サイズは、横1200×縦630pxです。このサイズだと、WordPress内のアイキャッチと共通で使用できます。
WordPressの機能についてもっと知りたい!という方は以下の記事もご覧ください。




tacot

大学卒業後、デジタルマーケティング会社に入社しメディア広告営業やウェブサイトのディレクションを担当。前職の経験を活かしウェブディレクターをしながらWeb制作業界にまつわるコンテンツを執筆中。