noteだけで自分のWordPressの記事のブログカードが表示されない原因を究明！完全ガイド

菅原隆志

僕はあまりこういった知識がないのですが、ChatGPT4oを使うと原因特定と解決が早い！！素晴らしい！

特定のサイトのみnoteでブログカードが表示されない問題とは？

多くのWordPressユーザーが、自分のサイトのリンクをnoteに貼り付けた際に、ブログカードが正しく表示されないという問題に直面しています。しかし、今回のケースでは特定のサイトだけが表示されない現象が起きていました。この現象は一見些細なことのように見えますが、ブログカードが正常に表示されるかどうかは、読者の利便性やクリック率に直結します。本記事では、この問題の根本的な原因と、どのように解決したかを詳しく解説します。

notoだけでブログカードが表示されず、URLになってしまう。
（notoに問い合わせたけど、notoはワードプレス側に問題があるようですとの返答だった）

消去法で原因を特定したプロセス

この問題の原因を特定するために、以下の手順を試行しました。

1. プラグインの無効化

まず、WordPressサイトにインストールされているすべてのプラグインを無効化してから、noteにブログカードが表示されるか試しました。しかし、結果は変わらず、ブログカードは表示されませんでした。このことから、プラグインが原因ではないことが判明しました。

2. 同じテーマを使用している他のWordPressサイトでのテスト

次に、同じテーマを使用している他のWordPressサイトで試しました。その結果、設定が同じであるにもかかわらず、別のサイトでは正常にブログカードが表示されました。このことから、テーマが原因ではないと判断しました。

3. 同じサーバー内のサブドメインサイトでのテスト

問題のあるサイトと同じサーバーでホストされているサブドメインサイトを使用して試したところ、こちらではブログカードが正常に表示されました。このことから、サーバーやドメインそのものが原因ではない可能性が高いと考えられました。

4. OGPタグの確認

HTMLソースコードを確認し、OGP（Open Graph Protocol）タグが正しく設定されていることを確認しました。具体的には以下のようなタグが存在しており、正しく機能しているように見えました。

<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の説明">
<meta property="og:image" content="画像URL">
<meta property="og:url" content="ページのURL">

このことから、OGPの設定ミスではないことが明らかになりました。

菅原隆志

下記サイトで、OGP確認をしてみたところエラーに・・・。OGP（Open Graph Protocol）タグに設定ミスはないのに、なぜエラーになるんだろ？と思って、「何かがブロックしているな」と思いました。

OGP確認

OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧 URLを入力すると各SNS（facebook・twitter・はてなブックマーク・LINE）でページをシェアした際のOGP画像・タイトル・説明文を確認できるOGPデバッガー・シミュレーター。P…

5. セキュリティプラグインの影響を確認

セキュリティプラグインの設定を確認したところ、「*.amazonaws.com」をブロックする設定が含まれていることが分かりました。この設定は過去の大規模な不正アクセスを防ぐために追加されていたものです。

この設定を解除したところ、noteに貼り付けたリンクのブログカードが正常に表示されるようになりました。

原因の核心：ブログカードが表示されない理由

WordPressとnoteの間でブログカードが表示されない原因は、主に以下のポイントに集約されます。

1. OGP（Open Graph Protocol）の不備

OGPタグは、ウェブページのメタ情報を外部サイトが適切に取得できるようにするための仕様です。このタグが適切に設定されていない場合、note側がリンク先の情報を取得できず、ブログカードが生成されないことがあります。

2. セキュリティプラグインの影響（今回の原因はコレ）

今回のケースでは、セキュリティプラグインがAmazon AWSをブロックしており、noteのクローラー（notebot）もその影響を受けていました。notebotはAWSサーバーを使用しているため、この設定が原因でOGP情報の取得が妨げられていたのです。

菅原隆志

今回の僕の場合は、「２」が原因であることが特定されました！

現在の課題：Amazon AWSを許可できない理由

僕の場合、Amazon AWSからの不正アクセスの試みが頻繁に発生している状況があります。例えば、以下のようなデータがあります：

下記は、このサイトに対しての攻撃をブロックした数です。

攻撃のほとんどが、「Amazon AWS」からです。

• 今日の攻撃: 694件
• 今週の攻撃: 3,132件
• 今月の攻撃: 9,554件以上

このような状況では、AWS全体のアクセスを許可することはセキュリティリスクが非常に高いため、現実的ではありません。

AWS全体をブロックする理由と注意点

「*.amazonaws.com」が悪いわけではありません。このドメインは多くの正当なサービスが利用しています。しかし、AWSを不正利用する者も多く存在するため、防御策としてブロックが必要な場合があります。

私の場合、AWSを利用した以下のような攻撃を受けていたため、全体をブロックする設定にしていました：

攻撃の具体例

1. 大量のスキャンリクエスト
   • 発生元: 47.128.125.229（Singapore）
   • 詳細: 短時間で複数回にわたりトップページへのアクセスを試みる。サーバー負荷を増加させる目的の可能性。
2. カテゴリーページへの不審なリクエスト
   • 発生元: 47.128.59.0（Singapore）
   • 詳細: 特定のカテゴリーページへのアクセスを繰り返すスキャン行為。攻撃者がサイト構造を解析しようとしている可能性。
3. ブラウザを偽装したボット活動
   • 発生元: 47.128.47.170（Singapore）
   • 詳細: User-Agentを一般的なモバイルブラウザに偽装し、不審なアクセスを行う。
4. 継続的なトップページスキャン
   • 発生元: 47.128.38.34（Singapore）
   • 詳細: トップページを対象とした過剰なリクエスト。リソース消耗を狙ったDDoS的な動作の可能性。

解決策: notebotのみを許可して問題を解決

AWS全体をブロックしつつ、notebotのIPアドレスを許可

セキュリティプラグインや.htaccessファイルを利用して、以下のような設定を行いました：

1. AWS全体のアクセスを引き続きブロック。
2. noteのクローラー（notebot）に使用される特定のIPアドレス（例: 54.65.179.191）をホワイトリストに追加。

設定例: .htaccess

<RequireAny>
    Require ip 54.65.179.191
</RequireAny>

RewriteEngine On

# notebotのホスト名を許可
RewriteCond %{REMOTE_HOST} ec2-54-65-179-191.ap-northeast-1.compute.amazonaws.com [NC]
RewriteRule .* - [L]

# その他のAWS関連アクセスを拒否
RewriteCond %{REMOTE_HOST} amazonaws\.com [NC]
RewriteRule .* - [F,L]

結果

このような設定により（僕の場合は少し違うやり方なので、上記は参考程度に留めてください）、AWS全体からの不正アクセスを引き続き防ぎつつ、noteのブログカード生成に必要なnotebotのアクセスを許可できました。

僕の場合は使っているセキュリティプラグインの「ファイアウォール設定」「ファイアウォールの詳細設定」「すべてのルールをバイパスする IP アドレスの許可リスト」にnoteのクローラー（notebot）に使用される特定のIPアドレスを追加しました。

まとめ：問題解決の鍵は正確な診断と調整

noteでブログカードが表示されない問題は、セキュリティプラグインの過剰な設定が原因であることがほとんどです。今回のケースでは、「*.amazonaws.com」のブロック設定がnotebotのアクセスを妨げていたことが問題の核心でした。しかし、AWS全体を許可することなく、特定のIPアドレスをホワイトリストに追加することで、問題を無事解決しました。

本記事について

この記事は、WordPressとnoteの連携問題に関する筆者の経験と知識を基に、ChatGPT4oによって作成されました。