dounika.site

OGP・Xカードのタグ生成と確認

タイトル・説明・URL・画像から OGP と X（旧Twitter）カードの meta タグ一式を生成します。ページの HTML ソースを貼ると OGP タグを抜き出し、不足や相対 URL、画像サイズ、文字数を確認します。

タイトルなどを入れると meta タグを生成します。

画像の幅×高さ（px） 推奨 1200×630

確認結果

    補足

    • URL を入れてページを取得することはできません。このサイトは外部へ通信しないため、 確認したいページはブラウザで「ページのソースを表示」を開いて、HTML を貼り付けてください。
    • 画像そのものは読み込みません。大きさは og:image:width / og:image:height の値で判断します。 SNS で大きく表示させるなら 1200×630（約 1.91:1）が定番です。
    • og:image と og:url は https:// から始まる絶対 URL が必要です。/og.png のような相対 URL は SNS 側で解決されません。
    • X（旧Twitter）は twitter:title などがなければ og:title などを代わりに使うため、生成するタグには X 専用のタイトル・説明・画像を含めていません。
    • 文字数の目安はあくまで目安です。省略される位置は SNS と画面の幅によって変わります。
    • SNS は一度読んだ内容をしばらくキャッシュします。タグを直してもすぐには反映されないことがあります。
    • 入力した内容と貼り付けた HTML は、この端末の外へ出ません。

    よくある質問

    URL を入れるだけでページの OGP を確認できますか？

    できません。このサイトは外部へ通信しない方針のため、ページや画像を取りに行くことはできません。確認したいページをブラウザで開き、「ページのソースを表示」の内容を貼り付けてください。貼り付けた HTML から og: / twitter: の meta タグ、<title>、meta description、canonical を抜き出して確認します。

    画像のサイズは確認できますか？

    画像そのものは読み込まないため、実際の大きさは確認できません。og:image:width と og:image:height が書かれていればその値で判断し、推奨の 1200×630（約 1.91:1）と比べます。書かれていなければ、指定するよう案内します。

    og:image に相対パスを書いてはいけないのはなぜですか？

    SNS はページの外から画像を取りに来るため、/og.png のような相対パスを解決しないことが多いからです。https:// から始まる絶対 URL が必要で、このツールは相対 URL や // で始まる URL を「要修正」として指摘します。

    X（旧Twitter）用に twitter:title や twitter:image も必要ですか？

    必須ではありません。X は twitter:title などがなければ og:title・og:description・og:image を代わりに使うため、生成するタグには含めていません。twitter:card は必要なので、summary_large_image か summary を必ず出力します。

    タグを直したのに SNS の表示が変わりません。

    SNS 側が以前に読んだ内容をキャッシュしている可能性があります。このツールは SNS のキャッシュを消せません。各 SNS が用意している確認・再取得の仕組みを使うか、時間をおいて確認してください。

    ↑↓ 移動 / Enter 開く / Esc 閉じる