Introducció

En aquest tema, explorarem dos conceptes importants per a l'optimització i l'enriquiment del contingut web: les microdades i les metadades. Aquests elements ajuden els motors de cerca a comprendre millor el contingut de les pàgines web, millorant així la seva visibilitat i la seva classificació en els resultats de cerca.

Microdades

Què són les microdades?

Les microdades són un conjunt d'etiquetes HTML que permeten afegir informació estructurada al contingut de la pàgina web. Aquesta informació ajuda els motors de cerca a entendre millor el context i el significat del contingut.

Exemple de microdades

A continuació, es mostra un exemple de com utilitzar les microdades per descriure un producte en una pàgina web:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Microdades</title>
</head>
<body>
    <div itemscope itemtype="http://schema.org/Product">
        <h1 itemprop="name">Càmera Digital</h1>
        <p itemprop="description">Una càmera digital d'alta qualitat amb 20MP i zoom òptic de 10x.</p>
        <p>Preu: <span itemprop="price">299.99€</span></p>
        <p>Disponibilitat: <link itemprop="availability" href="http://schema.org/InStock">En estoc</link></p>
    </div>
</body>
</html>

Explicació del codi

itemscope: Defineix un nou element amb microdades.
itemtype: Especifica el tipus d'element (en aquest cas, un producte) utilitzant una URL de vocabulari (schema.org).
itemprop: Defineix una propietat de l'element (nom, descripció, preu, disponibilitat).

Exercici pràctic

Exercici: Crea una pàgina HTML que utilitzi microdades per descriure un llibre. Inclou el títol, l'autor, la data de publicació i el preu.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Microdades - Llibre</title>
</head>
<body>
    <div itemscope itemtype="http://schema.org/Book">
        <h1 itemprop="name">El Nom del Vent</h1>
        <p>Autor: <span itemprop="author">Patrick Rothfuss</span></p>
        <p>Data de publicació: <span itemprop="datePublished">2007</span></p>
        <p>Preu: <span itemprop="price">19.99€</span></p>
    </div>
</body>
</html>

Metadades

Què són les metadades?

Les metadades són informació que es col·loca dins de l'etiqueta <head> d'un document HTML per proporcionar informació sobre la pàgina web. Aquestes dades no són visibles per als usuaris, però són utilitzades pels motors de cerca i altres serveis web.

Tipus comuns de metadades

Meta Descripció: Proporciona una breu descripció del contingut de la pàgina.
Meta Paraules Clau: Llista de paraules clau rellevants per a la pàgina (menys utilitzada actualment).
Meta Robots: Indica als motors de cerca com indexar la pàgina.

Exemple de metadades

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Una pàgina web sobre càmeres digitals d'alta qualitat.">
    <meta name="keywords" content="càmeres digitals, fotografia, electrònica">
    <meta name="robots" content="index, follow">
    <title>Exemple de Metadades</title>
</head>
<body>
    <h1>Benvingut a la nostra botiga de càmeres digitals</h1>
</body>
</html>

Explicació del codi

<meta charset="UTF-8">: Defineix la codificació de caràcters del document.
<meta name="description" content="...">: Proporciona una descripció del contingut de la pàgina.
<meta name="keywords" content="...">: Llista de paraules clau rellevants.
<meta name="robots" content="...">: Indica als motors de cerca com indexar la pàgina (indexar i seguir els enllaços).

Exercici pràctic

Exercici: Crea una pàgina HTML amb metadades que descriguin un bloc sobre receptes de cuina. Inclou una descripció, paraules clau i instruccions per als robots.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Un bloc dedicat a les millors receptes de cuina casolana.">
    <meta name="keywords" content="receptes, cuina, menjar, casolana">
    <meta name="robots" content="index, follow">
    <title>Bloc de Receptes de Cuina</title>
</head>
<body>
    <h1>Benvingut al nostre bloc de receptes de cuina</h1>
</body>
</html>

Conclusió

Les microdades i les metadades són eines poderoses per millorar la visibilitat i la comprensió del contingut web per part dels motors de cerca. Les microdades proporcionen informació estructurada sobre el contingut, mentre que les metadades ofereixen informació sobre la pàgina en si. Ambdós elements són essencials per a l'optimització de motors de cerca (SEO) i per oferir una millor experiència als usuaris.

En el proper mòdul, explorarem com integrar HTML amb CSS per estilitzar i millorar l'aparença de les nostres pàgines web.

Microdades i metadades

Introducció

Microdades

Què són les microdades?

Exemple de microdades

Explicació del codi

Exercici pràctic

Metadades

Què són les metadades?

Tipus comuns de metadades

Exemple de metadades

Explicació del codi

Exercici pràctic

Conclusió

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet