【AIOSEO利用者必見】URL載せてもアイキャッチが出てこない場合の対処法

WordPressでブログを書いていて、記事を紹介しようとURLを載せたところ、記事のアイキャッチが出てこない事ありませんか?

例えば

最近始まった気になるブロガーの更新通知などが届いたりブロガーと繋がれる便利なサービス
ブログマップ

カテゴリー別にブログランキングを表示してくれる便利なサービス
ブログ村

などブロガー向けのサービスを利用したいときなど、記事のアイキャッチ画像が反映されないなどの、トラブルの原因は主にOGPOpen Graph protocolの略称)です

OGPとは

FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

プラグインの仕様変更など、今まで表示されていたのに、急に表示されなくなる場合があります
便利なプラグインもトラブルが有ると厄介な時がありますね

アイキャッチ画像が表示されない原因は、私も使用しているWordPressのプラグイン All in One SEO原因でした

この記事では

WordPressプラグインAll in one SEOでの対策やコード記述による対策を紹介したいと思います

それでは記事で説明していきたいと思います
スポンサーリンク

All in One SEOについて

All in One SEO
SEO対策プラグイン All in ONE SEO

WordPressのSEO対策プラグインも色々な種類がありますが、有名なプラグインといえば、All in One SEOYoast 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をさがしてください

AIOSEO設定画面1
手順1
  • All in One SEOをクリックします
  • ②次にソーシャルネットワークをクリックしましょう
AIOSE0設定画面
AIOSEO設定画面2
手順2
  • Facebookのタブをクリック
  • Enable Open Graph Markupチェックが入っているか確認しましょう
    画面のとおりなら問題ありません
    ここにチェックが入っていることでOGPの設定がONになります
  • Default ImageになっていればここをFirst Available Imageに変更しましょう
    First Available Imageに変更することで最初に利用可能画像(アイキャッチが表示されます)
  • ⑥最後に設定を保存することをお忘れなく

以上で完了です

シビスケ

2021年9月ごろからブログ村へのアイキャッチ画像の出力が上手く機能していませでした
この設定をすることでアイキャッチが表示されます

ご自身がURLを載せたいサイトでアイキャッチが出力出来ていれば成功です
お疲れさまでした

コード記述を利用したOGPの設定方法

コード記述

コード記述でのやり方は主にSEO対策プラグインを利用してない方向けになります
私も実際にやってみましたが、AIOSEOを利用していると、コードを記述しても変更されませんでした
優先順位がSEO対策プラグインになっているからだと思われます

またコード記述は間違っていじってしまうと、トラブルの原因になる為、コード記述が簡単に追加出来るプラグインInsert Headers and Footersを使用することをオススメします

詳しくはこちらの記事をご覧ください

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メディアより

自身サイトのアイキャッチがない場合に使用する画像は
WordPressメディアより使用したい画像を選びURLをコピーを行い使用してください

設定が完了すればURLを記載したサイトを確認し変更できていれば終了です

AII in OneSEOなどのプラグインを使用したほうが簡単に設定できますので私はそちらをおすすめします

アイキャッチ画像が反映されない場合に行うことのまとめ

初心者の方は基本SEO対策プラグインを使用したほうが簡単に設定できます
アイキャッチ画像を表示するにはOGP設定が必要だということを覚えてください

AII in One SEOでの対策
  1. All in One SEO設定よりソーシャルネットワーク選択
  2. Facebookタブを選択
  3. 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のテーマで変更できるものも存在しますので、まずはご自身のテーマをご覧いただき、設定できない場合は上記の方法を試されてください


以上少しでもお役に立てれば幸いです
ここまでご覧いただきありがとうございました