Serwuj jeden dokument HTML z Content-Type: text/html; charset=utf-8, tytułem i opisem w sekcji head oraz czytelną treścią w sekcji body. Ten przewodnik dla Maca tworzy przykładową stronę i sprawdza, czy jedna odpowiedź zawiera wszystkie trzy elementy.

Zadanie polega na przygotowaniu publicznego dokumentu czytelnego dla przeglądarki, z użyciem lokalnego podglądu przed przeniesieniem tej samej struktury do systemu publikacji. Przykład zawiera wyłącznie wymyślony tekst o kształtach z papieru i nie wymaga zewnętrznych zasobów.

Co powinno znaleźć się w pojedynczej odpowiedzi HTTP z określonym typem?

„Z określonym typem” oznacza, że odpowiedź deklaruje swój typ mediów. Pole Content-Type informuje odbiorcę o formacie reprezentacji i sposobie jej przetwarzania. W tym przypadku formatem jest HTML. Nie określa ono schematu aplikacji z podziałem na pola. RFC 9110, sekcja 8.3

Odpowiedź HTTP/1.1 zawiera wiersz statusu, pola nagłówka, pusty wiersz i opcjonalne ciało. Możesz więc przesłać metadane transportowe w nagłówkach, a cały dokument w ciele, bez tworzenia osobnego żądania o metadane. RFC 9112, sekcja 2.1

W tym zadaniu publikacyjnym skorzystaj z poniższej instrukcji określającej rozmieszczenie elementów. Rozdziela ona informacje opisujące reprezentację HTTP od informacji opisujących stronę.

Informacja Miejsce Przykład
Format i kodowanie reprezentacji Nagłówek HTTP Content-Type: text/html; charset=utf-8
Tytuł dokumentu Sekcja head HTML <title>Paper Shapes: Circle and Square</title>
Podsumowanie strony Sekcja head HTML <meta name="description" content="A short guide to arranging paper circles and squares.">
Treść dla czytelników Sekcja body HTML Nagłówek, wprowadzenie i instrukcje układania

WHATWG definiuje element title jako tytuł lub nazwę dokumentu, a wartość metadanych description jako opis strony. Użyj jednego tytułu i najwyżej jednej deklaracji description. Umieszczenie ich w dokumencie HTML sprawia, że treść i metadane opisowe są przesyłane razem. Standard HTML: metadane dokumentu

Jak przygotować działający podgląd na Macu?

Otwórz Terminal i sprawdź dostępne polecenia:

python3 --version
curl --version

Poniższy program wymaga Pythona w wersji 3.7 lub nowszej i korzysta wyłącznie z biblioteki standardowej. Jeśli python3 jest niedostępne, postępuj zgodnie z oficjalnymi instrukcjami instalacji dla systemu macOS, a następnie ponownie otwórz Terminal. Dokumentacja Pythona opisuje zarówno instalator, jak i uruchamianie python3 z terminala. Korzystanie z Pythona w systemie macOS

Wklej cały poniższy blok do Terminal, razem z początkowym poleceniem i końcowym wierszem PY. Spowoduje to bezpośrednie uruchomienie programu; żaden plik nie zostanie utworzony ani nadpisany. Pozostaw to okno terminala otwarte na czas sprawdzania strony.

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

Procedura obsługi używa udokumentowanych metod odpowiedzi Pythona: send_response() rozpoczyna odpowiedź, send_header() dodaje pola, a end_headers() kończy sekcję nagłówka przed zapisem bajtów treści. Dokumentacja serwera HTTP w Pythonie

Przykład celowo definiuje TITLE i SUMMARY tylko raz. Te wartości dostarczają zarówno metadane, jak i widoczny tekst, co ułatwia spójne poprawianie tego niewielkiego dokumentu. W przypadku dłuższej strony opis może różnić się od pierwszego akapitu, o ile dokładnie podsumowuje ten sam temat.

Strona jest kodowana przed obliczeniem jej długości. HTTP definiuje Content-Length w oktetach, czyli bajtach; liczenie znaków dałoby błędny wynik w przypadku użytego w tym przykładzie półpauzy. RFC 9110, sekcja 8.6

Jak sprawdzić, czy treść i metadane dotarły razem?

Otwórz drugie okno Terminal i uruchom to polecenie. Wysyła ono zwykłe żądanie o dokument i wyświetla zarówno nagłówki odpowiedzi, jak i jej treść:

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

Opcja -i umieszcza nagłówki odpowiedzi w tym samym strumieniu wyjściowym co treść. Limit czasu ogranicza transfer do dziesięciu sekund. Opcje te opisuje podręcznik curl — polecenia wiersza poleceń.

Sprawdź kolejno:

  1. Wiersz statusu powinien zawierać 200 OK.
  2. Jedno pole Content-Type powinno określać text/html; charset=utf-8.
  3. Po pustym wierszu kończącym sekcję nagłówka kod HTML powinien zawierać tytuł i opis.
  4. To samo ciało powinno zawierać instrukcje dotyczące kształtów z papieru.
  5. Półpauza powinna wyświetlać się poprawnie w zdekodowanym tekście.

Następnie wpisz http://127.0.0.1:8000/paper-shapes w pasku adresu Safari. Widoczna strona powinna pokazywać nagłówek, podsumowanie i instrukcje. Deklaracja description to metadane; jej obecność sprawdza się w otrzymanym kodzie, a nie wywnioskuje z wyglądu strony.

Możesz też sprawdzić ścieżkę wysyłającą same nagłówki:

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

Wysyła to HEAD, więc nie pozwala sprawdzić, czy ciało zawiera tytuł lub opis. Odpowiedź HEAD pomija treść, opisując jednocześnie odpowiadającą jej reprezentację; użyj wcześniejszego sprawdzenia GET, aby skontrolować właściwy dokument. RFC 9110, sekcja 8.2

Jeśli podgląd nie działa, wybierz następne działanie na podstawie objawu:

Objaw Następne działanie
Podczas uruchamiania pojawia się informacja, że adres jest już używany Zmień 8000 na 8001 w programie, uruchom go ponownie i użyj 8001 we wszystkich poleceniach podglądu.
Żądanie kończy się błędem połączenia Sprawdź, czy w pierwszym terminalu nadal działa podgląd i czy numery portów są zgodne.
Odpowiedź to 404 Użyj dokładnie /paper-shapes; ten przykład nie akceptuje końcowego ukośnika ani ciągu zapytania.
Przeglądarka nadal pokazuje wcześniejszą wersję Zatrzymaj program za pomocą Control-C, ponownie uruchom edytowany blok i odśwież stronę.
Nagłówek wygląda poprawnie, ale brakuje metadanych Sprawdź wynik GET i potwierdź, że deklaracje znajdują się w sekcji head dokumentu.

Jakie informacje z tej odpowiedzi może wykorzystać Google Search?

Opisowy tytuł, dokładny opis i przydatny widoczny tekst dostarczają Google udokumentowanych danych do prezentowania strony. Wśród źródeł automatycznie generowanych linków do tytułów Google wymienia element title, główny widoczny tytuł, elementy nagłówków i inne informacje. Zadbaj o spójność tych wskazówek z tematem dokumentu. Wpływ na linki do tytułów w wynikach wyszukiwania

Google tworzy fragmenty wyników głównie na podstawie treści strony, a czasami używa meta description, jeśli dokładniej opisuje stronę. Różne wyszukiwania mogą wyświetlać różne fragmenty. Traktuj opis jako przydatne podsumowanie, a nie stały podpis w wynikach wyszukiwania. Kontrolowanie fragmentów w wynikach wyszukiwania

W przykładowej stronie opis zapowiada krótki przewodnik układania, a treść zawiera ten przewodnik. Zastępując przykładowy tekst, sprawdź tę zgodność: osoba, która przeczyta sam opis, powinna wyrobić sobie trafne wyobrażenie o stronie.

Dodanie własnych nazw metadanych nie oznacza, że są one obsługiwane. Google informuje, że ignoruje nieobsługiwane tagi meta. W metadanych przeznaczonych dla wyszukiwarek używaj udokumentowanych przez Google pól; pole utworzone na potrzeby własnej aplikacji wymaga oddzielnie zdefiniowanego odbiorcy. Tagi meta i atrybuty obsługiwane przez Google

Jak zmienić podgląd w publiczny sposób publikacji?

Lokalny adres z tego przewodnika służy do podglądu na komputerze i nie jest adresem opublikowanej strony. Python informuje również, że http.server nie jest zalecany do zastosowań produkcyjnych. Przenieś strukturę HTML i wymagania dotyczące odpowiedzi do swojego systemu publikacji zamiast używać tej demonstracji jako publicznego serwera. Dokumentacja serwera HTTP w Pythonie

Jeśli korzystasz z systemu zarządzania treścią, poszukaj w jego dokumentacji ustawień tytułu strony i meta description. Google zwraca uwagę, że system CMS może oferować ustawienia wyszukiwania zamiast bezpośredniej edycji HTML. Przypisz tym ustawieniom pola pokazane w tym przykładzie, a następnie sprawdź odpowiedź z wygenerowanym dokumentem. Wskazówki Google dotyczące dodawania opisów meta

HTTP obsługuje reprezentacje multipart, ale jest to inny sposób pakowania danych. W przypadku dokumentu przeznaczonego do odczytu w przeglądarce istniejąca struktura HTML już pozwala umieścić treść i metadane dokumentu w jednej reprezentacji. Zastosowanie multipart wymagałoby przetwarzania przez odbiorcę, którego ten przewodnik nie potrzebuje. RFC 9110, sekcja 8.3.3

Kryterium ukończenia jest konkretne: jedno udane żądanie o dokument zwraca właściwy typ mediów, kompletne ciało HTML, dokładny tytuł i opis oraz tekst, którego szukają czytelnicy. Zastosuj to kryterium zarówno do przyszłej odpowiedzi publicznej, jak i lokalnego podglądu, aby system publikacji zwracał przygotowany dokument.

Źródła