Designclou und SEO-Mod mittels einfachem JavaScript
Sie sind hier: Startseite » Webdesign
Wie heute schon berichtet arbeite ich gerade für einen Kunden an seinem Webdesign beziehungsweise programmier gerade das zugehörige Template. Das Content Management System dahinter ist einfach ein Wordpress, aber das tut an dieser Stelle nichts zur Sache.
Die Aufgabenstellung war, die “gelben Boxen” beim Überfahren eines Bildes zu deaktivieren. Nachdem ich herausgefunden hatte, dass damit die title- und alt-Tags bei den Bildern gemeint waren, war die Sache einfach.
So werden aktuell aus SEO-technischer Sicht zwar die Tags geschrieben, aber mit folgendem Code beim Seitenladen mittels JavaScript entfernt:
for(var i=0; i<document.getElementsByTagName('img').length; i++){
document.getElementsByTagName('img')[i].removeAttribute('title');
document.getElementsByTagName('img')[i].removeAttribute('alt');
}
Das mag zwar vielleicht den Google-Richtlinien widersprechen, aber heey, das hat mehrere Vorteile. Einerseits wird das Layout dadurch freundlicher und konnte dem Kundenwunsch entsprechend angepasst werden, andererseits wird vermieden, dass die Browserplugins für den 0815 Suchmaschinenoptimierer oder der konkurrierende SEO-Agentur nützliche Informationen preisgeben und letztlich ist es Google erstmal egal, da die Tags trotzdem gewertet werden.
Somit muss kein Plugin für das Wordpress Template extra gehackt werden, welches die Standardoption der Tags abändert und der dicke Bonus obendrauf ist, dass man dem barrierefreiem Web nicht im Wege steht. Denn gerade Browser die keine Bilder anzeigen können und JavaScript deaktiviert haben, ist es letztlich egal, denn hier sind alle Informationen enthalten, die gebraucht werden.
Der Beweis, dass Google dynamische Inhalte oder genauer Modifikationen am DOM des Browsers aktuell nicht interessiert, habe ich damals schon getestet. Von daher: einfach machen!
Zusätzlich habe ich für einfachen Bilderklau, über den Rechtsklick, das Kontextmenü sowie den Klick deaktiviert:
document.getElementsByTagName('img')[i].setAttribute('onmousedown', 'return false;');
document.getElementsByTagName('img')[i].setAttribute('oncontextmenu', 'return false;');
Das hilft zwar nicht gegen jemanden der sich auskennt, denn dagegen gibt es keine wirklich wirksame Methode, aber für den 0815-Webuser dürfte das ausreichen.
Effektiver Spamschutz mit JavaScript
Sie sind hier: Startseite » Webdesign
Für einen Kunden habe ich gestern folgende Methode implementiert um effektiv die Unternehmensadressen für Spambots unzugänglich zu machen.
Das Prinzip ist relativ einfach, denn der gewünschte E-Mail Link wird folgendermaßen gesetzt:
<a href="mailto:#" title="username">username --at-- example . de</a>
Damit funktioniert der Klick auf die E-Mail-Adresse noch nicht. Der gesetzte title-Tag verrät aber schon, dass aus diesem die E-Mail-Adresse erzeugt werden soll, sodass man doch mit einem Klick den Empfänger im zum Beispiel Microsoft Outlook schon gesetzt hat.
Es reicht jetzt am Seitenende folgendes JavaScript zu laden:
for(var i=0; i<document.getElementsByTagName('a').length; i++)
if(document.getElementsByTagName('a')[i].href.match(/mailto:/))
document.getElementsByTagName('a')[i].href =
'mailto:'+document.getElementsByTagName('a')[i].getAttribute('title') +'@example.de';
Wichtig ist dabei, dass der Code im Template am Ende eingefügt wird, am besten vor oder nach dem schließenden body-Tag.
In dem kurzen JavaScript-Snippet wird jeder Link auf der Seite betrachtet, falls er “mailto:” enthält, wird der Link mit “mailto:$title@exmaple.de” ersetzt. Wobei $title eben den Wert des gesetzten Attributs enthält.
Ziemlich einfach, oder?
Damit kann man als Webdesigner den Kunden einfach zufrieden stellen und das Layout bzw. Webtemplate schnell und effektiv absichern.
Google zur optimalen Seitenstruktur
Sie sind hier: Startseite » Webdesign
Vor einiger Zeit gab es ja schon die erste Site Clinic von Google und heute kam der zweite Beitrag zur Serie raus: Google Grants Site Clinic: Überarbeitung der Website-Struktur
Dabei wird die Struktur der Seite www.kenia-hilfe.com beleuchtet und wichtige Tipps gegeben.
Gut, dass man auf Title- und Meta-Tags achten soll ist nicht wirklich was neues, auch, dass man eine Sitemap verwenden soll, um Google das Crawling zu erleichtern beziehungsweise zu ersparen. Gerade bei der Empfehlung hier und dem Sitemap Generator hier sollte wohl jeder wissen, dass sich der Einsatz lohnt.
In dem Artikel wird auch nochmals auf 301-Weiterleitungen und die 404-Fehlerseiten eingegangen. Zu den 301 Redirects will ich nur kurz sagen, dass man Weiterleitungen auf jeden Fall so umleiten soll, außer man will ein Problem temporär lösen, aber bei einer nachhaltigen Änderungen muss der 301 verwendet werden.
Zu den 404-Fehlerseiten muss mehr gesagt werden. Einerseits sind die Seiten auch für den User verdammt sinnvoll. Gerade bei irgendwelchen kaputten Verlinkungen, umgezogenen Seiten und Vertippern, braucht der User einen Guide, der ihn an der Handn immt und zur gewünschten Seite bringt. Damit wird der Besucher nicht verloren und ob es ein Besucher oder ein Crawler ist, ist dabei egal.
Daher kontrolliert nochmals eure Fehlerseiten und wenn auch diese korrekt und gut arbeiten, dann könnt ihr jetzt verdient und entspannt in das Wochenende gehen.
Suche und Suchneuerungen im nächsten Jahr
Sie sind hier: Startseite » Webdesign
Überall werden zur Zeit Ausblicke auf das kommende Jahr 2010 gebloggt und teils mit wilden Spekulationen versehen.
Ich bin der Meinung, dass die Welt nicht zusammenbricht und die Suchmaschinen und -optimierungen nur besser werden (können).
So durfte ich heute bei Bill einen interessanten Post zum Google Patent lesen.
In diesem Patent steht mehr oder weniger drin, dass je nach Kontext auf ähnliche Suchbegriffe zurückgegriffen wird.
Es werden hier Synonyme oder Umschreibungen verwendet.
Zum Beispiel:
auto versicherung
zu
versicherung kfz
oder ähnliche Variationen.
Das hatte ich schon länger im Hinterkopf und verweise an dieser Stelle nochmals auf zwei “offene” Synonym-Datenbanken:
Probiert das mal aus und schaut wie ihr damit besser ranken könnt, als Tipp, schaut mal hier: Keyword Spinning.
Wie man schnelle Websites designt
Sie sind hier: Startseite » Webdesign
Die Entwickler drüben bei Yahoo! stellen regelmäßig gute Talks ihres YUI Theaters online.
Einer davon ist “Design Fast Websites” von Nicole Sullivan.
Schaut auf jeden Fall mal rein:
Designinspiration für Nonprofit- und kirchliche Organisationen
Sie sind hier: Startseite » Webdesign
Gerade eben war ich auf der Suche nach einem freien Weblayout für eine Nonprofit-Organisation und bin dabei auf drei tolle Auflistungen beim DESIGNM.AG gestoßen.
Zum einen gibt es die Liste von 40 Nonprofit Designs von denen mir am besten die Africa Tour 2008 gefällt.
Zum andern gibts bei vandelydesign die 50 und 35 besten Designs für kirchliche Organisationen.
Schaut euch die Vorlagen einfach mal an, die ein oder andere Idee kann man auf jeden Fall aufgreifen.
Sobald ich eines der Templates in Verwendung habe, berichte ich natürlich hier.