Website annotieren: Notizen, Feedback und Bug-Reports

Wenn du eine Website annotieren willst, wähl die Methode passend zur Aufgabe. Für Notizen, die auf der Seite bleiben, nimmst du eine Highlighter-Erweiterung wie Hypothesis. Für Team-Kommentare, die an Live-Elementen hängen, nutzt du ein Feedback-Tool wie Markup.io oder BugHerd. Um einen Bug oder eine Änderung zu erklären, nimmst du die Seite auf und markierst sie mit nummerierten Schritten, Pfeilen und Text.

Die meisten Anleitungen zum Annotieren von Webseiten decken nur eine dieser Aufgaben ab, meist die, die ihr eigenes Produkt verkauft. Dieser Guide behandelt alle drei, dazu die kostenlosen Tools, die schon auf deinem Computer sind, und die Gewohnheiten, mit denen sich Feedback leicht umsetzen lässt. Wenn du vor allem Bilder markierst, vergleicht die Übersicht der besten Markup-Tools die Apps.

Was es heißt, eine Website zu annotieren

Das W3C Web Annotation Data Model beschreibt eine Annotation als Verknüpfung zwischen einem Inhalt (Body), etwa einem Kommentar, und einem Ziel (Target), etwa einem Teil einer Webseite. Einfach gesagt: Du hängst eine Notiz an eine Stelle, damit jemand anderes genau weiß, was du meinst.

Hinter dieser Idee stecken drei verschiedene Aufgaben:

• Recherchenotizen. Du markierst und kommentierst Artikel oder Dokus, für dich selbst oder für eine Lerngruppe.
• Live-Kommentare im Team. Reviewer heften Kommentare an Buttons und Überschriften einer Website, die gerade geprüft wird.
• Eine annotierte Momentaufnahme. Du nimmst die Seite auf und zeichnest auf dem Bild, für ein Bug-Ticket, einen Änderungswunsch oder eine Doku.

Wenn ein Suchassistent fragt, ob du lernst oder Feedback zu Webdesign gibst, meint er genau diese Aufteilung. Studierende brauchen Methode 1. Teams in Review-Runden brauchen Methode 2. Tester und Entwickler, die Tickets anlegen, brauchen Methode 3.

Methode 1: Text auf einer Webseite markieren und Notizen hinzufügen

Das ist die Recherche-Aufgabe. Du willst Notizen, die wieder da sind, wenn du die Seite nächste Woche öffnest.

Eine Highlighter-Erweiterung nutzen

Hypothesis ist die bekannteste offene Option, und das kostenlose Konto deckt die private Nutzung und Gruppen ab. Die meisten Highlighter-Erweiterungen funktionieren gleich:

1. Installiere die Erweiterung in Chrome, Edge oder einem anderen Chromium-Browser. In Firefox und Safari ziehst du das Bookmarklet in deine Lesezeichenleiste.
2. Melde dich an, öffne die Seite und schalte die Erweiterung ein.
3. Wähl Text aus und klick dann auf Highlight für eine schnelle Markierung oder auf Annotate, um eine Notiz hinzuzufügen.
4. Veröffentliche die Notiz unter Only Me, in einer privaten Gruppe oder in der öffentlichen Ebene.

Öffnest du dieselbe URL später mit aktiver Erweiterung, laden deine Notizen in einer Seitenleiste.

Die Seite als PDF speichern und annotieren

Wenn du keine Erweiterungen installieren kannst, mach aus der Seite eine Datei. Drück Strg + P (Cmd + P auf dem Mac), stell als Ziel Als PDF speichern ein und speichere. In Safari auf dem Mac nutzt du Ablage > Als PDF exportieren.

Danach markierst du das PDF in Vorschau auf dem Mac oder in Microsoft Edge unter Windows. Beide bringen Werkzeuge zum Hervorheben, Zeichnen und Kommentieren mit. Ein PDF ist eine eingefrorene Kopie, also hält es auch fest, was an diesem Tag auf der Seite stand.

Grenzen der Recherche-Methode

• Notizen können verloren gehen. Markierungen sind am Seitentext verankert. Ändert sich dieser Text, kann eine Notiz ihre Stelle verlieren.
• Manche Seiten blockieren Erweiterungen. Einstellungsseiten des Browsers, Erweiterungs-Stores und oft der eingebaute PDF-Viewer lassen sie nicht zu.
• Nur wer dasselbe Tool nutzt, sieht die Notizen. Eine Kollegin ohne die Erweiterung sieht eine unmarkierte Seite.

Methode 2: Live-Kommentare für Team-Reviews an eine Website heften

Mit Website-Feedback-Tools klicken Reviewer auf ein Element einer Live- oder Staging-Website und hinterlassen dort einen Kommentar. Das Tool speichert den Kommentar mit einem Screenshot und Browser-Details und schickt ihn dann an ein Task-Board.

Die Tools verbinden sich auf eine von drei Arten mit deiner Website:

• Browser-Erweiterung. Schnell für interne Teams. Kunden müssen sie installieren, und sie läuft nur auf dem Desktop.
• Proxy-Link. Du teilst eine spezielle URL, die deine Website im Tool lädt. Es gibt nichts zu installieren, aber hinter Logins, VPNs oder Basic Auth scheitert das oft.
• Skript-Snippet. Du fügst der Staging-Website eine Zeile JavaScript hinzu. Reviewer brauchen nichts weiter, und es funktioniert auf Smartphones.

Der Ablauf ist überall gleich: Website öffnen oder ihre URL einfügen, auf das Element klicken, dann den Kommentar schreiben und zuweisen.

Zur Auswahl stehen unter anderem Markup.io, BugHerd, Pastel und AnnotateWeb. Laut der eigenen Website von AnnotateWeb werden Notizen nach 2 Minuten Inaktivität gelöscht. Es eignet sich also für kurze Live-Sessions, nicht für dauerhafte Notizen.

Der Kompromiss ist klar. Element-Kontext und Browserdaten bekommst du gratis dazu, dafür zahlst du mit Konten, Tarifen pro Nutzer und Einrichtungszeit für Kunden. Bei langen Review-Runden mit Kunden lohnt sich das oft. Für einen einzelnen Bug in einem einzelnen Ticket selten.

Methode 3: Die Seite aufnehmen und einen Screenshot annotieren

Diese Aufgabe haben die meisten Entwickler und QA-Engineers, ob beim täglichen explorativen Testen oder bei einem Bug Bash im Team. Du musst zeigen, was auf einer Seite nicht stimmt, in einem einzigen Bild, damit niemand einen Call braucht. Dafür reichen sechs Schritte.

Schritt 1: Die ganze Seite oder den genauen Zustand aufnehmen

Wähl die Aufnahmeart danach, wo die Seite liegt:

• Öffentliche Seiten. Nutz eine URL-basierte Ganzseitenaufnahme und wähl den Viewport, in dem der Bug auftritt: Desktop, Smartphone oder Tablet.
• Staging mit Login, localhost, VPN- oder Intranet-Seiten. Nutz eine scrollende, Bereichs- oder Fensteraufnahme deines eigenen Browsers. URL-basierte Aufnahmetools rendern die Seite auf einem entfernten Server, also sehen sie weder deine Sitzung noch dein Netzwerk.
• Hover-Zustände, offene Menüs und Modals. Nimm deinen eigenen Bildschirm auf, während der Zustand sichtbar ist, oft mit einem Timer.

Wie die Aufnahme selbst klappt, zeigen die Ganzseiten-Guides für Mac und Windows oder die Wege, unter Windows einen Screenshot einer Webseite zu machen.

Layout-Bugs brauchen die richtige Breite. Eine Seite, die bei 1440 Pixeln gut aussieht, kann bei 390 Pixeln kaputtgehen, also nimm den Viewport auf, der im Bug genannt ist.

Schritt 2: Jedes Problem mit Zähler-Markern nummerieren

Setz auf jedes Problem einen nummerierten Marker (1, 2, 3). Schreib dann im Ticket eine nummerierte Liste mit denselben Nummern. „Bitte 3 fixen“ ist schneller gesagt als „der Preis in der Karte rechts“.

Schritt 3: Mit Pfeilen, Rahmen und Markierungen zeigen

Zieh einen Rahmen um das Element, ergänze einen Pfeil, wenn das Ziel klein ist, und nutz den Textmarker für falschen Text. Gib jeder Farbe genau eine Bedeutung: Rot für Bugs, Gelb für Textänderungen. Die Technik-Guides für Mac und Windows gehen tiefer.

Schritt 4: Kurze Callouts nach dem Muster erwartet vs. tatsächlich

Jedes Callout bekommt eine Zeile für das erwartete und eine für das tatsächliche Ergebnis. „Erwartet: $49/mo. Tatsächlich: $NaN/mo“ lässt keinen Raum zum Raten. Halte jedes Callout unter 15 Wörtern.

Schritt 5: Persönliche Daten und Secrets verbergen

Deck Namen, E-Mail-Adressen, Bestellnummern und Kartenziffern mit einem undurchsichtigen, vollflächig gefüllten Kasten ab. Dasselbe gilt für API-Schlüssel, Tokens, Passwörter und Session-IDs. Weichzeichnen und Verpixeln lassen sich bei Text rückgängig machen, wie der Guide zum sicheren Schwärzen von Text erklärt.

Heb dir Weichzeichnen und Verpixeln für unkritische Details auf, etwa einen fremden Tab-Namen oder ein Gesicht in einem Stockfoto. Lass die Fehlermeldung aber lesbar: Der Entwickler braucht „401 Unauthorized“, nicht den Schlüssel dahinter.

Schritt 6: Dort teilen, wo die Arbeit passiert

Füg das Bild in das Jira-Issue, das GitHub-Issue oder den Slack-Thread ein, in dem der Fix verfolgt wird. Häng die Bilddatei dann ans Ticket an, damit sie so lange erhalten bleibt wie das Ticket. GitHub und Jira nehmen Dateien per Drag-and-drop an, und der Jira-Screenshot-Guide erklärt den Rest.

Ein Cloud-Link zum Teilen reicht für einen schnellen Blick im Chat. Uploads werden in regelmäßigen Abständen entfernt, also gehören Share-Links nicht in Tickets und Dokus: Die angehängte Datei ist der Nachweis. Weitere Optionen findest du im Guide zum Teilen von Screenshots unter Windows.

Wenn ein Standbild nicht reicht

Hover-Effekte, Animationen und kaputte mehrstufige Abläufe brauchen Bewegung. Nimm ein GIF oder Video von 5 bis 15 Sekunden auf, das die Schritte einmal zeigt, und häng es neben dem annotierten Bild an. Die GIF-Guides für Mac und Windows zeigen, wie das geht.

Methode 3 in einer einzigen App

ScreenSnap Pro kombiniert eine URL-basierte Ganzseitenaufnahme mit den Annotationswerkzeugen von oben, auf Mac und Windows. Füg eine öffentliche URL ein und wähl dann ganze Seite oder ersten Bildschirm sowie ein Preset für Desktop, Smartphone oder Tablet. Es lädt Lazy-Load-Bilder nach und blockiert die meisten Cookie-Banner und Werbung.

Es rendert die Seite auf einem Server. Deshalb braucht es eine Internetverbindung und erreicht nur öffentliche Seiten. Für Staging mit Login nutzt du seine Scrolling Capture in deinem eigenen Browserfenster. Füg außerdem keine URLs ein, die Secrets enthalten, etwa signierte Links oder Magic-Link-Tokens.

Nach der Aufnahme decken die Werkzeuge Zähler, Pfeil, Rechteck, Textmarker, Text und gefülltes Rechteck die Schritte 2 bis 5 ab. Per OCR kopierst du eine Fehlermeldung ins Ticket, und du kannst das Referenzbild aus der Spezifikation über die Live-Seite pinnen, während du vergleichst. Das Ergebnis ist ein statisches Bild, keine Live-Kommentare: Es gibt keine Browser-Erweiterung und keine Team-Kommentare. Teams, die Review-Threads auf einer Live-Website brauchen, sollten deshalb ein Tool aus Methode 2 nutzen.

Von den Machern dieser Seite

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Schöne Hintergründe, professionelle Anmerkungen, GIF-Aufnahme und sofortiges Teilen in der Cloud, alles in einer App. Einmal 39 $ zahlen, für immer besitzen.

Preis und Funktionen ansehen

Webseiten kostenlos mit Bordmitteln annotieren

Vielleicht hast du schon alles, was Methode 3 braucht.

• Microsoft Edge. Drück Strg + Shift + S oder klick mit der rechten Maustaste auf die Seite und wähl Screenshot. Wähl einen Bereich oder die ganze Seite und markier sie mit dem Stift, bevor du kopierst oder speicherst. Microsofts Anleitung zu Edge-Screenshots zeigt die Schritte. In älteren Versionen heißt die Funktion Webaufnahme (Web Capture).
• Windows Snipping Tool. Drück Win + Shift + S, wähl einen Bereich aus und öffne die Aufnahme, um Stift, Textmarker und Formen zu nutzen. Der Guide zum Snipping Tool erklärt jede Option.
• macOS-Markierungen. Drück Cmd + Shift + 4 für einen Bereich oder Cmd + Shift + 5 für die Werkzeugleiste und klick dann auf die Miniatur, um die Markierungen zu öffnen. Apples Hilfeseite zu Screenshots listet jedes Tastenkürzel auf.
• Safari auf iPhone und iPad. Mach einen Screenshot, tipp auf die Miniatur, wähl Ganze Seite und zeichne dann mit den Markierungen. Apple beschreibt außerdem einen Weg über das Teilen-Menü, mit dem du eine annotierte Webseite als PDF sicherst. Mehr steht im iPad-Screenshot-Guide.
• Firefox. Drück Strg + Shift + S, um den sichtbaren Bereich oder die ganze Seite zu speichern. Zeichenwerkzeuge gibt es nicht, also annotierst du die Datei danach. Der Firefox-Screenshot-Guide zeigt die Schritte.
• Chrome. Chrome hat kein eingebautes Zeichenwerkzeug für Webseiten. Nutz eine Erweiterung oder mach in den DevTools eine Aufnahme in voller Größe und annotiere die Datei. Der Chrome-Screenshot-Guide zeigt, wie es geht.

Ein Freihandstift reicht für einen schnellen Kreis. Für ein Ticket mit mehreren Problemen sind die nummerierten Marker und getippten Callouts aus Methode 3 klarer lesbar.

Um eine dieser Aufnahmen ohne Installation zu markieren, öffne das kostenlose Tool zur Bildannotation im Browser.

Spickzettel für Tastenkürzel

Auf dem Mac nimmst du in den Zeilen für Edge, Firefox und Chrome Cmd statt Strg und Cmd + Option + I statt F12.

So schreibst du Website-Feedback, mit dem andere arbeiten können

Gute Annotationen folgen ein paar Regeln:

• Ein Problem pro Nummer. Stehen zwei Probleme unter einem Marker, geht eines unter.
• Erwartet vs. tatsächlich in unter 15 Wörtern.
• Kontext im Ticket: URL, Browser, Viewport oder Breakpoint und der Zeitpunkt, an dem du es gesehen hast.
• Annotiere den Breakpoint, an dem es bricht. Ein Smartphone-Bug auf einer Desktop-Aufnahme beweist nichts.
• Eine Farbe, eine Bedeutung. Rot für Bugs, Gelb für Textänderungen.
• Höchstens fünf bis sieben Marker pro Bild. Den Rest verteilst du auf ein zweites Bild.
• Auf den Kontext zuschneiden, aber einen Orientierungspunkt behalten, etwa den Header, damit alle wissen, wo sie sind.

Hier ist ein vollständiges Beispiel für eine Website-Annotation: Ticket-Text, der zur annotierten Preisseite oben passt.

**Zusammenfassung:** Preisseite hat 3 Bugs und 1 Tippfehler
**URL:** www.example.com/pricing
**Browser und Viewport:** Chrome (aktuelle stabile Version), macOS, 1280 x 800
**Gesehen:** 2026-10-05 09:12 UTC
**Probleme (Nummern passen zum Bild):**

1. Bug. Erwartet: Navigation in einer Zeile. Tatsächlich: „Contact sales“ rutscht in die nächste Zeile.
2. Text. Erwartet: „team“. Tatsächlich: „teem“.
3. Bug. Erwartet: Business-Tarif $49/mo. Tatsächlich: $NaN/mo.
4. Bug. Erwartet: qa.test+1@example.com wird akzeptiert. Tatsächlich: „Enter a valid email address“.

**Anhang:** pricing-annotated.png

Für einen vollständigen Report mit Schritten zur Reproduktion, Schweregrad und Logs startest du mit der Bug-Report-Vorlage. Dasselbe nummerierte Format funktioniert in Support-Tickets, GitHub-Issues und Feedback-Runden im Abnahmetest (UAT).

Häufige Probleme lösen

Das Erweiterungssymbol ist ausgegraut. Browser blockieren Erweiterungen auf ihren eigenen Einstellungsseiten, auf den Seiten der Erweiterungs-Stores und oft im eingebauten PDF-Viewer. Öffne eine normale Seite oder speichere die Seite als PDF und markiere das PDF.

Markierungen sind nach einem Seiten-Update verschwunden. Der Text, an dem sie verankert waren, hat sich geändert. Hypothesis listet solche Notizen in der Seitenleiste in einem Tab namens Orphans auf. Kopier die Notizen, die du noch brauchst, und leg sie am neuen Text neu an.

Ein Kommentar-Tool oder eine URL-Aufnahme zeigt eine leere Seite oder einen Login-Bildschirm. Die Seite liegt hinter einem Login, einem VPN oder Basic Auth, oder sie blockiert das Einbetten in Frames per X-Frame-Options- oder CSP-Header. Wechsle zu einer scrollenden, Bereichs- oder Fensteraufnahme deines eigenen, angemeldeten Browsers.

Die Ganzseitenaufnahme lässt Bilder aus oder wiederholt einen Sticky Header. Lazy-Load-Bilder laden erst beim Scrollen, und Sticky Header können sich in zusammengesetzten Aufnahmen wiederholen. Die Ganzseiten-Guides für Mac und Windows haben Lösungen für beides.

Cookie-Banner oder Chat-Widgets verdecken den Inhalt. Schließ sie vor einer Browser-Aufnahme. URL-Aufnahmen wie die von ScreenSnap Pro blockieren die meisten Banner und Werbung für dich.

Marker sind nach dem Posten im Chat schwer lesbar. Chat-Apps komprimieren Bilder. Schick ein PNG, das in 2x-Auflösung aufgenommen wurde, oder häng die Datei an, statt sie einzufügen. Wenn du den Text einer Fehlermeldung aus einer alten Aufnahme brauchst, extrahiere den Text aus dem Bild, statt ihn abzutippen.

Welche Methode solltest du nutzen?

• Notizen für dich oder einen Kurs: Methode 1, eine Highlighter-Erweiterung oder ein annotiertes PDF.
• Kommentare von Team oder Kunden zu einem Live-Build: Methode 2, ein Feedback-Tool mit angehefteten Kommentaren.
• Ein Bug-Ticket, ein Änderungswunsch oder eine Doku: Methode 3, eine Aufnahme mit Nummern, Pfeilen und Callouts.

Viele Teams nutzen die letzten beiden parallel: Methode 2 für Review-Runden mit Kunden, Methode 3 für Bug-Tickets und technische Dokus.

Wenn du oft Web-Bugs meldest, spart dir eine App, die die Seite aufnimmt und markiert, viel Hin und Her zwischen Tools. ScreenSnap Pro ist ein einmaliger Kauf für 39 $: 1 Lizenz für 2 Computer, Mac oder Windows. Zu den Preisen.

Häufig gestellte Fragen

Wie annotiere ich eine Website?

Wähl die Methode nach der Aufgabe. Nutz eine Highlighter-Erweiterung für Recherchenotizen, ein Tool mit angehefteten Kommentaren für Team-Reviews, oder nimm die Seite auf und ergänze nummerierte Marker, Pfeile und kurze Callouts für Bug-Reports.

Was ist die beste Website zum Annotieren?

Für Lernnotizen funktioniert ein kostenloser Highlighter wie Hypothesis gut. Für Reviews mit Kunden passt ein Tool besser, das Kommentare an Seitenelemente heftet. Für Bug-Reports ist dein eigenes Screenshot-Tool oft am besten, weil das Bild direkt ins Ticket wandert.

Was ist das beste Tool zum Annotieren von Websites?

Kein einzelnes Tool gewinnt bei jeder Aufgabe. Nutz Highlighter-Erweiterungen für Notizen, Tools mit angehefteten Kommentaren für Review-Runden und für Tickets ein Screenshot-Tool mit Zählern, Pfeilen und deckender Schwärzung. Die Übersicht der besten Markup-Tools vergleicht Screenshot-Apps.

Wie annotiere ich eine Webseite auf dem iPad?

Öffne die Seite in Safari und mach einen Screenshot mit der oberen Taste und der Lauter-Taste (obere Taste und Home-Taste bei iPads mit Home-Taste). Tipp auf die Miniatur, wähl „Ganze Seite“ und zeichne mit den Markierungen. Tipp auf „Fertig“, um das Ergebnis als PDF in der App „Dateien“ zu sichern.

Kann ich in Chrome annotieren?

Ja, aber nicht mit einem eingebauten Tool. Installiere eine Highlighter- oder Feedback-Erweiterung oder nimm die Seite auf (die DevTools können einen Screenshot in voller Größe machen) und markiere das Bild in einer separaten App oder einem kostenlosen Browser-Tool.

Wie annotiere ich auf meinem Bildschirm?

Nimm den Bildschirm auf und markiere dann das Bild: mit dem Snipping Tool unter Windows, mit den Markierungen auf dem Mac oder mit dem Stift im Screenshot-Tool von Edge. Live über Apps zu zeichnen, während du präsentierst, ist eine eigene Tool-Kategorie, der sogenannte Presenter-Stift. ScreenSnap Pro zum Beispiel annotiert Aufnahmen und zeichnet nicht live auf dem Bildschirm.

Was sind die 5 Schritte beim Annotieren?

Für eine Webseite: den richtigen Zustand aufnehmen, jedes Problem nummerieren, mit Pfeilen oder Rahmen zeigen, Callouts nach dem Muster erwartet vs. tatsächlich ergänzen und persönliche Daten vor dem Teilen verbergen. Beim Lesen sind die klassischen Schritte: überfliegen, lesen, markieren, notieren und zusammenfassen.

Was ist ein Beispiel für eine Annotation?

Einen roten, nummerierten Kreis auf einen kaputten Button zu setzen und „Erwartet: öffnet den Checkout. Tatsächlich: nichts passiert“ dazuzuschreiben, ist eine Annotation. Genauso, wenn du einen Satz in einem Artikel markierst und eine Notiz daneben schreibst.