Anleitung & Tipps zur Bearbeitung von Links in WordPress Websites

Ein Basic für nahezu jede Website sind Links. Links erhöhen die Benutzerfreundlichkeit und verbessern das Suchmaschinen-Ranking. Daher ist es nicht verwunderlich, dass Verlinkungen mit WordPress so einfach wie nur möglich eingefügt werden können.

In diesem kurzen Artikel zeige ich dir Schritt für Schritt, wie du in WordPress einen Link einfügen kannst und ich gebe dir noch ein paar Tipps mit auf den Weg, was du für ein gutes SEO-Ranking beachten solltest. 

Link mit WordPress einfügen: Schritt für Schritt 

Falls du bereits mit der Erstellung deiner Website mithilfe von WordPress begonnen hast, kennst du sicherlich die Werkzeugleiste, in der du den Text bearbeiten kannst. Neben Schriftgröße, Fett, kursiv und anderen Funktionen findest du dort auch den Button: Link einfügen/ändern.

Um damit einen Link einzufügen, markierst du ein Wort oder eine Wortgruppe in deinem Webseiten-Text und klickst im Anschluss auf das Symbol „Link einfügen“. Auf diese Weise öffnet sich ein Dialogfenster.

In dieses Dialogfenster kannst du nun die gewünschte URL einfach eintippen oder hineinkopieren. 

Möchtest du einen internen Link anlegen. Das heißt, einen Link, der zu einem anderen Artikel auf deiner eigenen Website führt, kannst du auch einen Suchbegriff eintippen. Daraufhin listet dir das Dialogfenster alle Artikel zum Suchbegriff auf und du kannst dir den passenden Artikel auswählen.

WordPress überprüft umgehend, ob der eingegebene Link gültig ist, nachdem du auf den „Bestätigen“-Button getippt hast (Der blaue Pfeil, der nach Links zeigt.)

Links Bearbeiten in WordPress

Im selben Dialogfenster befindet sich ein Zahnrad. Dort findest du die Link Einstellungen. Klickst du auf das Zahnrad öffnet sich ein Pop-Up Fenster, in welchem du den jeweiligen Link wunschgemäß bearbeiten kannst:

(Screenshot hier)

Dort kannst du vor allem entscheiden, ob ein Link in einem neuen Tab geöffnet werden soll oder im bestehenden Tab. Dafür kannst du einen Haken am Feld „Öffne Link in einem neuen Tab“ setzen. 

Für externe Links macht es Sinn, dass der Link in einem neuen Tab geöffnet wird, sodass du den Leser nicht direkt von deiner Seite verlierst.

Den Link wieder entfernen

Solltest du den Link wieder entfernen wollen, musst du nur erneut den Link markieren und erneut auf den Button in der Werkzeugleiste klicken.

Tipps um einen Link in WordPress einzufügen

Link-Titel

Es ist einfach nutzerfreundlicher, wenn man den Links auf der Webseite einen Namen gibt, sodass der Nutzer weiß, was er dort genau anklickt. Diese Funktion wurde von WordPress mit der Version 4.2 entfernt, da es den Anfänger eventuell verwirrt hat.

Wenn du nun dem Link trotzdem einen Titel geben möchtest, empfehle ich dir das Plugin „Restore Link Title Field.“ Dieses stellt dir die entfernte Funktion wieder bereit.

Externe Links und interne Links öffnen

Wie in der Schritt-für-Schritt-Erklärung bereits erwähnt, solltest du die Einstellung „In neuem Tab öffnen“ sinnvoll nutzen. 

Externe Links sollten in einem neuen Tab geöffnet werden, sodass der Nutzer sich leicht auf deine Seite zurückfindet.

Interne Links sollten hingegen im selben Tab geöffnet werden, damit der Nutzer nicht durch unzählige offene Tabs verwirrt wird.

Links deutlich erkennbar machen!

Typisch für Links ist eine blaue Färbung und unterstrichener Text. SO erkennt der Nutzer direkt, dass es sich um einen Link handelt. Daher solltest du blaue Textfarbe und Unterstreichung in deinen Texten vermeiden, damit der Leser nicht fälschlicherweise normalen Text für einen Link hält.

Wie kann ich in WordPress ein Bild verlinken?

Wenn du ein Bild verlinken möchtest, klicke in deinem Artikel auf das Bild. Auch auf dem Bild öffnen sich sodann Bearbeitungssymbole. Klicke auch hier auf das Link-Symbol und im sich öffnenden Pop-up-Fenster kannst du den Link eingeben, auf den das Bild verlinken soll.

Links verbessern dein SEO-Ranking

Sowohl externe Links als auch interne Links sind ein Ranking Faktor von Google, der darüber entscheidet, wie hoch deine im der Google-Suche gerankt wirst. Wenn du auf der ersten Google-Seite landen möchtest, gehört dies zu einer von vielen SEO-Regeln, die du beachten musst.

Google prüft auf welche Seiten du verlinkst, ob diese thematisch relevant sind und ob Besucher diese Links klicken. Dabei solltest du unbedingt darauf achten, dass die Links wirklich natürlich sind. Das heißt: Baue so viele Links ein wie möglich, aber achte darauf, dass diese auch wirklich inhaltlich relevant sind.

Wenn du Hilfe beim Aufbau deiner Webseite brauchst oder deine bestehende Seite optimieren möchtest, kannst du unsere Agentur Pistis Media gerne kontaktieren.

Ich biete dir ein kostenloses Erstgespräch, in welchem wir zusammen herausfinden können, wie ich dich mit meinem WordPress SEO am besten bei deinem Webprojekt unterstützen kann. 

Sobald Du anfängst einen Blog zu schreiben oder eine Website zu erstellen brauchst Du Icons und Vektorgrafiken. Zu Beginn bis sich dein Projekt finanziell bemerkbar macht, bist Du gezwungen auf die Kosten zu achten. Dann kannst du kostenlose Icons oder kostenlose Vektorgrafiken nutzen.

Vermutlich hast Du schon festgestellt, dass es gar nicht so einfach ist lizenzfreie Icons und Vektorgrafiken zu finden.

Ich möchte hier dringend darauf hinweisen das es zu massiven Geldstrafen bei Verletzung der Lizenzrechte kommen kann. Um das zu Vermeiden und Dir die mühselige Such zu ersparen habe ich Dir einige Quellen für den kostenlosen Icons und Vektorgrafiken Download zusammengestellt.

Free Use bedeutet nicht, dass Du die Icons oder Vektorgrafiken nutzen kannst wie Du möchtest. Falls „Free for non- commercial use“ dabei steht kannst Du diese leider nicht benutzen. Einige erfordern einen Backlink, dass bedeutet das Du auf die Herkunft des Icons oder der Vektorgrafik mit einem Link zu Seite hinweisen musst. 

Kostenlose Icons 

(Hier gibt es kostenlose Icons und auch kostenpflichtige, teilweise sind auch Vektorgrafiken im Angebot) 

Icons8.com

Icons8 ist sehr geordnet gestaltet. Auf der Startseite steht Dir direkt ein Video zur Verfügung, dass Dir zeigt wie die Seite funktioniert. Außerdem verfügt die Seite über 8 verschiedene Sprachvarianten.  Grundsätzlich sind die Icons in drei Bereiche unterteilt. 

• Stil
• Kategorie
• Trends

Beim Download kannst Du zwischen verschieden Auflösungen und Datei Formaten auswählen. Falls Du sehr häufig Icons verwendest, ist es Dir möglich eigenen Sammlungen zu erstellen und diese per Mausklick von überall auf jeden Computer herunterzuladen. Dafür ist allerdings eine Anmeldung erforderlich. 

Adresse: https://icons8.com/icons

Iconfinder

Iconfinder ist sehr Umfangreich. Du kannst hier auswählen zwischen kostenlosen oder kostenpflichtigen Icons. Die Seite ist sehr übersichtlich aufgebaut und biete auch verschiedene Auflösungen an. Unterteilt sind die Icons in folgende Kategorien:

• Glyph
• Outline
• Flat
• Filled Outline

Wenn Dir die Icons irgendwann nicht mehr ausreichen, bietet Iconfinder in der Pro Version auch einen Icon Editor an. Mit diesem kannst Du dann Deine individuellen Icons erstellen. Natürlich stehen diese dann auch nur ausschließlich Dir zur Verfügung. 

Adresse: https://www.iconfinder.com

Kostenlose Vektorgrafiken

Vektorportal

Vektorportal bietet fast 600 völlig kostenlose Vektorgrafiken an. Hier findest Du von Fahrzeugen, Fahnen oder Züge, eben alles was Du brauchst. Die Seite ist recht einfach Aufgebaut, so dass sich jeder zurechtfindet.  Ein großer Vorteil für alle die nicht so gut Englisch können, die Seite gibt es auch auf Deutsch. 

Adresse: https://www.vectorportal.com/de

Freevector

Auf Freevector findest Du im Gegensatz zu Vektorportal z.B. auch 3D Vektorgrafiken, oder Vektorgrafiken zum Thema Web. Insgesamt sind es fast 1200 Vektorgrafiken.

Beachte bitte das sich Links auf der Seite von Shutterstock gesponserte Vektorgrafiken befinden. Diese sind kostenpflichtig.

Ansonsten sind alle die nicht mit dem Premium Siegel versehen sind absolut kostenlos und dürfen in der Liste für kostenlose Vektorgrafiken nicht fehlen.

Adresse: https://www.freevector.com/

Vector4free

Mit Vector4free haben wir hier eher den Designer-Vektorgrafiken-Laden.  Wenn Du au der Suche nach wirklich ausgefallenen Vektorgrafiken bist, wirst Du hier garantiert fündig.

Divi lässt sich auf viele unterschiedliche Weisen anpassen, was viele Vorteile mit sich bringt. So kannst Du benutzerdefiniertes CSS über mehrere Methoden hinzufügen und wir zeigen Dir in diesem Blog Artikel wie das genau funktioniert. Custom CSS bei Divi ist eine super Sache und bringt deiner Website noch mehr Individualität.

1: Inline-CSS

Du kannst wie auch in anderen Editoren Inline-CSS verwenden um Schriften, Abstände oder andere Eigenschaften festzulegen. Das geht schnell, hat aber auch seine Nachteile.

Besonders bei umfangreicheren Websites würde Inline-CSS die Seite unübersichtlich und aufwändig machen diese zu bearbeiten.
Angenommen die Website hat über 50 Inhaltsseiten und bei Überschriften wird Inline-CSS genutzt um bei Divi die Überschriften anders zu stylen. Dann müsste bei einer gewünschten Design Änderung man nochmals an alle Inline-CSS Sachen rangehen.

Einer der Vorteile von Inline-CSS ist, dass diese vom Caching ausgeschlossen sind. Wenn man auf automatisches Caching stellt, ist das nicht unbedingt ein Vorteil.

Um die Liste möglichst vollständig zu machen, habe ich auf die Möglichkeit mit Inline-CSS trotzdem aufgenommen.

2: Benutzerdefiniertes CSS im Design-Customizer

Diese Variante gefällt mir persönlich sehr gut. Denn hier lässt sich die Website quasi im Livemodus anpassen. Einfach in den Design-Customizer gehen und dann unten auf benutzerdefiniertes CSS klicken. Auf der linken Seite ist dann eine längere Eingabemaske zu sehen, bei der die ganzen CSS Anpassungen eingegeben werden können.

Legt man irgendwelche Anpassungen fest, wird auf der rechten Seite das Resultat live angezeigt. So sparst Du dir lästiges Speichern und Testen.
Bei den Kundenprojekten gehe ich oft so vor und packe die ganzen CSS Anpassungen in den Design-Customer um live arbeiten zu können.

Nach Fertigstellung kopiere ich die CSS Stylings und füge es in der CSS Datei meines Child-Theme ein. Dann noch ein paar schöne Kommentare mit dazu schreiben, damit es noch etwas übersichtlicher ist.

3: Registerkarte „Abschnitte, Zeile und Module“

Du hast das bei Divi bestimmt schon gesehen, dass es oben den Reiter „Erweitert“ gibt und dort hast Du die Möglichkeit eigene CSS Anpassungen direkt einzugeben.

Es gibt mehrere Felder und Du kannst die ID, CSS-Klassen, Vorher, Hauptelemente, After Elemente und auch benutzerdefiniertes CSS bei Divi nutzen. Die Vorher und Nachher Felder eignen sich für die Pseudoelemente die seit CSS3 möglich sind.

Bei den Zeilen kann jede Spalte individuell über CSS angepasst werden. Damit die CSS Anpassungen nur für eine bestimmte Zeile gelten soll, eignet sich diese Methode hervorragend. Was auch gehen würde, dass Du der Zeile eine CSS Klasse gibst und sie dann über die CSS Datei stylst.

4: Auf der Seite oder im Beitrag

Wenn Du den Divi-Builder nutzt, kannst Du bei jeder einzelnen Seite oder auch bei Beiträgen, Projekten und anderen Post-Types die den Divi-Builder zulassen, eignes CSS hinzufügen. Das ist sehr praktisch, wenn es bestimmte CSS Anpassungen nur für eine bestimmte Seite geben soll.

Rechts oben beim Divi-Builder findest Du diese Möglichkeit und nach dem Klicken auf das Einstellungen Symbol öffnet sich ein kleines Fenster. Dort kannst Du dann den CSS Code einfügen.

Leider ist das Eingabefenster sehr klein, sodass man viel scrollen und suchen muss. Daher kann ich diese Methode nicht so empfehlen. Wenn Du hier CSS Anpassungen vornimmst und die Seite exportierst, werden diese Anpassungen leider nicht übernommen.

5: Divi Design Optionsseite

Wenn Du auf Divi Optionen gehst, dann hast Du ganz am Ende eine große Box um dein benutzerdefiniertes CSS eingeben zu können. Nach einem Divi Update werden diese Änderungen nicht überschrieben.

Ein eigenes CSS-Stylesheet zu nutzen ist meiner Meinung nach die beste Möglichkeit. Sehr lange Dateien sind auch dann noch übersichtlich und nach einem Divi Update bleiben diese Änderungen alle erhalten.

Wenn Du wissen möchtest, wie Du einen Child Theme erstellst, dann findest du im Netz einige gute Anleitungen.