Sie finden unser Google+ Profil unter diesem Link.

QR-Codes: Was ist das überhaupt?

QR ist die Abkürzung für Quick Response, ins Deutsche übersetzt schnelle Antwort. Und dabei geht es auch: QR-Codes beinhalten Informationen, die mittels eines Smartphones eingelesen werden können. Ursprünglich wurden QR-Codes seit 1994 von Toyota genutzt, um einzelne Elemente innerhalb der Logistik zu markieren. Heute erleben QR-Codes aber einen neuen Boom, da sie bestens genutzt werden können, um Botschaften oder Internetadressen zu übermitteln.

Der Anwender benötigt dafür nur ein Smartphone mit einer App, die QR-Codes verarbeiten kann. Dann wird der Code einfach mit der Kamera gescannt und auf dem Bildschirm erscheint die Botschaft. Diese kann neben einem Text auch eine URL, eine Telefonnummer oder eine SMS-Botschaft sein. Handelt es sich etwa um eine Telefonnummer, wird diese vom Smartphone eingelesen, verarbeitet und nach nochmaliger Bestätigung durch den Anwender angerufen. Somit erspart man sich das lästige Abtippen der einzelnen Ziffern.

Wie kann man QR-Codes nutzen?

QR-Codes können dann genutzt werden, wenn Inhalte aus der realen Welt mit Inhalten auf dem Smartphone verbunden werden sollen. Ein beliebtes Anwendungsbeispiel sind Plakate: Wer eine Plakatwerbung für ein Konzert sieht, findet nicht selten einen QR-Code, über den Karten für das Konzert gekauft werden können. Interessenten müssen sich also keine Internetadresse oder Telefonnummer merken, sondern können bequem den QR-Code einscannen und werden entweder auf eine Webseite oder eine Telefonnummer weitergeleitet.

QR-Codes können also genutzt werden, um es dem potentiellen Kunden einfacher zu machen, auf eine produktbezogene Information oder direkt einen geeigneten Webshop zuzugreifen. Auch außerhalb des Marketings finden QR-Codes Anwendung: Museen können sie zum Beispiel nutzen, um Besuchern einen Raumplan für ihr Smartphone zu bieten. Die Anwendungsbereiche von QR-Codes sind grenzenlos; einer der Gründe, warum man sie immer häufiger vorfindet.

QR-Codes im Online-Banking

Ein weiteres Anwendungsbeispiel für QR-Codes ist das Bezahlen von Rechnungen mit dem Smartphone: Jeder kennt das lästige Abtippen von Zahlungsinformationen, QR-Codes können dieses Prozedere jetzt vereinfachen. Verschiedene Buchhaltungs-Tools bieten heute schon die Option, die Zahlungsinformationen als QR-Code auf die Rechnung zu drucken. Der Rechnungsempfänger muss diese dann nur noch einscannen und kann sie mit einer geeigneten Online Banking App verarbeiten.

QR-Codes selbst erstellen

Wer QR-Codes selbst erstellen möchte, braucht dafür kein Geld auszugeben. Im Internet gibt es verschiedene Generatoren, mit denen kostenlos ein QR-Code generiert werden kann.

• Kaywa QR-Code
• QR Code Generator

QR-Codes sind ein einfaches Mittel, um Informationen zwischen Offline- und Online-Welt zu übermitteln. Unternehmen sollten sie nutzen, um Kunden das lästige Abtippen von Adressen, Telefonnummern und Bankverbindungen zu ersparen.

Einführung

Suchmaschinen wie Google und Yahoo nutzen mehrere Hundert Faktoren, anhand derer die Platzierung einer Webseite bei Eingabe eines bestimmten Begriffs (Keywords) festlegen. Jeder Faktor hat eine unterschiedliche Gewichtung: Konnte man früher noch mit einer besonders hohen Keyworddichte überzeugen, werden derartige Seiten heute oft als Spam eingestuft.
Da die Robots der Suchmaschinen selbst noch nicht in der Lage sind, die Qualität der Inhalte einer Webseite zu ermitteln, hat man den Faktor der externen Links immer stärker ins Gewicht gelegt. Entscheidend ist hierbei auch die Herkunft der Links: Links von Seiten, denen die Suchmaschinen ein hohes Vertrauen („Trust“) zusprechen und selbst eine starke Anzahl an Backlinks haben, sind demnach mehr wert als Links von komplett neuen Webseiten ohne Backlinks.

Im Rahmen dieser Artikelserie erfahren Sie, wie Sie eine Reihe eigener Seiten anlegen, die Sie zum Linkaufbau nutzen können. Dabei wird darauf geachtet, dass Ihr Linknetzwerk nicht als solches auffliegt. Sie werden mit den technischen Grundlagen vertraut gemacht und erfahren, wie Sie ein Linknetzwerk ohne großen Zeitaufwand zentral verwalten und administrieren können. Zum Schluss finden Sie noch einige Linkverweise auf hilfreiche Tools und Blogbeiträge, die Ihnen beim Erstellen eines eigenen Linknetzwerks behilflich sein werden.

Was ist ein Linknetzwerk?

Ein Linknetzwerk ist eine Reihe von Internetseiten. Ziel eines Linknetzwerks ist es, dass man selbst eine Mehrzahl von Seiten besitzt, die man zum Linkaufbau für eigene Seiten oder auch zum Linktausch nutzen kann. Als Besitzer genießt man einige Vorteile auf dem Markt der Suchmaschinenoptimierung: Man ist weder auf teure Linkmieten und -käufe angewiesen, noch muss man mit dubiosen Mitteln versuchen, einen Link auf fremde Seiten einzuschläusen. Man besitzt einfach selbst eine eigene Reihe von Webseiten.

Der Clou an der Sache: Suchmaschinen wissen nicht, dass der Betreiber der einzelnen Seiten immer der gleiche ist und werten Links daher genauso, als würden sie von irgendeiner anderen Seite oder einem anderen Blog kommen. Um nicht aufzufliegen, muss man jedoch einige Regeln einhalten, denn würden Sie bei Ihrem Hoster einfach drei neue Domains registrieren, wäre es für Google & Co ein Leichtes, Ihr Linknetzwerk zu erkennen und die einzelnen Links weniger stark zu werten.

Der Inhalt von Linknetzwerken

Die einzelnen Seiten der Linknetzwerke sollten immer einem bestimmten Thema nachgehen. Häufig erstellen Suchmaschinenoptimierer als Linknetzwerke reine Spam-Seiten mit nutzlosem Inhalt. Diesem fragwürdigen Trend sollte keinesfalls nachgegangen werden. Sinn und Zweck der Suchmaschinenoptimierung kann es nicht sein, Webseiten mit automatisch generiertem Inhalt zu erstellen, die nur für die Robots der Suchmaschinen interessant sind, den übrigen Internetnutzern aber keinen Mehrwert bieten. Auch mehrere Seiten mit dem gleichen Inhalt ergeben keinen Sinn, zumal diese von Google ohnehin als Spam eingestuft werden würden. Nehmen Sie sich daher die Zeit, die einzelnen Seiten Ihres Linknetzwerkes mit qualitativ hochwertigem Content zu bestücken – langfristig profitieren Sie dann auch von Links, die andere Leser freiwillig auf Ihre Seiten setzen.

Erst jüngst hat Google im Rahmen des sogenannten Panda-Updates – eine Reihe von Verbesserungen und Feinjustierungen am Google Suchalgorithmus – das Bestreben gezeigt, sogenannte Content-Farmen, also Seiten, die mit minderwertigen Inhalten erstellt werden und nur zur Profitmaximierung gedacht sind abzustrafen. Es ist davon auszugehen, dass die Suchmaschinen in Zukunft immer besser qualitativ hochwertige Inhalte von billigen Massenproduktionen unterscheiden können.

Thematisch sollten Sie sich in erster Linie an den Seiten orientieren, die Sie mit Ihrem Linknetzwerk stärken möchten. Wollen Sie zum Beispiel ein Linknetzwerk erstellen, um Seiten zum Linktausch für die Webseite eines Reisebüros zu besitzen, könnten die Seiten Ihres Netzwerks zum Beispiel Reisetipps für beliebte Urlaubsorte geben – ganz im Sinne eines Reiseführers. Besonders hilfreich ist dieses Vorgehen auch dann, wenn Sie später mit anderen Webseiten Links tauschen möchten – denn Linkpartner sind meistens auf der Suche nach themenrelevanten Seiten.

Unentdeckt bleiben und Footprints vermeiden

Das Betreiben eines Linknetzwerks ist mit einem hohen Zeit- und Kostenaufwand verbunden. Deshalb ist es für Sie sicherlich wichtig, dass Sie auch die Erfolge erzielen, die geplant sind. Es ist sehr wahrscheinlich, dass Suchmaschinen wie Google versuchen, Linknetzwerke ausfindig zu machen – schließlich manipulieren sie das Ranking bestimmter Seiten, was von Google natürlich nicht gerne gesehen wird.

Doch welche Möglichkeiten haben die Suchmaschinen, Linknetzwerke auffliegen zu lassen? Zum einen ist ganz klar das Hosting zu nennen, auf das in den folgenden Artikeln noch näher eingegangen wird. Sowohl der Inhaber der Domains (Whois-Daten), als auch die IP-Adressen der einzelnen Seiten lassen Rückschlüsse auf den Inhaber zu. Wenn eine Suchmaschine merkt, dass alle Seiten der gleichen Person gehören, könnte es zu Abstrafungen bzw. Wertminderung der einzelnen Seiten und daraufbefindlichen Links kommen.

Auch die gegenseitige Verlinkung ist ein Angriffspunkt. Es wäre falsch, alle Seiten eines Linknetzwerkes untereinander zu verlinken, insbesondere dann, wenn keine thematischen Übereinstimmungen bestehen. Auch auf offensichtliche Linkverkäufe sollte verzichtet werden, gerade Links zu den üblichen Verdächtigen wie etwa Seiten zum Thema Kredit und Glücksspiel sind Gift für den Trust der Suchmaschinen.

Ebenfalls wichtig ist der Verzicht auf Google-Produkte innerhalb des Linknetzwerks. Würden Sie auf allen Seiten „Google Analytics“ für die Besucheranalyse oder „Google AdSense“ zum Schalten von Werbeanzeigen nutzen, wäre es für Google ein Leichtes, Ihr Linknetzwerk zu enttarnen. So schwer es Ihnen auch fallen mag, die Seiten der Linknetzwerke sollten nicht über die Google Webmastertools analysiert werden.

Erfahren Sie in den folgenden Teilen dieser Artikelserie, wie man die richtige Wahl bei Domains & Hosting trifft und Linknetzwerke auf Basis eines CMS wie WordPress realisiert.

Die Sorgen der Webdesigner: Unterschiedliche Bildschirmgrößen

Die Bildschirmgröße ist im Webdesign schon immer ein heikles Thema, für die es keine Optimallösung zu geben scheint: Die einen stellen die Seitenbreite auf 100%, sodass der komplette Bildschirm genutzt wird (Beispiel: Wikipedia.org), auf großen Bildschirmen kann dies jedoch sehr unschön aussehen und wenn das Layout von Grafiken abhängig ist, kann man die flexible 100% Breite ohnehin vergessen, da die Browser meistens nur sehr unschön skallieren. Das Einstellen der Seitenbreite auf einen bestimmten Wert bringt hingegen den Nachteil mit sich, dass die Seite auf kleinen Bildschirmen vielleicht einen horizontalen Scrollbalken erzeugt oder auf großen Bildschirmen etwas mickrig aussieht, da sie nur einen Bruchteil des Bildschirms nutzt.

Die Lösung scheint nun das responsive Webdesign zu bringen, es ist zwar noch immer keine Optimallösung (was weiter unten thematisiert wird), aber immer noch die beste der drei Alternativen. Es bietet die Möglichkeit, unterschiedliche Stylesheets bei unterschiedlichen Bildschirmgrößen zu nutzen. Wenn das Gerät eines Users also beispielsweise 1800 Pixel Bildschirmbreite bietet, erhält dieser Nutzer ein anderes Design als der Nutzer, der über ein iPhone die Seite aufruft. Die HTML-Datei bleibt dabei immer gleich, lediglich die CSS Informationen werden geändert.

Bislang gab es einige Webdesigner, die spezielle Webseiten für Smartphones entwickelten und diese dann auf einer Subdomain bereitstellten. Da es aber immer unterschiedlichere Geräte gibt – angefangen vom kleinen Smartphone über Tablet-PCs, Netbooks, Laptops bis hin zu großen 30 Zoll Bildschirmen – wäre der Aufwand zu groß, für jedes Gerät eine eigene Seite zu entwickeln. Durch responsives Design ist es möglich, mit relativ wenig Aufwand eine Vielzahl von Bildschirmauflösungen zu unterstützen. Daher hier eine kleine Einführung in das Thema responsives Webdesign.

Responsives Webdesign – Media Queries verwenden

Es gibt zwei Wege, eine HTML Datei responsiv zu gestalten. Sie unterscheiden sich nur darin, ob man mehrere CSS Dateien verwendet – also immer eine eigene für jede Bildschirmgröße – oder ob man eine einzige CSS Datei nutzt, innerhalb derer man dann die einzelnen Stylesheets für die jeweilige Bildschirmgröße zuweist. Beide Varianten nutzen Media Queries unter CSS 3, die die media types aus CSS 2 ersetzen. Mit Media Queries ist es möglich, Eigenschaften und Fähigkeiten von Ausgabegeräten wie Computern und Smartphones abzufragen und je nach Ergebnis unterschiedliche Stylesheets zuzuweisen.

Aus Performance-Gründen ist der Weg über die alleinige CSS-Datei empfehlenswert. Man kann direkt im Haupt Stylesheet einer Seite per @media only screen den Browser anweisen, bei den folgenden Bedingungen das folgende Stylesheet auszugeben. Angenommen, Geräte mit einer Breite von unter 480 Pixeln (wie es bei vielen Smartphones der Fall ist) sollen angesprochen werden. Die Einbindung in das Stylesheet würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10

/*
...hier steht der bisherige CSS-Code...
*/
 
@media only screen 
and (max-device-width : 480px) {
    /* 
    ...hier folgt der Code für Geräte unter 480 Pixeln Breite...
    */
}

Für die Definition des Bildschirms (zum Beispiel die Breite, ob es der Landscape Modus ist oder die Auflösung) gibt es diverse Parameter, die hier in der Übersicht angesehen werden können.
Innerhalb der jeweiligen Definitionsbereiche wird ganz normal CSS verwendet. Nehmen wir an, wir haben einen Div-Container mit der ID main. Auf einem Smartphone soll der Container mit blauem Hintergrund angezeigt werden, auf einem herkömmlichen Bildschirm (mindestens 500px Breite) mit orangenem Hintergrund. Der Code würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#main {
	   background: dodgerblue;
	}
}
@media only screen 
and (min-width : 500px) {
	#main {
	   background: orange;
	}
 
}

Das Beispiel mag zunächst unsinnig erscheinen, zeigt aber, wie einfach man mit Media Queries Elemente unterschiedlich darstellen kann, je nach dem, auf welchem Gerät sich der Nutzer befindet.

Das Viewport Meta Tag

Wer ein individuelles Design für Smartphones entwickelt, sollte das Viewport Meta Tag in seinen HTML-Header einbauen, um die automatische Skallierung der mobilen Browser zu verhindern. Einen ausführlichen Artikel zum Thema mit Code-Beispiel hat Firefox-Entwickler Mozilla auf seiner Webseite veröffentlicht (englischsprachig): Using the viewport meta tag to control layout on mobile browsers.

Die Nachteile von CSS Media Queries

Das responsive Webdesign über CSS Media Queries ist derzeit wohl unbestitten die beste Möglichkeit, seine Webseite für verschiedene Geräte zu optimieren. Gerade bei Smartphones kann es allerdings zu Performance-Einbußen kommen. Denn nach wie vor wird der komplette Quellcode übertragen und nach wie vor wird die ursprüngliche Größe von Grafiken heruntergeladen. Die Grafiken sind das Hauptproblem: Möchte ich, dass ein Foto auf einem 27 Zoll Bildschirm genauso imposant aussieht wie auf einem Smartphone, muss eines der beiden Geräte skallieren – und das in der Regel unter Einbußen von Qualität und Performance.

Anwendungsbeispiel

Um die Verwendung von Media Queries und die Anwendung von responsivem Design zu demonstrieren, hat der Webdesigner James Mellers ein beeindruckendes Beispiel auf seiner Webseite veröffentlicht. Beim Vergrößern und Verkleinern der Fensterbreite stellt man fest, wie sich das Objekt immer wieder der Fenstergröße anpasst.

Mobile First: Ein neuer Trend

Ein neuer Trend im Webdesign, der mit dem Thema von responsiven Webseiten einher geht, ist Mobile First. Hierbei wird beim Gestalten eines neuen Webdesigns zunächst der Fokus auf das mobile Design gelegt; erst später wird auf Basis des mobilen Designs ein Design für Desktop Geräte entwickelt. Somit ist das Design optimal für die Nutzung mit Smartphones ausgelegt und größere Geräte werden erst an zweiter Stelle beachtet.

Ob sich dieser Trend durchsetzen wird, ist schwierig zu sagen: Zwar hat die Zahl von Internetnutzern, die über Smartphones surfen, seit 2007 stark zugenommen und einige Experten erwarten, dass schon 2014 mehr User über Smartphones als über herkömmliche Desktop Computer im Internet surfen werden. Dennoch nutzen in der Gegenwart der Großteil der User noch herkömmliche Desktop-Geräte und auch in Büros wird der Computer dem Smartphone noch vorgezogen.

Beim Webdesign für mobile Geräte stoßen Webdesigner auf neue Hürden, die es zu bewältigen gibt. Hover-Effekte, die auch heute im Webdesign gerne genutzt werden, fallen bei Smartphones und Tablets weg, da der Nutzer nicht mehr mit einer Maus navigiert. Andere Bereiche müssen hingegen erweitert werden: Kleine, schmale Navigationen sind auf mobilen Geräten eher lästig, da sie schwieriger anzuklicken sind als größere Buttons.

Lesetipp: Responsive Web Design von Ethan Marcotte

Zum Thema responsives Webdesign gibt es zwar noch keine deutschen Bücher, der Webdesigner Ethan Marcotte hat allerdings ein englisches E-Book veröffentlicht, das sich ausführlich mit den Themen resonsives Webdesign, Flexibilität und Medie Queries auseinandersetzt. Das Buch gibt es mittlerweile auch in gedruckter Form. Die E-Book Variante kostet rund 7 Euro und kann bei A Book Apart heruntergeladen werden.

Der Veranstaltungsort

Nach Hamburg, Jena und Berlin wurde für das diesjährige WordCamp Köln als Veranstaltungsort ausgewählt. In verschiedenen Räumen der humanwissenschaftlichen Fakultät der Universität Köln konnten jeweils fünf Sessions gleichzeitig gehalten werden. Das Erdgeschoss stand als allgemeine Aufenthaltsmöglichkeit zur Verfügnug, zudem konnten hier in den Pausen kostenlose Getränke und Speisen eingenommen werden. Prinzipiell war die Location nicht schlecht gewählt, bot häufig aber nicht genügend Platz für alle Interessierten einer Session. So war es nicht selten der Fall, dass einige Zuhörer stehen oder auf dem Boden sitzen mussten.

Themen auf dem WordCamp

Die erste Session, an der ich teilnahm, versprach das Thema WordPress & SEO für Fortgeschrittene und Profis – so war es zumindest mit zwei und drei Sternchen markiert, es stellte sich jedoch größtenteils als eine Auflistung der Grundlagen heraus. Der Hinweis auf das Plugin wpSuggest könnte für Blogger interessant sein, die nicht lange nach wichtigen Keywords für die Überschrift eines Artikels recherchieren wollen – über die Google-API werden themenrelevante Keywords zu einem eingegebenen Hauptbegriff angezeigt. Der Referent schlägt zudem vor, doppelte Links (zum Beispiel zur Startseite) zu entfernen oder zu verschlüsseln, mit WP-OnPage stellt er dafür eine selbstentwickelte Lösung bereit. Eine gute Zusammenfassung der übrigen Sessions zum Thema SEO und Affilinet-Marketing gibt es übrigens in diesem Artikel der Webmaster-Zentrale.

Die nächste Session sollte sich mit Hooks, Filtern und Actions auseinandersetzen – für viele Entwickler ein spannendes Thema, lassen sich so doch bestimmte Elemente, Ausgaben und Abläufe von WordPress individuell beeinflussen. Leider stellte sich die Session eher als eine Definition der oben genannten Begriffe heraus und behandelte die Themen nicht praxisorientiert, was für viele Zuhörer für Verwirrung sorgte, die sich keine sinnvolle Anwendung der Funktionen vorstellen konnten. Somit hätte sich die Session vielleicht entweder komplett an fortgeschrittene Nutzer richten sollen – dann aber auch mehr in die Tiefe gehen – oder an Anfänger, dann aber sinnvolle Beispiele präsentieren.

Interessant wurde es mit der von Inpsyde (der Firma hinter WordPress Deutschland) vorgestellten Lösung zur Mehrsprachigkeit von WordPress mittels der Blognetzwerk / Multisite Funktion. In naher Zukunft wird es ein Plugin geben, das das Verwalten mehrerer Blogs unterschiedlicher Sprachen zulässt, der Clou dabei ist, dass die Mehrsprachigkeit nicht an das Plugin gebunden ist. Das heißt, dass selbst bei einem Ausfall oder Entwicklungsstopp des Plugins die einzelnen Blogs weiterhin funktionstüchtig sind, dies ist ein klarer Vorteil zu vielen anderen Plugin-Lösungen, die die Inhalte der Datenbank so verändern, dass die Seite ohne das Plugin nicht mehr richtig funktioniert.

Andreas Graap stellte die WordPress Blognetzwerk Funktion als Tool für Linknetzwerke vor. Um ein Linknetzwerk nicht auffliegen zu lassen, müssen die einzelnen Seiten jedoch auf unterschiedlichen Servern gehostet werden – dies ist ohne Weiteres per Blognetzwerk nicht möglich, da zwangsläufig alle Blogs auf dem selben Server liegen. Abhilfe kann ein Script schaffen, das die einzelnen Webseiten als HTML-Dateien exportiert und automatisiert auf einen anderen Server lädt. Ob der Aufwand in Relation zum Nutzen steht, muss jeder selbst entscheiden. Neben den unterschiedlichen Servern sind aber auch unterschiedliche IP-Adressen, unterschiedliche Whois-Einträge und das Vermeiden von Footprints (wie zum Beispiel die Nutzung von AdSense oder den Webmaster-Tools) unerlässlich, um nicht als Linknetzwerk enttarnt zu werden.

Fazit für das WordCamp in Köln

Als Fazit lässt sich festhalten, dass das WordCamp 2011 besonders für Einsteiger sinnvoll war, da viele Themen auf Anfängerniveau gehalten wurden, es gab sogar eine allgemeine Einführung in die Software.
Für das nächste WordCamp würde ich mir größere Räume, eine realistischere Einordnung der Schwierigkeitsgrade der Sessions und tiefergehende Session-Themen wünschen. Meines Erachtens hat das WordCamp Jena bisher am besten in das Bild eines professionellen BarCamps / Commmunity-Treffens gepasst. Dennoch haben es die Organisatoren mal wieder geschafft, die WordPress Deutschland Community für einen Tag an einem Ort zu versammeln – ein Ereignis, das es auch in den nächsten Jahren weiterhin geben sollte.

Den Quelltext einer Webseite optimieren

Webseiten werden in Form von sogenanntem Quellcode bzw. Quelltext gespeichert, der fast immer aus HTML Code (Hypertext Markup Language) besteht. Über HTML Code werden Inhalte strukturiert, deren Design wiederum durch CSS Code (Cascading Style Sheets) beeinflusst werden kann.
Bevor man an seiner eigenen Seite Optimierungen am Quelltext vornimmt, sollte man sich also auf jeden Fall mit den Themen HTML und CSS vertraut gemacht haben, damit es bei Änderungen nicht zu ungewollten Fehlern kommt. Einige wichtige Konventionen und Optimierungsmaßnahmen sollen nun näher beleuchtet werden:

• Überschriften verschiedener Ordnungen: Die Inhalte einer Seite sollten in mittels Überschriften verschiedener Ordnungen gegliedert werden. Die Hauptüberschrift sollte dabei immer erster Ordnung, also als <h1> ausgezeichnet werden.
• Wichtige Begriffe per <strong> auszeichnen: Logische Auszeichnungen sollten verwendet werden, insbesondere sollte man wichtige Begriffe – also Keywords – durch das <strong>-Element hervorheben. Einige alte HTML Bücher lehren noch die Verwendung von <b>, dies macht den Text zwar auch “fett”, Suchmaschinen sehen diese Wörter dann aber nichts als wichtig(er) an.

Meta Tags und der title

Zusätzlich können im Quelltext einer Webseite noch Angaben speziell für Suchmaschinen gemacht werden, die für die Besucher der Seite als solche nicht ersichtlich sind. Über sogenannte Meta-Angaben zum Inhalt können zum Beispiel Kurzbeschreibungen hinterlegt werden, die dann innerhalb der Ergebnisliste der Suchmaschinen angezeigt werden. Über den Titel des HTML Dokuments (nicht zu verwechseln mit den Überschriften) kann festgelegt werden, mit welchem Text die Seite in den Suchmaschinen verlinkt wird.

Diese Grafik veranschaulicht, wie sich der title und die Meta-Description auf die Darstellung der Suchergebnisse in Google auswirkt. Grafik kann per Mausklick vergrößert werden.

An dieser Stelle sollen die wichtigsten Meta-Angaben vorgestellt werden. Per Klick auf weitere Informationen → können Sie Code-Beispiele über die HTML-Referenz selfHTML aufrufen und sehen, wie Sie das jeweilige Element richtig im Quelltext verwenden.

• Verwendung des title: Der HTML Seiten-Titel ist wichtig, um die Aufmerksamkeit des Suchmaschinennutzers auf die Seite zu lenken. Er sollte aus maximal 65 Zeichen bestehen und den Inhalt der Seite zutreffend beschreiben. Wichtige Keywords sollten enthalten sein, sich aber innerhalb des Titels nicht wiederholen. weitere Informationen →
• Meta-Angabe description: In der Description wird der Inhalt der Seite kurz beschrieben. Eine Länge von 150 Zeichen sollte dabei nicht überschritten werden. Sie sollte beim Nutzer ein gewisses Interesse erwirken, dass ihn zum Besuch der Seite animiert. weitere Informationen →
• Meta-Angabe robots: Über diese Meta-Angabe lässt sich festlegen, ob eine Seite indexiert werden soll und ob Suchmaschinen den ausgehenden Links folgen sollen. Wird die Meta-Angabe robots nicht verwendet, gehen Suchmaschinen automatisch davon aus, dass die Seite indexiert und ausgehenden Links gefolgt werden soll. weitere Informationen →

OnPage-Optimierung bei CM-Systemen und Webshops

CMS (Content Management Systeme) und Webshops generieren den Quelltext und Ausgaben wie den Titel natürlich automatisch, sodass Änderungen häufig nur über Umwege möglich sind. Man sollte sich jedoch immer nach SEO Plugins und SEO Erweiterungen umsehen, die häufig schon automatisch nach der Installation die oben besprochenen Optimierungsmaßnahmen durchführen. Für WordPress gibt es beispielsweise das empfehlenswerte SEO Plugin wpSEO *, das viele wichtige OnPage-Faktoren zielsicher optimiert. Darüber hinaus sind bei den meisten CMS- und Webshop-Lösungen Eingriffe ins Template möglich, um beispielsweise die <h1>-Überschrift für Überschriften festzulegen.

* Affiliate Link

Teil 1 | Teil 2 | Teil 3

Unter den richtigen Suchbegriffen gefunden werden

Der ganze Aufwand einer umfassenden Suchmaschinenoptimierung lohnt sich nur dann, wenn man am Ende auch unter den richtigen Begriffen gefunden wird. Das heißt, dass man zunächst im Rahmen einer „Keyword Analyse“ herausfinden sollte, nach welchen Begriffen Nutzer suchen, die an Dienstleistungen oder Produkten interessiert sind, die auf Ihrer Seite angeboten werden. Keywords sind die englische Umschreibung für Schlüsselbegriffe, die den Inhalt einer Webseite beschreiben. Für eine solche Keywordrecherche sollte man verschiedene Quellen nutzen, um das beste Ergebnis zu erhalten:

• Brainstorming: Als Kenner Ihres Produkts oder Experte Ihres Themengebietes wissen Sie am besten, welche Begriffe im Zusammenhang mit Ihrem Produkt oder Thema stehen. Im Rahmen eines Brainstormings sollten Sie entweder allein oder in Zusammenarbeit mit Ihren Kollegen wichtige Begriffe notieren, die die Nutzer der Suchmaschinen verwenden könnten, um auf Ihre Webseite zu gelangen. Mit einer Mind-Map können diese kategorisiert werden.
• Google Keyword Tool: Das Google Keyword Tool macht es möglich herauszufinden, wie viele Suchanfragen es zu einem bestimmten Keyword monatlich gibt. Interessant ist aber besonders der untere Teil des Tools, wo Keyword-Ideen vorgeschlagen werden. Dabei handelt es sich um themenrelevante Schlüsselbegriffe und Begriffskombinationen, die in Ihre Keywordrecherche einfließen sollten.
• Sistrix Keyword Datenbank: Die Sistrix Keyword Datenbank kann zusätzlich zum Google Keyword Tool genutzt werden, um verwandte Keywords zu einem Oberbegriff zu finden.

Als Ergebnis einer umfassenden Keywordanalyse sollten Sie eine strukturierte Liste oder Mind-Map erhalten, die alle wichtigen Keywords beinhaltet und künftig dazu genutzt werden kann, die Inhalte Ihrer Webseite auf wichtige Schlüsselbegriffe zu optimieren.

Das Google Keyword Tool zeigt an, nach welchen Keywords häufig gesucht wird.

Bei komplexeren Webseiten und Webshops kann es sinnvoll sein, bei einzelnen Kategorien zu differenzieren. Wenn Sie also etwa einen Webshop für Schuhe betreiben, kann zwischen Sandalen-, Wander- und eleganten Schuhen differenziert werden, sodass am Ende für jede Kategorie eigene Keywords gefunden werden. Umso näher Sie hier ins Detail gehen, umso bessere Ergebnisse werden Sie erzielen.

Inhalte auf Keywords optimieren

Sobald Sie eine Liste mit den Keywords zusammengestellt haben, die besonders wichtig sind, wird es darum gehen, Ihre Webseite auf diese Begriffe zu optimieren. Wie Sie das am besten angehen, erfahren Sie im dritten Teil dieser Artikelserie. Wichtig ist, dass die Texte Ihrer Seite über das ein oder andere Keyword verfügen, damit Suchmaschinen die Thematik Ihrer Seite besser beurteilen können. Nur wenn Google weiß, dass in Ihrem Webshop (beispielsweise) Tischlampen verkauft werden, kann bei Suchanfragen zu Tischlampen auch auf Ihre Seite verwiesen werden.

Keyworddichte – wie viele Keywords tun meiner Seite gut?

Ein wichtiger Begriff der OnPage-Optimierung ist die Keyworddichte. Sie beschreibt, wie häufig ein Keyword in einem Text Verwendung findet.
Es gibt zwar Formeln und Richtwerte für eine optimale Keyworddichte, an erster Stelle sollte jedoch stehen, dass der Text für den Leser angenehm zu lesen ist. Man sollte zwar darauf achten, dass alle relevanten Keywords in dem Text vorkommen, man sollte es aber nicht übertreiben. Letztendlich geht es darum, dass Ihre Leser die Informationen Ihrer Seite gut aufnehmen können und dass sie ihnen so gut gefallen, dass sie von der eigenen Webseite, von Twitter oder einem anderen Medium darauf verweisen.

Im nächsten Teil dieser Artikelserie erfahren Sie, wie man den Quelltext einer Webseite mit Hilfe der zuvor gefundenen Keywords optimiert.

Teil 1 | Teil 2 | Teil 3

Suchmaschinen verstehen: Wie funktioniert Google?

Wenn eine neue Webseite entsteht, ist diese nicht unmittelbar im Index von Suchmaschinen wie Google vorhanden – denn Google weiß noch gar nicht, dass es die Webseite überhaupt gibt. Damit eine Webseite im Index einer Suchmaschine aufgenommen werden kann, muss die Suchmaschine also über das Vorhandensein der Webseite informiert werden. Viele Suchmaschinen bieten die Möglichkeit, eine neue Webseite anzumelden – dies ist aber gar nicht erforderlich, denn es gibt noch einen zweiten Weg: Ein Link von einer anderen Webseite.

Suchmaschinen durchforsten rund um die Uhr das gesamte Internet. Wenn sie auf einen Link treffen, folgen sie diesem. Wenn die Zielseite noch nicht im Index der Suchmaschine vorhanden ist, wird sie jetzt in der Regel hinzugefügt. Insbesondere bei Google dauert es in der Regel nicht länger als drei Tage, bis eine neue Webseite zum Index hinzugefügt wird – Voraussetzung ist natürlich, dass eine andere Seite per Link auf diese Webseite verweist. In diesem Zusammenhang sollten Sie sich die Fachbegriffe Bot und Spider merken; so werden die Programme genannt, die eigenständig das Internet crawlen (durchsuchen) und neue Inhalte aufnehmen.

Quelltext: Wie Webseiten gespeichert werden

Jede Webseite basiert auf einem Code der Auszeichnungssprache HTML, der auch Quelltext oder Quellcode genannt wird. Der HTML-Code strukuriert die Inhalte. Er legt also fest, welche Bereiche einer Webseite zur Navigation gehören, welcher Text als Überschrift ausgegeben werden soll und wo ein Link angezeigt wird. Genau dieser Quelltext wird auch von den Spidern der Suchmaschinen gesehen, weshalb der Quelltext stets den Richtlinien Genüge leisten sollte. Sie können sich den Quelltext einer jeden beliebigen Seite ansehen, indem Sie im Browserfenster rechts klicken und den entsprechenden Punkt auswählen.

Welche Optimierungsmöglichkeiten gibt es also?

Suchmaschinenoptimierung teilt sich in zwei Bereiche auf. Im Rahmen der OnPage Optimierung werden die Inhalte und der Quelltext einer Webseite so optimiert, dass sie von Suchmaschinen unter bestmöglichen Voraussetzungen indexiert werden können. Daher werden wir uns in den nächsten Teilen der SEO Basics Artikelserie zunächst damit beschäftigen, wie Webseiten erstellt werden, die optimal für die Bots der Suchmaschinen geeignet sind.

Der zweite Bereich der Suchmaschinenoptimierung besteht aus der OffPage Optimierung, die häufig auch als Linkbuilding – oder deutsch: Linkaufbau – bezeichnet wird. Hierbei geht es darum, andere Webseiten zu animieren, auf die eigene Webseite zu verlinken. Hier gibt es auch einige manuelle Möglichkeiten, die Sie im Laufe der Artikelserie kennenlernen werden.

Tipp: Um Webseiten für Suchmaschinen zu optimieren, sollte man ein Grundverständnis im Bereich der Webentwicklung mitbringen. Das heißt, dass HTML für Sie kein Fremdwort darstellen sollte und Sie die Möglichkeit haben, den Quellcode, das Template oder das Theme Ihrer Seite zu bearbeiten. Diese Artikelserie richtet sich hauptsächlich an Anfänger, die zwar Grundkenntnisse mit dem Erstellen und Verwalten von Webseiten oder CMS haben, sich bislang aber noch nicht mit dem Thema Suchmaschinenoptimierung auseinandergesetzt haben.

Die beste und wichtigste Optimierungsmöglichkeit ist aber nach wie vor das Präsentieren qualitativ hochwertiger, exklusiver Inhalte in Form von Texten und Bildern, die dem Besucher einen Mehrwert bieten. Denn letztendlich ist es das Ziel einer jeden Suchmaschine, den Usern die besten Seiten zu den eingegebenen Suchbegriffen aufzuzeigen. Und umso besser die Inhalte, umso besser geht der natürliche Linkaufbau – also das freiwillige Verlinken von anderen Seiten oder Foren – voran.

Teil 1 | Teil 2 | Teil 3

Der Vorteil eines Kontaktformulars

Ein Kontaktformular bietet dem Nutzer die Möglichkeit, Informationen oder Fragen über eine Weboberfläche an den Seitenbetreiber zu übermitteln. Im Gegensatz zu einer einfachen E-Mail Adresse hat ein Kontaktformular entscheidende Vorteile: Daten werden schon bei der Eingabe strukturiert und der Betreiber kann festlegen, welche Daten der Nutzer übermitteln muss. Wenn also ein Restaurant ein Kontaktformular nutzt, kann es Felder für die Anzahl der Personen, die Uhrzeit und Extrawünsche der Gäste festlegen und erspart sich somit das Nachfragen, falls der Gast eine der Angaben vergessen hat.

Die Optimallösung: Contact Form 7

Es gibt zahlreiche Plugins, die ein Kontaktformular für WordPress generieren. Doch Contact Form 7 überzeugt in vielerlei Hinsicht: So lassen sich Kontaktformulare individuell erstellen, der Nutzer kann Dateien uploaden und ein Captcha oder Quiz schützt das Kontaotformular vor Spam. Besonders positiv ist auch, dass man mehrere unterschiedliche Kontaktformulare erstellen kann, zum Beispiel individuell auf ein Produkt oder eine Dienstleistung abgestimmt.

Installation

Hier ist die Webseite des Plugins, der kostenlose Download ist auf wordpress.org möglich. Alternativ kann man auch im WordPress Backend unter Plugins -> Installieren nach Contact Form 7 suchen und das Plugin per Mausklick installieren. Nach der Installation muss das Plugin nur noch aktiviert werden und steht schon zur Verfügung.

Die Optionsseite des Plugins

Das Plugin hat alle Funktionen auf einer Seite zusammengefasst, die man unter Formular -> Bearbeiten im Administrationsmenü erreicht. Nach der Installation steht bereits ein fertiges Kontaktformular zur Verfügung, das per Shortcode in einen Artikel, eine Seite oder ein Textwidget eingefügt werden kann.

Screenshot der Benutzeroberfläche von Contact Form 7

Das bereits fertige Kontaktformular bietet Eingabefelder für den Namen des Nutzers, seine E-Mail Adresse, einen Betreff und den Nachrichtentext. Um dieses Kontaktformular auf der Seite auszugeben, muss einfach der braun hinterlegte Code, in diesem Fall also…:

[contact-form 1 "Kontaktformular 1"]

…an beliebiger Stelle in einem Artikel, einer Seite oder einem Textwidget eingefügt werden.

Standardmäßig wird das Kontaktformular an die E-Mail Adresse gesendet, die bei der WordPress Installation vom Administrator eingegeben wurde. Als Absender wird der Name und die E-Mail Adresse des Nutzers gewählt. Diese Einstellungen können für jedes Kontaktformular separat angepasst werden, indem man es auf der Optionsseite aufruft und die Eingaben in der Box Mail bearbeitet.

Gleiches gilt für die Meldungen, die der Nutzer sieht, wenn das Formular erfolgreich abgesendet wurde oder aber einen Fehler verursachte (zum Beispiel, weil in das Feld für die E-Mail Adresse gar keine E-Mail Adresse eingetragen wurde). Diese Systemmeldungen können in der Box Meldungen angepasst werden.

Kontaktformulare bearbeiten oder neu erstellen

Contact Form 7 bietet jedoch weit mehr, als nur das beschriebene Kontaktformular. Dieses kann leicht um Funktionen erweitert werden, alternativ kann auch ein komplett neues Kontaktformular erstellt werden, was zur Veranschaulichung nun gemacht werden soll. Dafür wählt man ganz am Anfang der Seite den roten Reiter Neues Formular und Erhält eine Kopie des Standardformulars. Zunächst sollte man zur besseren Übersicht einen Namen für das neue Kontaktformular vergeben, danach erscheint es in der oberen Navigation.

Der Screenshot ↑ zeigt die relevanten Bereiche zur Änderung des Kontaktformulars. Der rote Bereich legt die Ausgabe des Kontaktformulars fest, mittels Shortcodes werden Elemente wie ein Eingabefeld oder ein Auswahlmenü hinzugefügt; die Formatierung kann mittels HTML Code vorgenommen werden.
Im gelben Bereich können neue Tags (also Elemente) generiert werden. Dafür klickt man zunächst auf Generiere Tag und kann dann das gewünschte Element auswählen. Nachdem man die Einstellungen für das jeweilige Element festgelegt hat (zum Beispiel, ob es ein Pflichtfeld ist), erhält man einen braun hinterlegten und einen grün hinterlegten Code. Der braun hinterlegte Code wird in das Formular (roter Bereich auf dem Screenshot) eingefügt.
Der grün hinterlegte Code ist für die Ausgabe in der E-Mail zuständig, weshalb dieser Code in den Nachrichtentext (blauer Bereich auf dem Screenshot) eingefügt wird. Er kann allerdings auch in eines der anderen Felder in der Mail-Box eingefügt werden; insbesondere ist darauf zu achten, dass der Code für Datei Uploads in das entsprechende Feld und nicht in den Nachrichtentext integriert werden muss.

Abspeichern nicht vergessen und schon kann man den Shortcode des soeben erstellten Kontaktformulars wie oben beschrieben in eine Seite, einen Artikel oder ein Textwidget einfügen. Zu Anfangs sollte man versuchen, ob man nicht auch ohne Spamschutz auskommt, da es bisher nur wenige Spam Bots auf die Felder deas Contact Form 7 abgesehen haben.

Warum unterschiedliche Kontaktformulare?

Mit Contact Form 7 kann man leicht mehrere unterschiedliche Kontaktformulare erstellen. Das ist insbesondere dann sinnvoll, wenn man beispielsweise verschiedene Dienstleistungen anbietet, bei denen man dem Kunden unterschiedliche Informationen abverlangt. Eine Bäckerei möchte beispielsweise auf der Bestellseite für Brötchen eine genaue Stückzahl wissen, während auf der Bestellseite für Brot unterschiedliche Sorten ausgewählt werden sollen. Dadurch, dass sich die Kontaktformulare von Contact Form 7 auch in Artikel platzieren lassen, kann man auch schnell ein Kontaktformular zu einem Blogbeitrag hinzufügen, sodass Nutzer beispielsweise Kontakt bezüglich eines bestimmten Events aufnehmen können.

Worauf sollte man bei Kontaktformularen achten?

Um alle Vorteile von Kontaktformularen zu erreichen, sehen Sie hier einige Punkte, die beachtet werden sollten.

• Sinnvolle Eingabe- und Auswahlfelder: Wer sich schon beim Erstellen des Kontaktformulars Gedanken darüber macht, welche Informationen er von dem Nutzer benötigt, erspart sich die Nachfrage. Daher sollten Sie sich gut überlegen, welche Informationen Sie benötigen und unverzichtbare Informationen als Pflichtfeld anlegen.
• Gängiges name Attribut verwenden: Es empfiehlt sich, innerhalb der Eingabefelder gängige englischsprachige name Attribute zu verwenden. Dann zeigen die meisten Browser meistens schon an, welchen Inhalt der Nutzer normalerweise in dieses Feld einträgt.
• Unnötige Spamabwehr vermeiden: Man sollte erst dann etwas gegen Spam tun, wenn er auch tatsächlich auftaucht. Zuvor sollte man das Kontaktformular ohne Captcha oder ähnliches ausstatten, denn auch für den Nutzer sind diese Abwehrmethoden nervig und zeitraubend.
• So wenig wie möglich: Fordern Sie nur so viele Informationen ein wie nötig, aber so wenig wie möglich. Der Nutzer ist in der Regel an einer schnellen Kontaktaufnahme interessiert; Eingabefelder, die Sie ohnehin nicht benötigen, sind daher zu vermeiden.

Skype Status freigeben

Da Skype sehr auf die Privatsphäre seiner Nutzer achtet, ist die Veröffentlichung des aktuellen Status in den Skype-Einstellungen standardmäßig deaktiviert. Um die folgenden Beispiele nutzen zu können, muss man die Veröffentlichung des Status aktivieren. Dafür startet man die Skype Anwendung und wechselt in den Punkt Einstellungen. Dort befindet sich der Reiter Privatsphäre, der den Unterpunkt Mein Status darf im Netz veröffentlicht werden beinhaltet. Dieser muss aktiviert werden.

Die simple Variante ohne PHP

Wer sich den Umgang mit PHP nicht zutraut oder auf dem Webserver kein PHP zur Verfügung steht, kann den aktuellen Skype Status auch per Grafikdatei erfragen. Die Grafik, die Skype unter der Adresse http://mystatus.skype.com/benutzername speichert, kann einfach mittels HTML in die Seite eingebunden werden. Der rot markierte Bereich muss hierbei durch den Skype-Nutzernamen des jeweiligen Accounts ausgetauscht werden.

1

<img src="http://mystatus.skype.com/benutzername" alt="Skype Status">

Der Hintergrund der Grafik ist leider nicht transparent, deshalb sollte sie auf weißem Hintergrund eingebunden werden. Der Wechsel des Status erfolgt automatisch, sobald sich der jeweilige Benutzer an- oder abmeldet.

Skype Buttons

Skype bietet auch schon fertige Buttons an, deren Code man über einen Generator erstellen lassen kann. Hierbei ist eine Verlinkung schon mit inbegriffen, sodass Skype-Nutzer den jeweiligen Account per Mausklick in Skype kontaktieren können.

Skype Status mit PHP verarbeiten

Nun aber zurück zum Kernthema des Artikels: Dem Verarbeiten des aktuellen Status mit PHP. Dies bietet einen entscheidenden Vorteil: Sie können selbst bestimmen, was bei dem jeweiligen Status angezeigt werden soll. Über eine bedingte Anweisung kann beliebiger Code ausgegeben werden, wenn die Bedingung Online oder Offline zutrifft.

Zunächst muss eine Datei von Skype eingelesen werden, deren Wert dann über das PHP Programm verarbeitet wird. Es steht eine .txt Datei zur Verfügung, die einen Text zurückgibt, eine .num Datei, die den Status als Ziffer anzeigt und eine .xml Datei, die sowohl die Ziffer als auch den Text in verschiedenen Sprachen zurückgibt.

Die .txt Datei

Die .txt Datei ist unter http://mystatus.skype.com/benutzername.txt gespeichert. Sie gibt standardmäßig deutsche Begriffe zurück, über das Anhängen eines Ländercodes können aber auch die Begriffe anderer Sprachen ausgelesen werden, zum Beispiel in Englisch: http://mystatus.skype.com/benutzername.txt.en. Die folgenden Begriffe werden in der deutschen Ausgabe zurückgegeben: Online, Abwesend, Beschäftigt, Offline.

Die .num Datei

Die .num Datei ist unter http://mystatus.skype.com/benutzername.num gespeichert und gibt eine Zahl wieder, die wie folgt zu interpretieren ist.

• Online = 2
• Abwesend = 3
• Beschäftigt = 4
• Offline = 1

Mit dem switch-Konstrukt verschiedene Stati verarbeiten

Um je nach Statuscode eine andere Ausgabe oder Anweisung in PHP zu ermöglichen, wird das switch-Konstrukt in PHP genutzt. Dafür werden zunächst die Ausgabe der Textdatei als Referenzwert definiert und dann die einzelnen Alternativen durchprobiert. Zum Einlesen der Datei bedienen wir uns file_get_contents().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
$skypeStatus = file_get_contents("http://mystatus.skype.com/benutzername.txt");
switch($skypeStatus)
{
	case 'Online':
	  echo "Der Support ist online";
	  break;
	case 'Abwesend':
	  echo "Der Support ist zu Tisch. Bitte kontaktieren Sie uns nach der Mittagspause.";
	  break;
	case 'Beschäftigt':
	  echo "Der Support ist gerade in einem Kundengespräch. Bitte haben Sie einen Moment Geduld.";
	  break;
	case 'Offline':
	  echo "Der Support ist zurzeit offline";
	  break;
}	
?>

Statt eines Textes können hier natürlich auch Funktionen eingebunden, eine eigene Grafik ausgegeben oder ein Video abgespielt werden. Der Gestaltung sind keine Grenzen gesetzt.

Ausblick

Die Ausgabe des Skype-Status zeigt jedem Kunden, dass Sie für ihn da sind und an einer Kontaktaufnahme interessiert sind. Für die Zeiträume, in denen der Status nicht online ist, sollten Sie Ihren Kunden eine alternative Kontaktmöglichkeit bieten – zum Beispiel ein Kontaktformular, eine Faxnummer und natürlich die Information, in welchen Zeiträumen Ihr Skype-Account besetzt ist.