Skicka ett HTML-dokument med Content-Type: text/html; charset=utf-8, dess titel och beskrivning i dokumenthuvudet samt läsbart innehåll i brödtexten. Den här Mac-guiden skapar en syntetisk sida och kontrollerar att ett enda svar innehåller alla tre.

Uppgiften är att förbereda ett offentligt dokument som webbläsare kan läsa, med en lokal förhandsvisning innan samma struktur överförs till ett publiceringssystem. Exemplet innehåller endast påhittad text om pappersformer och kräver inga externa resurser.

Vad ingår i ett enda typat HTTP-svar?

”Typat” betyder att svaret anger sin mediatyp. Fältet Content-Type talar om för mottagaren vilket format representationen har och hur den är avsedd att behandlas. Här är formatet HTML. Det ger inget programschema med fält för fält. RFC 9110, avsnitt 8.3

Ett HTTP/1.1-svar har en statusrad, rubrikfält, en tom rad och en valfri meddelandekropp. Därför kan du skicka transportmetadata i rubrikerna och hela dokumentet i meddelandekroppen utan att skapa en separat metadatabegäran. RFC 9112, avsnitt 2.1

För den här publiceringsuppgiften använder du följande placeringsguide. Den skiljer information som beskriver HTTP-representationen från information som beskriver sidan.

Information Plats Exempel
Representationsformat och teckenkodning HTTP-rubrik Content-Type: text/html; charset=utf-8
Dokumenttitel HTML-huvud <title>Paper Shapes: Circle and Square</title>
Sammanfattning av sidan HTML-huvud <meta name="description" content="A short guide to arranging paper circles and squares.">
Innehåll för läsaren HTML-brödtext Rubrik, inledning och instruktioner för arrangemang

WHATWG definierar tit elementet som dokumentets titel eller namn och beskrivningsvärdet i metadata som en beskrivning av sidan. Använd en titel och högst en beskrivningsdeklaration. Eftersom de placeras i HTML-dokumentet följer innehållet och den beskrivande metadatan med tillsammans. HTML-standarden: Dokumentmetadata

Hur skapar du en fungerande förhandsvisning på en Mac?

Öppna Terminal och kontrollera vilka kommandon som finns tillgängliga:

python3 --version
curl --version

Programmet nedan kräver Python 3.7 eller senare och använder bara standardbiblioteket. Om python3 inte är tillgängligt följer du de officiella installationsanvisningarna för macOS och öppnar sedan Terminal igen. Pythons dokumentation beskriver både installationsprogrammet och hur du kör python3 från en terminal. Använda Python på macOS

Klistra in hela blocket nedan i Terminal, inklusive det inledande kommandot och den avslutande raden PY. Då körs programmet direkt; ingen fil skapas eller skrivs över. Låt terminalfönstret vara öppet medan du kontrollerar sidan.

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

Hanteraren använder Pythons dokumenterade svarsfunktioner: send_response() inleder svaret, send_header() lägger till fält och end_headers() avslutar rubrikdelen innan meddelandekroppens byte skrivs. Pythons dokumentation om HTTP-servern

Exemplet definierar avsiktligt TITLE och SUMMARY en gång. Dessa värden används både för metadata och synlig text, vilket gör det enklare att revidera det här lilla dokumentet på ett konsekvent sätt. För en längre sida kan beskrivningen skilja sig från inledningsstycket och ändå sammanfatta samma ämne korrekt.

Sidan kodas innan längden beräknas. HTTP definierar Content-Length i oktetter, det vill säga byte; om du räknade tecken skulle resultatet bli fel för exemplet med tankstreck. RFC 9110, avsnitt 8.6

Hur kontrollerar du att innehållet och metadatan kom fram tillsammans?

Öppna ett andra Terminal-fönster och kör det här kommandot. Det gör en vanlig dokumentbegäran och visar både svarsrubriker och innehåll:

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

Flaggan -i inkluderar svarsrubrikerna i samma utdata som meddelandekroppen. Tidsgränsen begränsar överföringen till tio sekunder. Dessa alternativ beskrivs i curl-manualen för kommandoraden.

Kontrollera utdata i följande ordning:

  1. Statusraden ska visa 200 OK.
  2. Ett enda Content-Type-fält ska ange text/html; charset=utf-8.
  3. Efter den tomma raden i rubrikdelen ska HTML-koden innehålla titeln och beskrivningen.
  4. Samma meddelandekropp ska innehålla instruktionerna om pappersformer.
  5. Tankstrecket ska visas korrekt i den avkodade texten.

Ange sedan http://127.0.0.1:8000/paper-shapes i Safaris adressfält. Den synliga sidan ska visa sin rubrik, sammanfattning och sina instruktioner. Beskrivningsdeklarationen är metadata; dess förekomst kontrolleras i den returnerade koden och inte genom att dra slutsatser av sidans utseende.

Du kan också kontrollera sökvägen som bara returnerar rubriker:

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

Detta skickar HEAD, så du kan inte kontrollera att meddelandekroppen innehåller titeln eller beskrivningen. Ett svar av typen HEAD utelämnar innehållet men beskriver motsvarande representation; använd den tidigare kontrollen med GET för att granska själva dokumentet. RFC 9110, avsnitt 8.2

Om förhandsvisningen inte fungerar väljer du nästa åtgärd utifrån symtomet:

Symtom Nästa åtgärd
Vid start visas ett meddelande om att adressen redan används Ändra 8000 till 8001 i programmet, kör det igen och använd 8001 i varje kommando för förhandsvisningen.
Begäran misslyckas med ett anslutningsfel Kontrollera att den första terminalen fortfarande visar den körande förhandsvisningen och att portarna stämmer överens.
Svaret är 404 Använd exakt /paper-shapes; det här exemplet godtar inte ett avslutande snedstreck eller en frågesträng.
Webbläsaren visar fortfarande en tidigare version Stoppa programmet med Control-C, kör det redigerade blocket igen och läs in sidan på nytt.
Rubriken ser rätt ut men metadata saknas Granska utdata från GET och bekräfta att deklarationerna finns i dokumenthuvudet.

Vad kan Google Sök hämta från det här svaret?

En beskrivande titel, en korrekt beskrivning och användbar synlig text ger Google dokumenterade underlag för att presentera en sida. Google räknar upp tit elementet, den huvudsakliga visuella titeln, rubrikelement och andra källor bland de underlag som används för att automatiskt skapa titellänkar. Se till att dessa signaler stämmer överens med dokumentets ämne. Påverka titellänkarna i sökresultaten

Google skapar i första hand utdrag från sidinnehållet och använder ibland metabeskrivningen när den beskriver sidan mer korrekt. Olika sökningar kan ge olika utdrag. Se beskrivningen som en användbar sammanfattning snarare än en fast bildtext i sökresultaten. Styra utdragen i sökresultaten

I det syntetiska exemplet utlovar beskrivningen en kort guide för hur formerna placeras, och brödtexten innehåller den guiden. När du byter ut exempeltexten ska du uttryckligen kontrollera sambandet: den som bara läser beskrivningen ska få en korrekt bild av sidan.

Att lägga till egna metadatanamn innebär inte att de stöds. Google uppger att de ignorerar metataggar som inte stöds. Använd Googles dokumenterade fält för metadata som riktar sig till sökningar; ett fält som du hittar på för din egen applikation behöver en separat definierad mottagare. Metataggar och attribut som Google stöder

Hur blir förhandsvisningen ett mönster för offentlig publicering?

Den lokala adressen i den här genomgången är en förhandsvisning på datorn, inte en publicerad sida. Python dokumenterar också att http.server inte rekommenderas för produktion. Överför HTML-strukturen och svarskraven till ditt publiceringssystem i stället för att använda demonstrationen som offentlig värdtjänst. Pythons dokumentation om HTTP-servern

Om du använder ett innehållshanteringssystem letar du efter dess dokumenterade kontroller för sidtitel och metabeskrivning. Google påpekar att ett CMS kan erbjuda sökinställningar i stället för direkt redigering av HTML. Koppla dessa kontroller till fälten som visas här och granska sedan det resulterande dokumentsvaret. Googles vägledning om att lägga till metabeskrivningar

HTTP stöder multipart-representationer, men det är ett annat paketeringsval. För uppgiften att skapa ett webbläsarläsbart dokument räcker HTML-strukturen som stöds redan för att rymma innehåll och dokumentmetadata i en och samma representation. Multipart skulle medföra ett krav på bearbetning hos mottagaren som den här genomgången inte behöver. RFC 9110, avsnitt 8.3.3

Det är enkelt att kontrollera att du är klar: en lyckad dokumentbegäran returnerar rätt mediatyp, en komplett HTML-meddelandekropp, en korrekt titel och beskrivning samt texten läsarna kom för att ta del av. Gör samma kontroll av det slutliga offentliga svaret som av den lokala förhandsvisningen, så att publiceringssystemets utdata stämmer överens med dokumentet du förberedde.

Källor