Una corretta struttura HTML è fondamentale per avere più possibilità di essere indicizzati dai motori di ricerca.
In questo articolo scopriremo come creare un’ottima struttura per una corretta pagina HTML.
Per prima cosa utilizziamo il <!doctype html> che serve a dire al browser, che la pagina è scritta in HTML 5.
Dopodichè apriamo il tag <html> che serve a contenere gli altri tag html.
All’interno inseriremo i tag <head> e il tag <body>.
Ci concentreremo sui tag contenuti all’interno di <head> poichè il tag <body> varia radicalmente a seconda della pagina web che si vuole creare.
Per creare un’ottima struttura per una corretta pagina HTML è necessario inserire i giusti tag all’interno della sezione <head>.
Di seguito proponiamo un’ottima struttura HTML che può essere utilizzata come base per la tua pagina web:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titolo della pagina</title>
<meta name="description" content="Descrizione della pagina web.">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="icon" type="type="image/png" href="favicon.png">
</head>
<body>
....
</body>
</html>Abbiamo aggiunto i metatag che servono a dare importanti informazioni ai motori di ricerca oltre al tag <title>.
Il metatag <meta charset=”utf-8″> serve a definire il charset utilizzato nella pagina e di solito il più utilizzato è utf-8.
Il metatag <meta name=”viewport” content=”width=device-width, initial-scale=1″> invece è utilizzato per ottimizzare il layout da mobile della pagina web.
Il tag <titlte> invece contiene il titolo che compare nella scheda del browser (insieme alla favicon) e compare nei risultati dei motori di ricerca.
Il metatag <meta name=”description”> invece contiene la descrizione della pagina che viene mostrata dai motori di ricerca.
Il metatag <meta name=”robots” content=”index,follow”> serve a dire al motore di ricerca di “indicizzare” la pagina web e di fare “follow” (cioè seguire) le pagine presenti all’interno della pagina per andare ad indicizzare anche quelle.
Il tag <link rel=”stylesheet” type=”text/css” href=”layout.css”> serve per aggiungere un file css esterno. È sempre meglio separare i file css, in modo da avere una struttura della pagina web più organizzata.
Infine l’ultimo tag <link rel=”icon” type=”type=”image/png” href=”favicon.png”> serve a dire al browser qual è la favicon del nostro sito web. Solitamente vengono utilizzati file .ico oppure .png oppure entrambi.
Con questa semplice struttura abbiamo dato tutte le informazioni essenziali al browser, per ottimizzare al meglio la nostra pagina web.
