Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)
Code-Vorlage
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

In Webflow besteht die Herausforderung, externen Links individuell "rel" und "nofollow" Attribute zuzuweisen, was zeitaufwendig und besonders bei Rich-Text-Elementen problematisch ist. Zwei automatisierte Lösungen bieten sich an:

Zunächst kann durch JavaScript-Code automatisch "rel=nofollow" zu externen Links in Rich-Text-Elementen hinzugefügt werden. Der Code erkennt, welche Links in neuen Tabs geöffnet werden sollen, und ergänzt das gewünschte Attribut. Dies erspart manuelle Eingriffe und erleichtert die Umsetzung auf bestimmten Seiten.
Die zweite Methode verwendet ebenfalls JavaScript, um basierend auf spezifischen URL-Fragmenten automatisch "rel=nofollow" oder "rel=dofollow" hinzuzufügen. Dies funktioniert, indem "#nofollow" oder "#dofollow" am Ende der Link-URL hinzugefügt wird. Der Code sorgt dafür, dass diese Attribute entsprechend gesetzt werden, ohne manuelles Eingreifen.

Beide Lösungen vereinfachen die Handhabung von Attributen für externe Links auf deiner Website. Dies optimiert die Behandlung von Suchmaschinen-Robots und spart wertvolle Zeit.

Ich habe dir zwei Anleitungen in Textform mit verwendetem Code in diesen Webflow-Trick zusammengefasst.

Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Tabellen für Rich-Text Inhalte visuell erstellen
Freischalten
Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Slider bei einem bestimmten Slide starten lassen
Highlight
Freischalten
Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)
Freischalten
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Linien animieren (wenn im Viewport)
Kostenlos
Freischalten
SVG Linien animieren (wenn im Viewport)

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Kostenlos
Freischalten
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)
Kostenlos
Freischalten
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Eigenen Audio Player komplett in Webflow stylen
Kostenlos
Freischalten
Eigenen Audio Player komplett in Webflow stylen

Custom Audio-Player um auf deiner Webseite Audio-Dateien anzuziegen und zu stream. Der Player kann nach Wunsch in Webflow gestaltet werden.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Schließen-Button stylen
Freischalten
Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern
Freischalten
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)
Freischalten
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Lazy Loading Background Videos in Webflow
Highlight
Freischalten
Lazy Loading Background Videos in Webflow

Viele Background Videos auf einer Website führen zu einer hohen Netzwerknutzlast und schlechteren Page-Speed Score. Dieser Code hilft dir dabei, Videos erst zu laden, sobald sie im Viewport des Seitenbesuchers sind.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung