Crea pagine SEO-friendly.

Learn DXPR BuilderBuild pagesVolg een tutorial

Qui crei una pagina di servizio come i motori di ricerca la leggono meglio: il titolo della pagina come unico Heading 1, intestazioni in ordine sotto, testo alt sull’immagine e un pulsante che dice dove porta. Usala come checklist per ogni pagina che pubblichi. Titoli di pagina, descrizioni e URL vivono fuori dal builder; l’ultima sezione mostra dove.

Il video crea la pagina "Apply for a resident parking permit" di un comune.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene una foto adatta al servizio.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page), digita un Title chiaro come "Apply for a resident parking permit" e fai clic su Save. Il tema stampa questo titolo come Heading 1 della pagina.

Passaggio 1: inizia il contenuto da Heading 2

Usa le intestazioni in ordine così la pagina si legge come uno schema. Il tema stampa il titolo della pagina come Heading 1 della pagina, quindi il contenuto del builder parte da Heading 2 per le sezioni principali, con Heading 3 per le sottosezioni. Usa Heading 4-6 con parsimonia.

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Fai clic su + sulla sezione e scegli Text dalla scheda Content.
  3. Digita "Apply in five minutes" e scegli Heading 2 dal menu delle intestazioni.
  4. Su una nuova riga, aggiungi il riepilogo come testo normale: "Residents of zones A to D can apply online. Permits are issued within five working days." Fai clic su Save.

Lascia Heading 1 al titolo della pagina. Per rendere invece un’intestazione del builder l’Heading 1 della pagina, nascondi prima il titolo del tema in questa pagina. Su DXPR CMS, apri il form di modifica della pagina, apri DXPR Theme Settings, seleziona Page Title in DXPR Hide Regions e fai clic su Save. DXPR Theme nasconde già il titolo sulla prima pagina. Non scegliere mai un livello di intestazione per la sua dimensione: cambia invece la dimensione con Font size nel pannello Style dell’elemento.

Passaggio 2: una sezione per i dettagli

  1. Passa sopra alla sezione e fai clic su Add Section Below.
  2. Fai clic su + sulla nuova sezione e scegli Row; arriva con due colonne uguali. Fai clic sull’icona griglia (Column layout) sulla barra dei controlli della riga, scegli il preset 2/3 + 1/3 e fai clic su Save.

I nuovi elementi arrivano in cima a una colonna. Quindi i prossimi tre passaggi riempiono la colonna larga dal basso in alto: il pulsante, la sottosezione, poi l’intestazione di sezione.

Passaggio 3: scrivi testi di link descrittivi

Il testo del link dice ai motori di ricerca di cosa tratta la destinazione. Evita "click here" e "read more".

  1. Fai clic su + nella colonna larga e scegli Button.
  2. Imposta Title su "Start your parking permit application", Link su /parking/apply e Type su Primary, poi fai clic su Save.

Passaggio 4: una sottosezione Heading 3

  1. Fai di nuovo clic su + nella colonna larga e scegli Text; arriva sopra il pulsante.
  2. Digita "What you need" e scegli Heading 3.
  3. Digita i documenti, uno per riga: "Proof of address", "Vehicle registration document". Fai clic su Save.

Passaggio 5: un’intestazione di sezione Heading 2

  1. Fai ancora clic su + nella colonna larga e scegli Text.
  2. Digita "Who can apply" e scegli Heading 2.
  3. Aggiungi in una riga la regola su chi può fare domanda, poi fai clic su Save.

Passaggio 6: aggiungi il testo alt all’immagine

Ogni immagine ha bisogno di un attributo alt che ne descriva il contenuto.

  1. Fai clic su + nella colonna stretta e scegli Image.
  2. Fai clic su Select Image, cerca nella libreria multimediale con Apply filters, seleziona la foto e fai clic su Insert selected.
  3. Apri il pannello SEO e compila l’Alt attribute: "Laptops, phones and cups of tea on a shared wooden desk". Fai clic su Save.

Scrivi il testo alt per chi non può vedere l’immagine. Lascialo vuoto solo per le immagini puramente decorative. Usa Title attribute solo quando un tooltip aggiunge qualcosa; non sostituisce il testo alt.

Passaggio 7: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio), scegli Preview e verifica che le intestazioni si leggano in ordine.

Per approfondire

Non mostrato nel video:

  • Dimensioni delle immagini: ridimensiona le immagini alla larghezza a cui si mostrano prima di caricarle; 1200 pixel coprono una colonna intera. Tieni Image width al 100%, lascia vuoto Image height e tieni ogni file sotto 300 KB, perché la velocità influisce sul ranking.
  • Link da ignorare: per una pagina di login o simile, aggiungi un elemento Link, apri il suo pannello SEO e attiva Tell search engines not to follow.
  • Link di testo: dentro un elemento Text, seleziona le parole e usa il pulsante link nella barra degli strumenti. Tieni significative le parole collegate: "the permit zone map", non "here".
  • Ancore: apri More > Settings su una sezione, imposta HTML ID su un nome breve minuscolo come who-can-apply, e collegalo con #who-can-apply.

Mantieni l’HTML semantico

Gli elementi Text, Button, Link e Image producono tag standard da <h1> a <h6>, <p>, <ul>, <a> e <img>. Usa quegli elementi per i contenuti. Tieni l’elemento HTML per codice embed che nessun altro elemento può produrre.

Metadati e URL

Titoli di pagina, meta description e URL vivono in Drupal, fuori dal builder:

  • Modulo Metatag: imposta title tag, descrizioni e tag Open Graph in Configuration > Search and metadata > Metatag (/admin/config/search/metatag), o per pagina nel form di modifica del nodo.
  • Modulo Pathauto: crea URL puliti dai titoli di pagina in Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

Cosa vedi

L’anteprima mostra il titolo della pagina come Heading 1 della pagina, poi "Apply in five minutes" come Heading 2 con il suo riepilogo sotto. Nella colonna larga viene prima "Who can apply", poi "What you need" con i suoi due documenti e il pulsante Start your parking permit application. La foto sta nella colonna stretta e il suo testo alt resta invisibile.

Se non vedi la pagina come mostrata

  • Le intestazioni si leggono nell’ordine sbagliato. I nuovi elementi arrivano in cima alla loro colonna, quindi l’ultimo aggiunto viene prima. Trascina ogni elemento Text al suo posto dalla maniglia di trascinamento sulla sua barra dei controlli.
  • Un’intestazione sembra troppo grande o troppo piccola. Il tuo tema fissa una dimensione per livello di intestazione. Tieni il livello adatto allo schema e cambia Font size nel pannello Style dell’elemento.
  • Non trovi il testo alt nella pagina. Il testo alt è per screen reader e motori di ricerca, quindi la pagina non lo mostra mai. Apri le impostazioni dell’immagine e controlla invece il pannello SEO.
  • I risultati di ricerca mostrano il titolo di pagina sbagliato. Il builder non imposta il title tag. Impostalo con il modulo Metatag, come descritto in Metadati e URL.

E adesso?