🏷 OGP・メタタグ確認

OGP（Open Graph Protocol）は、Webページの内容をSNSなどに正しく伝えるための仕組みです。ページのHTMLの <head> 内に og:title・og:description・og:image などのメタタグを書いておくと、LINE・Facebook・Slack・はてなブックマークなどでURLを共有したときに、タイトル・説明文・サムネイル画像つきの「カード」として見栄えよく表示されます。逆にこれらが無いと、URLがそのまま貼られるだけの素っ気ない表示になり、クリック率に差が出ます。

Twitter Card（X のカード）は、X（旧Twitter）でのリンク表示を制御するメタタグです。twitter:card でカードの種類（summary は小さめ、summary_large_image は大きな画像つき）を指定し、twitter:title・twitter:description・twitter:image で表示内容を補います。これらが未指定の場合、多くのSNSは og:* の値にフォールバックして表示するため、まずは og:* を揃えるのが基本です。

このツールは、入力したURLのHTMLをサーバー経由で取得し、title・description・canonical（正規URL）・og:title・og:description・og:image・og:url・og:type・og:site_name・twitter:card・twitter:title・twitter:description・twitter:image を抜き出して表示します。SNSでの見え方の事前確認、記事公開前のシェア最適化、SEO観点でのメタ情報チェックに使えます。たとえば新規記事を公開する前にそのURLを入れれば、og:image が設定されていない（✗）といった漏れをその場で発見できます。

プレビューカードの画像は og:image を優先し、無ければ twitter:image を使います。相対パスで書かれた画像URLは取得元ページを基準に絶対URL化してから表示します。og:image は推奨サイズ 1200×630px の絶対URL（httpsの実在画像）で用意すると、各SNSでカード表示が崩れにくくなります。タイトル・説明が長すぎるとSNS側で末尾が省略されるため、要点を前半に置くのがコツです。

取得はあくまで「サーバーが受け取った初期HTML」が対象です。JavaScriptで描画後にメタタグを動的付与するページ（一部のSPAなど）では、初期HTMLにタグが無く取得できないことがあります。また、ログインが必要なページや外部からの取得を拒否するサイトでは値が空になる場合があります。各SNSの表示は公式のデバッグツール（Facebookのシェアデバッガー等）も併用して最終確認することをおすすめします。

安全面では、SSRF（サーバーを踏み台に内部ネットワークへアクセスさせる攻撃）対策を施しています。受け付けるのは http / https のURLのみで、localhost やプライベートIP（192.168.x.x・10.x.x.x など）・予約済みアドレスへの取得は拒否します。ホスト名はDNSで解決して接続先IPを検査し、名前解決できないホストもブロックします。そのため社内サーバーやローカル環境のURLは確認できません。インターネット上から到達できるURLを指定してください。