WordPressでブログを書いていて、記事を紹介しようとURLを載せたところ、記事のアイキャッチが出てこない事ありませんか？
例えば
最近始まった気になるブロガーの更新通知などが届いたりブロガーと繋がれる便利なサービス
ブログマップ
カテゴリー別にブログランキングを表示してくれる便利なサービス
ブログ村
などブロガー向けのサービスを利用したいときなど、記事のアイキャッチ画像が反映されないなどの、トラブルの原因は主にOGP（Open Graph protocolの略称）です
プラグインの仕様変更など、今まで表示されていたのに、急に表示されなくなる場合があります
便利なプラグインもトラブルが有ると厄介な時がありますね
アイキャッチ画像が表示されない原因は、私も使用しているWordPressのプラグイン All in One SEOが原因でした
この記事では
WordPressプラグインAll in one SEOでの対策やコード記述による対策を紹介したいと思います
それでは記事で説明していきたいと思います
スポンサーリンク
目次
All in One SEOについて
WordPressのSEO対策プラグインも色々な種類がありますが、有名なプラグインといえば、All in One SEOとYoast SEOではないでしょうか
私も実際に使用しているプラグインAll in One SEOを導入すると
- Google XML Sitemapの自動送信
- スニペットプレビュー機能
- SNSへの拡散時に役立つ機能
- Google Analyticsの全体サポート
などの機能が使えるようになります
初心者向けのプラグインなので導入されている方も多いため、Google検索を行っても情報が多いのも利点の一つです
今回のトラブルの原因は
All in One SEOの仕様変更によるものでした
具体的な解決方法を紹介したいと思います
ソーシャルネットワーク設定の変更を行う
設定って難しそうですね
設定はすごく簡単なので、画像つきで紹介しますね
主にAll in One SEOをインストールされている方のトラブル対策になります
それではまずAll in One SEO略してAIOSEOと呼ばせていただきます
WordPressのメニュ画面よりAIOSEOをさがしてください
- ①All in One SEOをクリックします
- ②次にソーシャルネットワークをクリックしましょう
- ③Facebookのタブをクリック
- ④Enable Open Graph Markupにチェックが入っているか確認しましょう
画面のとおりなら問題ありません
ここにチェックが入っていることでOGPの設定がONになります - ⑤Default ImageになっていればここをFirst Available Imageに変更しましょう
First Available Imageに変更することで最初に利用可能画像（アイキャッチが表示されます） - ⑥最後に設定を保存することをお忘れなく
以上で完了です
2021年９月ごろからブログ村へのアイキャッチ画像の出力が上手く機能していませでした
この設定をすることでアイキャッチが表示されます
ご自身がURLを載せたいサイトでアイキャッチが出力出来ていれば成功です
お疲れさまでした
コード記述を利用したOGPの設定方法
コード記述でのやり方は主にSEO対策プラグインを利用してない方向けになります
私も実際にやってみましたが、AIOSEOを利用していると、コードを記述しても変更されませんでした
優先順位がSEO対策プラグインになっているからだと思われます
またコード記述は間違っていじってしまうと、トラブルの原因になる為、コード記述が簡単に追加出来るプラグインInsert Headers and Footersを使用することをオススメします
詳しくはこちらの記事をご覧ください
アイキャッチ画像をOGPに設定するコードを記述する
今からご紹介するコードはWebサイト制作の相談室さんを参考にさせていただきました
アイキャッチを表示させる為にはOGPの設定が必要です
このコードはアイキャッチ画像があるならば、それをOGPとして利用する
なければ指定した画像をを使用するというコードになります
以下に記載されたコードを、<head></head>の間に記述し使用します
コード記述は便利なプラグインInsert Headers and Footersを利用しましょう
<?php if (has_post_thumbnail()) : ?>
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<?php else: ?>
<meta property="og:image" content="アイキャッチがない場合に使う画像のURL" />
<?php endif; ?>コードを使用する場合は赤字で記載された「アイキャッチがない場合に使う画像のURL」部分に画像のURLと入れ替えたうえで、コードを記述します
自身サイトのアイキャッチがない場合に使用する画像は
WordPressメディアより使用したい画像を選びURLをコピーを行い使用してください
設定が完了すればURLを記載したサイトを確認し変更できていれば終了です
AII in OneSEOなどのプラグインを使用したほうが簡単に設定できますので私はそちらをおすすめします
アイキャッチ画像が反映されない場合に行うことのまとめ
初心者の方は基本SEO対策プラグインを使用したほうが簡単に設定できます
アイキャッチ画像を表示するにはOGP設定が必要だということを覚えてください
- All in One SEO設定よりソーシャルネットワーク選択
- Facebookタブを選択
- First Availbel Imageへ変更
<?php if (has_post_thumbnail()) : ?>
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<?php else: ?>
<meta property="og:image" content="アイキャッチがない場合に使う画像のURL" />
<?php endif; ?><head></head>の間に赤字の部分にデフォルト画像のURLに変えてコード記述を行う
以上のようになります
OGP設定はWordPressのテーマで変更できるものも存在しますので、まずはご自身のテーマをご覧いただき、設定できない場合は上記の方法を試されてください
以上少しでもお役に立てれば幸いです
ここまでご覧いただきありがとうございました
FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。