Servire un documento HTML con Content-Type: text/html; charset=utf-8, il suo titolo e la descrizione nell'head del documento, e contenuto leggibile nel body. Questa guida per Mac crea una pagina sintetica e verifica che un'unica risposta trasporti tutti e tre gli elementi.

L'obiettivo è preparare un documento pubblico leggibile dal browser, usando un'anteprima locale prima di trasferire la stessa struttura a un sistema di pubblicazione. L'esempio contiene solo testo inventato sulle forme della carta e non richiede risorse esterne.

Cosa appartiene a un'unica risposta HTTP tipizzata?

"Tipizzata" significa che la risposta dichiara il suo media type. Il campo Content-Type indica al destinatario il formato della rappresentazione e la sua elaborazione prevista. Qui il formato è HTML. Non fornisce uno schema applicativo campo per campo. RFC 9110, sezione 8.3

Una risposta HTTP/1.1 ha una riga di stato, campi di intestazione, una riga vuota e un body opzionale. Di conseguenza, puoi inviare metadati di trasporto nelle intestazioni e il documento completo nel body senza creare una richiesta di metadati separata. RFC 9112, sezione 2.1

Per questa attività di pubblicazione, usa la seguente guida di posizionamento. Separa le informazioni che descrivono la rappresentazione HTTP da quelle che descrivono la pagina.

Informazione Posizione Esempio
Formato e codifica della rappresentazione Intestazione HTTP Content-Type: text/html; charset=utf-8
Titolo del documento HTML head <title>Forme di carta: Cerchio e Quadrato</title>
Riassunto della pagina HTML head <meta name="description" content="A short guide to arranging paper circles and squares.">
Contenuto rivolto al lettore HTML body Titolo, introduzione e istruzioni di disposizione

WHATWG definisce l'elemento title come il titolo o nome del documento e il valore dei metadati description come una descrizione della pagina. Usa un solo titolo e al massimo una dichiarazione description. La loro posizione all'interno del documento HTML significa che contenuto e metadati descrittivi viaggiano insieme. HTML Standard: Document metadata

Come creare un'anteprima funzionante su un Mac?

Apri Terminale e verifica i comandi disponibili:

python3 --version
curl --version

Il programma qui sotto richiede Python 3.7 o successivo e usa solo la sua libreria standard. Se python3 non è disponibile, segui le istruzioni di installazione ufficiali di macOS e poi riapri Terminale. La documentazione di Python descrive sia l'installer che l'invocazione di python3 da terminale. Using Python on macOS

Incolla il blocco completo qui sotto in Terminale, inclusa la riga di comando iniziale e la riga finale PY. Questo esegue il programma direttamente; non crea né sovrascrive un file. Lascia questa finestra del terminale in esecuzione mentre controlli la pagina.

python3 - <<'PY'
from html import escape
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer

TITLE = "Paper Shapes: Circle and Square"
SUMMARY = "A short guide to arranging paper circles and squares."
PAGE = f"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{escape(TITLE)}</title>
<meta name="description" content="{escape(SUMMARY, quote=True)}">
</head>
<body>
<main>
<h1>{escape(TITLE)}</h1>
<p>{escape(SUMMARY)}</p>
<h2>Try a simple arrangement</h2>
<p>Place one paper circle beside one paper square.</p>
<p>Switch their positions — then compare the two arrangements.</p>
</main>
</body>
</html>
""".encode("utf-8")

class Handler(BaseHTTPRequestHandler):
    protocol_version = "HTTP/1.1"

    def respond(self, include_body):
        if self.path != "/paper-shapes":
            self.send_error(404, "Page not found")
            return
        self.send_response(200)
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(PAGE)))
        self.end_headers()
        if include_body:
            self.wfile.write(PAGE)

    def do_GET(self):
        self.respond(True)

    def do_HEAD(self):
        self.respond(False)

if __name__ == "__main__":
    with ThreadingHTTPServer(("127.0.0.1", 8000), Handler) as server:
        print("Preview: http://127.0.0.1:8000/paper-shapes", flush=True)
        try:
            server.serve_forever()
        except KeyboardInterrupt:
            pass
PY

L'handler usa i metodi di risposta documentati di Python: send_response() avvia la risposta, send_header() aggiunge i campi, e end_headers() completa la sezione delle intestazioni prima che i byte del body vengano scritti. Python HTTP server documentation

L'esempio definisce deliberatamente TITLE e SUMMARY una sola volta. Questi valori forniscono sia i metadati che il testo visibile, rendendo questo piccolo documento più facile da revisionare in modo coerente. Per una pagina più lunga, la descrizione può differire dal paragrafo di apertura pur riassumendo accuratamente lo stesso soggetto.

La pagina viene codificata prima di calcolarne la lunghezza. HTTP definisce Content-Length in ottetti, ovvero byte; contare i caratteri darebbe il risultato sbagliato per il trattino lungo di questo esempio. RFC 9110, sezione 8.6

Come verificare che contenuto e metadati siano arrivati insieme?

Apri una seconda finestra Terminale ed esegui questo comando. Effettua una normale richiesta di documento e mostra sia le intestazioni di risposta che il contenuto:

curl -i --max-time 10 http://127.0.0.1:8000/paper-shapes

L'opzione -i include le intestazioni di risposta nello stesso flusso di output del body. Il limite di tempo vincola il trasferimento a dieci secondi. Queste opzioni sono documentate nel manuale a riga di comando di curl.

Controlla l'output in ordine:

  1. La riga di stato dovrebbe riportare 200 OK.
  2. Un unico campo Content-Type dovrebbe dichiarare text/html; charset=utf-8.
  3. Dopo la riga vuota della sezione intestazioni, l'HTML dovrebbe contenere il titolo e la descrizione.
  4. Lo stesso body dovrebbe contenere le istruzioni sulle forme di carta.
  5. Il trattino lungo dovrebbe apparire correttamente nel testo decodificato.

Poi, inserisci http://127.0.0.1:8000/paper-shapes nella barra degli indirizzi di Safari. La pagina visibile dovrebbe mostrare il suo titolo, il riepilogo e le istruzioni. La dichiarazione description è metadato; la sua presenza viene verificata nel markup restituito piuttosto che dedotta dall'aspetto della pagina.

Puoi anche controllare il percorso solo-header:

curl -I --max-time 10 http://127.0.0.1:8000/paper-shapes

Questo invia HEAD, quindi non può verificare che il body contenga il titolo o la descrizione. Una risposta HEAD omette il contenuto mentre descrive la rappresentazione corrispondente; usa il precedente controllo GET per ispezionare il documento effettivo. RFC 9110, sezione 8.2

Se l'anteprima non funziona, usa il sintomo per scegliere l'azione successiva:

Sintomo Azione successiva
L'avvio segnala che l'indirizzo è già in uso Cambia 8000 in 8001 nel programma, rieseguilo, e usa 8001 in ogni comando di anteprima.
La richiesta riporta un fallimento di connessione Verifica che il primo terminale mostri ancora l'anteprima in esecuzione e che le porte corrispondano.
La risposta è 404 Usa esattamente /paper-shapes; questo esempio non accetta slash finale né stringa di query.
Il browser mostra ancora una versione precedente Ferma il programma con Control-C, riesegui il blocco modificato, e ricarica.
Il titolo sembra corretto ma mancano i metadati Ispeziona l'output GET e conferma che le dichiarazioni si trovano all'interno dell'head del documento.

Cosa può usare Google Search da questa risposta?

Un titolo descrittivo, una descrizione accurata e un testo visibile utile forniscono a Google input documentati per presentare una pagina. Google elenca l'elemento title, il titolo visivo principale, gli elementi heading e altre fonti tra i suoi input per generare automaticamente i link dei titoli. Mantieni quei segnali coerenti con l'argomento del documento. Influencing your title links in search results

Google genera principalmente gli snippet dal contenuto della pagina e talvolta usa la meta description quando descrive la pagina più accuratamente. Ricerche diverse possono produrre snippet diversi. Tratta la descrizione come un utile riepilogo piuttosto che come una didascalia fissa del risultato di ricerca. Control your snippets in search results

Per l'esempio sintetico, la descrizione promette una breve guida alla disposizione, e il body fornisce quella guida. Quando sostituisci il testo di esempio, verifica esplicitamente questa relazione: chi legge solo la descrizione dovrebbe farsi un'aspettativa accurata della pagina.

L'aggiunta di nomi di metadati personalizzati non ne stabilisce il supporto. Google afferma di ignorare i meta tag che non supporta. Usa i suoi campi documentati per i metadati rivolti alla ricerca; un campo inventato per la tua applicazione ha bisogno di un consumatore definito separatamente. Meta tags and attributes that Google supports

Come l'anteprima diventa un pattern di pubblicazione pubblico?

L'indirizzo locale in questa guida è un'anteprima desktop, non una pagina pubblicata. Python documenta anche che http.server non è raccomandato per la produzione. Trasferisci la struttura HTML e i requisiti di risposta al tuo sistema di pubblicazione invece di usare questa dimostrazione come servizio di hosting pubblico. Python HTTP server documentation

Se usi un content management system, cerca i suoi controlli documentati per page-title e meta-description. Google nota che un CMS può fornire impostazioni di ricerca invece della modifica diretta dell'HTML. Mappa quei controlli ai campi dimostrati qui, poi ispeziona la risposta del documento risultante. Google's guidance on adding meta descriptions

HTTP supporta rappresentazioni multipart, ma è una scelta di impacchettamento diversa. Per questo compito di documento leggibile dal browser, la struttura HTML supportata già accoglie contenuto e metadati del documento in un'unica rappresentazione. Scegliere multipart introdurrebbe un requisito di elaborazione del consumatore che questa guida non richiede. RFC 9110, sezione 8.3.3

Il tuo controllo di completamento è concreto: una richiesta di documento riuscita restituisce il media type corretto, un body HTML completo, un titolo e una descrizione accurati, e il testo che i lettori sono venuti a usare. Applica quel controllo anche alla risposta pubblica finale oltre all'anteprima locale, così l'output del sistema di pubblicazione corrisponde al documento che hai preparato.

Fonti