Grundlagen zum Lesen von Webdokumenten, Anfragen und Antworten

Web, Server und Infrastruktur am Ablauf einer Anfrage verstehen

Ein als Administrator angemeldeter Browser kann die Anleitung anzeigen, während ein externer Crawler für dieselbe Adresse eine Anmeldeseite erhält. Die auf der Seite eingetragenen Stichwörter oder strukturierten Daten erreichen ihn dann nicht. Um zwischen einer Inhaltskorrektur und geänderten Zugriffsregeln zu entscheiden, muss klar sein, welche Server die Anfrage durchlief und mit welcher Antwort sie endete.

Das Frontend ist für die Dokumente verantwortlich, die Besucher lesen, und die Schaltflächen, die sie betätigen. Das Backend wählt auf dem Server öffentliche Daten aus und verarbeitet Anfragen. Infrastruktur bezeichnet DNS, Hosting, Netzwerke und Speicher, die diesen Code ausführen und Internetanfragen weiterleiten. Eine Next.js-Anwendung kann Frontend und Backend gemeinsam übernehmen.

Browser und Crawler sind beide Clients, die Material vom Server anfordern. Bei https://example.com/guides/opening-hours wird zunächst über DNS die Verbindungsadresse ermittelt, dann HTTPS aufgebaut und das Dokument unter diesem Pfad angefordert. Ein vorgeschaltetes CDN kann eine gespeicherte Antwort liefern oder die Anfrage an den Ursprungsserver weiterleiten. Dieser liest öffentliche Daten, erzeugt HTML und antwortet.

Ein CDN (Content Delivery Network) liefert Dateien oder Antworten von Servern in mehreren Regionen aus. Der Ursprungsserver (origin server) erzeugt hinter dem CDN die ursprüngliche Antwort. Ein Cache speichert frühere Ergebnisse zur Wiederverwendung. Server können auch ohne CDN direkt antworten; statische Websites können vorbereitete Dateien anstelle eines Anwendungsservers verwenden.

Browser oder Suchcrawler → Verbindungsadresse über DNS ermitteln → HTTPS-Verbindung aufbauen → CDN, Firewall oder Proxy verarbeitet die Anfrage, falls vorhanden → Ursprungsanwendung fragt öffentliche Artikel ab → HTML, Statuscode und Header zurückgeben → Browser fordert CSS, JavaScript und Bilder an → Seite anzeigen und Schaltflächenfunktionen anbinden

Ist der Inhalt leer, prüfen Sie zuerst Seite und Serverabfrage. Scheitert bereits die Verbindung, prüfen Sie DNS, Zertifikate und vorgeschaltete Sperren. Erscheint nach einer Artikeländerung noch der alte Inhalt, vergleichen Sie Abfrageergebnis und einzelne Caches. Statuscode, Inhalt und Cache-Protokolle zeigen, wo eine Anfrage stoppte oder der Inhalt wechselte.

URL, HTTP, Header und Inhalt getrennt lesen

Eine URL ist die Adresse einer Internetressource. https ist das Kommunikationsschema (scheme), example.com der anzusprechende Host, /guides/opening-hours der Dokumentpfad (path). page=2 nach dem Fragezeichen ist eine Query, eine zusätzliche Bedingung für den Server. Ein Fragment wie #hours bezeichnet eine Stelle im Dokument und wird bei gewöhnlichen HTTP-Anfragen nicht übertragen.

Eine Domain ist ein menschenlesbarer Name wie example.com. Ein Port bezeichnet den Dienst auf demselben Server; HTTPS verwendet normalerweise 443. In der Browsersicherheit ist der Origin die Kombination aus Schema, Host und Port. Unterscheiden Sie diese Bedeutung vom zuvor beschriebenen Ursprungsserver.

HTTP regelt den Austausch von Anfragen und Antworten zwischen Client und Server. GET fordert eine Ressource an, HEAD nur Header ohne Inhalt. Die Antwort enthält den Statuscode für das Verarbeitungsergebnis, Header für Format und Cache-Regeln sowie den Body mit dem tatsächlichen Material. Bei SEO-Prüfungen sollte GET den wirklichen Inhalt abrufen, damit ersatzweise gelieferte Anmelde- oder Fehlerseiten auffallen.

Content-Type bezeichnet das Format des Inhalts: text/html für HTML, application/json für JSON, image/webp für WebP-Bilder. Diese Formatnamen heißen auch MIME-Typen. Location enthält die Zieladresse einer Weiterleitung, X-Robots-Tag Suchanweisungen für die gesamte Antwort, Cache-Control Bedingungen für die Zwischenspeicherung.

Lesen Sie Statuscode und Inhalt gemeinsam. 200 bezeichnet eine erfolgreiche Antwort, doch erst der Body zeigt, ob sie Öffnungszeiten oder eine Bot-Prüfseite enthält. 301 und 308 nennen die Adresse für eine neue Anfrage; 404 meldet ein fehlendes Dokument. Suchsysteme verarbeiten diese Antworten beim Crawling und Indexieren. Wenn jede Adresse 200 und die Startseite liefert, bleiben Dokumentexistenz und Weiterleitungsbeziehungen unklar. Googles Verarbeitung von HTTP-Antworten

Die Aufgaben von HTML, CSS und JavaScript trennen

HTML (HyperText Markup Language) beschreibt Dokumentstrukturen wie Überschriften, Absätze und Links. CSS (Cascading Style Sheets) bestimmt Schrift, Abstände, Farben und bildschirmabhängige Anordnung. JavaScript führt im Browser Funktionen wie Schaltflächen, Suche und Datenaktualisierung aus. Titel und Inhalt öffentlicher Artikel werden als HTML-Elemente bereitgestellt, Gestaltung und Interaktion über CSS und JavaScript angebunden.

Ein Tag kennzeichnet den Elementtyp, etwa <p>. Ein Element umfasst Tags und ihren Inhalt. Ein Attribut ist eine Einstellung am Element wie href oder lang. Das DOM (Document Object Model) ist die Struktur, die der Browser im Speicher aus dem Dokument erstellt. JavaScript kann das aus Server-HTML entstandene DOM anschließend ergänzen oder Teile entfernen. Prüfen Sie deshalb sowohl die erste Antwort als auch die Ansicht nach der Interaktion.

head enthält Dokumenttitel und Metadaten, body den lesbaren Inhalt. main bezeichnet den Hauptbereich, article einen eigenständigen Artikel, h1, h2 und h3 die Überschriftenebenen, p einen Absatz. Verwenden Sie Überschriften gemäß der Inhaltshierarchie und steuern Sie die Größe mit CSS. Als Bild dargestellte Absätze sind für Crawler und Screenreader schwieriger direkt zu lesen.

Ein Link trägt die Ziel-URL im href eines a-Elements. Steht die Adresse nur im Klickcode einer Schaltfläche, können Crawler das nächste Dokument möglicherweise nicht entdecken. Verwenden Sie beschreibenden Linktext wie „Unterlagen zur Anmeldung für die Ausleihe“. Googles Leitfaden zu Links erklärt crawlbare a- und href-Strukturen sowie Linktexte.

Ein responsives Layout passt die Anordnung an die Bildschirmbreite an. Inhalt, Quellen und Navigationslinks müssen auch mobil lesbar bleiben; Tabellenwerte behalten ihre Zuordnung zu Spaltenüberschriften. Barrierefreiheit (accessibility) macht Inhalte trotz Behinderungen oder unterschiedlicher Eingabemethoden nutzbar. Bildalternativtexte über alt, Überschriftenhierarchien und per Tastatur erreichbare Links helfen auch beim Dokumentverständnis.

Begriffe für Metadaten und Sucheinstellungen unterscheiden

Metadaten beschreiben das Dokument, etwa durch Titel, Beschreibung und kanonische URL. title liefert einen möglichen Titel für Suchergebnisse und Browsertabs, meta description eine mögliche Zusammenfassung. Suchsysteme können je nach Frage und Kontext andere Titel und Zusammenfassungen anzeigen. Prüfen Sie daher auch die tatsächlichen Ergebnisse.

Eine kanonische URL vertritt doppelte oder sehr ähnliche Dokumente. link rel="canonical" im HTML ist eine Möglichkeit, sie vorzuschlagen. Material ohne HTML-head, etwa PDF, kann den Vorschlag über einen HTTP-Link-Antwortheader senden. Google wählt die endgültige kanonische Adresse anhand mehrerer Signale. Eine Weiterleitung bewegt Besucher zur neuen Adresse, eine canonical-Angabe nicht. Richtlinien für kanonische URLs

robots.txt liegt im Stammverzeichnis der Website und weist Crawler auf Abrufregeln hin. Allow erlaubt, Disallow beschränkt. noindex in meta robots oder X-Robots-Tag fordert den Ausschluss aus dem Suchindex an; nofollow betrifft das Verfolgen von Links. Private Daten werden durch Authentifizierung und Berechtigungsprüfungen auf dem Server geschützt. Suchanweisungen richten sich nach der Crawling- und Indexierungsstrategie für öffentliche Daten.

Eine Sitemap listet abzurufende URLs sowie Angaben wie Änderungsdaten auf. XML stellt Daten in einer Tag-Struktur dar und wird für Sitemaps verwendet. Strukturierte Daten drücken Beziehungen wie Titel, Autor, Datum und Gegenstand als maschinenlesbare Eigenschaften aus. JSON speichert Namen und Werte, JSON-LD beschreibt verknüpfte Entitäten und Beziehungen in JSON. Schema.org definiert Typen und Eigenschaften wie Article und Person als Vokabular.

Open Graph (OG) enthält Metadaten für Titel, Beschreibung und Bild von Vorschaukarten. hreflang beschreibt Beziehungen zwischen Seiten mit demselben Inhalt für unterschiedliche Sprachen oder Regionen. Beide müssen Adressen und Sprachen der tatsächlichen Seiten enthalten. author für den Verfasser, publisher für den Herausgeber, about für den Gegenstand und sameAs für dieselbe Entität bezeichnen unterschiedliche Beziehungen.

BreadcrumbList ist ein Schema.org-Typ für die Position eines Dokuments in der Websitehierarchie, etwa „Start → Nutzungshinweise → Öffnungszeiten“. Verwenden Sie denselben tatsächlichen Navigationsweg wie im sichtbaren Breadcrumb. Er zeigt den aktuellen Ort und führt zu übergeordneten Dokumenten zurück. Das unterscheidet ihn von citation als Quellenverweis auf einen anderen Artikel. Strukturierte Breadcrumb-Daten

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://example.com/guides/opening-hours>; rel="canonical"

Diese Antwort schlägt die HTML-Seite als kanonische URL eines druckbaren PDFs mit denselben Hinweisen vor. Enthält das PDF einen Zeitplan eines anderen Jahres, verwenden Sie die kanonische Adresse dieses historischen Eintrags. Der Link-Header wird auf dem Server oder Speicher eingerichtet, der das PDF ausliefert.

Dasselbe Dokument im Terminal und Browser lesen

Ein Terminal ist ein Programm zur Befehlseingabe und Ergebnisanzeige; die Shell interpretiert und führt Befehle aus. curl sendet URL-Anfragen und speichert Antworten. rg sucht Zeichenfolgen in Dateien, dig fragt DNS-Adressinformationen ab. Prüfen Sie die Installation der Befehle und legen Sie die öffentliche Arbeits-URL fest.

Bei curl reduziert -sS die Fortschrittsanzeige, zeigt aber Fehler; -D speichert Header, -o den Inhalt. -L folgt Weiterleitungen. Prüfen Sie zuerst ohne -L die Weiterleitungsanweisung und folgen Sie anschließend bis zur Zieladresse, um Anzahl und Ergebnis der Weiterleitungen zu vergleichen. --max-time begrenzt die Wartezeit in Sekunden.

In den Browser-Entwicklerwerkzeugen zeigt Network Anfragen, Antworten und Übertragungszeiten; Console zeigt Codefehler; Elements das aktuelle DOM. Unterscheiden sich ursprüngliches HTML und DOM nach JavaScript-Ausführung, ermitteln Sie die Anfrage oder den Code, der Inhalt ergänzt hat. Unterscheiden Sie auch CSS-Anzeigegröße und tatsächliche Pixelmaße des heruntergeladenen Bildes.

Bedeutung und Metadaten in gewöhnlichem HTML gemeinsam lesen

Speichern Sie das Folgende als opening.html und öffnen Sie es im Browser, um die Dokumentstruktur ohne Server oder Framework zu betrachten. Vergleichen Sie in Elements title, description und canonical im head mit Überschrift, Datumsangaben und Beleglink im body. Ersetzen Sie bei der Bereitstellung example.com durch die tatsächliche Produktionsdomain.

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Sonntagsöffnungszeiten und Schließtage der Bibliothek</title> <meta name="description" content="Sonntags 10–17 Uhr geöffnet; am ersten Sonntag und an Feiertagen geschlossen."> <link rel="canonical" href="https://example.com/guides/opening-hours"> </head> <body> <main><article> <h1>Sonntagsöffnungszeiten und Schließtage der Bibliothek</h1> <p>Veröffentlicht <time datetime="2026-10-01T00:00:00+09:00">1. Oktober 2026</time></p> <h2>Öffnungszeiten und Ausnahmen</h2> <p>Sonntags von 10 bis 17 Uhr geöffnet. Am ersten Sonntag und an Feiertagen geschlossen.</p> <p>Gültig ab 1. Oktober 2026.</p> <a href="https://example.com/policies/opening-hours">Ursprüngliche Mitteilung zu den Öffnungszeiten</a> </article></main> </body> </html>

h1 bezeichnet das Dokumentthema, h2 einen Unterabschnitt. href am a-Element ist das tatsächliche Ziel, datetime am time-Element der maschinenlesbare Wert. Gewöhnliches HTML verwendet datetime, React JSX dateTime. title liefert ein Titelsignal für Suche und Tabs und erfüllt eine andere Aufgabe als die sichtbare Überschrift. Suchmaschinen können den tatsächlichen Title Link und das Snippet selbst bestimmen.

Prüfen Sie, ob Überschrift, Zeiten und Schließungsausnahmen auch ohne CSS oder JavaScript erhalten bleiben. Die spätere Next.js-Übung prüft 404-Antworten für fehlende URLs über HTTP. Die Grenzen geplanter Veröffentlichung werden in „Dokumente und Zeit“ mit Tests zu festen Zeitpunkten geprüft.

In diesem HTML liefert h1 das Thema Öffnungszeiten, p die Zeiten und Schließbedingungen und a den Weg zum Belegdokument. Werkzeuge, die den Inhalt lesen, entnehmen diesen Elementen die benötigten Antwortsätze. datetime am time-Element liefert ein einheitlich formatiertes Datum. Ob es Veröffentlichungs- oder Gültigkeitsdatum ist, erklären jedoch die benachbarte Beschriftung und der Satz. Deshalb stehen Tags und menschenlesbare Erklärungen zusammen.

Auch bei Bildern haben Werte unterschiedliche Bedeutungen. Eine CSS-Anzeigebreite von 358px beschreibt den Platz auf dem Bildschirm. 640w in srcset bezeichnet die Pixelbreite der herunterzuladenden Datei selbst. naturalWidth ist ein dichtekorrigierter CSS-Pixelwert; zur Rohbreite der Datei muss die Antwortdatei mit einem Bildwerkzeug gelesen werden. currentSrc ist die vom Browser gewählte Adresse. Werden diese vier Werte auf derselben Ansicht gemeinsam gelesen, fällt auf, wenn ein großes Original für einen kleinen Platz übertragen wird. Definition von naturalWidth