ログイン

OGP・シェアカードの確認とプレビュー

OGP and share card preview check

URL の一覧や HTML ファイルから OGP・X カード・meta タグを読み取り、SNS でシェアされたときのカードの見え方を HTML でプレビューし、足りない項目や長すぎる項目を指摘します。

ClaudeHermes AgentCodexCursorMIT（改変・再配布・商用利用可）Python

できること

ページが SNS やチャットでシェアされたときに、画像やタイトルが正しく出るかを確かめます。

  • title・meta description・canonical・og:*・twitter:* のタグを抽出（行番号つき）
  • 大きな画像のカード（Facebook や LinkedIn 風）と X のカード（summary_large_image / summary）の見え方を、HTML レポートでプレビュー
  • og:title や og:image の不足、相対パスの画像 URL、twitter:card の値の誤り、タグの重複、og:url と canonical の食い違いを指摘
  • シェア画像の形式・縦横サイズ・容量を確認し、小さすぎる画像や width/height の指定違い、SVG など対応していない形式を指摘
  • 日本語の全角文字を考慮した、長すぎるタイトルや説明文の目安表示

URL・HTML ファイル・ビルド済みフォルダ・URL を並べたテキストファイルに対応します。

使い方

python scripts/og_check.py https://www.example.com/ --check-images --out og-report.html
python scripts/og_check.py dist --root dist --site-url https://www.example.com --out og-report.html

エージェントがレポートを確認し、どのテンプレートや設定でタグを直すかを、具体的な HTML つきで提案します。

必要な環境

  • Python 3（標準ライブラリのみ）
  • URL を調べる場合はネットワーク接続

注意点

  • プレビューは近い見た目を再現したもので、各サービスの実際の表示とは異なることがあります。
  • SNS 側は過去のプレビューを保存しているため、直したあとは各サービスの確認ツールで再取得してください。
  • 文字数の目安は参考値です。
English description

Extracts OGP, X card and meta tags from URLs or HTML files, renders an HTML preview of how share cards may look, and flags missing, invalid or too-long fields.

What it does

Checks whether pages show the right image and title when shared on social networks and chat apps.

  • Extracts title, meta description, canonical, og:* and twitter:* tags with line numbers
  • Renders an HTML report previewing a large-image card (Facebook / LinkedIn style) and the X card (summary_large_image or summary)
  • Flags missing og:title or og:image, relative image URLs, invalid twitter:card values, duplicate tags and og:url that differs from canonical
  • Measures the share image format, pixel size and file size, and flags small images, wrong width/height tags and unsupported formats such as SVG
  • Length hints that count full-width CJK characters as double width

Accepts URLs, HTML files, built folders, or a text file listing URLs.

How to use

python scripts/og_check.py https://www.example.com/ --check-images --out og-report.html
python scripts/og_check.py dist --root dist --site-url https://www.example.com --out og-report.html

The agent reviews the report and proposes exact HTML fixes in the right template or setting.

Requirements

  • Python 3 (standard library only)
  • Network access when checking URLs

Caveats

  • Previews are approximations and may differ from what each platform actually shows.
  • Platforms cache previews; after fixing, refresh them with each platform's debugging tool.
  • Length limits are heuristics.

インストール方法

  1. ダウンロードしたZIPを展開します（中に og-meta-preview-check/ フォルダと SKILL.md があります）。
  2. フォルダごと、使うエージェントのスキル置き場にコピーします。
    • Claude：~/.claude/skills/（プロジェクト単位なら .claude/skills/）
    • Hermes Agent：~/.hermes/skills/
    • Codex：~/.agents/skills/／Cursor：~/.cursor/skills/
    • Claude アプリ（claude.ai）：「カスタマイズ → スキル」からZIPをアップロード
  3. エージェントを再起動し、スキル一覧に表示されることを確認します。

Windows・Mac 別、エージェント別のインストール手順

出品者

AI Skill Market 公式

出品スキル 44 件

出品者のプロフィールとスキル一覧