Die Sichtbarkeit und Erreichbarkeit aller Links auf einer Webseite ist wichtig für die SEO-Performance. Wusstest du, dass viele Links auf Webseiten versteckt oder nicht direkt in der initialen Seitenrenderung sichtbar sein können? Hier ist ein einfacher SEO-Tipp, der dir hilft, solche Links aufzudecken und sicherzustellen, dass du keine wertvollen Verbindungen übersiehst.Warum gibt es überhaupt nicht erkennbare Links?
Versteckte oder nicht sichtbare Links können aus verschiedenen Gründen auf einer Webseite vorhanden sein:
- Dynamisch geladene Inhalte: Inhalte, die erst durch Benutzeraktionen oder JavaScript geladen werden.
- Interaktive Elemente: Links, die in Schaltflächen eingebettet sind und durch JavaScript-Ereignisse ausgelöst werden.
- Design-Aspekte: Links, die aus Designgründen ausgeblendet oder schwer erkennbar sind.
Solche Links, die nicht über ein HREF geladen werden, sondern über ein JS Event ausgelöst werden, sind oft nicht sofort sichtbar und können leicht übersehen werden. Mit dem folgenden einfachen Skript kannst du beispielsweise im Rahmen eines SEO-Audits sicherstellen, dass alle Links und Schaltflächen auf einer Webseite hervorgehoben werden, einschließlich derjenigen, die dynamisch hinzugefügt werden.
Schritt-für-Schritt-Anleitung: Links hervorheben auf Websites
1. Seite öffnen und Entwicklertools aufrufen: Öffne die gewünschte Webseite in deinem Chrome-Browser. Drücke `F12` oder rechtsklicke auf die Seite und wähle "Untersuchen" aus, um die Entwicklertools zu öffnen.
2. Konsolenbereich auswählen: Klicke in den Entwicklertools auf den Tab "Konsole". Hier kannst du JavaScript-Code direkt auf der Webseite ausführen. Wenn du eine Eingabe machst, kann es erstmalig sein, dass der Browser dir eine Warnmeldung ausgibt und du erst bestätigen musst, dass du das Einfügen erlaubst (allow pasting)
3. Skript kopieren und einfügen: Kopiere das folgende Skript und füge es in den unteren Konsolenbereich ein. Drücke anschließend die Eingabetaste (`Enter`).
// Highlight initial links
document.querySelectorAll('a').forEach(link => {
link.style.backgroundColor = 'yellow';
link.dataset.initial = 'true'; // Mark these as initially present
});
// Highlight initial buttons
document.querySelectorAll('button').forEach(button => {
button.style.backgroundColor = 'red';
button.dataset.initial = 'true'; // Mark these as initially present
});
// Create a MutationObserver to detect changes in the DOM
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) { // Check if it's an element node
// Find any new <a> tags within the added node
node.querySelectorAll('a').forEach(link => {
if (!link.dataset.initial) { // Only highlight if not marked as initial
link.style.backgroundColor = 'pink';
}
});
// Find any new <button> tags within the added node
node.querySelectorAll('button').forEach(button => {
if (!button.dataset.initial) { // Only highlight if not marked as initial
button.style.backgroundColor = 'red';
}
});
}
});
}
});
});
// Start observing the document body for changes
observer.observe(document.body, {
childList: true,
subtree: true
});
4. Ergebnis beobachten: Nachdem du das Skript ausgeführt hast, werden alle Links (`<a>`-Elemente) auf der Webseite gelb hervorgehoben und alle Schaltflächen (`<button>`-Elemente) rot markiert. Neue Links und Schaltflächen, die dynamisch hinzugefügt werden, erhalten eine pinke (für Links) bzw. rote (für Schaltflächen) Hintergrundfarbe.
Falls deine Website bereits viele gelbe oder rote Elemente erhält, kannst du dir Farben der Hervorhebung im Skript einfach anpassen auf beispielsweise blau und braun.
Was passiert da genau?
Das Skript markiert zunächst alle vorhandenen Links und Schaltflächen auf der Seite mit einer Hintergrundfarbe. Danach erstellt es einen sogenannten MutationObserver, der kontinuierlich Änderungen im DOM (Document Object Model) überwacht. Wenn neue Elemente hinzugefügt werden, überprüft der Observer, ob diese Links oder Schaltflächen enthalten, und markiert diese ebenfalls entsprechend.
Durch diese Methode kannst du sicherstellen, dass keine wichtigen Links übersehen werden, unabhängig davon, ob sie initial sichtbar sind oder durch Benutzeraktionen oder Skripte hinzugefügt werden. Diese einfache, aber effektive Technik kann dir helfen, die Benutzerfreundlichkeit und SEO-Leistung deiner Webseite zu optimieren.
Dieses Skript haben wir uns nicht ausgedacht, sondern erstmalig gesehen bei Daniel Foley Carter in einem LinkedIn-Post. Der SEO-Tipp ist wirklich hilfreich, weswegen wir hierzu diesen Blogartikel erstellt haben. Andere Nutzer haben es genauso als sinnvoll erachtet und daraus sogar eine Chrome-Erweiterung für Linkhervorhebung erstellt.
Probier es aus und sieh selbst, wie viele Links auf deinen Webseiten zum Vorschein kommen, und welche davon erst durch JavaScript ausgelöst werden!