---
title: "OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでOGP画像が更新されない問題を事前に防ぎたいWeb制作者向けに、プロンプトに含めるべき具体的な指示内容と、生成後の確認方法を実践的に解説する記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/ogp-image-not-updating-ai-prompt"
markdown: "https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト
ChatGPTやClaudeでHTMLを生成する際に「OGP画像が更新されない」問題を防ぐには、生成前のプロンプト設計が鍵になる。AIに画像URLの命名規則やキャッシュバイパスの仕組みを指示に含めることで、生成直後から運用上のトラブルが起きにくいHTMLを得ることができる。
> Source HTML: https://giga-site.com/articles/ogp-image-not-updating-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIが生成するHTMLのog:imageに指定されるURLはサンプル値（例：https://example.com/ogp.png）や汎用的なプレースホルダーで出力されることが多い。このまま公開すると画像ファイルが存在しないためOGP画像が表示されず、キャッシュされた「画像なし」の状態が残り続ける原因になる。
AIは特に指示しない限りog:imageのURLにキャッシュバスターを含めない。更新を想定したHTMLを生成させるには、プロンプトに「og:imageのURLはファイル名にバージョン番号を含めること」または「クエリパラメーターでキャッシュを無効化できる形式にすること」という制約を明示する必要がある。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
AI生成HTMLを受け取ったら、まずog:imageに指定されているURLがプレースホルダーのままでないかを確認する。`grep -n 'og:image' output.html`でタグを検出し、指定されているURLに実際にアクセスして画像が表示されるかを確認する手順を生成後のルーティンに入れておく。
og:imageのURLが相対パスで書かれていると、SNSのクローラーが画像を取得できない。AIに指示する際は「og:imageには必ず絶対URL（https://で始まる完全なURL）を使うこと」を明記する。生成後に絶対URLになっているかを確認し、相対パスだった場合は手動で修正する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
AI生成HTMLを一時共有URLにアップロードして社外レビューに出す場合、受信者がURLをSNSにシェアするとOGP画像が取得できないケースがある。一時共有URLのドメインがSNSのクローラーからブロックされているか、認証がかかっていてクローラーがアクセスできないことが原因だ。
認証付きHTML共有サービスを使う場合、OGP用のog:imageは共有サービスの認証を必要としないCDN上の公開画像URLを指定する必要がある。認証が必要なURLをog:imageに設定してもSNSクローラーは画像を取得できないため、OGP画像は公開状態のURLを使うという原則をプロンプトに含めておく。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
OGP画像が適切に設定されたHTMLをAIに生成させるプロンプトのテンプレートを社内で管理する。具体的には「og:title・og:description・og:image・og:urlの4つを必ず含める」「og:imageには1200×630pxの画像URLを絶対URL形式で指定する」「og:imageのURLにはバージョン識別子（例：?v=YYYYMMDD）を末尾に付ける」の3点を定型指示としてコピーできるようにしておく。
AI生成HTMLを一時共有URLにアップロードした後、必ずFacebookシェアデバッガーでOGPを確認するフローを公開前チェックリストに入れる。確認が取れてから受信者にURLを送ることで、「シェアされたときにOGP画像が表示されない」という報告が来てから修正する後手の対応を防げる。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### AIにOGPメタタグを含むHTMLを生成させるとき、プロンプトに書くべき最低限の指示は何ですか？
「og:title・og:description・og:image・og:urlの4タグを必ず含め、og:imageには絶対URLを使い、ファイル名にバージョン番号を付けること」の3点を指示するだけで品質が大きく上がります。
### AI生成HTMLのog:imageがプレースホルダーURLだった場合、修正しないで公開するとどうなりますか？
存在しないURLが指定されているためSNSクローラーが画像を取得できず、シェア時にOGP画像が表示されません。一度この状態でキャッシュされると、URLを修正しても古い「画像なし」状態が残るため、プレースホルダーを必ず修正してから公開してください。
### 認証付きプレビューURLにアップロードしたHTMLのOGP画像をSNSに正しく表示させる方法はありますか？
og:imageには認証不要の公開CDNに置いた画像のURLを指定してください。プレビューURL自体が認証必須でもog:imageのURLが公開状態であれば、SNSクローラーは画像を取得できます。
## 関連記事
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)
- [OGP画像が更新されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/ogp-image-not-updating-request-message/index.md)
- [画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/image-orientation-rotated-ai-prompt/index.md)
- [レスポンシブ画像が荒く見える問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/responsive-image-blurry-ai-prompt/index.md)
- [SVGが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/svg-not-showing-ai-prompt/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLでOGP画像が更新されない問題を事前に防ぎたいWeb制作者向けに、プロンプトに含めるべき具体的な指示内容と、生成後の確認方法を実践的に解説する記事。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/ogp-image-not-updating-ai-prompt",
"url": "https://giga-site.com/articles/ogp-image-not-updating-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIにOGPメタタグを含むHTMLを生成させるとき、プロンプトに書くべき最低限の指示は何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「og:title・og:description・og:image・og:urlの4タグを必ず含め、og:imageには絶対URLを使い、ファイル名にバージョン番号を付けること」の3点を指示するだけで品質が大きく上がります。"
}
},
{
"@type": "Question",
"name": "AI生成HTMLのog:imageがプレースホルダーURLだった場合、修正しないで公開するとどうなりますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "存在しないURLが指定されているためSNSクローラーが画像を取得できず、シェア時にOGP画像が表示されません。一度この状態でキャッシュされると、URLを修正しても古い「画像なし」状態が残るため、プレースホルダーを必ず修正してから公開してください。"
}
},
{
"@type": "Question",
"name": "認証付きプレビューURLにアップロードしたHTMLのOGP画像をSNSに正しく表示させる方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "og:imageには認証不要の公開CDNに置いた画像のURLを指定してください。プレビューURL自体が認証必須でもog:imageのURLが公開状態であれば、SNSクローラーは画像を取得できます。"
}
}
]
}
```