RL RanceLee Tutorials
← Zurück zu Tutorials

Wie man Webseiten mit Web Clipper in Obsidian speichert

Wir haben uns bereits mit Templates beschäftigt – wie man mit Variablen Datum und Titel automatisch ausfüllt und Formate per Klick beim Erstellen neuer Notizen anwendet. Jetzt gehen wir einen Schritt weiter.

Notizen machen allein reicht nicht. Jeden Tag surfst du auf Twitter, liest WeChat-Artikel und scrollst durch Reddit. Wenn du etwas Gutes findest, wie speicherst du es? Screenshot? Das wird zu einem Bild, das nicht durchsuchbar ist. Copy-Paste? Die Formatierung ist chaotisch, und du musst Titel und Link manuell hinzufügen. In die Browser-Lesezeichen werfen? Das ist der ewige Ruheplatz für Lesezeichen: Zeug kommt rein, aber nie wieder raus, und du schaust sie nie wieder an.

Dieses Kapitel löst dieses Problem: wie man Webinhalte schnell und sauber in Obsidian speichert. Das Werkzeug ist die offizielle Browser-Erweiterung von Obsidian – Web Clipper.


Warum Web Clipper verwenden

Vor Web Clipper habe ich grob drei Phasen durchgemacht, um Webartikel zu speichern:

Erste Phase: Screenshot. Ein Klick, ab in die Notizen. Problem: Screenshots sind nicht durchsuchbar. Drei Monate später weißt du nicht mehr, was du aufgenommen hast, geschweige denn, es zu finden.

Zweite Phase: Copy-Paste. Text in Obsidian kopieren, dann manuell Titel und Quellenlink hinzufügen. Problem: Die Formatierung ist meistens zerschossen – Überschriften werden zu Fließtext, Fettdruck verschwindet, Codeblöcke werden zu Klartext. Das aufzuräumen dauert jedes Mal Minuten.

Dritte Phase: Lesezeichen. Stern im Browser klicken, am einfachsten. Der Nachteil: Du wirst diese Links nie wieder öffnen.

Die Logik von Web Clipper: Ein-Klick-Speichern, saubere Formatierung, automatische Metadaten, direkt in Obsidian. Titel, Original-Link, Speicherdatum – alles automatisch ausgefüllt. Der Inhalt ist im Markdown-Format, Bilder bleiben erhalten. Mit dem AI-Interpreter kannst du sogar KI nutzen, um den Inhalt beim Clipping zusammenzufassen.


Installation

Web Clipper ist eine Browser-Erweiterung. Sie unterstützt derzeit Chrome, Edge, Firefox und Safari (einige Funktionen können abweichen).

Wichtig: WeChat-Artikel müssen zuerst im Browser geöffnet werden; du kannst sie nicht direkt im WeChat-Client verwenden. Der WeChat-Client ist eine separate Umgebung, auf die Browser-Erweiterungen keinen Zugriff haben. Du musst den Link kopieren, in Chrome oder Edge öffnen und dann clippen.

Installationsschritte

Schritt 1: Chrome-Benutzer öffnen den Chrome Web Store, suchen nach „Obsidian Web Clipper", finden die offizielle Erweiterung (Icon gleich wie Obsidian, das Edelsteinmuster), klicken auf „Zu Chrome hinzufügen".

Schritt 2: Edge-Benutzer öffnen ebenfalls den Edge Add-ons Store, suchen nach „Obsidian Web Clipper", installieren. Edge kann auch die Version aus dem Chrome Web Store verwenden, beides funktioniert.

Schritt 3: Nach der Installation erscheint das Erweiterungssymbol in der oberen rechten Symbolleiste. Falls nicht sichtbar, klicke auf das Puzzlestück-Symbol (Erweiterungen) ganz rechts in der Symbolleiste, finde Obsidian Web Clipper und hefte es an die Symbolleiste an.

Das war’s zur Installation.


Grundeinstellungen

Klicke auf das Erweiterungssymbol in der Symbolleiste, um das Clipping-Panel zu öffnen. Unten rechts gibt es ein kleines Zahnrad-Symbol – das ist der Einstieg zu den Einstellungen. Gehe in die Einstellungen und konfiguriere die Grundlagen.

Verbinde deinen Obsidian-Vault

Das Erste in den Einstellungen ist, deinen Vault zu verbinden. Klicke im Bereich „Vaults" auf „Add vault", gib deinen Vault-Namen ein – den, der unten links in Obsidian angezeigt wird. Mein Vault heißt zum Beispiel „Obsidian Vault", also gebe ich das ein.

Hinweis: Beim ersten Verbinden öffnet Obsidian ein Autorisierungsfenster, das fragt, ob du Web Clipper den Zugriff erlauben möchtest. Wähle „Erlauben" – das ist eine normale Sicherheitsabfrage.

Standard-Speicherordner festlegen

Nachdem der Vault verbunden ist, lege den Standard-Speicherort fest.

Es wird empfohlen, einen eigenen Eingangsordner zu erstellen, z. B. 00-Inbox oder Inbox, der speziell für geclippte Inhalte gedacht ist. Wirf sie nicht direkt in das Vault-Root – mit der Zeit wird das Root unübersichtlich, und du weißt nicht, welche Notizen organisiert und welche unbearbeitete Webarchive sind.

Oberflächenübersicht

Nach der Einrichtung siehst du jedes Mal, wenn du die Erweiterung öffnest, drei Hauptbereiche:

  • Oben: Eigenschaftenbereich – erkennt automatisch den Titel der aktuellen Seite, URL, Autor (falls verfügbar)
  • Mitte: Inhaltsvorschaubereich – der Textkörper wurde in Markdown umgewandelt
  • Unten: Aktionsbereich – wähle aus, in welchen Vault und Ordner gespeichert werden soll, wähle eine Vorlage aus, dann klicke auf „Clip", um zu speichern


AI-Interpreter

Dies ist die Funktion, für die du in Web Clipper am meisten Zeit mit der Konfiguration verbringen solltest.

Was ist das?

Der AI-Interpreter ermöglicht es dir, Anweisungen in eine Vorlage zu schreiben, und beim Clipping klickst du auf die Schaltfläche „Zu Obsidian hinzufügen", und die KI verarbeitet den angegebenen Inhalt. Zum Beispiel: den gesamten Text zusammenfassen, Schlüsselwörter extrahieren, übersetzen … Was möglich ist, hängt davon ab, wie du den Prompt schreibst.

Diese Funktion benötigt einen API-Key. Wenn du bereits einen API-Key von OpenAI, DeepSeek oder Anthropic hast, kannst du ihn direkt verwenden; falls nicht, registriere dich auf der entsprechenden Plattform.

Konfiguration

Gehe zu den Einstellungen und suche den Tab „Interpreter".

Schritt 1: Wähle deine Modellquelle aus und gib den entsprechenden API-Key ein. Unterstützt werden OpenAI, Anthropic (Claude), Ollama (lokale Modelle) und weitere. Ich verwende DeepSeek – ich finde es am besten zum Zusammenfassen von Artikeln.

Schritt 2: Aktiviere „Enable Interpreter", schalte diesen Schalter ein.

Danach schreibe Prompt-Variablen in deine Vorlage, und beim Clipping erscheint im Erweiterungsfenster ein Interpreter-Bereich – klicke darauf, um ihn auszulösen.


Benutzerdefinierte Vorlagen erstellen

Web Clipper wird mit einer Standardvorlage ausgeliefert – sie funktioniert, ist aber nicht optimal. Nimm dir ein paar Minuten Zeit, um deine eigene Vorlage zu erstellen, und jedes Clipping wird viel angenehmer.

Warum Vorlagen anpassen?

Verschiedene Arten von Inhalten erfordern unterschiedliche Informationen:

  • Technische Artikel: Du möchtest Titel, Link, KI-Zusammenfassung, Textkörper
  • WeChat-Artikel: Du möchtest Titel, Autor, Veröffentlichungsdatum, KI-Zusammenfassung
  • Produktseiten: Du möchtest Titel, Preis, Link, kein Volltext

Eine Vorlage kann nicht alle Szenarien abdecken. Erstelle ein paar Vorlagen basierend auf dem Inhaltstyp und wähle beim Clipping die passende aus – sehr praktisch.

Zugriff auf Vorlageneinstellungen

Klicke in den Web Clipper-Einstellungen links auf „New Template", um eine neue zu erstellen. Ich bin faul und verwende nur eine.

Gib der Vorlage einen Namen, z. B. „Artikelsammlung", und beginne dann, den Inhalt zu schreiben.

Vorlagenvariablen

Web Clipper unterstützt zwei Arten von Variablen:

Seitenvariablen – werden automatisch von der aktuellen Webseite extrahiert:

Variable Beschreibung
{{title}} Seitentitel
{{url}} Aktuelle Seiten-URL
{{author}} Artikelautor (falls erkannt)
{{date}} Heutiges Datum
{{content}} Textkörper (Markdown-Format)

Interpreter-Variablen – rufen KI in Eigenschaften oder Inhalt auf:

Die Interpreter-Syntax ist unkompliziert: Setze die Anweisung, die du der KI geben möchtest, in doppelte Anführungszeichen, eingeschlossen in doppelte geschweifte Klammern, wie folgt:

{{"Summarize the full article without using an H1 heading"}}

Der innere Text ist deine Anweisung an die KI; das äußere Format {{" "}} sollte nicht geändert werden. Web Clipper erkennt diese Syntax und weiß, dass beim Clipping die KI zur Verarbeitung aufgerufen werden muss.

Sowohl Eigenschaften als auch Inhalt können es verwenden. Wenn du möchtest, dass ein Eigenschaftsfeld automatisch von der KI ausgefüllt wird, schreibe dieses Format in den Eigenschaftswert; wenn du eine KI-Zusammenfassung in den Inhalt einfügen möchtest, schreibe es dort ebenfalls.

Vollständiges Vorlagenbeispiel

Hier ist die Vorlage, die ich verwende:

Vorlageneigenschaften:

URL: {{url}}
Saved: {{date}}

Vorlageninhalt:


# Summary

Eine Sache ist erwähnenswert: Die Autorenzeile verwendet {{author|split:", "|wikilink|join}}, nicht das einfache {{author}}. Dies ist eine Variable + Filter-Kombination – zuerst wird das Autorenfeld durch Komma geteilt (manche Artikel erkennen mehrere Autoren), dann wird jeder Name in das Obsidian-Wiki-Link-Format [[Autorenname]] umgewandelt und schließlich wieder zusammengefügt. So kannst du nach dem Clipping auf den Autorennamen klicken, um zur entsprechenden Notiz zu springen. Du musst das nicht verwenden; {{author}} als Klartext auszugeben ist völlig in Ordnung, je nach Vorliebe.

Für den Inhaltsbereich habe ich nur zwei leere Zeilen gelassen: Themenkategorie/Link zum manuellen Hinzufügen verwandter Informationen, und # Zusammenfassung als Platzhalter für eine Überschrift – wenn du den Interpreter aktiviert hast, kannst du {{"Fasse den gesamten Artikel zusammen, ohne eine H1-Überschrift zu verwenden"}} darunter einfügen, um die KI den Inhalt automatisch ausfüllen zu lassen; wenn nicht, kannst du nach dem Clipping ein paar Sätze manuell schreiben.


Praxis: Einen Artikel clippen

Alle Einstellungen sind erledigt, jetzt benutzen wir es tatsächlich.

Angenommen, du siehst einen WeChat-Artikel, den du magst, und möchtest ihn speichern.

Schritt 1: Kopiere den Link und öffne ihn im Browser. Tippe im WeChat-Artikel oben rechts auf das Menü und wähle „Im Standardbrowser öffnen".

Schritt 2: Klicke auf das Web Clipper-Symbol. Das Edelstein-Symbol in der oberen rechten Symbolleiste, klicke darauf, um das Clipping-Panel zu öffnen.

Schritt 3: Überprüfe die Eigenschaften. Das Panel erkennt automatisch den Artikeltitel und die URL. Falls das Autorenfeld nicht erkannt wird, fülle es manuell aus. Das Datum ist heute, muss nicht geändert werden.

Schritt 4: Wähle eine Vorlage aus. Wähle die von dir erstellte Vorlage „Artikelsammlung". Wenn du den AI-Interpreter aktiviert hast, siehst du eine Dreh-Animation – die KI generiert die Zusammenfassung, warte, bis sie fertig ist.

Schritt 5: Klicke auf „Zu Obsidian hinzufügen". Eine Sekunde später öffne Obsidian, gehe zu deinem Eingangsordner, und der Artikel ist da. Titel, Link, Datum, KI-Zusammenfassung – alles vorhanden, und der Inhalt ist sauberes Markdown.


Zusammenfassung

Was du heute gelernt hast:

  1. Web Clipper ist die offizielle Browser-Erweiterung von Obsidian, die Webseiten mit einem Klick als Obsidian-Notizen speichert, mit sauberer Formatierung und automatischen Metadaten.
  2. WeChat-Artikel müssen im Browser geöffnet werden, um geclippt zu werden; sie können nicht im WeChat-Client verwendet werden.
  3. Der AI-Interpreter benötigt einen API-Key; einmal konfiguriert, kann er beim Clipping automatisch Zusammenfassungen generieren und Informationen extrahieren.
  4. Benutzerdefinierte Vorlagen = Eigenschaftsvariablen + KI-Prompts; verschiedene Vorlagen für verschiedene Inhaltstypen machen das Clipping effizienter.

Wichtige Punkte:

  • Erstelle einen eigenen Eingangsordner; wirf geclippte Inhalte nicht direkt in das Vault-Root.
  • Bring zuerst den Workflow mit der Standardvorlage zum Laufen, dann nimm dir Zeit für die Anpassung – Vorlagen können jederzeit geändert werden; loszulegen ist wichtiger.
  • KI-Zusammenfassungen sind ein Bonus, kein Muss – du kannst auch ohne API-Key normal clippen; du verzichtest dann nur auf den KI-Verarbeitungsschritt.