SEO Images — PA.04 Chamarande — Super script pilot

Attribuer automatiquement les attributs alt aux images de la page publique PA.04 Chamarande, sans recopier les textes dans chaque bloc image Notion.

Principe

Le script ne s’exécute que sur une URL contenant chamarande.
Il exclut les images du header, de la navigation et du footer.
Il déduplique les images répétées par une lightbox.
Il reconnaît les fichiers connus par une partie stable de leur nom.
Les images non encore documentées reçoivent un alt de secours propre au projet, jamais image ou vide.
Le script écrit dans la console la liste réelle des images afin de compléter ensuite la table sans modifier les pages Notion.

Script Super — version pilote

(() => {
  "use strict";

  const PATH_MATCH = /chamarande/i;
  if (!PATH_MATCH.test(window.location.pathname)) return;

  const PROJECT = "PA.04 Chamarande";
  const AUTHOR = "Sebastien Wierinck";

  const ALT_BY_FILENAME = {
    "CHAMARANDE_scenographie_-006":
      "Overview of the CNC-cut modular furniture installed at Château de Chamarande by Sebastien Wierinck",
    "CHAMARANDE_scenographie_-013":
      "Circular plywood benches and display elements from the PA.04 Chamarande scenography inside the château",
    "CHAMARANDE_scenographie_-011":
      "Detail of the slot-assembled plywood furniture for PA.04 Chamarande, produced without nails or screws"
  };

  const IGNORE_SELECTOR = [
    "header",
    "nav",
    "footer",
    "[role='navigation']",
    ".notion-header",
    ".super-navbar",
    ".super-footer"
  ].join(",");

  function filenameFromImage(img) {
    const raw = img.currentSrc || img.src || "";
    try {
      const url = new URL(raw, window.location.href);
      return decodeURIComponent(url.pathname.split("/").pop() || "");
    } catch {
      return raw.split("/").pop()?.split("?")[0] || "";
    }
  }

  function isProjectImage(img) {
    if (img.closest(IGNORE_SELECTOR)) return false;
    if (img.width > 0 && img.width < 180) return false;
    if (img.height > 0 && img.height < 120) return false;
    const src = img.currentSrc || img.src || "";
    if (!src || src.startsWith("data:")) return false;
    return true;
  }

  function uniqueProjectImages() {
    const seen = new Set();
    return [...document.querySelectorAll("main img, article img, .notion-page img")]
      .filter(isProjectImage)
      .filter((img) => {
        const key = filenameFromImage(img) || img.currentSrc || img.src;
        if (seen.has(key)) return false;
        seen.add(key);
        return true;
      });
  }

  function knownAlt(filename) {
    const key = Object.keys(ALT_BY_FILENAME).find((fragment) =>
      filename.includes(fragment)
    );
    return key ? ALT_BY_FILENAME[key] : null;
  }

  function fallbackAlt(index) {
    return `${PROJECT} — CNC-cut plywood furniture and scenography at Château de Chamarande — view ${index + 1} — ${AUTHOR}`;
  }

  function applyAlts() {
    const images = uniqueProjectImages();

    images.forEach((img, index) => {
      const filename = filenameFromImage(img);
      const alt = knownAlt(filename) || fallbackAlt(index);

      img.setAttribute("alt", alt);
      img.setAttribute("data-swws-seo-alt", "chamarande");
    });

    console.table(
      images.map((img, index) => ({
        order: index + 1,
        filename: filenameFromImage(img),
        alt: img.getAttribute("alt"),
        width: img.naturalWidth,
        height: img.naturalHeight
      }))
    );
  }

  let scheduled = false;
  function scheduleApply() {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(() => {
      scheduled = false;
      applyAlts();
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", scheduleApply, { once: true });
  } else {
    scheduleApply();
  }

  const observer = new MutationObserver(scheduleApply);
  observer.observe(document.body, { childList: true, subtree: true });
})();

Vérification

Coller le script dans le code JavaScript global de Super.
Ouvrir la page publique Chamarande.
Dans l’inspecteur, vérifier qu’une image possède un attribut alt et data-swws-seo-alt="chamarande".
La console affiche automatiquement l’ordre, le nom de fichier, les dimensions et l’alt de toutes les images retenues.

État du pilote

Trois fichiers sont déjà reconnus individuellement : -006, -013 et -011.
Toutes les autres images reçoivent un alt de secours spécifique à Chamarande.
La prochaine version remplacera les textes de secours par des descriptions précises, fichier par fichier, à partir de la liste réelle produite dans la console.

Ce script constitue un filet de sécurité immédiat. Les alt texts sont ajoutés dans le DOM après le chargement de Super ; une intégration HTML native restera préférable dans le futur CMS indépendant.