Cloudflare環境でのLINE OGP画像表示問題の解決記録

問題概要

AstroベースのサイトをCloudflareでホスティングしていたところ、LINEでURLを共有した際にOGP（Open Graph Protocol）画像が表示されない問題が発生しました。HTMLページは正常に表示されるものの、Social Previewで使用される画像だけが表示されない状態でした。

診断プロセス

1. OGPタグの確認

まず、OGPタグが正しく設定されているか確認しました：

<meta property="og:image" content="https://aqz.jp/_astro/tech058-hero.Uo5u4UQj.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="OGP画像の説明" />

ブラウザ開発者ツールで確認したところ、OGPタグは正しく設定されていました。

2. 画像アクセスの確認

cURL コマンドで画像への直接アクセスをテストしました：

curl -I https://aqz.jp/_astro/tech058-hero.Uo5u4UQj.jpg

結果：HTTP/2 403 Forbidden

直接ブラウザでアクセスすると画像は表示されるが、cURLではアクセスできないという状態でした。

3. 問題の特定

LINEのUser-Agentを特定するため、Cloudflareのログを確認しました：

実行された操作: スキップ
ASN: AS38631 LINE LINE Corporation
ユーザーエージェント: facebookexternalhit/1.1;line-poker/1.0

ここで重要な発見：LINEのクローラーはLinebotではなくline-pokerというUser-Agentを使用していました。

4. Cloudflare設定による解決

最初は/_astro/ディレクトリのみに対するページルールを試しましたが、本質的な問題が見えたため削除し、代わりにサイト全体に対して以下の包括的なカスタムルールを実装しました：

条件: (http.user_agent contains "line-poker") or (http.user_agent contains "facebookexternalhit") or
      (http.user_agent contains "Twitterbot") or (http.user_agent contains "embedly") or
      (http.user_agent contains "quora link preview") or (http.user_agent contains "SocialSnippet") or
      (http.user_agent contains "vkShare") or (http.user_agent contains "LinkedInBot") or
      (http.user_agent contains "Slack") or (http.user_agent contains "TelegramBot") or
      (http.user_agent contains "WhatsApp")

次に、アクションを実行します...

アクションを選択する: スキップ

スキップする WAF コンポーネント

- ☑残りのすべてのカスタム ルール
- ☑すべてのレート制限ルール
- ☑すべての管理ルール
- ☑スーパー ボット ファイト モードの全ルール

スキップするその他のコンポーネント
- ☑ゾーンのロックダウン
- ☑ユーザー エージェントのブロック
- ☑ブラウザ整合性チェック
- ☑Hotlink の保護
- ☑セキュリティ レベル
- ☑レート制限ルール（以前のバージョン）
- ☑管理ルール（以前のバージョン）

場所:

順序を選択してください:最初

これは既存のGoogleBotの許可設定と同様の形式で、すべてのSNSクローラーに対して一括でアクセスを許可する設定です。

5. 検証

最終的な設定確認：

# LINEクローラーでHTMLページアクセス確認
curl -I -A "facebookexternalhit/1.1;line-poker/1.0" https://aqz.jp/post/tech058-ai-talent-definition-self-evaluation/
HTTP/2 200

# 画像アクセス確認
curl -I -A "facebookexternalhit/1.1;line-poker/1.0" https://aqz.jp/_astro/tech058-hero.Uo5u4UQj.jpg
HTTP/2 200

教訓

1. SNSクローラーのUser-Agentは標準的でない場合がある

   • LINEはline-poker、従来想定されていたLinebotではない

2. Cloudflareのセキュリティ設定がSNSクローラーを誤ってブロックする可能性がある

   • ブラウザ整合性チェック
   • User-Agentベースのブロック
   • レート制限

3. 部分的なルールではなく、包括的なSNSクローラー許可ルールが必要

   • 特定のディレクトリだけでなく、サイト全体へのアクセスを許可
   • クローラーは画像だけでなくHTMLページも読み込む

4. 複数のSNSプラットフォームを考慮した設計が重要

   • LINE、Facebook、Twitter、Slack、など
   • 一括でSNSクローラーを許可する方が管理が容易

解決策のまとめ

最終的な解決策は、すべての主要なSNSクローラーのUser-Agentを包含する包括的なCloudflareカスタムルールの実装でした。このアプローチにより、SEOとSNSシェアの両方において最適な結果が得られました。

注意事項

• この設定は静的コンテンツサイトに適しています
• セキュリティ要件が高い動的アプリケーションの場合は、より詳細な分析が必要です
• 定期的なログ監査を行い、予期しないUser-Agentが使用されていないか確認することをお勧めします

関連リンク

• Open Graph Protocol
• Cloudflare WAF Custom Rules
• LINE Messaging API Preview settings