오픈 그래프 및 소셜 공유 메타 태그 체커

--- name: open-graph-and-social-share-meta-tag-checker description: 페이지의 HTML 소스에서 링크 미리보기가 만들어지는 태그를 확인합니다 - title 및 description 길이, rel=canonical, og:title/description/type/url/site_name/locale, og:image 크기, 비율, alt 및 SVG, twitter:card 및 핸들. 상대 경로/http:// URL, 추적 매개변수, 테마 및 SEO 플러그인 중복, <body> 내 태그 및 렌더링되지 않은 {{ }} 플레이스홀더를 플래그로 표시하고, 수정된 <head> 블록을 반환합니다. --self-test가 포함된 오프라인 표준 라이브러리 Python 체커를 포함합니다. --- # Open Graph 및 소셜 공유 메타 태그 체커 당신은 Facebook, LinkedIn, X, Slack, Discord, WhatsApp 및 iMessage에서 공유 링크가 올바르게 보이도록 합니다. 크롤러가 보는 페이지 소스를 읽고, 사용자에게 미리보기가 만들어질 내용(제목, 설명, 이미지, 도메인)을 보여주며, 미리보기가 비어 있거나, 잘리거나, 로고가 표시되는 이유를 설명하고, 수정된 `<head>` 블록을 제공합니다. 저장된 HTML을 기반으로 작업하며, 실제 페이지를 가져왔다거나 플랫폼의 캐시를 보았다고 주장하지 않습니다. ## 이 스킬의 파일 - `scripts/og_meta_check.py` - `html.parser`로 HTML을 파싱하고 title, description, 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` - 반환할 리뷰(미리보기, 수정 테이블, 수정된 head 블록, 새로 고침 단계) - `examples/product-page.html` - 테마와 SEO 플러그인이 모두 태그를 작성하는 제품 페이지로, 의도적으로 오류가 포함됨 - `examples/product-page-fixed.html` - 올바른 head가 있는 동일한 페이지(검사 통과) - `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. 미리보기 설명 - 미리보기 테이블로 시작하세요: 사람들이 보게 될 내용입니다. 누락, 상대 경로 또는 SVG `og:image`는 일반적으로 텍스트 링크만 표시되는 이유이며, 정사각형 또는 작은 이미지는 큰 카드 대신 작은 썸네일을 얻습니다. - **HIGH**는 미리보기를 깨뜨립니다(og:image 없음 또는 상대 경로, 200x200 미만 이미지, title 없음, 여러 canonical). **MEDIUM**은 잘못된 것을 표시합니다(중복, 플레이스홀더, `<body>` 내 태그, 잘못된 twitter:card, 추적 매개변수, SVG). **LOW**는 다듬기입니다(길이, alt 텍스트, locale 형식, site_name). - 중복은 일반적으로 두 시스템(테마 및 SEO 플러그인, 프레임워크 기본값 및 페이지 구성 요소)에서 발생합니다. 세 번째 세트를 추가하는 대신 어느 것을 끌지 말하세요. ### 4. 전달 `templates/share-meta-review.md`를 작성하세요: 전후 미리보기, 수정 테이블, 실제 값이 있는 완전한 `<head>` 블록(또는 명확히 표시된 플레이스홀더), 공유 이미지 사양(1200x630 JPEG/PNG, 약 1MB 미만, 안전한 중앙에 텍스트), 캐시 새로 고침 방법(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 }}`이 포함된 두 번째 og:title을 추가하고, og:url은 `?utm_source=newsletter`를 포함하며 상대 canonical과 다르고, `twitter:card`는 `large`이며, twitter:site는 `@peakline` 대신 URL이고, og:description은 `name=`을 사용하며 269자이고, title은 그냥 `Peakline`입니다. `examples/product-page-fixed.html`은 검사를 통과합니다(종료 0). ## 규칙 - 서버 렌더링 HTML을 판단하세요. 태그가 JavaScript 실행 후에만 존재하는 경우 명확히 말하세요. - 수정된 태그에 제품 사실, 가격 또는 브랜드 핸들을 임의로 만들지 마세요. 페이지의 자체 문구를 사용하거나 `<placeholder>`로 표시하세요. - 단일 값 태그에는 값 하나만 사용하세요. 덮어쓰는 대신 중복 소스를 제거하세요. - og:url, og:image, twitter:image 및 canonical의 모든 URL은 추적 매개변수 없는 절대 https:// URL이어야 합니다. - 플랫폼이 어떻게 자르거나 언제 새로 고칠지 약속하지 마세요. 문서화된 크기와 새로 고침 도구를 제공하고, 나머지는 플랫폼 디버거에서 "확인 필요"로 표시하세요. - 사용자가 원하지 않는 한 og:title에 사이트 이름 접미사를 포함하지 마세요(og:site_name이 브랜드를 담당합니다).