OGP・メタタグ バリデーター
HTMLソースを貼り付けるだけでOGP（Open Graph Protocol）とTwitter Cardのメタタグを一括検証。不足しているタグや絶対URLになっていないog:imageを検出し、SNSでシェアしたときの見え方をカード形式でプレビュー表示できます。
Tips
- og:imageは横1200×縦630px（アスペクト比1.91:1）が推奨サイズです。小さすぎる画像や比率が違う画像は、SNS側でトリミングされて意図しない見え方になることがあります。
- Facebook・LINE・Slackなどog:titleやog:descriptionを見るクローラーと、X（Twitter）専用のtwitter:title・twitter:descriptionは別物です。両方を設定しておくと、どちらの媒体でも正しく表示されます。
- twitter:cardが未設定の場合、Xはog:title・og:descriptionへフォールバックして表示を試みますが、画像が正しく表示されない場合があるため明示的な設定を推奨します。
- og:urlには正規化されたページのURL（httpsの絶対URL）を指定してください。パラメータ付きURLとの重複コンテンツ判定を避ける効果もあります。
- メタタグを変更した直後にSNSでシェアしても古いプレビューがキャッシュされて表示されることがあります。Facebookのシェアデバッガーなど各SNSが提供する再取得ツールでキャッシュを更新しましょう。
よくある質問
/img/a.pngなど）になっていることです。多くのクローラーは相対URLを解決できないため、必ずhttps://から始まる絶対URLを指定してください。またサーバーがクローラーのUser-Agentをブロックしている場合や、画像サイズが小さすぎる場合も表示されないことがあります。<title>は検索結果のタイトルやブラウザタブに使われ、og:titleはSNSでシェアされたときのカードタイトルに使われます。og:titleが無い場合、多くのクローラーは<title>にフォールバックしますが、必ずしも意図通りの文言にならないことがあります。summary_large_imageが推奨されます。画像を小さく添える程度で十分な場合はsummaryを使います。appやplayerはそれぞれアプリ誘導・動画/音声埋め込み専用のため、通常のWebページには使いません。<title>とmeta descriptionにフォールバックしてプレビューを生成しようとしますが、画像は表示されずリンクとテキストのみの地味な見た目になりがちです。クリック率に影響するため、最低限og:title・og:description・og:imageの3つは設定することをおすすめします。
余談ですが ― OGPが生まれた理由 ― Facebookが「いいね」を機能させるために作った仕組み
Open Graph Protocol（OGP）は2010年、Facebookが自社の「いいね！」ボタンを普及させる目的で策定した仕様です。当時のWebページは、SNSでシェアされても投稿には単なるリンクとタイトルしか表示されず、クリック率が伸び悩んでいました。Facebookは「ページ自身がSNS向けの表示内容を宣言できれば、もっと魅力的なシェア体験を作れる」と考え、<meta property="og:xxx">という独自の名前空間をHTMLに追加する形でOGPを設計しました。
興味深いのは、OGPが元々RDFa（構造化データを記述するためのW3C仕様）を土台にしている点です。Facebookは既存の標準規格を流用することで、ブラウザベンダーや他社の協力なしに、既存のHTMLにmetaタグを追加するだけで新機能を実現できる設計にしました。この「後方互換性を壊さずに拡張する」発想が功を奏し、OGPはFacebook以外のプラットフォーム（Slack・LINE・Discordなど）にも事実上の標準として広まりました。
Twitterは当初OGPに追従せず、独自のTwitter Cards（twitter:xxx）という別の名前空間を採用しました。これは技術的な必然というより、競合であるFacebook発の規格をそのまま採用したくなかった事情もあると言われています。結果として、現在でも多くのサイトはog:系とtwitter:系の両方のタグを重複して記述する必要があり、これがOGPバリデーターのようなツールが今も必要とされる理由の一つです。