Auditoría SEO: Canónicos, Imágenes y Datos Estructurados

// src/lib/sanity.ts — funciones de imagen ya disponibles

/**
 * Aplica transformaciones del Sanity Image Pipeline a una URL del CDN.
 * URLs que no son de cdn.sanity.io se devuelven sin tocar.
 */
export function sanityImg(
  url: string | undefined,
  opts: { w: number; h?: number; q?: number } = { w: 640 }
): string {
  if (!url || !url.includes("cdn.sanity.io")) return url ?? "";
  const params = new URLSearchParams();
  params.set("w", String(opts.w));
  if (opts.h) {
    params.set("h", String(opts.h));
    params.set("fit", "crop");
  }
  params.set("auto", "format");
  params.set("q", String(opts.q ?? 75));
  return `${url}${url.includes("?") ? "&" : "?"}${params.toString()}`;
}

/** srcset con varios anchos para imágenes responsivas de Sanity */
export function sanitySrcset(
  url: string | undefined,
  widths: number[] = [400, 640, 960]
): string {
  if (!url || !url.includes("cdn.sanity.io")) return "";
  return widths.map((w) => `${sanityImg(url, { w })} ${w}w`).join(", ");
}

---
import { sanityImg, sanitySrcset } from "../lib/sanity";
---

<!-- Thumbnail de tarjeta: 640×360, crop centrado, lazy -->
<img
  src={sanityImg(post.mainImage?.url, { w: 640, h: 360 })}
  srcset={sanitySrcset(post.mainImage?.url, [400, 640, 960])}
  sizes="(max-width: 768px) 100vw, 400px"
  width="640"
  height="360"
  loading="lazy"
  decoding="async"
  alt={post.mainImage?.alt ?? post.title}
/>

<!-- Hero de artículo: ancho máximo 1200, eager + fetchpriority -->
<img
  src={sanityImg(post.mainImage?.url, { w: 1200 })}
  srcset={sanitySrcset(post.mainImage?.url, [600, 900, 1200])}
  sizes="100vw"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
  decoding="async"
  alt={post.mainImage?.alt ?? post.title}
/>

"Fórmula 1 y sostenibilidad: la nueva carrera tecnológica que inició en Australia
El pasado fin de semana... marcó un arranque que n"

// src/lib/seo.ts — implementación completa

function toPlainText(blocks: any[] | undefined): string {
  if (!blocks) return "";
  return blocks
    .filter((b) => b._type === "block" && Array.isArray(b.children))
    .map((b) => b.children.map((c: any) => c.text ?? "").join(""))
    .join(" ");
}

function clean(text: string): string {
  return text
    .replace(/\u00a0| /g, " ") // elimina NBSP y entidades
    .replace(/\s+/g, " ")
    .trim();
}

function truncateAtWord(text: string, max = 155): string {
  if (text.length <= max) return text;
  // Corta en el último espacio antes de max chars, nunca a media palabra
  return text.slice(0, max).replace(/\s+\S*$/, "") + "…";
}

export function metaDescription(post: {
  title?: string;
  excerpt?: string;
  body?: any[];
}): string {
  const stripTitle = (text: string): string => {
    if (!text || !post.title) return text;
    const title = clean(post.title);
    if (text.toLowerCase().startsWith(title.toLowerCase())) {
      return text.slice(title.length).replace(/^[\s:—–-]+/, "").trim();
    }
    return text;
  };

  let source = post.excerpt ? stripTitle(clean(post.excerpt)) : "";

  // Excerpts migrados vienen auto-truncados a media palabra (sin puntuación final).
  // En ese caso, el cuerpo completo da una descripción más limpia.
  const looksTruncated = source !== "" && !/[.!?…»")]$/.test(source);
  if (!source || looksTruncated) {
    const fromBody = stripTitle(clean(toPlainText(post.body)));
    if (fromBody) source = fromBody;
  }

  return truncateAtWord(source);
}

---
// src/components/SEO.astro — schema Organization ya implementado
const organizationSchema = {
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "ESG México",
  "alternateName": "Ugarte HRS y Asociados S.C.",
  "url": siteUrl,
  "logo": `${siteUrl}/logo/logo-esg.svg`,
  "image": `${siteUrl}/logo/logo-esg.svg`,
  "telephone": "+52 55 18 44 57 67",
  "email": "buzon@esgmexico.net",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Ahumada Villalón 36, Lomas-Virreyes",
    "addressLocality": "Lomas de Chapultepec IV Sección, Miguel Hidalgo",
    "postalCode": "11000",
    "addressRegion": "Ciudad de México",
    "addressCountry": "MX"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+52 55 18 44 57 67",
    "contactType": "customer service",
    "areaServed": "MX",
    "availableLanguage": "Spanish"
  },
  "sameAs": [
    "https://www.linkedin.com/company/esg-mexico/",
    "https://x.com/ESG_mex",
    "https://www.instagram.com/esgmexico"
  ]
};
---

<script type="application/ld+json" set:html={JSON.stringify(organizationSchema)} />

---
// Layout de artículo — agregar schema Article
import { metaDescription } from "../lib/seo";
import { sanityImg } from "../lib/sanity";

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "description": metaDescription(post),
  "image": sanityImg(post.mainImage?.url, { w: 1200 }),
  "datePublished": post.publishedAt,
  "dateModified": post._updatedAt ?? post.publishedAt,
  "author": {
    "@type": "Person",
    "name": post.author.name,
    "url": post.author.linkedin,
    "jobTitle": post.author.role
  },
  "publisher": { "@id": "https://www.esgmexico.net/#organization" },
  "mainEntityOfPage": canonicalURL.href
};
---

<script type="application/ld+json" set:html={JSON.stringify(articleSchema)} />

---
const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Inicio",    "item": "https://www.esgmexico.net" },
    { "@type": "ListItem", "position": 2, "name": "Blog",      "item": "https://www.esgmexico.net/blog" },
    { "@type": "ListItem", "position": 3, "name": post.title,  "item": canonicalURL.href }
  ]
};
---

---
// src/components/SEO.astro — props soportadas para artículos
interface Props {
  title: string;
  description: string;
  canonical?: string;
  ogImage?: string;
  noindex?: boolean;
  ogType?: string;               // "website" (default) | "article"
  articlePublishedTime?: string; // ISO date — solo para ogType="article"
  articleAuthor?: string;        // Nombre de la autora
}
---

<!-- Renders condicional en el componente -->
<meta property="og:type" content={ogType} />
{ogType === "article" && articlePublishedTime && (
  <meta property="article:published_time" content={articlePublishedTime} />
)}
{ogType === "article" && articleAuthor && (
  <meta property="article:author" content={articleAuthor} />
)}

<SEO
  title={post.title}
  description={metaDescription(post)}
  canonical={`/blog/${post.slug}`}
  ogImage={post.mainImage?.url}
  ogType="article"
  articlePublishedTime={post.publishedAt}
  articleAuthor={post.author?.name}
/>

// Filtrar el primer bloque si replica el título
function filterDuplicateH1(
  blocks: any[],
  title: string
): any[] {
  if (!blocks?.length) return blocks;
  const normalize = (s: string) => s.toLowerCase().trim().replace(/\s+/g, " ");
  const firstText = blocks[0]?.children?.map((c: any) => c.text).join("") ?? "";
  if (normalize(firstText) === normalize(title)) {
    return blocks.slice(1);
  }
  return blocks;
}

// studio/schemas/post.js — validación de slug
defineField({
  name: "slug",
  type: "slug",
  validation: (Rule) =>
    Rule.custom((slug) => {
      if (!slug?.current) return "El slug es requerido";
      if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(slug.current)) {
        return "El slug debe usar kebab-case: solo minúsculas, números y guiones";
      }
      return true;
    }),
})