10.1 Markup semantico
SEO (ottimizzazione per i motori di ricerca) gioca un ruolo importante nello sviluppo web, perché aiuta a migliorare la visibilità delle pagine web nei risultati dei motori di ricerca. Il moderno markup HTML ha un impatto significativo sulla SEO, aiutando i motori di ricerca a comprendere e indicizzare meglio il contenuto. Esaminiamo gli aspetti principali dell'influenza della SEO sul markup HTML moderno.
I tag semantici HTML5 aiutano i motori di ricerca a comprendere la struttura e il contenuto delle pagine web. L'uso dei tag corretti migliora l'accessibilità e rende il contenuto più comprensibile per i motori di ricerca.
Esempi di tag semantici:
<header>: intestazione della pagina o della sezione<nav>: link di navigazione<main>: contenuto principale della pagina<section>: sezione tematicamente correlata<article>: blocco di contenuto indipendente<aside>: informazioni aggiuntive o barra laterale<footer>: piè di pagina della pagina o della sezione
Esempio d'uso:
<body>
<header>
<h1>Titolo del sito</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi siamo</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Articolo 1</h2>
<p>Testo dell'articolo...</p>
</article>
<section>
<h2>Sezione</h2>
<p>Testo della sezione...</p>
</section>
</main>
<aside>
<h2>Barra laterale</h2>
<p>Informazioni aggiuntive...</p>
</aside>
<footer>
<p>© 2024 Il mio sito. Tutti i diritti riservati.</p>
</footer>
</body>
10.2 Microdata
La microdata (structured data) è utilizzata per fornire ai motori di ricerca informazioni aggiuntive sul contenuto della pagina. Aiuta i motori di ricerca a comprendere meglio il contenuto e migliora la visibilità della pagina nei risultati di ricerca.
Esempi di schemi (Schema.org):
- Article: per articoli e notizie
- BreadcrumbList: per i breadcrumbs
- Product: per la descrizione dei prodotti
- Event: per la descrizione degli eventi
Esempio d'uso della microdata:
<body>
<article>
<h1>Titolo dell'articolo</h1>
<p>Autore: Nome dell'autore</p>
<p>Data di pubblicazione: 1 gennaio 2024</p>
<img src="https://example.com/image.jpg" alt="Esempio di immagine">
<p>Testo dell'articolo...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Titolo dell'articolo",
"author": "Nome dell'autore",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Ottimizzazione di titoli e meta tag
I titoli e i meta tag svolgono un ruolo chiave nella SEO, poiché forniscono informazioni sui contenuti della pagina sia ai motori di ricerca che agli utenti.
Meta tag:
<title>: il titolo della pagina visualizzato nei risultati di ricerca<meta name="description">: descrizione della pagina utilizzata negli snippet dei risultati di ricerca<meta name="keywords">: parole chiave (non hanno molta importanza per i motori di ricerca moderni)
Esempio d'uso dei meta tag:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di titolo della pagina</title>
<meta name="description" content="Questo è un esempio di descrizione della pagina per SEO.">
<meta name="keywords" content="esempio, SEO, HTML">
</head>
<body>
<h1>Titolo della pagina</h1>
<p>Contenuto della pagina...</p>
</body>
</html>
10.4 Ottimizzazione delle immagini
L'ottimizzazione delle immagini include l'uso degli attributi alt e title, nonché garantire un rapido tempo di caricamento attraverso l'uso della compressione e dei formati di immagine moderni (ad es. WebP).
Esempio d'uso:
<body>
<h1>Esempio di ottimizzazione delle immagini</h1>
<img src="example.jpg" alt="Descrizione dell'immagine" title="Titolo dell'immagine" loading="lazy">
</body>
10.5 Breadcrumbs
I breadcrumbs sono elementi di navigazione che mostrano il percorso dell'utente dalla pagina principale alla pagina corrente. Aiutano gli utenti a orientarsi facilmente sul sito, fornendo link ai livelli di navigazione precedenti. Questo elemento è una parte importante dell'interfaccia utente, soprattutto per i grandi siti con una gerarchia di pagine profonda.
Aspetti principali dei breadcrumbs
I breadcrumbs sono una sequenza di link che di solito appare nella parte superiore della pagina sotto l'header o il menu. Ogni link nella sequenza porta a una delle pagine attraverso cui l'utente è passato per arrivare alla pagina corrente.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Home</a></li>
<li class="breadcrumb-item"><a href="/category">Categoria</a></li>
<li class="breadcrumb-item active" aria-current="page">Pagina corrente</li>
</ol>
</nav>
Tipi di breadcrumbs:
- Gerarchici: mostrano la gerarchia del sito, a partire dalla home page.
- Esempio: Home > Categoria > Sottocategoria > Pagina corrente
- Cronologici: mostrano la sequenza delle azioni dell'utente, particolarmente utili nel processo di navigazione o acquisti in più fasi.
- Esempio: Home > Categoria > Prodotto > Carrello > Checkout
- Attributivi: usati per mostrare gli attributi o i tag della pagina corrente, particolarmente utili per siti con molte categorie e filtri.
- Esempio: Home > Elettronica > Telefoni cellulari > Smartphone > Apple
Vantaggi dei breadcrumbs:
- Miglioramento della navigazione: permettono agli utenti di tornare rapidamente alle pagine precedenti.
- Vantaggi SEO: aiutano i motori di ricerca a comprendere la struttura del sito e migliorare la sua indicizzabilità.
- Facilità d'uso: rendono il sito più intuitivo e facile da usare.
- Riduzione del tasso di rimbalzo: semplificano la navigazione, che può ridurre il tasso di rimbalzo, poiché gli utenti possono facilmente tornare alle pagine precedenti invece di lasciare il sito.
Vantaggi per la SEO
I breadcrumbs svolgono un ruolo importante nella SEO, perché aiutano i motori di ricerca a comprendere meglio la struttura del sito e migliorano la navigazione per gli utenti. Un corretto utilizzo dei breadcrumbs può influire positivamente sul posizionamento del sito nei risultati di ricerca.
GO TO FULL VERSION