OGP画像がファビコンになったら、Jetpackを疑いましょう

「Theme3」では外部リンクはブログカードのプラグインを使っています。

2024.03.30

私が運営するサイトを外部リンクしたところ、設定したはずの「OGP画像」ではないものがブログカードに設定されていて驚きました。

その画像はファビコンだったのです。

原因はプラグインのJetpackでした。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

1 OGP画像とは
2 OGP画像がファビコンになっている
3 WordPressのOGPサポート
4 OGPを設定するプラグイン
5 Jetpackの共有設定が原因
6 まとめ

OGP画像とは

「OGP（Open Graph Protocol）」はウェブやSNSで共有された際に使用されるメタデータプロトコルです。

当サイトのトップページは以下のようになっています。

htmlの<head></head>の間に記述されています。

<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.theme3.net/wp-content/uploads/2023/01/OGP.jpg">
<meta property="og:title" content="テーマ・テーマ・テーマ！ | 一生使えるWebスキルを身につけよう！">
<meta property="og:description" content="「Theme3」の情報で、目的に合ったWEBサイトやコンテンツが、どなたでも作れるようになることを願って、ノウハウを提供していきます。制作会社にたよらずホームページを作りたい。仕事に使えるデザインスキルを身につけたい。そんな方にオススメしたい情報をめざします。">
<meta property="og:url" content="https://www.theme3.net/">
<meta property="og:site_name" content="テーマ・テーマ・テーマ！">

「OGP画像」の指定は

<meta property="og:image" content="https://www.theme3.net/wp-content/uploads/2023/01/OGP.jpg">

です。

このサイトの外部リンクブログカードは「OGP画像」をアイキャッチに使用するので、どのような画像か以下で確かめることができます。

ホーム

テーマ・テーマ・テーマ！テーマとは、行動や創作の基調となる考えのこと？はじめての方はこちらオススメ記事各ユーザーへのオススメ新...

このようにメタデータを提供することで、ページを魅力的に見せ、ユーザーがクリックしやすくなります。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

OGP画像がファビコンになっている

実は「OGP画像」の異変に気づいたのは弊社のサイトにブログカードでリンクをはったときでした。

※以下画像

アイキャッチに指定した画像とは異なるものが表示されているではありませんか。

この画像はファビコンです。

私が「OGP画像」として指定したのは以下の画像でした。

これはどういうことなのでしょう。

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

WordPressのOGPサポート

WordPressではテーマ自体あるいはプラグインによって「OGP」をサポートすることが一般的です。

弊社のサイトテーマ「UNIQUE」もテーマ設定で「OGP」をサポートしています。

設定を確認すると問題無く設定されていました。

次にHTMLソースを確認しました。

以下が指定されたコードです。

<meta property="og:type" content="website">
<meta property="og:url" content="https://www.slashd.com/">
<meta property="og:title" content="企画デザイン事務所 スラッシュディー">
<meta property="og:description" content="岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。">
<meta property="og:site_name" content="企画デザイン事務所 スラッシュディー">
<meta property="og:image" content="https://www.slashd.com/wp/wp-content/uploads/2023/09/ogp-1.jpg">
<meta property="og:image:secure_url" content="https://www.slashd.com/wp/wp-content/uploads/2023/09/ogp-1.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

しかし、もう一箇所、以下のコードも記述されていたのです。

<meta property="og:type" content="website"/>
<meta property="og:title" content="企画デザイン事務所 スラッシュディー"/>
<meta property="og:description" content="岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。"/>
<meta property="og:url" content="https://www.slashd.com/"/>
<meta property="og:site_name" content="企画デザイン事務所 スラッシュディー"/>
<meta property="og:image" content="https://www.slashd.com/wp/wp-content/uploads/2018/09/cropped-mark-4-1.png"/>
<meta property="og:image:width" content="512"/>
<meta property="og:image:height" content="512"/>
<meta property="og:image:alt" content=""/>
<meta property="og:locale" content="ja_JP"/>

これは、テーマ以外の設定がされているということです。

このようなことが起きるのはプラグインしか考えられません。