Usability: DAU-kompatibler Schutz der E-Mail Adresse
Der permanente Zuwachs von Spam-Mails hat Webmaster dazu gebracht, die E-Mail Adressen auf Webseiten zu verstümmeln. Wo früher ein schöner [code lang=“javascript“]<a href="mailto:[EMAIL]"…>[/code] verwendet wurde, liest man heute Sachen wie service {ät} unseredomain {punkt} com
– das schützt vielleicht vor Spam Bots (wobei gute Systeme auch eine solche Syntax knacken können), ist aber Usability-technisch ein Graus – sowohl für Heavy-User, die die E-Mail Adresse rauskopieren und im Mail Programm korrigieren müsen, also auch für die DAUs – die gar nicht erst kapieren, dass es sich dabei um eine E-Mail Adresse handeln soll.
Kleine Anekdote am Rande – die Fakultät der BWL der Uni Marburg hatte auf ihren Seiten die oben beschriebene „Anti-Spam-Syntax“ verwendet, gleichzeitig aber einen Hyperlink mit mailto:
verwendet (wo natürlich die E-Mail als Klartext drinstand) – der Nutzen der Anti-Spam-Syntax wurde also ad absurdum geführt, weil die Bots natürlich im Source-Code der Page schauen, wo sie dann die Mail im Klartext fanden. Ich habe sie damals auf diese Problematik hingewiesen und gerade habe ich noch mal geschaut, was daraus geworden ist: Personal der Uni Marburg (BWL) – das ist dann Usability-technisch der Supergau.
Wie macht man es richtig?
Im wesentlichen kenne ich fünf Varianten die E-Mail Adressen auf Webseiten halbwegs vor Spambots zu schützen, wovon allerdings nur 2 halbwegs sicher sind. Hier eine Übersicht inkl. meiner Einschätzung zu Sicherheit und Usability nach Schulnoten.
Methode | Sicherheit | Usability | Wartung |
---|---|---|---|
„Anti-Spam-Syntax“(hallo {at} domain [dot] de) |
5 | 4 | 1 |
E-Mail als Grafik einbinden | 2 | 6 | 5 |
Mail Encryption (Hexdecimal / HTML Entities – Beispiel) | 5 | 1 | 4 |
Email als iFrame + Sperrung durch robots.txt | 6 | 1 | 4 |
Javascript Methode | 2 | 1 | 2 |
Unterm Strich ist also die Lösung via Javascript die beste. Also folgt nun eine Anleitung wie man diese umsetzt.
Mit Javascript E-Mail Adressen verschlüsseln
Das Prinzip ist sehr simpel: Man hat eine Javascript-Funktion, die an den gewünschten Stellen die E-Mail Adresse einfügt. Dabei wird die Adresse natürlich nicht als Klartext übergeben, sondern nur die Bestandteile. Das ganze sieht dann so aus:
[code type=“javascript“]
<script type="text/javascript" charset="utf-8">
//<![CDATA[
function email(ending, domain, name) {
document.writeln(‚<a href="mailto:’+name+’@’+domain+‘.’+ending+’">’+name+’@’+domain+‘.’+ending+'</a>‘);
}
//]]>
</script>
[/code]
Diesen Code packt man dann am Besten in eine separate Javascript Datei, die man dann in alle Unterseiten lädt.
An der Stelle, an der man eine E-Mail ausgeben möchte, ruft man dann einfach folgenden Code auf:
[code type=“javascript“]
<script type="text/javascript" charset="utf-8">
//<![CDATA[
email("com", "hjacob", "kontakt");
//]]>
</script>
[/code]
Und schon erscheint die E-Mail Adresse inklusive passenden mailto-Hyperlink. Clean, secure und easy.
PS: Am Besten die Javascript-Funktion noch etwas verändern – umso unterschiedlicher, desto sicherer. So kann man ja zum Beispiel den Domain-Namen nicht als Variable verwenden, sondern hardcoded in die Funktion schreiben (macht natürlich nur Sinn, wenn man wirklich nur E-Mail Adressen von dieser einen Domain anzeigen will).
Was Webmaster bei Google Instant Previews beachten sollten
Heute morgen gab es an dieser Stelle eine Vorstellung des neuen Google Features „Instant Previews„. Heute möchte ich nun auf die Konsequenzen dieses Features für Webmaster eingehen.
Snippets: Ja oder nein?!
Für Webseitenbetreiber ändert sich durch Google Instant Previews mehr als zuletzt bei Google Instant Search (Suchergebnisse werden direkt beim Tippen angezeigt). So kann der Webmaster entscheiden, ob er in seinem Google Screenshot sogenannte Snippets haben möchte oder nicht. Die Snippets sind orange umrandete Texteinschübe in den Screenshots, die hervorheben, wie die gesuchten Keywords auf der Seite vorkommen. Dies ermöglicht den Suchenden noch besser zu validieren, ob die Website die gewünschten Infos beinhaltet. Gleichzeitig sehen die Snippets aber nicht besonders schön aus und zerhacken den optischen Gesamteindruck der Websiten-Vorschau. Daher gibt Google den Webmastern die Wahl, ob sie Snippets für ihre Seite aktivieren oder deaktivieren möchten.
Googles neue Suchmaschine für E-Commerce Shops
Google hat eine neue Lösung für E-Commerce Betreiber herausgebracht, mit deren Hilfe der Produktkatalog eines Shops gezielt durchsucht werden kann. Der neue Service namens Google Commerce Search gesellt sich somit zu Google Site Search, welche quasi das gleiche für Content-lastige Seiten bietet. Allerdings bietet Google Commerce Search einige neue Features. Man kann die Suchergebnisse ähnlich wie bei Amazon oder Ebay eingrenzen, also zum Beispiel nach Kategorie, Preisspanne oder Farben.
Realisiert wird der Service basierend auf der Merchants API, die als Datenquelle fungiert. Die Shop Betreiber müssen dann zusätzlich für die neue Commerce Search Nutzungsgebühren zahlen, die sich aus der Anzahl der Produkte und der Anzahl der Suchanfragen berechnet. Angeboten wird der Service allerdings vorerst nur in englischer Sprache. Mittels etwas mehr Aufwand und über eine von Google angebotene API ließe sich aber auch ein deutsches Interface bauen.