Direkt im HTML eingebundene E-Mail-Links werden von Bots abgegriffen und für Spam und Phishing missbraucht. Du musst also verhinden, dass deine E-Mail-Adresse so gestohlen wird. Dennoch willst du sie den seriösen Website-Besuchern anbieten.
Hier findest du eine Anleitung, wie du E-Mail-Adressen in deine Website einbinden und dennoch vor Bots schützen kannst.
Der initiale HTML-Code darf keinen mailto-Link und auch kein @-Zeichen enthalten. Stattdessen verwenden wir ein benutzerdefiniertes Element und statt dem @-Zeichen ein anderes Zeichen, das diesem bestenfalls optisch ähnlich ist.
<mail-to>ich◎example.com</mail-to>
Auf den ersten flüchtigen Blick lässt sich das ◎-Zeichen (bullseye) kaum von einem @-Zeichen (at) unterscheiden.
In deiner Javascript-Datei, die du möglichst weit unten im HTML-Code eingebunden hast, lässt sich die E-Mail-Adresse nach zwei Sekunden korrekt umwandeln und klickbar machen. Bots führen oft kein Javascript aus und wenn, dann warten sie keine zwei Sekunden, bis sie den HTML-Code lesen.
// Convert Email Address
document.addEventListener("DOMContentLoaded", (e) => {
const emails = document.querySelectorAll('mail-to');
for(const element of emails) {
const address = element.innerHTML.replace('◎', '@');
setTimeout(() => {
element.innerHTML = '<a href="mailto:' + address + '"> + address + '</a>';
}, 2000);
}
});
Nun funktionieren deine E-Mail-Links ganz normal und sehen auch korrekt aus.
Du hast es geschafft.
Falls du an weiteren News und Anleitungen von mir interessiert bist, abonniere meine Web-Push-Benachrichtigungen.