URL

Webseiten, Emailadressen sind die menschenlesbare Worte die das Internet und eigentlich unsere ganze Digitalisierung zusammenhalten. Der Uniform Resource Locator ist eine menschenlesbare Adresse einer Maschine. Maschinen die uns Nachrichten, Unterhaltung, persönlich addressierte Post, die Uhrzeit, Kataloginhalte des Fernhandels oder die Außentemperatur geben. Bei youtu.be gibts videos, bei wikipedia.org Wissen und an earth@klml.de bekomme ich meine Post. Von welcher Maschine mein gewünschter Inhalt dann technisch kommt, darum muss ich mich als Mensch meist nicht kümmern.

Bei URLs kann man so viel richtig, aber auch falsch, machen.

Sprechend, prägnant aber kurz

Ein Computer weiß genau welcher Inhalt zu www.youtube.com/watch?v=dQw4w9WgXcQ gehört, ein Mensch kann sich mit einer Nummer nur schwer etwas assoziieren und sich wieder merken. Was wir bei einem Klick auf example.org?p=pfifferlinge-sosse bekommen ist recht einleuchtend.
Der Grund warum es so viele Webseiten mit Nummern im Query-Teil gibt ist, dass Content Management System (CMS) ihre Inhalte in Datenbanken speichern, diese wiederum alles durch nummerieren. Oder der Inhalt wir mit einem hash identifiziert.
Daher ist es einfach wenn das CMS nur die Nummer oder den Hash aus der URL an die Datenbank weiterreichen muss. Aber der technische Aufwand lohnt sich nach "vorne" diese Nummern zu sprechenden Pfade übersetzen. Ein CMS muss aus Sicherheitsgründen sowieso die Nummern aus dem URL Query-Teil sanitizen. Außerdem sollte man eh static site generators nutzen, die sind schneller, sicherer, ressourcenschonender und speichern Inhalte schon in files, files mit schönen Namen.
Klar geht das nicht immer. Auf jedem Mastodon wäre es ein erheblicher Aufwand für jeden schnellen Tröööt noch ein sprechenden Titel für den URL path schreiben zu müssen, aber wenigstens nimmt Mastodon den usernamen lesbar mit auf (https://chaos.social/web/@klml/123456789). Aber ein shop kann schreiben example.org/kuechenablage-blau, ein Blog example.org/2022/04/01/scherz und Wikipedia schreibt eh schon de.wikipedia.org/wiki/Uniform_Resource_Locator.
Und wenn es eine Zahl in der URL sein muss, nehmt die 1 aufsteigend, xkcd.com/327/ kann man sich auch am Telefon zurufen, youtube.com/watch?v=dQw4w9WgXcQ nicht.

Jetzt ist das bei der Wikipedia recht leicht: Das Lemma hinter dem ...org/wiki/, das geht, immer. Bei blogs, Nachrichtenseiten oder shops kann man man den Titel ohne Artikel mit Bindestrichen anstatt Leerzeichen nutzen. Zusätzlich kann man Artikel weg lassen und Worte auf den Stamm reduzieren.
Das geht auch automatisch und können die meisten CMS auch, sollte man halt auch so konfigurieren.

Es ist für den menschlichen User ein wichtiges Merkmal um das Ziel einer URL besser einschätzen zu können. Daher sollen URLs möglichst kurz sein, aber mindestens so lang das sie sprechend und prägnant den Inhalt identifizieren.

Cool URIs don't change

Cool URIs don't change

w3.org - Cool URIs don't change sagt eigentlich alles.

Man sollte URLs möglichst nie ändern. Das bricht ander Leute Verlinkungen und Lesezeichen. Und wenn man schon mal eine URL ändern muss, bitte einen Redirect von der alten URL auf die neue setzen.

no shortner

Don't want no short URL

Kurz-URL-Dienste waren ein tolle Sache um ellenlange links in tweets zu pressen. Aber selbst auf Twitter muss man bei links kein Zeichen mehr sparen, denn links werden nicht mehr auf die Zeichenbegrenzung angerechnet.

Sonst kann man überall den, wenn auch langen, Originallink nutzen. Das hilft dem user dass er weiß wo es hingeht und man weiß. Vor allem auf welcher Website man ankommen wird, niemand kann nämlich sagen wo bit.ly/3t0jqc4 wirklich hin leiten wird.
Shortener Dienste sind security risks und wenn der eines Tages mal zu macht, sind alle deine links weg. Außerdem sind shortener meist nicht sprechend.

Oft werden shortlinks gebaut um auf die eigene Website zu verlinken, da wäre es doch an der Zeit über sprechende, prägnante und auch kurze URLs nachzudenken.

Die einzige sinnvolle Anwendung für kurze Weiterleitungen sind URLs die abgetippt werden sollen. Wenn die Seite unbedingt example.org/sommer-jazz-festival-2023 heißen soll, aber so nicht auf den Flyer passt, dann kann man eine Weiterleitung example.org/jazz einrichten. Sofern diese auf der gleichen Domain läuft, dass man wenigstens die Zielsite sieht. Wäre besser als QR Codes.

Zieldomain

Neben dem Linktext ist für den Leser auch wichtig zu wissen auf welche Seite der link hingeht. Es macht ja ein Unterschied ob der Klick auf der aktuellen Seite bleibt, auf einen leicht verständlichen Wikipediaartikel oder eine drölfzig-seitges akademisches pdf-Paper geht. In einem Teamwiki will man vielleicht wissen, geht der link auf die Herstellerdoku, die Firmen-CMDB, das Coderepo oder doch xkcd.com Außerdem hilft es beim tabed browsing, wenn man einen link im Hintergrund öffnet, später zu wissen wo der ungefähr her kam.

Da find ich Icons hinter den links ganz gut. Ich ab das hier auch: links die auf dieser Seite blieben, links auf andere Seiten haben ein schrägen Pfeil, wikipedia ein [WP] und Telefonnummern ein Icon.

Aber könnte man mehr machen, mastodon, twitter, insta, github.

Subdomain

Subdomains (also foo.example.com) sind viel besser als ständig neue domains zu kaufen (also foo-example.com). Neben der Tatsache das es billiger ist, bilden Subdomains eine logische Gliederung ab und zeigen eine organisatorische Verbindung ab.

Weil leider weiß ich halt nicht ob familienhandbuch.de eine Spamschleuder mit Retortentexten ist oder doch ein Staatsinstitut, das eigentlich auch die schöne Subdomain ifp.bayern.de nutzt.

Sinnvolle Ausnahmen sind:

  • secondary Nameserver
  • Status Seiten für alle anderen Dienste einer Organisation (z.B. is.uberspace.online), denn wenn ich ein Problem mit meiner Hauptdomain habe (DNS, Registrar, Verlängerung etc) ist es sinnvoll, diese Infos darüber unabhängig anbieten zu können.

Schema

Links gehen meistens auf andere Webseiten, aber URIs haben viel mehr sinnvolle Schemata

Protocol-relative URLs

Protocol-relative URLs (also //example.org anstatt https://www.example.org) sparen Zeichen im Sourcecode, vor allem wenn man URLs im fließenden Text nutzen will: [example.org](//example.org). Das https: stört doch den Lesefluss.

Und das wird auch anderswo genutzt, z.B. auf media.ccc.de im Footer.

/hierarchie/

Manchmal haben Funktionen oder Inhalte auf einer Website eine sinnvolle Hierarchie. Dazu sind Verzeichnisse im Path (z.B. example.com/foo/bar) da. Das können inhaltliche Kategorien sein (z.B. example.com/blog/something und example.com/team/jon). Funktionen, wie bei einem Webshop der Checkout (z.B. example.com/checkout/cart und dann example.com/checkout/payment). Oder bei Social Media Benutzer und deren Inhalte (z.B. sfba.social/@historyofpunkrock/109351306276541847).

Man braucht das nicht übertreiben, eine Website mit 5 Seiten braucht das nicht. Und man muss nicht sklavisch jede Form von Kategorie in ellenlange Pfade pressen. Aber wenn man eine Grundstruktur hat, sollte man die auch in der URL nutzen.

Wichtig wäre dass jedes dieser Verzeichnisse auch allein einen sinnvollen content liefert. Wenn man zum microblogbeiträge unter example.com/jon/posts/12345 liefert sollte auch example.com/jon/posts sinnvollen Inhalt und kein 404 liefern. Es macht für den User nämlich Sinn wenn er den klick-mich-hoch Button nicht findet, einfach an der URL was weg zu löschen.

Aber lasst unsinnige Hirachien raus. Ich mag die Wikpedia. Aber das /wiki/ in de.wikipedia.org/wiki/URL nervt.

fragment

Das Fragment ist die Nachspeise der URL. Auf sie kann man verzichten, sollt man aber nicht.

Hauptsächlich braucht man das fragment zum deeplinken auf einer Seite. Ich kann also direkt auf diesen Abschnitt verlinken: #fragment. Der Browser lädt die ganze Seite, scrollt aber gleich hier hin. Wenn ich aber den Kontext des Abschnitts lesen will, kann ich ganz nativ hoch oder runter scrollen.

Aber fragment kann noch mehr:

A fragment can always be added to a URL, but the fragment is never actually transmitted over the network so the remote server is not aware of it.

Daher kann man ein das fragment nutzen um mit curl globbing auch im output zu setzen. Oder man kann images mit css formatieren wenn man zwar css, aber kein html einsetzen kann, sondern nur plain markdown oder ähnliches (Disclaimer: ist von mir).

Linktext

Der Linktext ist Text, der in einem Hypertext-Dokument als Hyperlink fungiert. Der Text ist mit einem Verweis auf die Zieladresse verbunden.

Wie beim URL-Pfad sollte der Nutzer möglichst vor dem Klick wissen wo es hingeht. Es ist ein Unterschied ob man liest Wir erfahren in der Geschichte viele Wendungen oder Wir erfahren in der Geschichte der Stadt Köln viele Wendungen. Erstes könnte auch die Geschichte allgmein, oder die von Nordrhein-Westfalen sein.

Und bitte schreibt nicht klick hier. Das ist sogar "amtlich" verboten:

don't use "click here."

w3.org - link-text

Überhaupt

Das wichtigste aber ist: nutzt links.

The Semantic Web isn't just about putting data on the web. It is about making links, so that a person or machine can explore the web of data. With linked data, when you have some of it, you can find other, related, data.

Tim Berners-Lee: Linked Data

Auf viel zu vielen Webseiten liest mal linklose Texte. Eine Nachrichtenmeldung über eine neue Studie soll diese bitte auch verlinken. Auf einer Produktdetailseite eines Shops kann der link auf die Produktdetailseite des Herstellers sein. Auf einem Impressum mit Kammerpflicht kann der link auf die zuständige Kammer sein. Bei jeder Art von Blogging (auch micro-), nutzt links als Quelle. Es ist so bezeichnend, dass rund 30 Jahre nach dem Beginn des Online-Journalismus in Deutschland grundlegende Standards wie das Verlinken von Quellen immer noch nicht selbstverständlich sind – und von manchen vermeintlich seriösen Redaktionen sogar ausdrücklich abgelehnt werden. Den der Link ermöglicht es mir als Leser, mir ein eigenes Bild zu machen.

Verlinkt eure Hinweise in Mails und Chats. In Fehlermeldungen oder Featurerequests von Issuetrackern bitte links auf das kaputte oder gewünschte Element Beschreibt in Dokus nicht einen klickpfad, sondern schreibt den link hin.

Aber auch gern in der physischen Welt. Auf einem Produkt soll nicht nur auf die Hersteller Homepage, sondern auf die Produktdetailseite (z.B. example.de/fluxkompensator) verweisen. Man kann links auch mit auf Papier ausdrucken, dann vielleicht sogar als shortlink.

Die Kultur des Internets war einst geprägt vom Verlinken. Auf andere verweisen, sich austauschen und vernetzen. Das Design moderner Social-Media-Apps ist darauf optimiert den externen Link raus aus der App zu verhindern oder zumindest zu bestrafen. Allein deshalb unterstütze ich Mastodon.

social.tchncs.de/@doener