Eigenes WordPress-Theme erstellen

Suchmaschinenoptimierung, WP als CMS, Navigations-Alternativen und ein paar abschließende Tipps: Die Suchmaschinenoptimierung Ihres Projektes

∅ 4.8 / 32 Bewertungen

Die Suchmaschinenoptimierung Ihres Projektes

Auf dieser Seite

Anmerkung:

Denjenigen von Ihnen, die bereits den ersten WordPress-Kurs gelesen haben, wird einiges im folgenden Abschnitt bekannt vorkommen. Wir besprechen das Thema Suchmaschinenoptimierung hier noch einmal ausführlich, weil das Thema auch hierher gehört. Im Gegensatz zu den Unterlagen im ersten WordPress-Kurs wird der Abschnitt am Ende um einige Aspekte erweitert.

Der Unterschied zwischen der On-Page- und der Off-Page-Optimierung

Prinzipiell gibt es zwei Arten von Suchmaschinenoptimierung: On-Page- und Off-Page-Optimierung . Die erste beschäftigt sich mit Maßnahmen, die die Website bzw. deren Aufbau und Struktur betreffen. Die zweite Art der Optimierung beschäftigt sich mit Maßnahmen jenseits der Website. Hierbei geht es hauptsächlich um die Erhöhung der Linkpopularität bzw. die Erhöhung der Anzahl der eingehenden Links. Wir werden uns im folgenden Abschnitt mit der On-Page-Optimierung beschäftigen.

"Sprechende" URLs und die XML-Sitemap

Zwei Maßnahmen in Bezug auf die Suchmaschinenoptimierung werden Sie kennen bzw. haben diese schon umgesetzt. Entweder weil Sie den Vorgängerkurs gelesen haben oder weil Sie schon ein WordPress-Blog betreiben.

Auf noch erstaunlich vielen dynamischen Websites (egal ob Blogs, Foren oder Wikis) sieht man nicht-sprechende URLs im Einsatz, z. B. . Das ist sowohl für den Nutzer als auch für die Suchmaschine nicht sonderlich aussagekräftig. Besser ist stattdessen: www.domain.de/garten/blumen/ . Hier erkennt der Besucher sofort worum es geht und die Suchmaschine hat schon zwei Keywords zum "Futtern" bekommen.

Daher empfehle ich Ihnen auf jeden Fall unter "Einstellungen" » "Permalinks", die sprechenden URLs zu aktivieren. Diese Funktion lässt sich sehr einfach einrichten, entfaltet aber eine große Wirkung.

Die zweite Maßnahme – die Erstellung einer XML-Sitemap – erleichtert dem Suchrobot die Indexierung der Seite und kann dadurch indirekt der Positionierung der Website auf die Sprünge helfen. Das passende Plugin dazu haben wir bereits im letzten Kursteil beschrieben.

Den Seitentitel optimieren

Den Seitentitel zu optimieren ist eine sehr wichtige Maßnahme, wenn es darum geht, die Website für die Suchmaschinen zu optimieren, und daneben hilft diese Maßnahme auch den Besuchern. Es wird sich immer wieder zeigen, dass sehr viele Maßnahmen in Bezug auf die Suchmaschinenoptimierung auch in direkter oder indirekter Weise den Besuchern der Website zur Gute kommen.

Nun geht es darum zu klären, was genau unter dem Seitentitel verstanden wird.

abbildung-1-optimaler-seitentitel

Abbildung 1: Optimaler Seitentitel

Mit der oberen Abbildung möchte ich Ihnen zwei Dinge zeigen. Zum einem sehen Sie noch einmal genau, was mit Seitentitel gemeint ist (siehe obere Markierung) und zum anderen sehen Sie auch direkt ein aussagekräftiges Beispiel. Darunter, innerhalb der zweiten Markierung, sehen Sie auch die sprechenden URLs im Einsatz.

Tipp: Warum ist der Seitentitel aus der vorherigen Abbildung optimal?

Die Suchmaschinen bewerten im Seitentitel lediglich die ersten 60-65 Zeichen. Daher ist es wichtig, die Überschrift bzw. den Titel des einzelnen Blog-Artikels an den Anfang zu rücken, damit auch die relevanten Begriffe des Artikels auf jeden Fall in die Bewertung kommen.

Und wie erreicht man dieses Ergebnis? Eine Möglichkeit ist es sich mit einem Text- bzw. Code-Editor zu bewaffnen und folgendes in der header.php einzufügen:

              <?php if (is_home()) { ?>
              

               <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
              

              <?php } else { ?>
              

               <title><?php wp_title('|', true, 'right'); bloginfo('description'); ?></title>
              

              <?php } ?>

Was erreicht dieser Code? Dieser Code besteht aus einem if - else -Konstrukt. Es wird abgefragt, ob man sich auf der Startseite befindet. Wenn ja, dann wird der Name des Blogs ( <?php bloginfo('name'); ?> ) gefolgt von dem Blog-Slogan ( <?php bloginfo('description'); ?> ) angezeigt, hier die passende Abbildung:

abbildung-2-seitentitel-auf-der-startseite

Abbildung 2: Seitentitel auf der Startseite

Befindet man sich allerdings nicht auf der Startseite, sondern auf einer Unterseite, soll zuerst der Titel ( wp-title(); ), gefolgt von einem Trennzeichen und dem Blog-Slogan erscheinen:

abbildung-3-seitentitel-einer-unterseite

Abbildung 3: Seitentitel einer Unterseite

Und hier zur Verdeutlichung der Seitentitel der Kategorie "WordPress" in unserem Weblog:

abbildung-4-seitentitel-einer-kategorie

Abbildung 4: Seitentitel einer Kategorie

Durch die Anpassung des Seitentitels in der header.php wird der Seitentitel nach dem gleichen Prinzip auch auf anderen Unterseiten (Pages, Archiv etc.) so angezeigt wie in den letzten beiden Abbildungen.

Kommen wir noch einmal kurz zu dem neuen Code, speziell dem in der Zeile 10: wp_title('|', true, 'right'); . Der Template-Tag wp-title(); hat seit der Version 2.5 drei Parameter. Der erste ist für das Trennzeichen, der zweite Parameter bestimmt, ob der Titel ausgegeben wird und mit dem dritten Parameter positioniert man das Trennzeichen (rechts oder links vom Titel).

Überschriften und Zwischenüberschriften einsetzen

So wie man in einem Office-Dokument die einzelnen Bereiche durch Überschriften einleitet bzw. einen Text strukturiert, so kann man dies auch in einem (X)HTML-Dokument tun … und WordPress nutzt XHTML-Dokumente. Es nimmt die Inhalte – welche Sie verfasst haben – aus der Datenbank und generiert dynamisch eine (X)HTML-Seite.

abbildung-5-auswahl-von-ueberschriften

Abbildung 5: Auswahl von Überschriften

Für die Überschriften sind in HTML die Elemente h1 - h6 zuständig. Wobei h1 die Überschrift mit höchster und h6 mit der niedrigsten Ordnung ist. Verwenden Sie die Überschriften semantisch richtig. Das heißt, Sie sollen eine bestimmte Überschrift genau dort verwenden, wo sie hingehört, also nicht h2 wählen, wo h3 richtig wäre, weil Sie die große und fette Schrift von h2 schön finden.

HTML ist entgegen anders lautender Gerüchte keine Programmiersprache (das ist z. B. C++), keine Seitenbeschreibungssprache (das ist z. B. PDF) und auch keine Textverarbeitung (dies versucht MS Word zu sein). (X)HTML ist eine Auszeichnungssprache : Sie zeichnen einzelne Bereiche aus und geben somit dem gesamten Dokument eine Struktur und dem Inhalt die Bedeutung. Wie das dann aussieht ist (X)HTML schnurz-piep-egal. Um das visuelle – Layout und Design – kümmert sich CSS. (X)HTML und CSS sind gute Teamplayer und erledigen ihre Bereiche sehr gut, daher ist es nicht sinnvoll (X)HTML die Aufgaben von CSS zu übertragen.

Wenn Ihnen also die Schriftgröße von h3 zu klein ist, zeichnen Sie bitte die entsprechende Überschrift nicht mit h2 aus. Lassen Sie h3 dort stehen und notieren Sie in der CSS-Datei z. B. folgendes: h3 {font-size: 120%;} .

Noch einmal zurück zu den Überschriften. Bei längeren Texten – egal ob in einem Blog-Beitrag oder auf einer Page (Seite) – ist es sinnvoll, den Text mit Zwischenüberschriften zu gliedern. Das hilft dem Leser und ist gut für die Suchmaschinenoptimierung.

Allerdings gilt es zu beachten, dass z. B. das Default-Theme die Überschrift erster Ordnung ( h1 ) bereits für den Schriftzug im Kopfbereich und die Überschrift zweiter Ordnung ( h2 ) für die Überschriften bzw. Titel der Blog-Beiträge und der Pages "reserviert" hat. Somit stehen Ihnen h3 - h6 zur Verfügung, aber die vier Arten von Überschriften sind mehr als ausreichend um den Inhalt eines Beitrages oder einer Page zu strukturieren.

Diese Struktur kann allerdings von Theme zu Theme abweichen, daher lohnt es sich, in den Template-Dateien nachzusehen, welche Überschriften bereits "reserviert" sind.

Es gab vor knapp zwei Jahren Anzeichen dafür, dass Google der Überschrift dritter Ordnung ( h3 ) einen recht hohen Wert beigemessen hat, weil diese Überschrift in sehr vielen Blog-Templates die Zwischenüberschriften im Inhalt sind (also relevant für den Inhalt) - und weil sehr viele Webmaster es übertrieben haben, und die ersten beiden Überschriften ( h1 und h2 ) mit relevanten Schlüsselwörtern vollgestopft hatten.

Schlüsselwörter in der Verlinkung unterbringen

Viele Webmaster verlinken innerhalb der eigenen Website (interne Links) zu wenig und/oder nicht optimal. Verlinken Sie innerhalb Ihrer Website überall dort, wo Sie denken, dass es den Besuchern helfen könnte.

Betreiben Sie ein Weblog, senden Sie doch einen Pingback vom neuen auf den alten Beitrag, wenn Sie den alten Beitrag erwähnen. Der Leser des neuen Beitrags weiß dann, dass es einen älteren Beitrag zu dem Thema gibt und der Leser des alten Beitrages sieht in den Kommentaren den Pingback und weiß, dass es zu dem Thema auch einen aktuellen Beitrag gibt.

So wie Sie mit dieser Maßnahme dem Besucher helfen, helfen Sie auch der Suchmaschine, diesen Beitrag zu finden.

Achten Sie bei der Verlinkung außerdem darauf, wichtige Schlüsselbegriffe direkt in den Linktext aufzunehmen. Hier ein sehr unglückliches Beispiel, welches man leider viel zu häufig sieht:

Beispiel:

Um den neuen Artikel zur gesetzlichen Versicherung zu lesen, klicken Sie hier .

Viel besser ist folgendes:

Beispiel:

Lesen Sie den neuen Artikel zur gesetzlichen Versicherung.

Diese Verlinkung ist für den Leser viel logischer und in punkto Suchmaschinenoptimierung ist es viel besser, da die Suchmaschinen es sehr hoch bewerten, wenn die relevanten Schlüsselwörter (Keywords) im Link-Text auftauchen. Allerdings sollten Sie hier, wie in allen Bereichen der Suchmaschinenoptimierung, maßvoll vorgehen. Wenn Sie übertreiben und in den Verlinkungen zu viele Keywords unterbringen, verärgern Sie nicht nur die Besucher sondern unter Umständen auch Tante Guugel .

Benennung von Dateien

Auch Dateien – sowohl Bilder als auch z. B. PDF-Dateien – kann man mit sprechenden Namen beglücken. Folgende Namen:

  • wordpress-workshop.pdf

  • wordpress-admin-ansicht.png

sind auf jeden Fall leserlicher und Aussagekräftiger als:

  • neue-datei1.pdf

  • neues-bild.png

und zwar nicht nur für den Besucher, sondern auch für die Suchmaschinen. Bedenken Sie, dass zumindest Google die PDF-Dateien indexiert und dass alle gängigen Suchmaschinen auch die Möglichkeit anbieten, nach Bildern (z. B. die Bilder-Suche von Google) zu suchen. Dafür sind aussagekräftige Namen sehr wichtig.

Das alt-Attribut bei den Bildern

Ich würde Ihnen hier gerne einen kleinen zusätzlichen Hinweis bezüglich der Bilder geben. An vielen Stellen ist da etwas von einem alt -Tag zu lesen. Das ist einfach falsch! Es gibt weder in HTML noch in XHTML einen alt -Tag, es gibt lediglich ein alt -Attribut. So ist ein Bild-Element aufgebaut:

<img src="bild.png" alt="Ein Foto von mir" title="Meine Kumpels und ich feiern" />

Das ganze im oberen Beispiel ist ein (X)HTML-Element, img ist der Tag, alt und title sind Attribute und innerhalb der Anführungszeichen befinden sich die Attributwerte. Schematisch ist ein (X)HTML-Element folgendermaßen aufgebaut:

<Element-Name Attribut="Wert"> Inhalt des Elements</Element-Name>

<Element-Name Attribut="Wert"> ist hierbei der Start-Tag und </Element-Name> ist der End-Tag. Wobei zu erwähnen ist, dass manche Elemente – <br /> für Zeilenumbruch, <img /> für Bilder, <hr /> für die horizontale Trennungsline etc. – nur aus einem Tag bestehen.

Dies nur am Rande, damit Sie mit tiefer gehendem Insider-Wissen glänzen können :-).

Und bevor ich es vergesse, der Inhalt bzw. der Wert des alt -Attributs ist sehr wichtig. Dieser erscheint, wenn das Bild aus diversen Gründen nicht geladen wird und bei "Programmen", die keine Bilder anzeigen können: Textbrowser, Screenreader und Suchmaschinen. Daher ist der Inhalt dieses Attributs sehr wichtig. Allerdings würde ich Ihnen nicht empfehlen, dort Kurzgeschichten unterzubringen oder mit Keywords zu spamen … das kann nach hinten losgehen. Ein kurzer, aussagekräftiger Satz über das Bild ist ausreichend.

Aufgabe:

Aufgabe: Fragen zur Selbstprüfung

1. Wie sieht die Struktur eines optimalen Seitentitels aus? Und warum?

2. Was ist der Unterschied zwischen dem alt -Attribut und dem alt -Tag? Ich bin zuversichtlich, dass Sie gegen eine Fangfrage nichts einzuwenden haben. :-)

3. Nennen Sie Beispiele für einen "guten" und einen "schlechten" Seitentitel und Dateinamen.

Duplicate Content verhindern bzw. eindämmen

Unter Duplicate Content versteht man, wenn identischer Inhalt unter verschiedenen URLs erscheint. Das kann z. B. passieren, wenn man als Autor den gleichen Inhalt auf zwei verschiedenen Websites veröffentlicht, wenn jemand den Inhalt Ihrer Website klaut und als eigenen veröffentlicht oder auch einfach innerhalb des eigenen Weblogs.

Dies passiert in Weblogs und anderen dynamischen Websites sehr schnell. Zum Beispiel taucht ein Blog-Artikel sowohl auf der Startseite, als auch unter dem eigenen Permalink, als auch zum Beispiel in den Suchergebnissen.

Das Problem an der ganzen Sache ist, dass wenn ein identischer Inhalt auf mehreren Adressen auftaucht, dann müssen die Suchmaschinen entscheiden welche URL sie indizieren und welche Adressen sie als Dubletten ignorieren sollen. Daher könnte es z. B. sein, dass ein Artikel von Ihnen nicht unter seinem Permalink, sondern mit der URL der Kategorieübersicht indiziert wird.

Was kann man also gegen das Problem von Duplicate Content (DC) unternehmen? Hier gibt es mehrere unterschiedliche Vorgehensweisen. Zum einen steht dem WordPress-Nutzer eine Reihe von SEO-Plugins zur Verfügung, wie z. B. wpSEO oder izioSEO. Diese Plugins werden einmal konfiguriert und verrichten dann ihre Arbeit automatisch. Sie teilen u. a. den Suchmaschinen mit welche URL eines Inhaltes ist die relevante Adresse.

Allerdings kann man auch mit ganz einfachen Mittel das Problem entschärfen. Speziell bei längeren Artikeln empfiehlt es sich den Beitrag zu trennen und zwar in einen einleitenden Teil und den Rest. Auf den Übersichtsseiten wird lediglich der einleitende Teil gezeigt und zum Rest gelangt man durch das Anklicken des " weiterlesen…"-Links .

Mit dieser einfachen Maßnahme haben Sie zwei Sachen erreicht. Zum einen ist die DC-Problematik etwas entschärft – unterschiedlicher Inhalt auf den Übersichten und der Einzelansicht – und zum anderen kommt das den Lesern zu Gute wenn nicht der komplette Artikel von z. B. neun DIN-A4-Seiten in der Übersicht auftaucht.

Eine weitere einfache Maßnahme kann man mit Hilfe von Conditional Tags erreichen. Hier der Code, welchen man im Kopfbereich ( <head></head> ) einfügen muss. In den allermeisten WordPress-Themes wäre dies in der header.php .

              <?php
              

              if (is_search()) {
              

               echo "<meta name=\"robots\" content=\"noindex, follow\" />\n";
              

              }
              

              ?>

Befindet man sich auf einer Suchergebnis-Seite – dann wird folgender Meta-Tag eingefügt:

<meta name="robots" content="noindex, follow" />

Das signalisiert den Suchmaschinen: folge bitte allen Links auf dieser Seite, indiziere aber bitte nicht den Inhalt dieser Seite .

Eine weitere Maßnahme ist das Erstellen von neuen Template-Dateien. Die Template-Dateien category.php und search.php sind zuständig für die Ausgabe der jeweiligen Übersichtsseite. Als Grundlage für die beiden Dateien nutze ich die index.php , welche ich an wenigen Stellen modifiziert habe. Folgendermaßen könnte die category.php ausschauen:

              <?php get_header(); ?>
              


               <div id="inhalt">
              


               <h2>Die Kategorie "<?php single_cat_title(); ?>"</h2> 
              

               <div class="kategorie-info">
              

               <p>Hier sind alle Beiträge aufgelistet, die in die Kategorie <strong><?php single_cat_title(); ?></strong> einsortiert wurden.</p>
              


               <p>Du hast die Möglichkeit den <a href="<?php echo get_category_link($cat);?>feed/" class="fett">RSS-Feed</a> speziell nur für diese Kategorie zu abonnieren.</p>
              

               </div>
              


              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              


               <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Der Verweis (Permalink) zu: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
              

               <div class="beitrags-info">Von <?php the_author() ?> am <?php the_time('d. F Y'); ?> um <?php the_time('H:i'); ?> <?php edit_post_link(); ?></div>
              


               <div class="der-beitrag">
              

               <?php the_excerpt(); ?>
              

               </div> <!-- Ende des jeweiligen Beitrags -->
              


               <div class="feedback">
              

               <?php comments_popup_link('Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'); ?>
              

               </div>
              

               <!-- Ende des jeweiligen Beitrags -->
              


              <?php comments_template(); /* Der Kommentarbereich */ ?>
              


              <?php endwhile; else: ?>
              

               <p>Tut mir leid, es wurde kein passender Beitrag gefunden.</p>
              

              <?php endif; ?>
              


               <p><?php posts_nav_link(' – ', '« Zurückblättern', 'Weiterblättern »'); ?></p>
              


               </div><!-- /#inhalt -->
              


              <?php get_sidebar(); ?>
              

              <?php get_footer(); ?>

Gegenüber der index.php gibt es zwei konkrete Änderungen. Zum einen habe ich eine Informationsbox vor der Auflistung der Beiträge eingebunden. In der Info-Box wird zuerst der Name der Kategorie ( single_cat_title(); ) ausgegeben und darunter folgt der Link zu dem Newsfeed der jeweiligen Kategorie: echo get_category_link($cat);?>feed/ ergibt dann z. B. www.domain.de/kategorie/allgemein/feed/ .

Die zweite Änderung betrifft die Ausgabe der einzelnen Artikel. Diese werden nicht mehr in voller Länge ausgegeben, sondern lediglich ein Auszug ( the_excerpt(); ). Der Auszug besteht standardmäßig aus maximal 55 Wörtern des Original-Artikels und er wird ohne Formatierungen und Auszeichnungen (engl.: plain text) ausgegeben.

Sie können aber natürlich, im Backend auch einen individuellen Auszug verfassen. Das Modul dafür befindet sich direkt unterhalb des Editorfeldes für den Inhalt eines Artikels.

So schaut das Ganze dann aus:

abbildung-6-die-neue-kategorie-uebersicht

Abbildung 6: Die neue Kategorie-Übersicht

Damit das ganze auch visuell umgesetzt wird, müssen weitere Anpassungen an der style.css stattfinden:

              .fett {
              

               font-weight: bold;
              

              }
              

              …
              

              #inhalt .kategorie-info {
              

               background: #dcdecf;
              

               padding: 10px 12px;
              

               border: 1px solid #bbc0a2;
              

               margin: 7px 0 17px 0;
              

              }
              

              #inhalt .kategorie-info p {
              

               margin: 3px 0;
              

              }

Nach dem gleichen Prinzip erstellt man auch das Such-Template ( search.php ). Als Vorlage dient uns hierbei die soeben erstellte category.php .

              <?php get_header(); ?>
              


               <div id="inhalt">
              


               <h2>Deine Suche nach "<?php the_search_query(); ?>"</h2>
              

               <div class="kategorie-info"><p>Falls deine Suche nach <strong><?php the_search_query(); ?></strong> kein oder kein zufriedenstellendes Ergebnis geliefert hat, dann versuche es im <strong><a href="/archiv/">Archiv</a></strong>. Dort findest du eine Tag-Wolke, einen Monats-Archiv und eine Auflistung der 25 letzten Beiträge.</p></div>
              


              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              


               <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Der Verweis (Permalink) zu: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
              

               <div class="beitrags-info">Von <?php the_author() ?> am <?php the_time('d. F Y'); ?> um <?php the_time('H:i'); ?> <?php edit_post_link(); ?></div>
              


               <div class="der-beitrag">
              

               <?php the_excerpt(); ?>
              

               </div> <!-- Ende des jeweiligen Beitrags -->
              


               <div class="feedback">
              

               <?php comments_popup_link('Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'); ?>
              

               </div>
              

               <!-- Ende des jeweiligen Beitrags -->
              


              <?php comments_template(); /* Der Kommentarbereich */ ?>
              


              <?php endwhile; else: ?>
              

               <p>Tut mir leid, es wurde kein passender Beitrag gefunden.</p>
              

              <?php endif; ?>
              


               <p><?php posts_nav_link(' – ', '« Zurückblättern', 'Weiterblättern »'); ?></p>
              


               </div><!-- /#inhalt -->
              


              <?php get_sidebar(); ?>
              

              <?php get_footer(); ?>

Mit Hilfe des Template-Tags the_search_query(); wird das eingesetzte Suchwort ausgegeben. Falls die Suche für den Besucher kein zufrieden stellendes Ergebnis liefert, kann man ihn z. B. auf eine Archiv-Seite hinweisen.

Mit den zwei neuen Template-Dateien haben Sie, wie schon weiter oben erwähnt, zwei Effekte erreicht. Zum einen haben Sie die DC-Problematik entschärft und zum anderen dem Besucher zusätzlichen Komfort verschafft: Hinweis auf die Kategorie und Hinweis auf das Archiv.

An diesem Beispiel sieht man deutlich, dass die Optimierungen für die Suchmaschinen und für die Besucher Hand in Hand gehen.

Kanonische URLs

Eine neue Möglichkeit um die DC-Problematik in den Griff zu bekommen verspricht der neue Attributs-Wert für das link -Element:

              <link 
              rel="canonical"
               href="http://www.perun.net" />

rel="canoncial" ist recht jung und damit kann man den gängigen Suchmaschinen (Google, MSN und Yahoo) "sagen" welche Seite bzw. welche URL zu bevorzugen ist, falls es im System DC geben sollte. Sofern Sie mindestens WordPress 2.9 einsetzen, müssen Sie sich zu diesem Thema keine Sorgen machen, weil WordPress automatisch im Kopfbereich der einzelnen Artikel das passende rel="canoncial" einfügt .