ビジネス向けWEBサイトをつくる

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

本ページはプロモーションが含まれています

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

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

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

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

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

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

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

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画像」として指定したのは以下の画像でした。

OGP画像

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

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

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
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"/>

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

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

OGPを設定するプラグイン

「OGP」を設定するプラグインといえばSEOプラグインしかありません。

よく知られているのは、以下のプラグインです。

SEOプラグイン
  • All in One SEO
  • Yoast SEO
  • SEO SIMPLE PACK

弊社のサイトは上記のいずれも使用していません。

インストールされているプラグインを眺めてみると、これではないかというプラグインに目星をつめました。

それが「Jetpack」だったのです。

Jetpackの共有設定が原因

「Jetpack」にSEO設定があるなど、今まで全く気づきませんでした。

それが共有設定です。

管理画面→Jetpack→設定→共有から設定します。

Jetpackの共有設定

問題は「Jetpackソーシャル連携」です。

Jetpack ソーシャル連携

サイトをソーシャルメディアネットワークに接続すると、クリックひとつですべてのソーシャルアカウントにコンテンツをシェアできます。投稿すると、すべての接続済みアカウントに表示されます。

この説明を読んでもOGPを設定するとは一言も書いていません。

ところが以下のように「投稿をソーシャルネットワークに自動共有」をオンにすると、「OGP」が設定されてしまうのでした。

※「画像を自動的に変換して互換性を確保する」のチェックはオンでもオフでも結果は同じでした。

まとめ

「Jetpack」をインストールしている際には、この設定を確認してみてください。

「OGP」が二重で書かれていることは大問題です。

ましてや、勝手にファビコンの画像を「OGP画像」に設定するなど、ありえない仕様だと思います。(それとも、これからのトレンド??)

ご注意ください。

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

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

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

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

5 × 4 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。