オープングラフとソーシャルシェアメタタグチェッカー

--- name: open-graph-and-social-share-meta-tag-checker description: ページのHTMLソース内で、リンクプレビューが構築されるタグをチェックします。タイトルと説明の長さ、rel=canonical、og:title/description/type/url/site_name/locale、og:imageのサイズ、アスペクト比、alt、SVG、twitter:cardとハンドルを確認します。相対URLやhttp:// URL、トラッキングパラメータ、テーマとSEOプラグインの重複、<body>内のタグ、未レンダリングの{{ }}プレースホルダーをフラグし、修正済みの<head>ブロックを返します。オフラインのstdlib Pythonチェッカー（--self-test付き）を含みます。 --- # Open Graphおよびソーシャルシェアメタタグチェッカー あなたは、Facebook、LinkedIn、X、Slack、Discord、WhatsApp、iMessageで共有リンクが正しく表示されるようにします。クローラーが閲覧するページソースを読み、プレビューが構築される内容（タイトル、説明、画像、ドメイン）をユーザーに示し、プレビューが空白、切り取られている、またはロゴが表示される理由を説明し、修正済みの`<head>`ブロックを返します。保存済みのHTMLを基に作業し、ライブページを取得した、またはプラットフォームのキャッシュを確認したと主張することはありません。 ## このスキルのファイル - `scripts/og_meta_check.py` - `html.parser`でHTMLを解析し、タイトル、説明、canonical、og:*、twitter:*タグをチェックします。`--root`を指定すると、ローカルのPNG/JPEG/GIF/WebP共有画像の実際の幅/高さとファイルサイズを読み取ります（Python 3.8+標準ライブラリのみ） - `references/tag-rules.md` - 各タグ、クローラーが受け入れる値、長さ、画像サイズ、フォールバック - `references/platform-notes.md` - Facebook、LinkedIn、X、Slack、Discord、WhatsApp、iMessageがプレビューを構築、キャッシュ、更新する方法 - `templates/share-meta-review.md` - 返すレビュー（プレビュー、修正テーブル、修正済みヘッドブロック、更新手順） - `examples/product-page.html` - テーマとSEOプラグインの両方がタグを書き、意図的に間違いを含む製品ページ - `examples/product-page-fixed.html` - 正しいヘッドを持つ同じページ（チェックがクリーン） - `examples/meta-report.md` - 壊れた例に対するチェッカーの実際の出力 ## ワークフロー ### 1. クローラーが閲覧するHTMLを取得する ページURLとサーバーレンダリングされたソースを要求します。DevToolsのElementsビューではなく（JavaScriptで追加されたタグが表示されますが、ほとんどのクローラーは実行しません）： ``` curl -sL -A "facebookexternalhit/1.1" https://example.com/page -o page.html curl -sL -A "Twitterbot/1.0" https://example.com/page -o page-x.html ``` 静的サイトやビルドフォルダの場合、チェッカーをフォルダに向け、`--root`を渡して共有画像をディスクから測定します。最も重要なプラットフォームを尋ねます（B2B：LinkedInとSlack、消費者：WhatsApp、iMessage、Facebook、X）。 ### 2. チェッカーを実行する ``` python3 scripts/og_meta_check.py examples/product-page.html --url https://shop.example.com/shoes/trail-grip python3 scripts/og_meta_check.py dist/ --root dist/ --min-severity MEDIUM python3 scripts/og_meta_check.py page.html --url https://example.com/blog/post --json python3 scripts/og_meta_check.py --self-test ``` 単一ページには`--url`を指定して、相対リンクを解決し、canonical/og:urlを比較します。終了コード0 = HIGHなし、1 = HIGH検出、2 = 不正な入力。コードを実行できない場合は、`references/tag-rules.md`を同じ順序で確認します。 ### 3. プレビューを説明する - プレビューテーブルから始めます：それが人々が見るものです。`og:image`が欠落、相対、またはSVGの場合、通常はテキストのみのリンクになります。正方形または小さい画像は、大きなカードではなく小さなサムネイルになります。 - **HIGH**はプレビューを壊します（og:imageなしまたは相対、200x200未満の画像、タイトルなし、複数のcanonical）。**MEDIUM**は間違ったものを表示します（重複、プレースホルダー、`<body>`内のタグ、無効なtwitter:card、トラッキングパラメータ、SVG）。**LOW**は仕上げです（長さ、altテキスト、ロケール形式、site_name）。 - 重複は通常、2つのシステム（テーマとSEOプラグイン、フレームワークのデフォルトとページコンポーネント）から発生します。3つ目のセットを追加するのではなく、どちらをオフにするかを提案します。 ### 4. 配信する `templates/share-meta-review.md`を記入します：前後のプレビュー、修正テーブル、実際の値（または明確にマークされたプレースホルダー）を持つ完全な`<head>`ブロック、共有画像仕様（1200x630 JPEG/PNG、約1 MB未満、安全な中央にテキスト）、キャッシュ更新方法（Facebook Sharing Debuggerの「Scrape Again」、LinkedIn Post Inspector、X、Slack、WhatsAppはキャッシュ期限切れまたはURL変更後に再取得）。 ## 結果例 `examples/product-page.html`で、チェッカーは21件の検出を報告します（HIGH 1、MEDIUM 10、LOW 10）：`<head>`内の唯一のog:imageは相対SVGロゴ、実際の製品画像は`<body>`内に800x800で存在、SEOプラグインは未レンダリングの`{{ product.name }}`を持つ2つ目のog:titleを追加、og:urlには`?utm_source=newsletter`が含まれ相対canonicalと異なる、`twitter:card`は`large`、twitter:siteは`@peakline`ではなくURL、og:descriptionは`name=`を使用し269文字、タイトルは単に`Peakline`。`examples/product-page-fixed.html`はクリーンにチェックされます（終了コード0）。 ## ルール - サーバーレンダリングされたHTMLを判断し、タグがJavaScript実行後にのみ存在する場合は明確に述べます。 - 修正済みタグに製品事実、価格、ブランドハンドルを発明しないでください。ページの独自のコピーを使用するか、`<placeholder>`とマークします。 - 単一値タグには1つの値のみ。重複ソースを上書きするのではなく、削除します。 - og:url、og:image、twitter:image、canonicalのすべてのURLは、トラッキングパラメータなしの絶対https:// URLである必要があります。 - プラットフォームがどのように切り取るか、いつ更新するかを約束しないでください。文書化されたサイズと更新ツールを提供し、残りはプラットフォームのデバッガーで「確認する」とマークします。 - ユーザーが望まない限り、og:titleにサイト名のサフィックスを含めないでください（og:site_nameがブランドを担います）。