Webdesign-Tipps Spezial


 

Grafiken und Bilder für Google Bildersuche optimieren

Damit die Bilder einer Website besser im Suchergebnis der Google Bildersuche erscheinen, kann der Webdesigner diese mit einigen einfachen SEO-Maßnahmen optimieren. Hier gelten eigentlich die gleichen Regeln, die auch sonst im Webdesign bei der Suchmaschinenoptimierung gültig sind (siehe Tipps zur Suchmaschinenoptimierung). Zusätzlich gibt es dann noch einige Besonderheiten speziell für die Bilder.


1. Bilder für die Bildersuche optimieren

  • Auflösung mindestens 200 x 300 Pixel
  • Auflösung maximal 1280 x 1020 Pixel
  • gerne ein breites Bildformat (4:3 oder mehr) verwenden, um aufzufallen
  • Suchbegriffe im Dateinamen unterbringen (bild1.jpg und Ähnliches unbedingt vermeiden)
  • Gebräuchliche Dateiformate verwenden (jpg, gif, png, bmp)


2. Bilder Suchmaschinen-gerecht einbinden

  • Alt-Attribute verwenden
  • Title-Attribut verwenden
  • einfache Verzeichnisstruktur verwenden
  • Gerne beschreibenden Text unter Verwendung der Suchbegriffe in der Nähe des Bildes einsetzen


3. Administrative Arbeiten

  • Indizierung des Images-Verzeichnisses in robots.txt erlauben
  • image Sitemap erstellen und bei Webmaster-Tool einreichen oder in robots.txt verlinken (sitemap: http://www.meinesite.de/meine-image-sitemap.xml)


4. Geduld, Geduld, Geduld...

  • Nach einigen Tagen hat Google die Bilder gefunden.

CSS-Tipp: negativer z-index

Mit der CSS-Eigenchaft z-index wird im Webdesign die Reihenfolge festgelegt, in der sich überlappende Elemente eines html-Dokumentes dargestellt werden. Dabei überlappt das Element mit dem höheren z-index dasjenige Element mit dem niedrigeren z-index. z-index=3 wird also von z-index=5 überlagert oder verdeckt.

#container{
z-index: -1;
}

Hier sind laut CSS-Doku auch negative Werte möglich, wobei dies von allen Browsern unterstützt werden soll (mehr Infos zum z-index z. B. im selfhtml-Wiki).

Meine Webdesign-Praxis hat allerdings ergeben, dass es hier mit einigen Browsern Probleme geben kann. In einem Beispiel war ein Bild in einem DIV-Container platziert, dem ein negativer z-index zugewiesen war. Hier funktionierte der Link des Bildes auf dem Safari-Browser nicht mehr, indem das Bild einfach nicht sensitiv für den Mauszeiger war. Nach Änderung des z-index auf einen positiven Wert funktionierte der Link dann wieder.

#container{
z-index: 1;
}

Seither verwenden wir den negativen z-index nicht mehr.

Umlaute bei Schriftart Bebas Neue

bebas_neue.gifBei einem Joomla Webdesign-Projekt wurde für die Überschriften die Schriftart "Bebas Neue" ausgesucht. Diese serifenlose Open Type Schriftart besteht komplett aus Versalien und ist ziemlich schick. Sie kann auf der Website von FontSquirrel heruntergeladen werden.

Laut Character Map von FontSquirrel sollen in dieser Schriftart auch Zeichen für Umlaute enthalten sein. Umlaut-Darstellung ohne korrekt geladen ZeichensatzNur wurden diese auf unserer Projektseite online dann nicht korrekt angezeigt; das "ä" sieht doch sehr nach Kleinbuchstabe aus und hat wenig Ähnlichkeit mit den anderen "Bebas Neue"-Zeichen. So liegt also die Vermutung nahe, dass die Umlaute nicht geladen wurden.

Bei FontSquirrel unter @font-face Kit findet man eine Möglichket, das Font-Face-Kit für verschiedene Sprachen zu generieren und herunterzuladen; hier habe ich nun im Drop-Down "Don't Subset" ausgewählt, damit die Schriftzeichen inklusive Umlaute und Sonderzeichen für alle Sprachen eingebettet werden. Nach Klick auf den Button "Download @font-face Kit" wird die Font-Datei als zip-File heruntergeladen. Dieser muss lokal entpackt werden und die enthaltenen Dateien auf den Webserver geladen werden. In meinem Fall in das Verzeichnis root/template/meinTemplate/fonts/BebasNeue.

Umlaut-Darstellung mit korrekt geladen ZeichensatzNach Speicherung der Dateien auf dem Webserver und anschließender Aktualisierung der Browseransicht werden die Umlaute dann korrekt angezeigt; das "Ä" erscheint jetzt korrekt in Versalien und im kantigen Look der Bebas Neue.

 

Sie benötigen professionelle Ünterstützung bei Ihrem Webdesign-Projekt? Schreiben Sie mir einfach und ich berate Sie gerne!

.

Tipps zur Suchmaschinenoptimierung (SEO)

Suchmaschinenoptimierung ist nichts, was man im Webdesign mal soeben nebenbei erledigen kann, sondern ein lang andauernder Prozess, der eigentlich niemals abgeschlossen ist. Hier habe ich einige wichtige Maßnahmen zur Suchmaschinen-Optimierung aufgelistet. Diese Liste erhebt keinen Anspruch auf Vollständigkeit und wird nach und nach ergänzt.

 

OnPage Optimierung

On page Optimierung findet auf der Website, also „On the Page“ statt. Dies meint alle Maßnahmen, die man direkt mit der richtigen Gestaltung der Website durchführen kann.

 

Schlüsselwörter/Keywords festlegen

Dies ist eine sehr aufwendige, aber auch sehr lohnenswerte und sicherlich auch die wichtigste Arbeit. Für jede einzelne Seite der Website müssen die Keywords oder Schlüsselwörter festgelegt werden. Dies geht gut in einem Brainstorming, in das man auch Kunden und Fach-ferne Personen einbeziehen sollte, um möglichst passende Begriffe zu finden. Hier sollen gerne auch die „unmöglichsten“ Begriffe, Wortgruppen oder kurzen Sätze notiert werden. Aus den so entstandenen Keyword-Listen werden anschließend die 5 bis 20 wichtigsten Keywords selektiert.

 

Title

Der Titel einer Seite wird im Kopfbereich des Seitenquelltextes im Title Element angegeben. Dieser Titel steht z. B. neben dem Favicon in der Registerkarte des Browsers, in den Lesezeichen und bei Google als klickbare Überschrift. Bis zu ca. 65 Zeichen werden bei Google angezeigt, der Rest wird abgeschnitten.

 

Meta Description

Dies ist die Beschreibung der Seite. Sie wird bei Google unter der URL bzw. dem Title abgebildet. Die Description darf maximal 255 Zeichen inkl. Leerzeichen enthalten, wovon die ersten 150 Zeichen bei Google angezeigt werden. Gut ist ein kurzer, prägnanter, beschreibender Text, in dem die wichtigsten Keywords bzw. Schlüsselworte zu dieser Seite untergebracht sind.

 

Meta Keywords

Schlüsselwörter (einzelne Wörter, Wortgruppen oder ganz kurze Sätze) zu dieser Seite. Klein geschrieben, Komma-separiert, max. 20 Stück (siehe Keywords festlegen).

 

Interne Verlinkungen

Mit einer guten Navigation bzw. einem guten Menü ist die interne Verlinkung bereits gewährleistet. Hierbei sollte auf grafische Schaltflächen lieber verzichtet werden, da diese bei ausgeblendeten Grafiken nicht mehr lesbar sind. Kann nicht auf Grafiken verzichtet werden, so müssen dringend die Alternativ-Texte zugewiesen werden. Bei einer Navigation mit Textlinks kann der Title eines Links ebenfalls mit Keywortern gerne auch aus kleinen Sätzen gespickt werden. Da der Title als Mouseover-Text erscheint kann hier zusätzliche Information für den Benutzer untergebracht werden.

 

Meta Author

Hier sollte der Firmenname bzw. die Firmenbezeichnung untergebracht werden

 

Schlüsselwörter in Texten hervorheben

Hervorgehobene Texte erhalten bei Suchmaschinen eine besondere Gewichtung. Möglich wäre z. B. fett, kursiv oder als Aufzählung. Schlüsselwörter die verwendet werden sollten siehe Keywords festlegen.

 

Schlüsselwörter in Alt-Tags und Title-Tags

Keywords können auch gut in den Alt-Texten von Bildern und im Title von Links untergebracht werden, diese erscheinen z. B. auch, wenn man mit der Maus über das Bild bzw. den Links fährt (Mouseover). Hier können gerne auch ganze Sätze verwendet werden.

 

Duplicate Content vermeiden

"Duplicate Content" bedeutend nichts anderes als "Doppelter Inhalt" und meint, dass zwei identische Texte unter zwei verschiedenen URLs im Internet verfügbar sind. Dies führt bei Suchmaschinen im besten Fall zur Abwertung, im schlimmsten Fall zum Ausschluss. Beispiele:

  • www.meineSeite.de und meineSeite.de (kann durch einen Eintrag in der htaccess-Datei verhindert werden)
  • Normalansicht und Druckansicht (die Druckansicht sollte für Robots gesperrt werden)
  • Gleiche Website unter zwei verschiedenen Domains (keine Umleitung von einer Domain auf die andere (außer permanent Redirect)

Mehr Info dazu im Beitrag "Doppelten Content vermeiden". 

 

Schlüsselwörter geschickt platzieren

Z. B. in der URL, in den Meta Tags, im Content (Texte) der Website, in den Alt-Tags, in Ankertexten von Links, ...

 

XML-Sitemap

Mit XMap kann sowohl eine Sitemap im html-Format zur Ausgabe im Browser erzeugt werden, als auch eine im XML-Format. Diese XML-Sitemap kann bei Google angemeldet werden, um sicherzugehen, dass Google auch alle Seiten der Website findet.

 

Off Page Optimierung

Mit Off-Page-Optimierung sind Maßnahmen zur Suchmaschinenoptimierung gemeint, die nicht direkt auf der Website durchgeführt werden können. Zum Beispiel:

  • Google Webmaster Tools (Website anmelden) und Google Analytics einsetzen
  • Seriöse Linktauschpartner finden, auf keinen Fall Angebote mit unseriösen Versprechungen annehmen
  • Eintrag in seriöse Web-Kataloge.

 

 

Sie benötigen Hilfe bei der Suchmaschinenoptimierung? Dann schreiben Sie mir einfach und ich berate Sie gerne!

Providerwechsel mit de-Domain

Als mein erster Providerwechsel für einen Webdesign-Kunden anstand habe ich mich erstmal schlau gelesen. Ist alles gar nicht schwer. Um Zeitverzögerungen und Unannehmlichkeiten zu vermeiden sollte man einige Dinge rechtzeitig bedenken.


KK-Antrag

Vom neuen Provider erhält man ein Formular für den KK-Antrag (KK=Konnektivitätskoordination). Hier trägt man den Namen der Domain ein, einige persönliche Daten zum Domaininhaber und den Namen des bisherigen Providers sowie die Kundennummer bei diesem. Soll das Providerwechsel-Passwort an eine bestimmte E-Mail-Adresse gesendet werden, so sollte dies hier ebenfalls notiert werden. Das Formular muss vom Domaininhaber unterschrieben werden und dann sowohl an den alten, als auch an den neuen Provider geschickt werden.

 

Bereits nach 4 Stunden (angekündigt war innerhalb von 24 Stunden) erhielt ich vom alten Provider das Providerwechselpasswort, dieses wird auch AuthInfo oder AuthInfo-Code genannt. Dieses Passwort ist 30 Tage gültig, danach muss der Providerwechsel erneut beantragt werden.

 

E-Mail-Verlusten vorbeugen

Da die Zugangsprovider erst alle Nameserver aktualisieren müssen (dies kann bis zu 48 Stunden dauern), kann es nach der Übernahme der Domain durch den neuen Provider passieren, dass Mails oder Seitenaufrufe noch beim alten Provider landen oder als unzustellbar zum Absender zurückgeschickt werden. Um dabei den Verlust von Emails zu vermeiden, gibt es die Möglichkeit, beim alten Provider einen MX Record (Mail Exchange Resource Record) auf den neuen Server einrichten zu lassen. Mit einem MX-Record wird festgelegt, welcher Server für eine bestimmte Domain E-Mail-technisch zuständig ist. Sind dort zwei (oder mehr) Server eingetragen, so werden Emails an den zweiten Server geleitet, wenn der erste Server nicht erreichbar ist. Über den Wert „preference“ wird die Priorität festgelegt. Der Server mit der höchsten Priorität wird als erstes angesprochen, der mit der geringsten Priorität erst dann, wenn alle anderen nicht erreichbar sind.

 

Für das Einrichten des MX-Records muss wieder ein Formular vom Domaininhaber ausgefüllt und unterschrieben werden, in dem dieses beantragt wird. Die Einrichtung erfolgt ziemlich schnell; in meinem Fall griff die Funktion schon nach ca. 1,5 Stunden. Dieser Dienst ist kostenpflichtig und schlug mit ca. 18 Euro zu buche.

 

Website beim neuen Provider einrichten

Schon bevor ich das Providerwechselpasswort beim alten Provider beantragt habe, habe ich auf dem Server des neuen Providers die neue Website eingerichtet. Auch alle bereits beim alten Provider verwendeten E-Mail-Adressen müssen beim neuen Provider wieder eingerichtet werden.

 

Umleitung von alten Seiten zu den Neuen

Um zu vermeiden, dass bestehende Links zur alten Homepage (z. B. Bookmarks bei Usern oder Links von Google und anderen Suchmaschinen) ins Leere laufen und damit neben der Verärgerung der User eine Negativbewertung bei den Suchmaschinen riskiert wird, müssen Umleitungen von den Einzelseiten der alten Homepage auf geeignete Seiten des neuen Webs gelegt werden. Dies geschieht bei Apache-Webservern am elegantesten durch Redirects in der Datei .htaccess.

 

Providerwechselpasswort an den neuen Provider schicken

Erst nachdem alle vorbereitenden Arbeiten abgeschlossen sind wird der AuthInfo-Code an den neuen Provider geschickt, bzw. selbst online eingetragen. Anschließend ist die Domain dann innerhalb von 24 bis 48 Stunden über den neuen Provider erreichbar. So lange dauert es, bis wirklich alle Nameserver auf den neuen Server umgestellt sind. Über unsere Internetverbindung war die Seite nach ca. 7 Stunden beim neuen Provider erreichbar.

 

Mehr Infos zum Providerwechsel gibts zum Beispiel bei Wikipedia.

 

Ich empfehle den Provider all-inkl.com

 

 

 

Sie benötigen beim Providerwechsel Ünterstützung vom Webdesign-Experten? Schreiben Sie mir einfach und ich berate Sie gerne!