ROAD

【ブログ初心者必見】アフィンガーOGP設定が反映されない原因は?

工場勤務サラリーマンが20万円 稼ぐまでの道のり】 第23話
悩むひと
OGP設定やったのに、反映されてない!?

 

私自身、ネットで調べた方法でOGP設定をやったのですが、このような問題に直面しました。

結構調べたのですが、解決策がなかなか見つからず、今回の問題解決にかなりの時間を要しました。

 

こちらがその時の画像です。

OGP設定トップページ 設定前画像

アフィンガーの管理画面からOGP設定をし、キャッシュを削除したにも関わらずこの表示のまま...

 

そこで今回は、アフィンガーでOGP設定が反映されないときの解決法についてご紹介します。

 

私は、ブログのトップページを固定記事から作っていました。

 

こんな人におすすめ

  • ブログのトップページを固定記事から作っている人
  • どうやってもOGP設定が反映されない人
  • 私がどのように解決したか知りたい人

 

 

OGP設定が反映されない理由の仮説

OGP設定説明アイキャッチ画像

ネットで調べた方法でOGP設定を何度しても、私のブログはOGP設定が反映されませんでした。

試行錯誤をした結果、以下の4点の理由が考えられました。

  • 反映されるまでのラグが理由
  • 固定記事のアイキャッチ画像が理由
  • テーマのHTML、CSSが理由
  • アフィンガーの管理画面の設定が理由

 

固定記事のアイキャッチ画像から検証

 

OGP設定トップページ 設定前画像

 

OGP設定として表示されている画面が上記のようになっていたため、「トップページ」「新着記事」「おすすめ記事」「ROAD」「OUTDOOR」「BLOG」と書いている記事を調べました。

 

結果、この内容は固定記事で書いていることがわかりました。

そこで、固定記事のタイトルを「トップページ」から「Enaka Blog」に変更したところ、このようになりました。

 

OGP設定 固定ページから検証説明

 

私の場合のOGP設定では、固定記事のタイトルを参照にしていました。

 

固定記事を参照しているなら、固定記事のアイキャッチ画像にOGP設定の画像を設定したら解決すると考えました。

 

設定後の表示画面

OGP設定 固定ページから検証説明 設定後

 

上手くいったので、この方法で設定後、ブログのトップページを確認しました。

 

確認時のトップページ

 

OGP設定 固定ページから検証説明 設定後のトップページ

 

ヘッダー画像とアイキャッチ画像がブッキングしてしまっています。

 

そこで、固定記事のアイキャッチ画像を非表示にする方法で検討しました。

 

開発者ツール(Chromeデベロッパー)で検証

 

アフィンガーで、固定記事のアイキャッチ画像を非表示にする方法について調べましたが、私が調べた限りそのような方法はありませんでした。

 

調べたクエリ

・AFFINGER 固定記事 アイキャッチ画像

・AFFINGER 固定記事のアイキャッチ画像を非表示

・AFFINGER 記事ごとにアイキャッチ画像を設定する方法

・WordPress アイキャッチ画像 非表示

・AFFINGER トップページの画像設定方法 etc...

このように、調べた結果

 

WordPressでアイキャッチ画像を非表示にする方法について検証しました。

 

開発者ツール(chromeデベロッパー)での検証方法

 

step
1
トップページで『右クリック』→『開発者ツールで調査する(N)』

 

OGP設定 chromeデベロッパーの立ち上げ 

 

step
2
開発者ツール(chromeデベロッパー)が立ち上がる

 

OGP設定 chromeデベロッパーから検証説明

HTMLコードにカーソルを合わせると、どこを宣言している文章かがわかる。

今回の場合は、『st-eyecatch』がクラスになります。

 

私の場合は、st-eyecatchが固定記事のアイキャッチ画像を表示していました。

 

step
3
.st-eyecatch{}の中にdisplay: none; を入力

 

OGP設定 chromeデベロッパーから検証説明 display noneの入力

 

display: none;

 

step
4
『AFFINGER5 管理』→『追加CSS』にクラスを指定して、display: none;を入力後、 公開

OGP設定 chromeデベロッパーから検証説明 追加CSSにdisplay noneの入力

 

step
5
表示画面の確認

OGP設定 chromeデベロッパーから検証説明 追加CSSにdisplay noneの入力設定後

 

注意点

ここで、このコードを入力してしまうと各記事のアイキャッチ画像も非表示になってしまいます。

 

こんな感じです。

OGP設定 chromeデベロッパーから検証説明 追加CSSにdisplay noneの入力設定後 記事ごとのアイキャッチ画像

 

この方法が『自分に合ってる!』という方は、是非使ってみてください!

 

アフィンガー管理画面から検証①

 

私の場合、固定記事からトップページを作っていたので、アフィンガーの管理画面の『トップページ』から作ることにしました。

設定

・『アフィンガーの管理画面』の『OGP設定』からトップページ用の画像設定済み

・固定記事は非公開、アイキャッチ画像なし

 

step
1
『トップページ』→『挿入コンテンツ』をクリック

 

OGP設定 AFFINGER5管理画面のトップページの設定

 

step
2
固定記事に書いていた内容をそのまま貼り付ける

 

OGP設定 AFFINGER5管理画面のトップページの設定 固定記事の内容入力

 

step
3
『カスタマイズ画面』→『ホームページ設定』で『最新の記事』にチェックをいれて、 公開

 

OGP設定 AFFINGER5管理画面のトップページの設定 カスタマイズ画面

 

step
4
表示画面の確認

 

OGP設定 AFFINGER5管理画面のトップページの設定 固定記事の内容入力後OGP画像

 

アフィンガー管理画面から検証②

 

設定

・『アフィンガーの管理画面』の『OGP設定』からトップページ用の画像設定済み

・固定記事は非公開、アイキャッチ画像なし

 

step
1
『トップページ』→『トップページに固定記事を挿入』→『表示したい固定記事のid入力』を入力

 

OGP設定 AFFINGER5管理画面のトップページの設定固定記事のid入力画面

 

step
2
『カスタマイズ画面』→『ホームページ設定』で『最新の記事』にチェックをいれて、 公開

 

設定固定記事のid入力画面カスタマイズ画面

 

step
3
表示画面の確認

設定固定記事のid入力後OGP画像

 

まとめ

 

いかがだったでしょうか。

私の場合は、この問題を解決するまでに3時間以上かかりました((-_-;)

ブログのトップページを固定記事から作成されていて、OGP設定がお済みでない方』は、ぜひ今回ご紹介した内容でトライしてみてください!

OGP設定は、やって損なし!なのでこの際サクッとやっちゃいましょう(^^)/

 

それでは、

これからも一緒に楽しくブログ書きましょ(*^▽^*)

記事のまとめ

  • トップページを固定記事から作っている場合は、AFFINGERの管理画面から設定
  • OGP設定の反映には時間がかかる

 

合わせて読みたい

はじまりの記事

 

 

  • この記事を書いた人

いなさら

田舎系副業ブロガー|九州の田舎でサラリーマンをしながら発信しています! Enaka Blogでは、『ブログの情報やポケットWi-Fiのこと、アウトドアを中心に発信しています。』 少しでもみなさんのお役に立てれば幸いです!! よろしくお願いします(≧◇≦)

-ROAD

© 2021 Enaka Blog Powered by AFFINGER5