Manchmal kann es passieren, dass ein langer Link im Beitrag oder auf einer Seite über den Rand hinausragt, sobald du deine WordPress-Website auf einem Smartphone anschaust. Der Link ist zwar anklickbar, aber nicht vollständig lesbar. Ich erkläre dir, in welchen Fällen das vorkommt, warum man lange URLs im Text richtig umbrechen sollte und wie du das Problem selber lösen kannst.
Das Problem mit langen Links im Text
Wer seine eigenen WordPress-Beiträge oder -Seiten auf einem Smartphone oder anderen schmalen Bildschirm (engl.: Display) betrachtet, dem ist vielleicht schon mal aufgefallen, dass manche eingefügten Weblinks über den Rand hinausragen.
Das sieht schlecht aus und kann bei wichtigen Texten wie den Datenschutzhinweisen, dem Impressum oder den Nutzungsbedingungen zu Missverständnissen führen. Betrachter können den „abgebrochenen“ Link nicht vollständig lesen und deshalb nicht nachvollziehen, um was für einen Link es sich eigentlich handelt.
Insbesondere lange ausgeschriebene Links (URLs) werden auf kleinen Displays oft abgehackt.
Hier eine Beispielvorschau (erstellt mit einem Gutenberg-Text-Block):
Warum ragen manche Links über den Rand hinaus?
Ursache für am Textrand abgehackte Hyperlinks ist der fehlerhafte Zeilenumbruch, der sowohl in Gutenberg-Blöcken als auch bei Nutzung des herkömmlichen Classic-Editors auftritt.
Sobald eine längere URL im Text keine oder nur wenige Bindestriche enthält, erfolgt kein automatischer Zeilenumbruch. Der eingefügte Link wird einfach über den Rand hinaus „weitergeschrieben“. Bei großen Bildschirmen mag man den Link vielleicht noch im Ganzen erkennen können. Bei schmalen Displays, wie es bei Smartphones der Fall ist, ist der Link jedoch nicht vollständig lesbar, da er zum Teil ins Leere führt.
Kann man nicht einfach Begriffe verlinken?
Aber sicher doch. 🙂 Sowohl der Classic-Editor als auch Gutenberg-Text-Blocks bieten die Möglichkeit, Links hinter einzelnen Begriffen oder auch ganzen Sätzen zu „verstecken“. Das ist Gang und Gebe bei der Erstellung von Texten im Internet und eindeutig zu empfehlen bei redaktionellen Beiträgen bzw. Blog-Artikeln.
Markiere dazu einfach irgendwelche Begriffe im Text und füge einen Link ein (zum Beispiel über Anklicken des entsprechenden Symbols „Link einfügen“ ). Sobald Besucher:innen auf den verlinkten Begriff klicken, werden sie zur entsprechenden Internetadresse weitergeleitet. Die kann sich innerhalb (intern) oder außerhalb (extern) deiner Website befinden.
TIPP: In einem gesonderten Artikel erkläre ich, wie man externe Links richtig verlinken kann in WordPress. Und unter dem Suchbegriff verlinken findest du weitere Tipps und Anleitungen.
Anders sieht es bei Rechtstexten aus. Im Impressum und anderen erforderlichen Website-Texten wird oft vom Gesetzgeber verlangt, dass Hyperlinks vollständig ausgeschrieben werden sollen (vermutlich, um diese einfacher recherchieren und überprüfen zu können).
Da Datenschutzhinweise oder Nutzungsbedingungen mancher Plattform- sowie Plugin-Anbieter aber unter viel zu langen URLs zu finden sind oder unter solchen, die kaum oder wenig Bindestriche beinhalten, kann es zu besagtem Problem kommen: Fügt man solche Links in den laufenden Text ein, können sie über den Rand hinausragen.
Möchtest du also auch auf Smartphones für ein einwandfreies Leseergebnis sorgen, solltest du manuell nachhelfen. Im Folgenden erkläre ich dir kurz, was mit HTML gemeint ist und anschließend, wie du meine Lösung umsetzen kannst.
Zum Glück gibt es noch das „gute alte“ HTML
HTML (Hypertext Markup Language) stellt quasi die Grundlage des World Wide Web (WWW) dar, in dem du dich gerade bewegst. Ohne HTML-Textauszeichnungssprache würdest du nur unstrukturierte Internetseiten vorfinden, ohne Absätze, ohne Einzüge, ohne Textformatierung, ohne irgendwas.
Tätigst du beispielsweise einen Rechtsklick irgendwo an leerer Stelle auf einer deiner WordPress-Webseiten und wählst „Seitenquelltext anzeigen“ o.Ä. aus, kannst du den gesamten Quelltext der Webseite einsehen, beginnend mit <!DOCTYPE html> und endend mit </html>.
Was nicht bedeutet, dass deine gesamte Website in HTML programmiert ist (wie es vor Einführung von WordPress bis ins Jahr 2002 teils noch üblich war; auch ich habe bis dahin HTML-Websites erstellt). Vielmehr ist es so, dass die zahlreichen Code-Zeilen, die du im Seitenquelltext vorfindest, mit HTML-Befehlselementen so strukturiert werden, dass alles an seinem richtigen Platz sitzt.
Das erklärte Ziel. Wir wollen, dass der viel zu lange Link im laufenden Text umgebrochen wird.
Die im obigen Vorschau-Beispiel dargestellte URL sollte nach Einsatz des HTML-Codes so aussehen:
Spätestens jetzt weißt du sicher, was ich meine und worauf es ankommt. Der sehr lange Link ragt bei Betrachtung des Textes auf einem Smartphone nicht mehr über den Rand hinaus und ist für jeden vollständig lesbar.
Das kannst du auch. Auf geht’s. Hier kommt die Anleitung. Einmal für den neuen Gutenberg-Text-Block und einmal für den bisherigen klassischen Text-Editor von WordPress.
Lange Links umbrechen mit Gutenberg-Text-Blocks
Arbeitest du mit Gutenberg-Text-Blöcken, gehe wie folgt vor:
- Erstelle einen Link, wenn noch nicht getan (genauer: füge dem Text einen langen Link mit wenig oder gar keinen Bindestrichen hinzu, indem du ihn ausschreibst, und verlinke ihn, zum Beispiel über das Symbol „Link einfügen“ ).
- Wechsel über Ansicht anpassen (klicke auf das entsprechende Symbol ) von Visueller Editor zu Code-Editor (klicke im Auswahlmenü auf „Code-Editor“).
- Navigiere im Text-Code zu dem langen Link, der geändert werden soll.
- Füge direkt vor dem einleitenden <a href …>-Tag folgendes HMTL-Attribut ein:
<span style="word-break: break-all;"> - Füge direkt nach dem abschließenden </a>-Tag folgendes HTML-Attribut ein:
</span> - Speichere deine Eingaben, indem du auf den WordPress-Button Aktualisieren klickst. Das war’s.
- Nun überprüfe in der Beitrags-Ansicht von WordPress, ob der Link korrekt dargestellt wird.
Um auf dem Desktop herauszufinden, ob der Link auf einem Smartphone nicht über den Rand hinausragen wird, klicke ganz oben im Browser auf das Symbol „Verkleinern“ und ziehe den rechten Rand mit der Maus so weit als möglich nach links.
Ist alles okay, kannst du die Browser-Ansicht wieder „maximieren“ und die Beitrags-Ansicht in WordPress schließen.
BEACHTE: Sollte sich vor dem einleitenden <a href>-Tag und nach dem abschließenden </a>-Tag ein <p> bzw. </p>-Tag (für Absatz) befinden, lösche die p-Tags und setze sie direkt vor dem einleitenden <span style …> und nach dem abschließenden </span>-Tag ein! Ansonsten wird der Link fehlerhaft dargestellt.
Damit du diese und nachfolgende Anleitung besser nachvollziehen kannst, hier eine Übersichts-Darstellung (zur Vergrößerung klicke einfach das Bild an):
Lange Links umbrechen mit dem Classic-Editor
Arbeitest du mit dem klassischen Text-Editor, gehe wie folgt vor (beachte diesbezüglich auch die Erläuterungen und die grafische Darstellung nach Punkt 7 im vorherigen Abschnitt zum Gutenberg-Text-Block):
- Erstelle einen Link im „Visuell“-Modus, wenn noch nicht getan (füge einen langen Link mit wenig oder gar keinen Bindestrichen ein, indem du ihn ausschreibst, und verlinke ihn, zum Beispiel über das Symbol „Link einfügen“ ).
- Wechsel in den „Text“-Modus (klicke auf den Tab bzw. die Registerkarte „Text“).
- Navigiere im Text-Code zu dem langen Link, der angepasst werden soll.
- Füge direkt vor dem einleitenden <a href …>-Tag folgendes HMTL-Attribut ein:
<span style="word-break: break-all;"> - Füge direkt nach dem abschließenden </a>-Tag folgendes HTML-Attribut ein:
</span> - Speichere deine Eingaben, indem du auf den WordPress-Button Speichern oder Aktualisieren klickst. Das war’s.
- Nun überprüfe in der Beitrags-Vorschau von WordPress, ob der Link korrekt aussieht.
Um auf einem PC-Bildschirm herauszufinden, ob der Link auf einem Smartphone über den Rand hinausragt oder nicht, klicke ganz oben im Browser auf das Symbol „Verkleinern“ und ziehe den rechten Rand mit der Maus so weit als möglich nach links.
Wird der Link korrekt dargestellt, kannst du die Browser-Ansicht wieder „maximieren“ und die Beitrags-Vorschau in WordPress schließen.
Hat alles geklappt, wird der Link nun umgebrochen dargestellt und ragt auf schmalen Displays, wie bei Smartphones, nicht mehr über den Rand hinaus. Somit sind lange ausgeschriebene Links in (Rechts-) Texten, ob die URLs wenige oder gar keine Bindestriche enthalten, nachvollziehbar und für jeden vollständig lesbar.
Namira McLeod. Administratorin und Gründerin von ROCK DEINEN PC (und WP). Arbeit mit WordPress seit 2003, mit Windows und im Internet seit den 1990ern. Alle meine Tipps und Anleitungen sind praxiserprobt, damit du dein Vorhaben möglichst einfach und schnell umsetzen kannst. Helfen sie dir weiter, freue ich mich über einen Obolus. Solltest du andere Erfahrungen gemacht haben, freue ich mich über deinen Hinweis.
