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

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.

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.

Diese Artikelserie wird jeden Freitag fortgesetzt.

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.

Schritt 1: Den neuen Webspace vorbereiten

Zunächst sollte man den Webspace, auf den die WordPress Installation transferiert werden soll, auf die Kompatibilität mit WordPress hin überprüfen. Das heißt, dass PHP 5 verfügbar sein sollte, mod_rewrite für die .htaccess Datei aktiviert ist (erforderlich für Permalinks) und eine freie MySQL-Datenbank genutzt werden kann. Im Zweifelsfall sollte man WordPress testweise installieren und überprüfen, ob alles funktioniert – jetzt hat man noch die Zeit dafür, wenn später beim Transfer Probleme auftauchen, kann dies eine längere Nichterreichbarkeit der Seite nach sich ziehen.

Schritt 2: Backup der Dateien auf dem alten Webspace

Im nächsten Schritt wird ein FTP Programm benötigt, um die Dateien auf dem alten Webspace herunterzuladen. Zu diesem Zwecke sollte man sich einen neuen Ordner auf der eigenen Festplatte anlegen und ausnahmslos alle Dateien und Ordner der WordPress Installation herunterladen. Bei gekauften Webseiten ist es auch üblich, diese Dateien als komprimiertes Zip-Archiv oder auf einer CD zu erhalten. In jedem Fall sollte man ruhig zwei Kopien der Seite an unterschiedlichen Stellen speichern, dann ist man auf der sicheren Seite.

Schritt 3: Datenbank sichern

Der wichtigste Teil einer WordPress Installation ist sicherlich die Datenbank, da hier alle Texte, Verlinkungen und sonstigen Daten gesichert werden. Um den Inhalt der Datenbank auf die Datenbank des neuen Anbieters zu transferieren, muss der PHPMyAdmin Bereich im Administrationsmenü des alten Anbieters aufgerufen werden. Falls nicht schon durch die Anmeldung geschehen, muss nun die Datenbank ausgewählt werden, die für WordPress genutzt wird.

Unter dem Reiter Exportieren müssen zunächst alle (!) Datenbanktabellen zum exportieren ausgewählt werden. Exportiert werden soll eine SQL Datei, bei einem größeren Umfang der Datenbank empfiehlt sich der Export als komprimiertes Zip-Archiv.

Infografik: Die wichtigsten Einstellungen zum Exportieren der Datenbank

Es kann einige Minuten dauern, bis die Zip-Datei erstellt wurde und zum Download bereit steht. In diesem Zeitraum darf der Browser-Tab nicht geschlossen werden. Sobald die Datei fertig ist, kann sie heruntergeladen und auf der Festplatte gesichert werden. Auch hier empfehlen sich zur Sicherheit zwei Sicherheitskopien.

Schritt 4: Transfer der Domain vorbereiten – KK Antrag

Ein kritischer Teil ist der Domaintransfer, da sich der alte Hoster hier meistens wenig kooperativ zeigt, schließlich muss er Ihnen mehr oder weniger kostenlos helfen, zu einem Konkurrenzanbieter zu wechseln.

Sie müssen (am besten schriftlich) ihren alten Hoster darüber informieren, dass Sie Ihre Domain zu einem anderen Anbieter umziehen werden und dabei den neuen Anbieter bevollmächtigen, den Transfer der Domain durchzuführen. Viele Anbieter halten hierfür fertige Formulare bereit, die nur noch ausgefüllt werden müssen. Sobald dem Domaintransfer durch den alten Anbieter stattgegeben ist, erhalten Sie einen sogenannten Auth-Code.

Schritt 5: Dateien auf den neuen Webspace hochladen

Jetzt ist es an der Zeit, die zuvor von dem alten Webspace gesicherten WordPress Dateien auf den neuen Webspace hochzuladen. Auch hierfür wird das FTP Programm benötigt, in das diesmal die Zugangsdaten des neuen Servers eingegeben werden. Wichtig: Laden Sie alle Dateien bis auf die .htaccess Datei hoch, warum, werden Sie weiter unten erfahren. Je nach Umfang der Dateien im wp-content Ordner und der Internetverbindung kann dies eine Weile dauern – Zeit für eine Tasse Kaffee. :-)

Schritt 6: Inhalt der Datenbank importieren

Im nächsten Schritt muss das Backup der alten Datenbank in die neue Datenbank eingespielt werden. Hierfür wird der PHPMyAdmin Bereich des neuen Anbieters aufgerufen, die gewünschte Datenbank ausgewählt und über den Reiter Importieren das sich auf der Festplatte befindliche Zip-Archiv von Schritt 3 hochgeladen. Auch dies kann wieder einen Moment Zeit in Anspruch nehmen, bei sehr großen Datenbanken kann es auch vorkommen, dass man die Datei mehrmals einlesen muss – dann gibt PHPMyAdmin aber einen Hinweis.

Schritt 7: wp-config.php aktualisieren

Da sich der Name der Datenbank, die Zugangsdaten und unter Umständen auch die MySQL Serveradresse (meistens: localhost) beim Wechsel des Hosting-Anbieters ändern werden, muss die Konfigurationsdatei wp-config.php aktualisiert werden. Sie befindet sich im Root-Verzeichnis der WordPress Installation und kann mit einem Editor geöffnet werden. Gebraucht werden die Zeilen 16 bis 27, in denen die Werte für den Datenbanknamen (DB_NAME), den Datenbanknutzer (DB_USER), das Datenbankpasswort (DB_PASSWORD) und die MySQL Serveradresse (DB_HOST) geändert werden müssen. Nach dem Bearbeiten der Datei nicht vergessen, die Datei neu hochzuladen.

Diese Grafik zeigt die entsprechenden Werte rot hinterlegt

Schritt 8: Doman transferieren und richtig verlinken

Sobald alle Dateien und die Datenbank bei dem neuen Anbieter sind, kann nun der Domaintransfer vorgenommen werden. Wie dies funktioniert, ist je nach Anbieter unterschiedlich, in der Regel muss aber der Auth-Code übermittelt werden. Sobald die Domain beim neuen Anbieter ist, müssen Sie sie intern auf den Ordner verlinken, in den Sie die WordPress Dateien hochgeladen haben. Nach wenigen Minuten sollte Ihre Seite dann unter der Domain wieder aufgerufen werden können.

Schritt 9: .htaccess Datei neu generieren

Aus gutem Grund wurde die .htaccess Datei nicht mit hochgeladen: Häufig hat sie sehr spezielle Einstellungen, die nur auf dem alten Server funktionieren und auf dem neuen Server zu einer weißen Seite führen würde. Daher sollten Sie sich jetzt in das WordPress Backend einloggen (die Zugangsdaten sind gleich geblieben) und unter Einstellungen -> Permalinks die Permalinkstruktur aktualisieren.

Schritt 10: Die WordPress Seite überprüfen

Im letzten Schritt gilt es die Funktionen der Webseite zu überprüfen. Es kann sein, dass Plugins deaktiviert und neu aktiviert werden müssen oder die Widgets neu angeordnet werden müssen – alles in allem sollte die Seite aber genauso funktionieren, wie vorher.

Als Faustregel gilt: Beginnen sie den Domaintransfer erst dann, wenn alle Dateien und die Datenbank zu dem neuen Anbieter transferiert wurden. Wenn sie den Leitfaden Schritt für Schritt befolgen, dürften Sie eine WordPress Installation – wenn alles reibunglos vonstatten geht – innerhalb von ein bis zwei Tagen umziehen können. Zeitraubend sind zwar immer die Up- und Download-Phasen, diese Zeit sollte man produktiv für andere Dinge nutzen.

Was ist SEO Street?

Bei SEO Street handelt es sich um eine Sammlung qualitativ hochwertiger, themenspezifischer Artikelverzeichnisse, die zur Suchmaschinenoptimierung (Linkbuilding) genutzt werden können. Wir sorgen uns nicht nur um optimale SEO-Verhältnisse auf den einzelnen Seiten, worunter auch eine hohe Qualitätskontrolle der Artikel fällt, sondern bauen regelmäßig Links für die Artikelverzeichnisse auf.
SEO Street Artikelverzeichnisse unterscheiden sich von herkömmlichen Artikelverzeichnissen vorallem darin, dass sie nicht als Artikelverzeichnisse erkennbar sind und unsere Redaktion regelmäßig auch Artikel ohne ausgehende Links veröffentlicht, die potentiellen Lesern einen hohen Mehrwert bieten.

Zurzeit haben unsere Artikelverzeichnisse einen PageRank von 0 und eine vergleichsweise geringe Anzahl an Backlinks – denn sie sind erst seit drei Monaten online. Trotzdem lohnt sich ein Backlink, da wir die Seiten in den kommenden Monaten und Jahren stets mit neuen Links versorgen und die gewohnt hohe Qualität beibehalten werden.

Artikel einsenden

Ein Artikel für das Artikelverzeichnis kann auf dieser Seite eingesendet werden; nach einer kurzen Überprüfung wird er dann auf der jeweiligen Seite veröffentlicht.

In den nächsten Wochen werden weitere Seiten aus den Themengebieten Auto & Motor, Gadgets und Finanzen & Versicherungen freigegeben. Bis auf Weiteres wird das Angebot kostenfrei bleiben, bei stärkerer Nachfrage ist ein geringer Kostenbeitrag angedacht.

Neben zahlreichen sinnvollen Funktionen kann WordPress eines besonders gut: Doppelte Inhalte erzeuguen. Wenn ein Artikel auf Kategorie-, Datums-, Autoren- und Schlagwortebene angezeigt wird, existieren schnell mehrere URLs, die in etwa den gleichen Inhalt bieten. Viele SEOs kommen daher zu dem Schluss: Archivseiten müssen aus dem Suchmaschinen-Index per <meta name="robots" content="noindex"> entfernt werden, damit sie keinen Schaden anrichten.

Dabei wird jedoch vergessen, das speziell mit WordPress noch viel mehr möglich ist, als einfach nur Überschrift und Content der einzelnen Artikel aufzulisten. Interessant für den Bereich der Suchmaschinenoptimierung ist besonders die Kategorie Beschreibung. Beim Anlegen oder Bearbeiten einer Kategorie kann eine Beschreibung hinterlegt werden, die mit einem einfachen Code innerhalb der archive.php ausgegeben werden kann:

1

<?php echo category_description(); ?>

Es empfiehlt sich, einen mindestens 150 Wörter langen Text zu schreiben, der die Inhalte der Kategorie beschreibt und mit den wichtigsten, themenrelevanten Schlagworten versehen ist. Schon bietet die Kategorie-Seite uniquen Content, sodass die Seite von Suchmaschinen indexiert werden kann.

Bei der Auflistung der Beiträge gibt es verschiedene Möglichkeiten, am herkömmlichsten ist die Kombination aus Überschrift und Inhalt. Entscheidet man sich tatsächlich für diese Variante, besteht natürlich die Gefahr des Duplicate Contents: Hier kann jedoch das canonical Meta-Tag Abhilfe verschaffen, das auf den Artikelseiten platziert werden sollte. Es teilt den Suchmaschinen mit, welche Adresse indexiert werden soll. SEO Plugins wie wpSEO oder das All in One SEO Pack generieren den Quelltext für das canonical-Tag automatisch.

Es gibt jedoch auch andere Möglichkeiten, Archivseiten zu gestalten. Neben der Auflistung der reinen Überschriften ohne den Content bieten besonders die Artikelbilder einen großen Spielraum für WordPress Designer. So lassen sich Archivseiten visuell gestalten, das hat gleich zwei Vorteile: Man erspart sich den doppelten Content und die Nutzer erhalten gleichzeitig eine optisch ansprechende Oberfläche. Artikelbilder lassen sich innerhalb der Schleife mit einer einfachen Funktion ausgeben:

1
2
3

if ( has_post_thumbnail() ) {
  the_post_thumbnail();
}

Weitere Informationen zu the_post_thumbnail() finden Sie hier

Die Gestaltung von Archivseiten unter SEO Sicht bietet also verschiedene Möglichkeiten, um Duplicate Content zu verhindern – statt Archivseiten einfach von der Indexierung auszuschließen sollte ihr Potential der internen Verlinkung genutzt werden, um Suchmaschinen neue Inhalte zu bieten.