Bobaro V3.3.0 - Links mit Vorschau
Abbildung beispielhaft · Redaktionelle Darstellung

Neu bei Bobaro: Links werden zu echten Vorschau-Karten

📖 Hallo, ihr heldenhaften Bezwinger der weißen Seite und Fluchtreiter vor der Schreibblockade 🏇

Ab sofort reicht ein einfacher Zusatz an eurem Link, um daraus eine richtige Vorschau-Karte mit Bild, Titel und Beschreibung zu machen – so wie ihr es von Slack, Discord oder Twitter kennt. Und das Beste: komplett ohne Cookie-Banner, weil der Besucher-Browser nie direkten Kontakt zur Zielseite hat.

Drei Varianten zur Auswahl

Die kompakte Karte – ideal im Fließtext:

Der Spiegelstrich (En- und Em-Dash)Was ist ein Spiegelstrich (Gedankenstrich)? Der Spiegelstrich hat deutlich mehr Tradition, als manch einer vermuten mag. Im allgemeinen Sprachgebrauch...www.wattblicker.de

Die breite Karte – über die volle Breite:

Review: Convert & Compress • Images✨ Convert & Compress • Images ✨ ist eine App, die ich tatsächlich täglich mehrfach in meinem Workflow nutze. Sie ist aus meinem Arbeitsalltag nicht mehr...www.wattblicker.de

Der Textlink mit Hover-Vorschau – für dezente Stellen im Text, an denen keine große Karte passt: haltet einfach den Mauszeiger über diesen LinkEntspannungstechnik 4-7-8Die 4‑7‑8‑Atmung: Eine einfache Technik für schnelle Entspannung Die von Dr. Andrew Weil entwickelte 4‑7‑8‑Atmung gehört zu den leichtesten und zugleich...www.wattblicker.de und die Vorschau erscheint automatisch.

Mehrere Karten nebeneinander

Wer gleich mehrere Links empfehlen möchte, kann sie jetzt auch als Gruppe nebeneinander anordnen:


Gleiches ist auch in einer Gruppe mit zwei Karten möglich:

Auf dem Smartphone rutschen die Karten automatisch untereinander.

Was passiert wenn es kein OG-Bild gibt?
Interessant wird es auch, wenn der Betreiber seiner Seite beispielsweise das verfügbare OG-Image1 gelöscht hat. Wie sieht dann die Verlinkung aus? Auch daran habe ich natürlich gedacht.
Siehe hier:
Bobaro - Bloggen ohne Ballast - App-Entwicklung Owsianowski GbRWillkommen im Bobaro‑Supportforum! 😊 Hier kannst Du Fragen stellen und Wünsche äußern, zum einzigartigen Flat File Blogsystem, das von mir entwickelt und stetig verbessert wird.www.owsianowski.de
Wie du siehst, wird kein Broken Image2 angezeigt, aber ein deutlicher Hinweis darauf, dass momentan eben kein Bild zur Verfügung steht. Der Link funktioniert trotzdem.

In Tabellen

Diese Linkdarstellungen funktionieren auch in Tabellen.
Spalte 1Spalte 2
Karten-LinkReview: Subo - Abonnement TrackerMein Review zu Subo – Subscription Tracker Wer kennt es nicht: Man entdeckt eine neue App, probiert einen neuen Dienst aus – und plötzlich hat man wieder...www.wattblicker.de
Karte langEmojis unter Windows 11 nutzenIn diesem Mini-Tutorial möchte ich dir gerne zeigen, wie du unter Windows, ganz besonders bezogen auf das aktuelle Windows 11, Emojis in nahezu jedem...www.wattblicker.de
Hover-LinkLinktextAndroid Version 1.0 bis heuteAndroid kann auf eine lange Entwicklungsgeschichte zurückblicken, die mit Version 1.0 im Jahr 2008 begann. Seitdem wurden zahlreiche Versionen...www.wattblicker.de


Titel, Bild und Beschreibung werden serverseitig geholt und lokal zwischengespeichert – euer Besucher hat nie direkten Kontakt zur verlinkten Seite. Deshalb ist auch kein Klick-Consent nötig.

Vielleicht kennst du das von anderen Websites: Bindet eine Seite z. B. eine YouTube-Vorschau, eine Google Map oder ein Instagram-Bild direkt ein, verbindet sich dein Browser dabei automatisch mit den Servern von YouTube, Google oder Instagram – noch bevor du irgendwo geklickt hast. Genau deshalb siehst du dort meistens einen Cookie- oder Zustimmungs-Hinweis: Der Anbieter kann in diesem Moment schon Informationen über dich sehen (z. B. deine IP-Adresse).

Bei unseren Link-Vorschauen passiert das nicht. Stell es dir wie eine Art Fotokopie vor: Nicht dein Browser ruft die verlinkte Seite auf, sondern unser eigener Server macht das im Hintergrund – einmalig, lange bevor du die Seite besuchst. Titel, Bildchen und kurze Beschreibung werden dabei quasi "abfotografiert" und bei uns gespeichert. Wenn du den Artikel öffnest, bekommst du nur diese gespeicherte Kopie von unserem eigenen Server angezeigt – dein Browser hat zu keinem Zeitpunkt direkten Kontakt zur verlinkten Website.

Weil dabei nie eine Verbindung zwischen dir und der fremden Seite entsteht, gibt es auch nichts zu tracken und nichts, wofür du zustimmen müsstest. Genau wie beim Laden jeder ganz normalen Textseite auch.

Technisch passiert folgendes

  • Beim ersten Aufruf eines Artikels mit Link-Vorschau prüft der Server, ob für diesen Link schon eine gespeicherte Vorschau vorliegt.
  • Falls nicht: Der Server (nicht du!) ruft die Zielseite kurz im Hintergrund auf, liest Titel, Beschreibung und Vorschaubild aus und speichert alles lokal bei uns ab. Das Bild wird dabei automatisch verkleinert, damit es später schnell lädt.
  • Der Artikel selbst muss darauf nicht warten – er lädt sofort. Die Karte zeigt in diesem seltenen Fall ganz kurz eine Ladeanimation, bis Bild und Titel da sind.
  • Eine gespeicherte Vorschau bleibt 24 Stunden gültig. Danach holt sich der Server beim nächsten Besuch automatisch eine aktuelle Version – ebenfalls im Hintergrund, ohne dass der Artikel darauf warten muss.
  • Aufräumen läuft ganz ohne festen Zeitplan: Bei ungefähr jedem 50. Seitenaufruf schaut der Server nebenbei nach, ob irgendwo Vorschauen liegen, die seit über 7 Tagen nicht mehr gebraucht wurden (weil niemand den Artikel oder Link mehr aufruft) – und löscht nur diese.
  • Wird ein gelöschter Link später doch wieder interessant (z. B. weil ein alter Artikel erneut geteilt wird), merkt der Server das beim nächsten Aufruf ganz automatisch und holt sich die Vorschau einfach erneut.
  • Warum das genial ist: Es kümmert sich von ganz allein um sich selbst. Kein Cronjob3, kein manuelles Aufräumen, kein Wartungsaufwand – und trotzdem bleibt der Speicherplatz schlank, weil nur wirklich genutzte Links ihr Bild behalten. Alles läuft einfach nebenbei mit, angetrieben durch die ganz normalen Besucher der Seite.

Und sonst noch

Nebenbei haben wir auch den Strg + K-Link-Hover-Effekt überarbeitet, Tastatur-Shortcuts sehen jetzt aus wie echte Tastenkappen, und der App-Review-Button reagiert endlich auch beim Hovern. Kleine Dinge, die den Unterschied machen.
FunktionShortcut
Alles markierenStrg + A
KopierenStrg + C
AusschneidenStrg + X
EinfügenStrg + V
DruckenStrg + P


App-Review-Box

Auch hier gab es ja Änderungen an dem Button zum Installieren und dem unten in der Box aufgeführten Link.

Android App

ICE Notfallinfo Icon

ICE Notfallinfo

Sven Owsianowski

★★★★☆4.6 · 1,2K BewertungenKostenlosGesundheit
Installieren

Was ist, wenn Sie einen Unfall haben? Wer weiß, wer von Ihren Bekannten oder Verwandten zu informieren ist und wer weiß über Ihren allgemeinen Gesundheitszustand in einem solchen Fall Bescheid? ICE (In Case of Emergency = Im Notfall) diese drei Buchstaben sind dem Rettungspersonal ein Begriff.

ScreenshotScreenshotScreenshotScreenshotScreenshotScreenshot
↗ Bei Google Play ansehen

Keine externen Zugriffe — diese App-Informationen wurden manuell gepflegt. Beim Laden dieser Seite werden keine Daten von App-Store-Diensten oder Drittanbietern abgerufen.



Wissenswertes

Egal wo ihr im Text einen Link per HTML einfügt, da HTML dort erlaubt ist, könnt ihr die neue Klasse verwenden. Der Link verhält sich dann konsistent zu allen anderen Darstellungen in Bobaro.

Die Klasse lautet:
class="bobaro-md-link"

Das würde in einem HTML-Codeblock beispielsweise wie folgt aussehen:
HTML
<!-- Hier wird nun ein Link per Code eingefügt -->

<a href="https://www.bobaro.de" target="_blank" class="bobaro-md-link">www.bobaro.de</a>

<!-- target="_blank" sorgt dafür, dass der Link nicht im selben Tab geöffnet wird. -->
Hier jetzt der gerenderte4 Link mit der neuen Klasse:
www.bobaro.de

Hier der gleiche Link ohne die neue Klasse5:
www.bobaro.de

Viel Spaß beim Ausprobieren! Fragen, Anregungen und Kritiken sind gerne in den Kommentaren oder im SupportforumBobaro - Bloggen ohne Ballast - App-Entwicklung Owsianowski GbRWillkommen im Bobaro‑Supportforum! 😊 Hier kannst Du Fragen stellen und Wünsche äußern, zum einzigartigen Flat File Blogsystem, das von mir entwickelt und stetig verbessert wird.www.owsianowski.de willkommen.


Nachtrag zur Version 3.3.1

Heute geht es wieder Schlag auf Schlag. Das nächste Update ist auch schon verfügbar, die Version 3.3.1. Hier ist es jetzt ganz neu möglich, im Dashboard den Cache, den Zwischenspeicher für die zwischengespeicherten Bilddateien von den Verlinkungen zu löschen, wenn man erzwingen möchte, dass diese vorzeitig neu geladen werden müssen. Das ist nur eine optionale Möglichkeit, weil ich möchte, dass ihr die absolute Datensouveränität habt. Die Bilddateien werden natürlich automatisch gelöscht nach 24 Stunden und erneuert, sobald dann der nächste Besucher die Seite aufruft.
Dashboard - Cache leeren
Im Dashboard ganz unten links auf -Cache leeren- klicken

Dialogfenster
Dialogfenster zum Leeren des Cache-Speichers

Klickt hier auf , um den Zwischenspeicher auf dem Server vorzeitig zu löschen. Dies bietet sich z. B. dann an, wenn ihr wisst, dass der Betreiber ein neues OG-Image verwendet und ihr keine 24 Stunden auf die Erneuerung warten möchtet.


  1. og:image ist ein Open Graph-Metatag, der verwendet wird, um das Bild festzulegen, das angezeigt werden soll, wenn eine Webseite geteilt wird.
  2. Ein Broken Image ist ein Bild, das aufgrund eines Problems nicht korrekt angezeigt wird.
  3. Regelmäßige Hintergrundaufgabe auf dem Server, z.B. für Datensicherungen oder Wartung.
  4. Der Prozess der Umwandlung von Code in eine visuelle Darstellung.
  5. Klassen gruppieren Elemente und ermöglichen gezieltes Styling.

Die Inhalte auf dieser Website wurden unabhängig und nach bestem Wissen redaktionell erstellt. Sie dienen ausschließlich der Information und stellen keine Beratung oder Empfehlung dar.

Die Nennung von Marken-, Produkt- und Firmennamen erfolgt ausschließlich zu Informationszwecken. Es besteht keine Verbindung, Kooperation oder Empfehlung durch die jeweiligen Rechteinhaber.

Darstellungen, Vorschaubilder (Thumbnails), Grafiken sowie verwendete Screenshots dienen der Visualisierung und können vom tatsächlichen Erscheinungsbild abweichen. Die Screenshots wurden eigenständig erstellt und dienen der Veranschaulichung von Funktionen. Alle dargestellten Inhalte, Marken und Benutzeroberflächen gehören den jeweiligen Rechteinhabern. Änderungen durch Software-Updates oder unterschiedliche Versionen sind jederzeit möglich.

Einige verwendete Inhalte und Gestaltungselemente stammen von Drittanbietern und werden im Rahmen der jeweils geltenden Lizenzbedingungen genutzt.

Für Inhalte externer Quellen und verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.

Alle Angaben ohne Gewähr auf Vollständigkeit, Aktualität und Richtigkeit.
Über den Autor
Sven Owsianowski
Sven Owsianowski
Softwareentwickler, Autor & Dozent (Informatik)
Seit fast 30 Jahren baue ich Software, die aus echten Alltagsproblemen klare Lösungen macht – angefangen bei Bobaro, weiter über den QR‑Code Creator bis hin zu ICE Notfallinfo. Ich mag Technik, die verständlich bleibt, sicher funktioniert und Menschen wirklich hilft. Besonders ziehen mich KI, IT‑Sicherheit und digitale Werkzeuge an, die nicht nur clever sind, sondern nützlich. Auf wattblicker.de schreibe ich über Technik, die Freude macht statt Kopfzerbrechen.