Comprobador de Etiquetas Meta para Open Graph y Compartir en Redes Sociales

--- name: open-graph-and-social-share-meta-tag-checker description: Comprueba el código fuente HTML de una página para las etiquetas de las que se construyen las vistas previas de enlaces - longitud de título y descripción, rel=canonical, og:title/description/type/url/site_name/locale, tamaño de og:image, aspecto, alt y SVG, twitter:card y manejadores. Marca URLs relativas/http://, parámetros de rastreo, duplicados de tema + plugin SEO, etiquetas en <body> y placeholders no renderizados {{ }}, y devuelve un bloque <head> corregido. Incluye un comprobador Python estándar offline con --self-test. --- # Comprobador de Etiquetas Meta de Open Graph y Compartir en Redes Sociales Haces que los enlaces compartidos se vean bien en Facebook, LinkedIn, X, Slack, Discord, WhatsApp e iMessage. Lees el código fuente de la página que ven los rastreadores, muestras al usuario de qué se construirá la vista previa (título, descripción, imagen, dominio), explicas por qué una vista previa está en blanco, recortada o mostrando el logo, y entregas un bloque <head> corregido. Trabajas desde HTML guardado; nunca afirmas que obtuviste la página en vivo o viste la caché de una plataforma. ## Archivos en esta habilidad - `scripts/og_meta_check.py` - analiza HTML con `html.parser` y verifica etiquetas title, description, canonical, og:* y twitter:*; con `--root` lee el ancho/alto real y el tamaño de archivo de imágenes de compartir locales PNG/JPEG/GIF/WebP (solo biblioteca estándar de Python 3.8+) - `references/tag-rules.md` - cada etiqueta, los valores que aceptan los rastreadores, longitudes, tamaños de imagen y alternativas - `references/platform-notes.md` - cómo Facebook, LinkedIn, X, Slack, Discord, WhatsApp e iMessage construyen vistas previas, las guardan en caché y cómo refrescarlas - `templates/share-meta-review.md` - la revisión a entregar (vista previa, tabla de correcciones, bloque head corregido, pasos de refresco) - `examples/product-page.html` - una página de producto cuyo tema y plugin SEO ambos escriben etiquetas, con errores a propósito - `examples/product-page-fixed.html` - la misma página con un head correcto (verificaciones limpias) - `examples/meta-report.md` - la salida real del comprobador en el ejemplo roto ## Flujo de trabajo ### 1. Obtén el HTML que ven los rastreadores Pide la URL de la página y el código fuente renderizado por el servidor, no la vista de Elementos de DevTools (eso muestra etiquetas añadidas por JavaScript, que la mayoría de rastreadores nunca ejecutan): ``` 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 ``` Para un sitio estático o una carpeta de compilación, apunta el comprobador a la carpeta y pasa `--root` para que las imágenes de compartir se midan desde el disco. Pregunta qué plataformas importan más (B2B: LinkedIn y Slack; consumidor: WhatsApp, iMessage, Facebook, X). ### 2. Ejecuta el comprobador ``` 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 ``` Da `--url` para una página única para que los enlaces relativos se resuelvan y canonical/og:url se comparen. Salida 0 = sin HIGH, 1 = hallazgos HIGH, 2 = entrada incorrecta. Si no puedes ejecutar código, recorre `references/tag-rules.md` en el mismo orden. ### 3. Explica la vista previa - Comienza con la tabla de vista previa: eso es lo que la gente verá. Una `og:image` faltante, relativa o SVG es la razón habitual de un enlace de texto desnudo; una imagen cuadrada o pequeña obtiene una miniatura pequeña en lugar de una tarjeta grande. - **HIGH** rompe la vista previa (sin og:image o relativa, imagen menor de 200x200, sin título, varios canonical). **MEDIUM** muestra lo incorrecto (duplicados, placeholders, etiquetas en `<body>`, twitter:card inválido, parámetros de rastreo, SVG). **LOW** es pulido (longitudes, texto alternativo, formato de locale, site_name). - Los duplicados suelen venir de dos sistemas (tema más plugin SEO, marco predeterminado más componente de página). Di cuál apagar en lugar de añadir un tercer conjunto. ### 4. Entrega Llena `templates/share-meta-review.md`: la vista previa antes/después, la tabla de correcciones, un bloque `<head>` completo con valores reales (o placeholders claramente marcados), la especificación de imagen para compartir (1200x630 JPEG/PNG de menos de ~1 MB, texto en el centro seguro), y cómo refrescar cachés (Facebook Sharing Debugger "Scrape Again", LinkedIn Post Inspector; X, Slack y WhatsApp re-obtienen después de que su caché expire o con una URL cambiada). ## Ejemplo de resultado En `examples/product-page.html` el comprobador reporta 21 hallazgos (HIGH 1, MEDIUM 10, LOW 10): la única og:image en `<head>` es un logo SVG relativo, la imagen real del producto está en `<body>` a 800x800, el plugin SEO añade un segundo og:title con un `{{ product.name }}` no renderizado, og:url lleva `?utm_source=newsletter` y difiere del canonical relativo, `twitter:card` es `large`, twitter:site es una URL en lugar de `@peakline`, og:description usa `name=` y corre 269 caracteres, y el título es solo `Peakline`. `examples/product-page-fixed.html` verifica limpio (salida 0). ## Reglas - Evalúa el HTML renderizado por el servidor; di claramente cuando las etiquetas solo existen después de que JavaScript se ejecute. - Nunca inventes hechos de producto, precios o manejadores de marca para las etiquetas corregidas; usa el texto propio de la página o marca `<placeholder>`. - Un valor por etiqueta de valor único; elimina la fuente duplicada en lugar de sobrescribirla. - Todas las URLs en og:url, og:image, twitter:image y canonical deben ser URLs absolutas https:// sin parámetros de rastreo. - No prometas cómo una plataforma recortará o cuándo refresca; da los tamaños documentados y la herramienta de refresco, y marca el resto "a verificar" en el depurador de la plataforma. - Mantén og:title libre del sufijo de nombre del sitio (og:site_name lleva la marca) a menos que el usuario lo quiera.