---
title: Buone pratiche per SEO e Accessibilità
description: Alcune buone pratiche e codici copia-incolla per rendere le pagine su HubSpot più adatte all'indicizzazione SEO e all'accessibilità
---
[Skip to content](https://www.hubspotlove.com/knowledge/buone-pratiche-per-seo-e-accessibilità#main-content)
English
Show submenu for translations
[Contact us](https://www.hubspotlove.com/knowledge/kb-tickets/new?hsLang=en)
![AND logo white.png\]](https://www.hubspotlove.com/hs-fs/hubfs/AND%20logo%20white.png?height=29&name=AND%20logo%20white.png)
Open main navigation
Close main navigation
- English
Show submenu for translations
- [Contact us](https://www.hubspotlove.com/knowledge/kb-tickets/new)
- Go to the website
Go to the website
How-To Resource Repository
- There are no suggestions because the search field is empty.
1. [Help Center](https://www.hubspotlove.com/knowledge?hsLang=en)
2. [Website from A to Z](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en)
# Buone pratiche per SEO e Accessibilità
## Alcune buone pratiche e codici copia-incolla per rendere le pagine su HubSpot più adatte all'indicizzazione SEO e all'accessibilità
### **Immagini**
Se l'immagine è **completamente vettoriale** (icona, grafico, illustrazione, ... ) meglio salvarla come **.svg**
Se l'immagine è bitmap oppure un ibrido bitmap-vettoriale, sarebbe ottimale esportarla come **.webp** – si può esportare .webp da Photoshop passando da file / Salva una copia / Webp oppure da Figma tramite dei plugin.
---
### **Alt text**
**Cos'è:**
L'alt text (testo alternativo) è una breve descrizione testuale associata a un'immagine nel codice HTML di una pagina web. Serve a descrivere il contenuto visivo per persone ipovedenti tramite screen reader e ai motori di ricerca per comprendere l'immagine.
**Regole pratiche di compilazione e lunghezza:**
- I tag alt devono essere descrittivi ma concisi (**sotto i 125 caratteri**)
- Inserirlo direttamente nel file manager!!!
- No punteggiatura (screen reader leggono tutto d’un fiato)
- A seconda del tipo di immagine, l'approccio cambia:
- **Foto:** Descrivere in modo oggettivo cosa si vede (es. alt="Persona al supermercato").
- **Grafici o Schemi:** Scrivete un alt brevissimo per identificare l'immagine (es. alt="Dashboard social") e inserite i dati completi o la spiegazione analitica direttamente nel corpo del testo dell'articolo.
- **Immagine decorativa:** Lasciare il campo “alt” vuoto (HS spesso lascia il nome dell’immagine come alt, bisogna ricordarsi di rimuoverlo)
Se c’è una KW per cui si vuole ottimizzare la pagina, integrarla in modo naturale nel breve testo dell’alt text.
---
### **Gerarchie dei titoli**
Sappiamo che per la SEO e l'accessibilità è molto importante la gerarchia dei titoli (headings).
**Struttura corretta dei titoli:**
- H1 → Titolo principale della pagina (**uno solo**)
- H2 → Sezioni principali
- H3 → Sotto-sezioni
- H4–H6 → Approfondimenti
- Sulle CTA non mettiamo gli Headings
👉 Seguire sempre un ordine gerarchico (no salti da H2 a H4)
**Best practice SEO:**
- Inserire keyword principali in H1 e H2
- Mantenere titoli chiari, descrittivi e naturali
- Evitare duplicazioni di H1 nella stessa pagina
👉 NON USARE tag heading per styling invece che per struttura
Lo strumento di accessibilità di POWER, visibile nella preview di pagina, ci aiuta a identificare dove c'è un problema di gerarchia.
Per risolvere questi problemi, occorre intervenire con un po' di codice.
- aggiungere \\, o \\, e così via, se si vuole aggiungere un titolo. Questo va fatto quando il titolo ha dei contenuti particolarmente rilevanti per la SEO
- aggiungere \\ oppure aggiungere lo stile direttamente del \\ quando il contenuto non è così rilevante da avere keyword.
Di seguito, una serie di stili usati frequentemente.
#### **Rendi il testo simile allo stile di un H3**
style="font-family: var(--ff-h3);font-size: var(--fs-h3);font-weight: var(--fw-h3);letter-spacing: var(--ls-h3);line-height: var(--lh-h3);"
#### **Rendi il testo simile allo stile di un H4**
style="font-family: var(--ff-h4);font-size: var(--fs-h4);font-weight: var(--fw-h4);letter-spacing: var(--ls-h4);line-height: var(--lh-h4);"
#### **Rendi il testo simile allo stile di un Intro Title**
style="font-size: var(--fs-base);font-weight: var(--fw-base)line-height: var(--lh-base);letter-spacing: var(--ls-base);"
---
### **Lazy Load**
****
1. Nelle impostazioni del tema, abilitare il **Lazy Load**
2. Nelle pagine, abilitare "is in a viewport" nel primo (o nei primi) elementi di pagina. Questa spunta si trova all'interno del modulo, tutto in fondo (dopo Custom Class).
---
### **Aria label**
L’aria label è la descrizione per gli elementi senza testo → aiutano a chiarire il significato di elementi non testuali (icone, bottoni, link)
**Best practice:**
- Usare aria-label per descrivere elementi senza testo (es. Icone che portano all’azione)
- Scrivere label chiare, concise e descrittive (es. Apri menù)
**Esempi corretti:**
- **Menù hamburger** → "Apri menu"
- **Icona carrello** → “vai al carrello”
- **Icona ricerca** → “Cerca nel sito"
**Esempi errati:**
- **Menù hamburger** → "Button"
- **Icona carrello** → “CTA”
---
### **Anchor text**
Testo cliccabile di un link che aiuta utenti e motori di ricerca a capire la destinazione della pagina
**Best practice:**
- Usare anchor descrittivi e naturali
- Integrare keyword senza forzature
- Variare gli anchor text (evitare ripetizioni)
- Inserire link in modo coerente con il contenuto
**Do:**
- Scopri le nostre strategie di content marketing
- Approfondisci la guida su SEO on-page
**Don't:**
- Anchor generici (“clicca qui”) senza contesto
- Keyword stuffing
- Anchor non coerenti con la pagina di destinazione
- Uso eccessivo della stessa keyword
---
### **Dati strutturati**
Sono informazioni aggiunte al codice HTML della pagina che aiutano i motori di ricerca a capire il contenuto (non solo a leggerlo). Sono basati su standard come Schema.org (= vocabolario condiviso per scrivere dati).
**Perché sono importanti per la SEO**
- Trasformano contenuti “leggibili” in contenuti “comprensibili” per Google
- Abilitano rich results (stelle, FAQ, breadcrumb, ecc.)
✔ + impression
✔ + traffico qualificato → sito mostrato in modo diverso rispetto al link blu
[**Le tipologie di dati strutturati**](https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=it)
****
✔ **Come aggiugerli**
Se un sito è su un CMS la cosa migliore è usare un plugin che inserisca un dato strutturato automaticamente sul contenuto, altrimenti, possiamo inserire il dato nell’HTML tramite una particolare sintassi.
**Come? →** Con AI + lo **[strumento di test dei rich results](https://search.google.com/test/rich-results)** + **[GSC](https://search.google.com/search-console/inspect?resource_id=sc-domain%3Afreudigersa.com&id=35Z7gSu35RqVMmmkYO3_FA)**
- [Admin Resources](https://www.hubspotlove.com/knowledge/admin-resources?hsLang=en)
- [Branding Team](https://www.hubspotlove.com/knowledge/branding-team?hsLang=en)
- [Performance Team](https://www.hubspotlove.com/knowledge/performance-team?hsLang=en)
- [Website from A to Z](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en#main-content)
- [HubDB](https://www.hubspotlove.com/knowledge/website-from-a-to-z?hsLang=en#hubdb)
[](https://3927991.hs-sites.com/home-page-demo?hsLang=en)
Help Center
Copyright © 2026, Beetroot