<?php
declare(strict_types=1);
if (file_exists(__DIR__ . '/config.php')) require_once __DIR__ . '/config.php';
$appName = defined('APP_NAME') ? APP_NAME : 'AEO Metrix';
$appUrl  = defined('APP_URL')  ? APP_URL  : 'https://www.aeometrix.it';
$year    = date('Y');

$checklist = [
  [
    'label' => 'Accessibilità ai crawler',
    'priority' => 'Alta',
    'items' => [
      'Le pagine importanti restituiscono status code corretti e non errori intermittenti.',
      'Il file robots.txt non blocca accidentalmente risorse o sezioni utili.',
      'Le pagine principali sono raggiungibili con link HTML normali.',
      'I contenuti essenziali non dipendono solo da JavaScript lato client.',
      'Le URL chiave sono stabili, pulite e facilmente esplorabili.',
    ],
  ],
  [
    'label' => 'Chiarezza dei contenuti',
    'priority' => 'Alta',
    'items' => [
      'Le pagine contengono testo utile già nel markup iniziale.',
      'Titoli, H2 e paragrafi spiegano subito il tema della pagina.',
      'Le informazioni principali non sono nascoste dietro interazioni complesse.',
      'Ogni pagina ha un focus chiaro e non dispersivo.',
      'Le sezioni importanti sono ben segmentate e leggibili.',
    ],
  ],
  [
    'label' => 'Struttura tecnica',
    'priority' => 'Alta',
    'items' => [
      'Le canonical sono corrette e coerenti con la URL finale.',
      'Le sitemap XML includono solo URL valide e indicizzabili.',
      'Non ci sono redirect inutili o catene troppo lunghe.',
      'I meta robots non bloccano pagine strategiche.',
      'Le performance non compromettono il recupero del contenuto.',
    ],
  ],
  [
    'label' => 'Segnali semantici',
    'priority' => 'Media',
    'items' => [
      'Il sito usa dati strutturati coerenti con il contenuto reale.',
      'Le entità principali sono nominate in modo stabile.',
      'Le pagine istituzionali rafforzano chi è il brand e cosa fa.',
      'Il linking interno mostra relazioni tra pagine e temi.',
      'Le FAQ o i blocchi di risposta aiutano l’estrazione informativa.',
    ],
  ],
  [
    'label' => 'Leggibilità per AI',
    'priority' => 'Media',
    'items' => [
      'Le risposte chiave compaiono nelle prime righe sotto gli H2.',
      'I paragrafi sono sintetizzabili e semanticamente autonomi.',
      'I contenuti evitano vaghezza e autoreferenzialità eccessiva.',
      'Le pagine aiutano un motore AI a capire ruolo e utilità del brand.',
      'Le sezioni più importanti potrebbero essere citate senza perdere senso.',
    ],
  ],
];

$steps = [
  [
    'n' => '01',
    'title' => 'Capisci cosa cerca davvero un AI crawler',
    'icon' => '🕷️',
    'body' => 'Un AI crawler non cerca solo pagine indicizzabili: cerca contenuti recuperabili, leggibili e utili da usare in sistemi di risposta generativa. Per questo non basta rendere una pagina raggiungibile: serve renderla anche chiara, estraibile e semanticamente comprensibile.'
  ],
  [
    'n' => '02',
    'title' => 'Rendi il contenuto accessibile senza attriti tecnici',
    'icon' => '🛠️',
    'body' => 'Se una pagina ha blocchi in robots.txt, errori 5xx, redirect confusi, rendering fragile o contenuti caricati male, il crawler può fallire o recuperare solo una parte della pagina. La base tecnica resta decisiva anche in ottica AI.'
  ],
  [
    'n' => '03',
    'title' => 'Metti il testo importante nel markup visibile',
    'icon' => '📄',
    'body' => 'Molti sistemi AI lavorano meglio quando il contenuto principale è subito leggibile nell’HTML o comunque facilmente renderizzabile. Se il valore della pagina compare solo dopo script complessi o componenti dinamici fragili, la comprensione può peggiorare.'
  ],
  [
    'n' => '04',
    'title' => 'Struttura la pagina per l’estrazione delle risposte',
    'icon' => '📌',
    'body' => 'Titoli chiari, H2 espliciti, paragrafi focalizzati, FAQ e blocchi informativi ben organizzati aiutano i crawler e i sistemi di risposta a segmentare meglio il contenuto. Una pagina facile da esplorare è anche più facile da riusare.'
  ],
  [
    'n' => '05',
    'title' => 'Riduci ambiguità e contenuti superflui',
    'icon' => '🎯',
    'body' => 'I crawler e i motori AI valorizzano pagine che arrivano al punto. Introduzioni troppo lunghe, slogan generici, testi gonfiati o struttura debole rendono più difficile capire perché una pagina meriti attenzione e recupero.'
  ],
  [
    'n' => '06',
    'title' => 'Aiuta il crawler a capire contesto, brand e relazioni',
    'icon' => '🔗',
    'body' => 'Una buona guida per crawler AI non riguarda solo l’accessibilità tecnica, ma anche il contesto semantico. Il sito deve spiegare chi è il brand, quali temi presidia e come le pagine si collegano tra loro.'
  ],
  [
    'n' => '07',
    'title' => 'Verifica se le pagine sono davvero recuperabili e utili',
    'icon' => '📈',
    'body' => 'L’obiettivo finale non è solo essere scansionabili, ma essere abbastanza chiari e stabili da diventare una fonte utile per modelli AI. Per questo conviene controllare crawlability, struttura, sintesi, segnali semantici e qualità reale della pagina.'
  ],
];
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI crawler guida: come rendere un sito leggibile e recuperabile dai crawler dei motori AI</title>
<meta name="description" content="Guida pratica sugli AI crawler: come rendere il sito accessibile, leggibile e recuperabile da ChatGPT, Gemini, Perplexity e altri motori generativi grazie a struttura tecnica, contenuti chiari e segnali semantici corretti.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/ai-crawler-guida.php">
<meta property="og:title" content="AI crawler guida: come rendere un sito leggibile e recuperabile dai crawler dei motori AI">
<meta property="og:description" content="Scopri come migliorare accessibilità, struttura e chiarezza del sito per aiutare i crawler AI a recuperare contenuti utili e comprensibili.">
<meta property="og:url" content="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/ai-crawler-guida.php">
<meta property="og:type" content="article">
<link rel="icon" href="/images/favicon.webp" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&display=swap" rel="stylesheet">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "AI crawler guida: come rendere un sito leggibile e recuperabile dai crawler dei motori AI",
  "description": "Guida pratica sugli AI crawler: come rendere il sito accessibile, leggibile e recuperabile da ChatGPT, Gemini, Perplexity e altri motori generativi grazie a struttura tecnica, contenuti chiari e segnali semantici corretti.",
  "author": {
    "@type": "Organization",
    "name": "AEO Metrix",
    "url": "<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>"
  },
  "publisher": {
    "@type": "Organization",
    "name": "AEO Metrix",
    "url": "<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>"
  },
  "datePublished": "2026-03-21",
  "dateModified": "<?= date('Y-m-d') ?>"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Come rendere un sito più leggibile per gli AI crawler",
  "description": "Guida passo-passo per migliorare crawlability, recupero dei contenuti, chiarezza semantica e struttura delle pagine per i crawler dei motori AI.",
  "totalTime": "P5D",
  "step": [
    {"@type":"HowToStep","position":1,"name":"Capisci cosa cerca davvero un AI crawler","text":"Un AI crawler cerca contenuti recuperabili, leggibili e semanticamente utili, non solo pagine aperte alla scansione."},
    {"@type":"HowToStep","position":2,"name":"Rendi il contenuto accessibile senza attriti tecnici","text":"Riduci blocchi, errori, redirect inutili e fragilità di rendering che ostacolano il recupero della pagina."},
    {"@type":"HowToStep","position":3,"name":"Metti il testo importante nel markup visibile","text":"Assicurati che le informazioni chiave siano recuperabili e non dipendano solo da componenti complessi lato client."},
    {"@type":"HowToStep","position":4,"name":"Struttura la pagina per l’estrazione delle risposte","text":"Usa titoli chiari, sezioni ordinate e blocchi facili da segmentare e riassumere."},
    {"@type":"HowToStep","position":5,"name":"Riduci ambiguità e contenuti superflui","text":"Rendi la pagina più diretta, più leggibile e meno dispersiva per facilitare il recupero dei segnali utili."},
    {"@type":"HowToStep","position":6,"name":"Aiuta il crawler a capire contesto, brand e relazioni","text":"Rafforza le connessioni semantiche tra entità, pagine e argomenti chiave."},
    {"@type":"HowToStep","position":7,"name":"Verifica se le pagine sono davvero recuperabili e utili","text":"Controlla che il sito sia non solo scansionabile, ma anche realmente utile come fonte per i motori AI."}
  ]
}
</script>

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"FAQPage",
  "mainEntity":[
    {
      "@type":"Question",
      "name":"Cosa sono gli AI crawler?",
      "acceptedAnswer":{
        "@type":"Answer",
        "text":"Gli AI crawler sono sistemi automatici che recuperano contenuti dal web per alimentare modelli, motori di risposta o sistemi di discovery. Non si limitano a verificare se una pagina esiste, ma possono valutare anche accessibilità, struttura, contenuto e utilità informativa."
      }
    },
    {
      "@type":"Question",
      "name":"Essere indicizzabile basta per essere utile a un crawler AI?",
      "acceptedAnswer":{
        "@type":"Answer",
        "text":"No. Una pagina può essere indicizzabile ma poco utile per un crawler AI se il contenuto è difficile da recuperare, troppo vago, nascosto dietro script complessi o semanticamente poco chiaro."
      }
    },
    {
      "@type":"Question",
      "name":"JavaScript può creare problemi ai crawler AI?",
      "acceptedAnswer":{
        "@type":"Answer",
        "text":"Può crearli quando il contenuto principale dipende troppo da rendering fragile, caricamenti ritardati o blocchi lato client. Se il testo importante non è facilmente disponibile, il recupero può risultare incompleto o meno affidabile."
      }
    },
    {
      "@type":"Question",
      "name":"Robots.txt influisce anche sui crawler AI?",
      "acceptedAnswer":{
        "@type":"Answer",
        "text":"Può influire, perché un file robots.txt configurato male può bloccare aree o risorse che ostacolano la scansione e il recupero del contenuto. Va quindi controllato con attenzione."
      }
    },
    {
      "@type":"Question",
      "name":"Come si rende una pagina più utile per un AI crawler?",
      "acceptedAnswer":{
        "@type":"Answer",
        "text":"Conviene unire base tecnica solida, contenuti chiari, struttura leggibile, risposte dirette, internal linking coerente e segnali semantici che aiutino il sistema a capire cosa offre davvero la pagina."
      }
    }
  ]
}
</script>

<style>
:root{
  --bg:#07080f; --bg2:#0c0d17; --surface:#0f1020; --surface2:#141628;
  --border:#1a1d35; --border2:#242840; --text:#dde1f5; --text-mid:#8890b8; --text-dim:#4a5070;
  --accent:#4f6ef7; --accent2:#8b5cf6; --green:#06d6a0; --yellow:#f7c948; --orange:#f97316; --red:#ef4444;
  --r:12px; --font:'Bricolage Grotesque',sans-serif; --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);background:rgba(255,255,255,.05);padding:.12rem .34rem;border-radius:6px;color:#c8d2ff}
main{flex:1}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}

/* NAV CSS aggiunto come richiesto */
nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,8,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 22px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.nav-logo img{
  height:44px;
  width:auto;
  display:block;
}
.nav-links{
  display:flex;
  gap:4px;
}
.nav-link{
  padding:7px 12px;
  border-radius:8px;
  font-size:13px;
  color:var(--text-mid);
}
.nav-link:hover{
  background:var(--surface2);
  color:var(--text);
  text-decoration:none;
}
.nav-link.active{
  color:var(--accent);
  background:rgba(79,110,247,.1);
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  padding:9px 18px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.nav-cta:hover{
  text-decoration:none;
  opacity:.92;
}

.hero{
  padding:72px 0 56px;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% -8%,rgba(79,110,247,.16) 0%,transparent 65%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;
  align-items:start;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(247,201,72,.35);
  background:rgba(247,201,72,.07);
  color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(32px,5vw,58px);
  line-height:1.04;
  letter-spacing:-2px;
  margin-bottom:18px;
  max-width:860px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-lead{
  font-size:18px;
  color:var(--text-mid);
  max-width:760px;
  line-height:1.72;
  margin-bottom:28px;
}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:12px;
}
.hero-stat{
  min-width:132px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 14px 13px;
}
.hero-stat-num{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:6px;
}
.hero-stat-lbl{
  font-size:12px;
  color:var(--text-mid);
  line-height:1.4;
}

.progress-card{
  background:linear-gradient(180deg,rgba(79,110,247,.08),rgba(139,92,246,.04));
  border:1px solid rgba(79,110,247,.2);
  border-radius:16px;
  padding:18px;
  position:sticky;
  top:96px;
}
.progress-card-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:-.2px;
}
.prog-row{margin-bottom:14px}
.prog-row:last-child{margin-bottom:0}
.prog-label{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--text-mid);margin-bottom:7px
}
.prog-label span:last-child{color:var(--text);font-family:var(--mono)}
.prog-bar{
  height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.04)
}
.prog-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:30px;
  padding:44px 0 0;
}
.article-body{
  min-width:0;
}
.article-body h2{
  font-size:31px;
  letter-spacing:-.8px;
  line-height:1.15;
  margin:0 0 14px;
  scroll-margin-top:100px;
}
.article-body h3{
  font-size:22px;
  letter-spacing:-.4px;
  line-height:1.2;
  margin:0 0 12px;
}
.article-body p{
  font-size:16px;
  color:var(--text-mid);
  line-height:1.82;
  margin:0 0 16px;
}
.article-body strong{color:var(--text)}
.article-body section{margin-bottom:34px}

.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--accent);font-family:var(--mono);
  margin-bottom:10px;
}

.callout{
  border:1px solid rgba(79,110,247,.22);
  background:linear-gradient(135deg,rgba(79,110,247,.08),rgba(139,92,246,.05));
  border-radius:16px;
  padding:22px 22px;
  margin:22px 0 30px;
}
.callout h3{margin-bottom:8px}
.callout p:last-child{margin-bottom:0}

.step-list{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.step-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px 16px;
}
.step-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.step-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-mid);
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:rgba(79,110,247,.12);
  border:1px solid rgba(79,110,247,.24);
  color:var(--accent);
  font-weight:700;
}
.step-icon{
  font-size:20px;
  line-height:1;
}
.step-card p:last-child{margin-bottom:0}

.inline-cta{
  margin:34px 0;
  padding:28px 28px;
  border:1px solid rgba(79,110,247,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(79,110,247,.08),rgba(139,92,246,.05));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.inline-cta-text h3{
  font-size:22px;
  letter-spacing:-.4px;
  margin-bottom:8px;
}
.inline-cta-text p{
  font-size:15px;
  color:var(--text-mid);
  line-height:1.7;
  max-width:620px;
  margin-bottom:0;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:14px;font-weight:700;
}
.btn-primary:hover{text-decoration:none;opacity:.92}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:10px;
  border:1px solid var(--border2);
  background:var(--surface2);
  color:var(--text-mid);
  font-size:14px;font-weight:600;
}
.btn-secondary:hover{text-decoration:none;color:var(--text);border-color:var(--accent)}

.checklist-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.checklist-head{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.checklist-head h3{
  margin-bottom:8px;
}
.checklist-head p{
  margin-bottom:0;
  font-size:14px;
}
.checklist-progress{
  display:flex;align-items:center;gap:12px;
  margin-top:14px;
}
.checklist-progress-bar{
  flex:1;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06)
}
.checklist-progress-fill{
  width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--accent))
}
.checklist-progress-text{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-mid);
}

.check-group{
  border-bottom:1px solid var(--border);
}
.check-group:last-child{border-bottom:none}
.check-group-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;
  background:rgba(255,255,255,.015);
}
.check-group-title{
  font-size:15px;font-weight:700;
}
.check-priority{
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  font-family:var(--mono);color:var(--yellow)
}
.check-items{
  padding:0 18px 16px;
  display:grid;
  gap:10px;
}
.check-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:12px;
}
.check-item input{
  margin-top:3px;
  accent-color:var(--green);
}
.check-item label{
  font-size:14px;
  color:var(--text-mid);
  line-height:1.6;
  cursor:pointer;
}

.warn-box{
  margin-top:28px;
  border:1px solid rgba(249,115,22,.22);
  background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(247,201,72,.04));
  border-radius:16px;
  padding:20px 20px;
}
.warn-box h3{
  margin-bottom:8px;
}
.warn-box p:last-child{
  margin-bottom:0;
}

.example-box{
  margin-top:24px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  overflow:hidden;
}
.example-head{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-mid);
  letter-spacing:.5px;
}
.example-code{
  padding:18px;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.8;
  color:#c9d2ff;
  white-space:pre-wrap;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-size:15px;
  font-weight:700;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:18px;
  color:var(--text-mid);
}
.faq-item[open] summary::after{content:'−'}
.faq-item p{
  padding:0 18px 18px;
  margin:0;
  font-size:14px;
}

.sidebar{
  position:sticky;
  top:96px;
  align-self:start;
  display:grid;
  gap:14px;
}
.side-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
}
.side-card h3{
  font-size:15px;
  margin-bottom:12px;
  letter-spacing:-.2px;
}
.toc{
  display:grid;
  gap:8px;
}
.toc a{
  color:var(--text-mid);
  font-size:13px;
  line-height:1.45;
}
.toc a:hover{color:var(--text);text-decoration:none}
.side-cta p,
.side-related p{
  font-size:13px;
  color:var(--text-mid);
  line-height:1.6;
  margin-bottom:12px;
}
.side-related-links{
  display:grid;gap:10px;
}
.side-related-links a{
  font-size:13px;
  line-height:1.45;
  color:var(--text-mid);
}
.side-related-links a:hover{
  color:var(--text);
  text-decoration:none;
}

.final-cta{
  margin:14px 0 72px;
  padding:48px 40px;
  border:1px solid rgba(79,110,247,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(79,110,247,.07),rgba(139,92,246,.05));
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:'';
  position:absolute;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  width:400px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(79,110,247,.18) 0%,transparent 70%);
  pointer-events:none;
}
.final-cta h2{
  font-size:30px;
  letter-spacing:-.7px;
  margin-bottom:12px;
}
.final-cta p{
  font-size:16px;
  color:var(--text-mid);
  margin-bottom:28px;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
.cta-btns{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

footer{
  padding:28px 0;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-size:12px;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--text-dim);font-size:12px}
.footer-links a:hover{color:var(--text-mid);text-decoration:none}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .progress-card{display:none}
  .article-layout{grid-template-columns:1fr}
  .sidebar{position:static;display:none}
}
@media(max-width:860px){
  .nav-inner{
    height:auto;
    min-height:64px;
    padding:10px 22px;
    flex-wrap:wrap;
  }
  .nav-links{
    order:3;
    width:100%;
    flex-wrap:wrap;
  }
}
@media(max-width:700px){
  .hero{padding:44px 0 32px}
  .hero h1{font-size:28px}
  .inline-cta{flex-direction:column;gap:16px;text-align:center}
  .final-cta{padding:32px 20px}
  .final-cta h2{font-size:24px}
}
@media(max-width:640px){
  .nav-logo img{height:38px}
  .nav-link{font-size:12px;padding:6px 10px}
  .nav-cta{padding:8px 14px;font-size:12px}
}
</style>
</head>
<body>

<?php include '../includes/header.php'; ?>

<main>

  <section class="hero">
    <div class="wrap">
      <div class="hero-inner">
        <div>
          <div class="hero-badge">Crawler guide · AI visibility</div>
          <h1>AI crawler guida: <em>come rendere un sito leggibile e recuperabile dai crawler dei motori AI</em></h1>
          <p class="hero-lead">
            Essere online non basta. Per essere davvero utile a ChatGPT, Gemini, Perplexity e ad altri sistemi generativi, un sito deve essere facilmente recuperabile dai crawler, tecnicamente accessibile, semanticamente chiaro e strutturato in modo che il contenuto possa essere compreso e riusato.
          </p>

          <div class="hero-stats">
            <div class="hero-stat"><span class="hero-stat-num">7</span><div class="hero-stat-lbl">Controlli operativi</div></div>
            <div class="hero-stat"><span class="hero-stat-num">25+</span><div class="hero-stat-lbl">Punti di verifica</div></div>
            <div class="hero-stat"><span class="hero-stat-num">4</span><div class="hero-stat-lbl">Motori AI considerati</div></div>
          </div>
        </div>

        <div class="progress-card">
          <div class="progress-card-title">Segnali che aiutano gli AI crawler</div>
          <?php
          $bars = [
            'Accessibilità tecnica' => 92,
            'Contenuto recuperabile' => 88,
            'Struttura leggibile' => 85,
            'Segnali semantici' => 81,
            'Utilità per AI' => 87,
          ];
          foreach ($bars as $label => $val):
          ?>
          <div class="prog-row">
            <div class="prog-label"><span><?= $label ?></span><span><?= $val ?>%</span></div>
            <div class="prog-bar"><div class="prog-fill" style="width:<?= $val ?>%"></div></div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </section>

  <div class="wrap">
    <div class="article-layout">

      <article class="article-body">

        <section id="intro">
          <div class="section-kicker">Fondamenti · AI crawler</div>
          <h2>Cosa fanno davvero gli AI crawler</h2>
          <p>
            Gli AI crawler sono sistemi automatici che esplorano il web per recuperare contenuti utili a motori di risposta, modelli generativi e sistemi di discovery. In pratica, non si limitano a verificare l’esistenza di una pagina: cercano di capire se quella pagina è <strong>raggiungibile, leggibile, chiara e utile</strong>.
          </p>
          <p>
            Per questo motivo, un sito può essere tecnicamente online ma comunque poco adatto ai crawler AI. Succede quando i contenuti sono nascosti dietro rendering fragile, quando la struttura è troppo confusa, quando il testo importante arriva troppo tardi o quando i segnali semantici sono deboli.
          </p>

          <div class="callout">
            <h3>Il principio chiave</h3>
            <p>
              Un AI crawler lavora meglio quando trova pagine <strong>facili da raggiungere, facili da leggere e facili da interpretare</strong>. La base tecnica è importante, ma da sola non basta senza chiarezza editoriale.
            </p>
          </div>
        </section>

        <section id="perche-conta">
          <div class="section-kicker">Motori AI · Recupero contenuti</div>
          <h2>Perché la crawlability AI è diversa dalla sola indicizzabilità</h2>
          <p>
            Una pagina può essere indicizzabile per un motore classico ma non essere particolarmente utile per un sistema AI. Questo perché il recupero AI dipende anche dalla qualità del contenuto disponibile, dalla sua segmentazione, dalla chiarezza delle sezioni e dalla possibilità di estrarre risposte attendibili.
          </p>
          <p>
            Se il testo importante è mescolato a rumore, nascosto in componenti poco stabili o disperso in paragrafi confusi, il crawler può recuperare comunque la pagina ma ottenere un segnale debole. Al contrario, una pagina ordinata e diretta aumenta le probabilità di essere compresa e riutilizzata meglio.
          </p>
          <p>
            In altre parole, la domanda non è solo “la pagina si può scansionare?”, ma anche “la pagina è abbastanza utile da essere capita e riassunta bene?”.
          </p>
        </section>

        <section id="step-operativi">
          <div class="section-kicker">Guida pratica · 7 step</div>
          <h2>Come rendere una pagina più utile per i crawler AI</h2>
          <p>
            Per aiutare i crawler dei motori AI conviene lavorare insieme su accessibilità tecnica, struttura del testo, recuperabilità del contenuto e contesto semantico. Qui sotto trovi i passaggi principali.
          </p>

          <div class="step-list">
            <?php foreach ($steps as $step): ?>
            <div class="step-card">
              <div class="step-top">
                <div class="step-badge">
                  <span class="step-num"><?= $step['n'] ?></span>
                  <span><?= $step['title'] ?></span>
                </div>
                <div class="step-icon"><?= $step['icon'] ?></div>
              </div>
              <p><?= $step['body'] ?></p>
            </div>
            <?php endforeach; ?>
          </div>
        </section>

        <section id="errori">
          <div class="section-kicker">Errori comuni · Crawl quality</div>
          <h2>Gli errori che ostacolano più spesso il recupero del contenuto</h2>
          <p>
            Tra i problemi più frequenti ci sono file robots.txt troppo restrittivi, risorse bloccate, pagine che dipendono quasi totalmente da JavaScript lato client, canonical incoerenti, redirect multipli, contenuti importanti caricati tardi e strutture editoriali troppo vaghe.
          </p>
          <p>
            Anche i testi possono sabotare la crawlability AI. Una pagina piena di slogan, con poca sostanza informativa o con paragrafi che non arrivano mai al punto, può risultare debole pur essendo tecnicamente accessibile.
          </p>
        </section>

        <div class="inline-cta">
          <div class="inline-cta-text">
            <h3>Vuoi capire se il tuo sito è davvero leggibile dai motori AI?</h3>
            <p>AEO Metrix ti aiuta a individuare blocchi tecnici, segnali semantici deboli e problemi di struttura che possono limitare il recupero dei tuoi contenuti da parte dei crawler AI.</p>
          </div>
          <a class="btn-primary" href="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/#tool">Analizza il sito →</a>
        </div>

        <section id="checklist">
          <div class="section-kicker">Checklist · Audit crawler</div>
          <h2>Checklist per verificare se il sito è pronto per gli AI crawler</h2>
          <p>
            Usa questa checklist per controllare se il tuo sito è non solo accessibile tecnicamente, ma anche abbastanza chiaro e solido da diventare una fonte utile per i motori di risposta AI.
          </p>

          <div class="checklist-wrap">
            <div class="checklist-head">
              <h3>Checklist interattiva</h3>
              <p>Spunta gli elementi presenti per misurare quanto il sito è recuperabile, leggibile e semanticamente utile per i crawler AI.</p>
              <div class="checklist-progress">
                <div class="checklist-progress-bar">
                  <div class="checklist-progress-fill" id="checklistFill"></div>
                </div>
                <div class="checklist-progress-text" id="checklistText">0%</div>
              </div>
            </div>

            <?php $i = 0; foreach ($checklist as $group): ?>
            <div class="check-group">
              <div class="check-group-head">
                <div class="check-group-title"><?= htmlspecialchars($group['label'], ENT_QUOTES) ?></div>
                <div class="check-priority">Priorità <?= htmlspecialchars($group['priority'], ENT_QUOTES) ?></div>
              </div>
              <div class="check-items">
                <?php foreach ($group['items'] as $item): $i++; ?>
                <div class="check-item">
                  <input type="checkbox" id="chk-<?= $i ?>" class="aeo-check">
                  <label for="chk-<?= $i ?>"><?= htmlspecialchars($item, ENT_QUOTES) ?></label>
                </div>
                <?php endforeach; ?>
              </div>
            </div>
            <?php endforeach; ?>
          </div>

          <div class="warn-box">
            <h3>Errore comune da evitare</h3>
            <p>
              Pensare che basti “non bloccare i bot” è riduttivo. Per i sistemi AI conta anche quanto il contenuto è <strong>chiaro, recuperabile e riutilizzabile</strong>. Una pagina accessibile ma confusa resta comunque una fonte debole.
            </p>
          </div>
        </section>

        <section id="esempio">
          <div class="section-kicker">Esempio · Pagina debole vs pagina utile</div>
          <h2>Come appare una pagina poco crawler-friendly rispetto a una ben costruita</h2>
          <p>
            Una pagina debole spesso richiede troppo rendering, nasconde il contenuto importante, ha titoli vaghi e non offre blocchi facilmente estraibili. Una pagina forte, invece, mette subito in chiaro tema, utilità e struttura.
          </p>

          <div class="example-box">
            <div class="example-head">Schema pratico</div>
            <div class="example-code">Pagina debole:
- contenuto essenziale nascosto o tardivo
- struttura confusa
- troppo dipendente da JS
- segnali semantici deboli
- bassa utilità per AI

Pagina utile:
- testo importante subito visibile
- H2 chiari e sezioni ordinate
- accessibilità tecnica pulita
- contesto e brand ben definiti
- alta recuperabilità e leggibilità</div>
          </div>
        </section>

        <section id="faq">
          <div class="section-kicker">FAQ · Domande frequenti</div>
          <h2>FAQ sugli AI crawler</h2>

          <div class="faq-list">
            <details class="faq-item">
              <summary>Cosa sono gli AI crawler?</summary>
              <p>Gli AI crawler sono sistemi automatici che recuperano contenuti dal web per alimentare modelli, motori di risposta o sistemi di discovery. Non si limitano a verificare se una pagina esiste, ma possono valutare anche accessibilità, struttura, contenuto e utilità informativa.</p>
            </details>

            <details class="faq-item">
              <summary>Essere indicizzabile basta per essere utile a un crawler AI?</summary>
              <p>No. Una pagina può essere indicizzabile ma poco utile per un crawler AI se il contenuto è difficile da recuperare, troppo vago, nascosto dietro script complessi o semanticamente poco chiaro.</p>
            </details>

            <details class="faq-item">
              <summary>JavaScript può creare problemi ai crawler AI?</summary>
              <p>Può crearli quando il contenuto principale dipende troppo da rendering fragile, caricamenti ritardati o blocchi lato client. Se il testo importante non è facilmente disponibile, il recupero può risultare incompleto o meno affidabile.</p>
            </details>

            <details class="faq-item">
              <summary>Robots.txt influisce anche sui crawler AI?</summary>
              <p>Può influire, perché un file robots.txt configurato male può bloccare aree o risorse che ostacolano la scansione e il recupero del contenuto. Va quindi controllato con attenzione.</p>
            </details>

            <details class="faq-item">
              <summary>Come si rende una pagina più utile per un AI crawler?</summary>
              <p>Conviene unire base tecnica solida, contenuti chiari, struttura leggibile, risposte dirette, internal linking coerente e segnali semantici che aiutino il sistema a capire cosa offre davvero la pagina.</p>
            </details>
          </div>
        </section>
      </article>

      <aside class="sidebar">
        <div class="side-card">
          <h3>Indice articolo</h3>
          <div class="toc">
            <a href="#intro">Cosa fanno gli AI crawler</a>
            <a href="#perche-conta">Crawlability AI vs indicizzabilità</a>
            <a href="#step-operativi">7 step operativi</a>
            <a href="#errori">Errori comuni</a>
            <a href="#checklist">Checklist di verifica</a>
            <a href="#esempio">Pagina debole vs utile</a>
            <a href="#faq">FAQ</a>
          </div>
        </div>

        <div class="side-card side-cta">
          <h3>Analizza il tuo sito</h3>
          <p>Scopri se le tue pagine sono abbastanza accessibili, leggibili e utili per ChatGPT, Gemini, Perplexity e Google AI Overview.</p>
          <a class="btn-primary" href="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/#tool">Prova AEO Metrix</a>
        </div>

        <div class="side-card side-related">
          <h3>Articoli correlati</h3>
          <div class="side-related-links">
            <a href="contenuti-sintetizzabili-ai.php">Contenuti sintetizzabili per AI: come scrivere testi che i motori generativi capiscono meglio</a>
            <a href="struttura-pagina-ai.php">Come strutturare una pagina per essere letta meglio dai modelli AI</a>
            <a href="entity-seo-ai.php">Entity SEO per AI: perché brand, contesto e relazioni contano più delle keyword</a>
            <a href="come-ottimizzare-sito-chatgpt.php">Come ottimizzare un sito per essere capito meglio da ChatGPT</a>
          </div>
        </div>
      </aside>

    </div>

    <div class="final-cta">
      <h2>Un sito utile per gli AI crawler è un sito più chiaro anche per le persone</h2>
      <p>
        AEO Metrix ti aiuta a capire se le tue pagine sono davvero recuperabili, leggibili e semanticamente forti per i motori AI o se esistono ancora blocchi tecnici e strutturali che limitano la visibilità.
      </p>
      <div class="cta-btns">
        <a class="btn-primary" href="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/#tool">Analizza il tuo sito gratis →</a>
        <a class="btn-secondary" href="<?= htmlspecialchars($appUrl, ENT_QUOTES) ?>/#prezzi">Vedi i piani</a>
      </div>
    </div>
  </div>

</main>

<?php include '../includes/footer.php'; ?>

<img src="https://www.aeometrix.it/crawler-tracker.php?action=beacon&domain=tuosito.it&path=<?= urlencode($_SERVER['REQUEST_URI']) ?>" width="1" height="1" style="display:none" alt="">

<script>
(function(){
  const checks = Array.from(document.querySelectorAll('.aeo-check'));
  const fill = document.getElementById('checklistFill');
  const text = document.getElementById('checklistText');

  function updateChecklist(){
    const total = checks.length || 1;
    const done = checks.filter(ch => ch.checked).length;
    const pct = Math.round((done / total) * 100);
    if(fill) fill.style.width = pct + '%';
    if(text) text.textContent = pct + '%';
  }

  checks.forEach(ch => ch.addEventListener('change', updateChecklist));
  updateChecklist();
})();
</script>
</body>
</html>