Kategorie-Archiv: Tipps

Bilder und Videos als OnPage Ranking Faktor

Geschätzte Lesezeit: 2 Minuten, 25 Sekunden

Guter Content produziert bessere Platzierungen in den Trefferlisten. Wer sich mit SEO beschäftigt, sollte Mediendateien wie Bilder und Videos nicht vernachlässigen, denn sie können das Ranking positiv beeinflussen.

Bilder

Anzahl an Bildern und Videos

Der wichtigste Grundsatz für SEO Maßnahmen lautet: Mindestens ein Bild pro Beitrag verwenden. Dieses Bild sollte entsprechende Beschriftungen (Anzeigetext, Meta Tags) und einen für SEO sinnvollen Dateinamen haben. Gute Dateinamen enthalten Keywords, schlecht lauten 023245jsh.jpg oder ähnlich.

Je mehr wertige Bilder auf einer Seite vorhanden sind, desto höher der Nutzen für den Leser. Folgerichtig stuft Google Webseiten mit nutzbringenden Bildern auch höher ein als solche ohne Bilder. Übrigens scheint Bing Seiten ganz ohne Bilder relativ schnell als minderwertig einzustufen und daraufhin zu deindexieren. Wahrscheinlich, weil ein Text schnell erzeugt ist, ein thematisch passendes Bild aber nicht ohne Aufwand hinzugefügt werden kann.

Auch ein Video im Beitrag schadet nicht, sondern nützt eher. Das Video sollte natürlich eingebettet sein (YouTube o.ä.) und keine Ladezeit fressen.

Vermieden werden sollten populäre Bilder, die tausendfach in anderen Websites verwendet wurden. Das wird eher als Duplicate Content eingestuft und nicht als positives Kriterium für das Ranking. Es folgen weitere Tipps für Bilder SEO und Optimierungsmaßnahmen für Videos.

Größe und Auflösung

Dateigröße von Bildern

Hier schaut Google genau hin, siehe PageSpeed Insights, das ist der Geschwindigkeitscheck der Suchmaschine. Bilder, die klein angezeigt werden aber physisch wesentlich größer sind, werden als negativ eingestuft. Das liegt daran, dass Google jeder Seite in Crawl Budget zuweist. Dieses Budget ist notwendig geworden, weil es immer mehr Websites gibt, die indiziert werden wollen und die Server Ressourcen begrenzt sind. Daher sollten Webmaster sicherstellen, dass deren Webseiten so schnell laden wie es möglich ist. Und dazu gehört auch die Optimierung von Dateigrößen. Oft reichen komprimierte JPEG Bilder vollkommen aus, es muss meist nicht eine verlustfreie PNG Datei sein.

Auflösung von Bildern

Ein Bild sollte nicht zu klein sein, sonst wirkt es negativ statt positiv! Die minimale Breite sollten 300 Pixel sein. Weiterhin sollte es verschiedene Varianten des Images geben: Die dargestellte Bildgröße und ein Vollbild, wenn der User auf das Bild klickt. Mit einem CMS wie WordPress geht das automatisch.

Dateinamen richtig wählen

Der Name einer Mediendatei sollte dem entsprechen, was das Bild darstellt. Möglichst kurz und prägnant und eher ohne Stoppworte wie und, oder usw.

Media File Renamer
Bilder umbenennen per Plugin

Profitipp: Mit dem WordPress Plugin Media File Renamer kann man nachträglich Dateinamen von Mediendateien ändern. Die Erweiterung ändert sowohl den Namen des Files als auch die Referenz darauf in allen Posts und Pages! So macht Bilder SEO richtig Spaß!

Überoptimieren vermeiden

Es ist quasi unmöglich, in den PageSpeed Insights einen Maximalwert zu erzielen. Diesen Wert erreicht man nur ohne Bilder und das wiederum würde zu einem schlechteren Ranking führen.

Reporting
PageSpeed Insights

Google ist extrem kleinlich, wenn es um die Beurteilung von Dateigrößen geht. So wird beispielsweise das von Google selbst bereitgestellt Kleinbild für den Google Play Store als optimierungswürdig eingestuft! Danke dafür, als wenn man seine Zeit nicht für sinnvollere Dinge einsetzen könnte. Das Tool meldet ab und an auch wahnwitzige Kleinigkeiten, wie etwa “Die Dateigröße von Bild X kann um 1% (750 Bytes) verringert werden”. Hier sollte man gelegentlich eine gewisse Ignoranz gegenüber Meldungen dieser Art an den Tag legen, sonst bleiben die wirklich wichtigen Arbeiten auf der Strecke.


Wie hat Dir der Artikel gefallen?

Bilder und Videos als OnPage Ranking Faktor: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,67 von 5 Punkten, basieren auf 3 abgegebenen Stimmen.

 

 

Weitere Beiträge

WordPress Templates installieren: HowTo

Geschätzte Lesezeit: 1 Minute, 53 Sekunden

Mit WordPress Templates kann einfach und komfortabel das Aussehen und auch das Verhalten von WordPress Blogs und Webseiten verändert werden. In diesem HowTo erklären wir Schritt für Schritt, wie das geht.

Tutorial

WordPress Templates installieren & nutzen

Wie man Templates oder Themes benutzt, zeigen wir an einem Beispiel. Angenommen, Dein WordPress Blog hat die URL

www.erfolgsrezepte-online.de

Dann kannst Du die Admin-Oberfläche, die zum Einspielen neuer Templates benötigt wird, aufrufen, indem Du hinter diese Adresse das Postfix /wp-admin anhängst, also so:

www.erfolgsrezepte-online.de/wp-admin

Nun siehst Du einen Screen, der in etwa so aussieht (es gibt mit Sicherheit Abweichungen, weil Du nicht die gleichen Plugins installiert hast wie wir):

WordPress Templates
WordPress Templates installieren

Klicke auf den Menüpunkt auf der linken Seite, der mit Design beschriftet ist und schon landest Du in der Themes-Verwaltung. In WordPress heisst ein Template übrigens Theme und nicht “Vorlage”, wir sprechen im folgenden also nicht mehr von WordPress Templates, sondern von Themes.

In der Startansicht im Design-Bild siehst Du die verfügbaren Themes, das sind die, die mit WordPress mitgeliefert wurden. Du kannst entweder davon eines auswählen oder Dir eines der vielen kostenlosen Themes runterladen, die im Internet online verfügbar sind. Für letzteres klicke einfach oben im Screen auf den Button Installieren, um die schnelle Installation über ein Hochladen einer vorhandenen Theme-Datei, meist im ZIP Format, zu starten. Es ist allerdings einfacher, direkt von der Themes-Seite im Admin-Bereich die Template Installation zu starten, dort gibt es eine recht komfortable und hilfreiche Auswahl an vorhandenen Themes:

WordPress Templates
WordPress Templates Installation

Initial werden die von der WordPress Redaktion vorgestellten Themes angezeigt, die sich täglich ändern. Im Karteireiter daneben sind die populären Templates zu finden und rechts daneben die neuesten.

Im Screenshot nicht zu sehen ist die Suchzeile, die ganz rechts erscheint. Hier kann man nach WordPress Templates suchen, etwa nach Web Shop, wenn man einen Onlineshop eröffnen möchte und dafür ein Layout benötigt.  Mit der Maus über das Template drüberfahren und entweder eine Vorschau ansehen oder das Theme gleich mit dem Button Installieren runterladen. Nachdem es installiert wurde, muss es noch aktiviert werden, das geht aber auch ganz einfach mit einem Klick:

Template aktivieren
WordPress Template aktivieren

Nach Aktivierung ist das Template fertig eingespielt und Dein Blog hat ein neues Aussehen bekommen 🙂
Du kannst das Design des Themes nun einfach anpassen, dafür hast Du eine einfache Möglichkeit im Theme-Menü unter Design -> Themes: Einfach das Template anklicken und auf Anpassen gehen.

Weitere Ressourcen

Eine Liste von WordPress Templates stellen wir in einem extra Artikel vor.

Buchtipp für WordPress Anfänger:

Einstieg in WordPress 4: Der schnelle & einfache Einstieg

9

Praxiswert

8.6/10

Verständlichkeit

9.6/10

Umfang

8.3/10

Preis/Leistung

9.5/10

Vorteile

  • Für Anfänger geeignet
  • Sehr günstiger Preis
  • Leicht verständlich
  • Aktuell

Nachteile

  • Weniger für Profis


Wie hat Dir der Artikel gefallen?

WordPress Templates installieren: HowTo: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,86 von 5 Punkten, basieren auf 7 abgegebenen Stimmen.

Weitere Beiträge

SEO und Sitemaps

Geschätzte Lesezeit: 4 Minuten, 40 Sekunden

Eine Sitemap ist ein Verzeichnis der Seiten einer Webpräsenz. Ursprünglich waren Sitemaps zur Orientierung für den Besucher einer Website gedacht. Heutzutage hat sich die Bedeutung einer Sitemap gewandelt: Sie spielt nun auch eine Rolle, wenn es um Suchmaschinenoptimierung (SEO) geht, denn mit ihrer Hilfe kann man das Crawling durch Suchmaschinen beschleunigen.

html Sitemaps

Sitemaps für SEO

Eine Sitemap, die für SEO relevant ist, ist eine einfach aufgebaute XML-Datei. Sie benennt alle Dateien, die für eine Suchmaschine relevant sind. Sitemaps heissen normalerweise sitemap.xml, main-sitemap.xml o.ä. und liegen oft im Hauptverzeichnis einer Webpräsenz. Sitemaps sind nicht unbedingt erforderlich, haben aber einen großen Nutzen im Rahmen der Suchmaschinenoptimierung (weiter unten beschreiben wir, warum das so ist).

Sitemaps haben einen Inhalt wie diesen:

<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>http://www.erfolgsrezepte-online.de/</loc>
<lastmod>2015-04-21T20:34:01+00:00</lastmod>
</url>
<url>
<loc>http://www.erfolgsrezepte-online.de/index.html</loc>
<lastmod>2015-04-21T20:34:01+00:00</lastmod>
</url>
<loc>http://www.erfolgsrezepte-online.de/index.htm</loc>
<lastmod>2015-04-21T20:34:01+00:00</lastmod>
</url>
</urlset>

Schon nach kurzem Betrachten erkennt man das Prinzip hinter dem Aufbau von Sitemaps dieser Art. Es wird einfach jede Datei aufgelistet und zu jeder der Pages der Zeitpunkt der letzten Änderung. Erzeugt man eine solche Sitemap automatisch mit WordPress (siehe hierzu ein geeignetes Plugin für Sitemaps, das für Search Engines wie Google, Bing und Yahoo eine solche automatisch generiert) , heisst die Datei nach aktuellem Stand sitemap_index.xml und sieht so aus:

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//www.erfolgsrezepte-online.de/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>http://www.erfolgsrezepte-online.de/post-sitemap.xml</loc>
<lastmod>2015-05-01T15:40:56+02:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.erfolgsrezepte-online.de/page-sitemap.xml</loc>
<lastmod>2015-04-30T20:27:23+02:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.erfolgsrezepte-online.de/category-sitemap.xml</loc>
<lastmod>2015-05-01T15:40:56+02:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.erfolgsrezepte-online.de/post_tag-sitemap.xml</loc>
<lastmod>2015-05-01T15:40:56+02:00</lastmod>
</sitemap>
</sitemapindex>

Diese Sitemap ist hierarchisch aufgebaut: Klickt man auf einen der Links, öffnet sich eine weitere Sitemap-Datei, die wiederum bestimmte Pages referenziert. So enthält die Sitemap für Posts die WordPress-Artikel aus denen ERFOLGSREZEPTE ONLINE besteht.

Sitemaps, wie man sie von früher kennt, sind keine XML sondern HTML-Dateien, die zur Ansicht für den menschlichen Leser gedacht sind. Sie haben auch einen Nutzwert im SEO/SEM-Bereich, aber sind vernachlässigbar, wenn eine XML-Sitemap vorliegt. Der einzige Nutzen von HTML-Sitemaps ist de facto nur noch  (immerhin!) der, dass ein Leser sich möglicherweise auf einer Website besser orientieren kann. Allerdings meinen wir, dass eine gute Suchfunktion auf einer Webpräsenz (Blog, Webseite etc.) eine Sitemap im HTML Format obsolet macht.

Der Nutzen von Sitemaps für SEO

Eine Sitemap garantiert, dass eine Suchmaschine wie Google alle relevanten Seiten indizieren kann. Weil eine Sitemap systematisch aufgebaut ist, kann Google die Webseite viel schneller indizieren als wenn alle Links gecrawlt (verfolgt) werden müssten.
Man kann seine Sitemap direkt in den Google Webmaster Tools einreichen, unser extra Artikel dazu erklärt genau, wie das geht und welche weiteren Vorteile Sitemaps als SEO-Maßnahme bringen. Google beschreibt übrigens auch offiziell noch einmal, warum Sitemaps für die Suchmaschine insbesondere wichtig sind.

Bevor man seine Sitemap bei Google einreichen (und auch testen lassen) kann, muss man seine Webseite bei den Webmaster Tools eintragen und verifizieren (Google erklärt in den Tools, wie das geht und wir auch im o.g. Artikel).
Nachdem die Sitemap für Deine Web Site eingereicht wurde, sieht man so etwas in den Tools:

Webmaster Tools Sitemap
Sitemap Statistik

Alternativ kann man seine Sitemap auch über die robots.txt Datei bekanntmachen, indem man folgende Zeile hinzufügt:

Sitemap: http://www.deine-website.de/name-deiner-sitemap.xml

Wir empfehlen, der HTML Sitemap den weit verbreiteten und von vielen Suchmaschinen direkt gefundenen Namen sitemap.xml zu geben. Wer noch HTML verwendet, nimmt natürlich eine andere Dateiendung.

Wenn viele Daten auf einer Webseite liegen und der Betreiber Crawling unterbinden möchte, dann sollte man stattdessen einen geheimen Namen für die Sitemap wählen und diesen NICHT in der robots Datei hinterlegen, sondern NUR in den Webmaster Tools:

Sitemap Filename
Sitemap Dateiname

Wenn Eure Website mit WordPress erstellt wurde, ist das Erstellen einer Sitemap grundsätzlich kein Problem, da ein Generator auf dem Server verwendet werden kann: In diesem Grundlagenartikel erklären wir es.

Für eine bestehende Webseite gibt es Tools zur Erstellung von Sitemaps mit einem Generator, auch das haben wir in einem Artikel beschrieben.

Wer sich tiefergehend mit dem Thema SEO beschäftigen möchte, dem empfehlen wir das Buch Website Boosting 2.0 von Mario Fischer, der auch Herausgeber der regelmäßig erscheinenden SEO-Zeitschrift ist, die genau wie das Buch heisst:

Website Boosting 2.0: Suchmaschinen-Optimierung, Usability, Online-Marketing

€ 34,95
9.3

Praxiswert

9.1/10

Verständlichkeit

9.2/10

Umfang

9.8/10

Preis

8.9/10

Vorteile

  • Sehr umfangreich
  • Große Themenvielfalt
  • Insidertipps
  • Viele Tipps & Tricks

Nachteile

  • Fülle an Informationen

Interessante Fakten zu XML-Sitemaps

Sitemaps unterliegen gewissen Restriktionen und bieten andererseits ein paar Freiheitsgrade:

  • Sitemaps sollten nicht mehr als 50000 URLs beinhalten und nicht größer als 10 Megabytes sein, ansonsten können sie nicht mehr vernünftig eingelesen werden und gelten als nichtexistent
  • Man kann Sitemaps komprimiert einreichen, etwa ZIP-komprimiert. Ein Generator erleichtert diese Arbeit enorm.
  • In den Webmaster Tools kann man sowohl Fehler in der Struktur einer eingereichten Sitemap für seine Websites erkennen als auch, ob und wann Google diese bereits indiziert hat (initial dauert das bis zu mehreren Tagen)
  • Sitemaps können auch andere Ressourcen auf dem Server als HTML-Dateien referenzieren, beispielsweise Mediendateien oder XML-Dateien (siehe folgenden Punkt)
  • Gibt es mehrere Sitemaps pro Webpräsenz, dann kann man diese in einer übergeordneten Sitemap-Datei für die Websites zusammenfassend benennen. Diese übergeordnete Sitemap ist dann die einzige, die eingereicht werden muss, da sie eine Referenz auf die anderen Maps enthält
  • Laut Google Mitarbeiter Matt Cutts ist eine Sitemap erst für Webseiten erforderlich, die nicht als klein eingestuft werden. Konkret bedeutet das nach der Definition von Google, dass die Webpräsenz mehr als 10000 Seiten umfasst. Eine Sitemap zu haben, schadet aber in keinem Fall, daher sollte man eine haben…

Weitere Informationen zu Sitemaps

Das SEO-Praxisbuch 2016

€ 24,90
9.2

Praxiswert

9.8/10

Verständlichkeit

9.4/10

Umfang

8.7/10

Preis

8.9/10

Vorteile

  • Enormer Praxiswert
  • Topaktuelle Tipps
  • Leicht verständlich
  • Mit Insider-Tipps

Wie hat Dir der Artikel gefallen?

SEO und Sitemaps: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,80 von 5 Punkten, basieren auf 5 abgegebenen Stimmen.

Weitere Beiträge

Websites erstellen mit WordPress – HowTo für Anfänger

Geschätzte Lesezeit: 9 Minuten, 29 Sekunden

Mit WordPress können auch Anfänger schnell und effektiv professionelle Websites bauen. In diesem Tutorial zeigen wir, wie das geht und welche Plugins und Themes geeignet sind.
Webseite mit WordPress erstellen

Der Weg zur hochwertigen Webseite

In diesem Artikel wird darfestellt, wie WordPress für Anfänger zum Kinderspiel wird. Die Devise: Einfach und zukunftssicher eine hohen Ansprüchen genügende Internetpräsenz bauen und betreiben! Eine professionelle Website zu erstellen ist nicht schwer, wenn man die richtigen Tools verwendet!

Tool-Support: WordPress

Das am weitesten verbreite Content Management System (CMS) ist WordPress, zurecht! Ein CMS ist dafür da, um dynamische Inhalte beherrschbar zu machen. Dynamische Inhalte liegen immer dann vor, wenn eine Webseite sich des öfteren ändert und Inhalte anzupassen oder neu einzustellen sind. Die meisten Seiten fallen wohl in diese Kategorie. Es gibt auch Webseiten, die so gut wie nie aktualisiert werden.

Der Grund, so behaupten wir, liegt dann aber wohl eher daran, weil es ohne CMS relativ mühsam ist, eine Anpassung vorzunehmen. Die gute Nachricht: WordPress ist komplett kostenlos! Die zweite gute Nachricht: WordPress basiert auf PHP und MySQL, daher kann es auf jedem Webspace aller populären Provider installiert werden! Die dritte gute Nachricht: WordPress benötigt wenig Ressourcen, läuft also auch schon auf einem Webspace für €1,69 pro Monat, wie dem Tarif Starter XL von Alfahosting. Ab jetzt beschreiben wir Schritt für Schritt, wie Ihr von nichts zu einem vollwertigen, lauffähigen WordPress Webspace kommt, versprochen!

SEO Agentur Testsieger

Einen Webspace besorgen

Die erste Entscheidung: Auf welchem Server soll die Homepage bzw. Webpräsenz bzw. der Blog laufen? WordPress unterstützt sowohl Webseiten als auch Blogs als auch Shop-Systeme. Folgende Möglichkeiten gibt es allgemein:

  1. WordPress lokal auf dem eigenen Rechner installieren: Keine Lösung, die man öffentlich verwenden kann, sondern nur zum Üben. Die Provider-Frage entfällt hier, man hat ja seinen eigenen Rechner und keine Domäne!
  2. WordPress auf dem professionellen Webspace eines Providers laufen lassen. Schon sehr günstig zu haben, inklusive einer Domain (beispielsweise mit .de-Endung)

Wenn man Möglichkeit eins wählt, dann muss man WordPress herrunterladen und es lokal auf dem eigenen Rechner installieren. Wie das geht, beschreiben wir in diesem Artikel. Wenn die Installation schon vollzogen ist, kann der nächste Abschnitt übersprungen werden.

Einen Provider für den WordPress Webspace finden

Wir haben mehrere Provider getestet und können ein paar Empfehlungen geben. Welchen Provider man wählt, ist eine individuelle Entscheidung, die auch vom Budget abhängt. Insgesamt sind aber alle vorgestellten Hosting Dienstleister günstig, man wird nicht arm dabei, versprochen!

Strato Tarife

Man braucht mindestens den Tarif PowerWeb Starter, den es bei Strato aktuell für €3,90 pro Monat gibt (bei Laufzeit von 12 Monaten sogar die ersten 3 Monate gratis – Stand: 30.04.2015). In diesem Tarif ist alles enthalten, was für WordPress benötigt wird:

  • Eine Domäne: Klar, sonst könnte ja niemand die Internetseite finden
  • Webspace: Speicherplatz für Deine Webpräsenz, irgendwo müssen WordPress sowie Deine Texte und Bilder ja abgelegt werden
  • PHP und MySQL vorinstalliert: Wird für WordPress benötigt
  • WordPress selbst: Das installierst Du mit wenigen Klicks mit dem Strato-eigenen Appwizard (siehe weiter unten)

All-Inkl Tarife

Hier reicht schon der kleinste Tarif, den All-Inkl anbietet (daran sieht man auch die Ausrichtung dieses Providers, er geht mehr hin zu leistungsfähigen Systemen). Der Minimaltarif ist All-Inkl privat (die ersten 3 Monate sind komplett kostenlos und man kann flexibel kündigen, danach kostet der Webspace inklusive 3 Domains €4,95 pro Monat). Der Tarif enthält:

  • 3 Domänen
  • Webspace: 50 Gigabytes, das reicht bis in alle Ewigkeit, solange Du keine großen Videos speichern willst
  • PHP und MySQL
  • WordPress selbst: die Installation ist kinderleicht mit dem Installations-Assistenten (siehe nächsten Abschnitt)

Ob Ihr Euch für Strato oder All-Inkl entscheidet, ist Euch überlassen. Strato ist günstiger, aber All-Inkl bietet gleich 3 Domänen inklusive und kann flexibler gekündigt werden. Wir haben Accounts bei beiden Providern und sind mit Strato und All-Inkl zufrieden.

WordPress installieren

Die meisten Provider bieten für den Einstieg bereits eine Installationsroutine für WordPress an. Wir geben hier ein Beispiel für All-Inkl, für Strato geht das analog mit dem Strato App-Wizard. Wer weitergehende Unterstützung braucht, dem empfehlen wir das Einsteigerbuch WordPress für Dummies oder Einstieg in WordPress 4.1.

WordPress auf All-Inkl installieren

Dazu den Kundenbereich aufrufen über die Adresse https://kas.all-inkl.com/ und einloggen mit Kundennummer und Passwort (diese Daten hat All-Inkl Dir nach der Bestellung eines Webspaces per Mail zugeschickt). Danach im Kundenbereich den Menüpunkt Software-Installation wählen:

WordPress Installer
All-Inkl WordPress installieren

Als nächstes erscheint der Installations-Assistent, in den man WordPress auswählt und seine Domäne auswählt:

WordPress
WordPress Installation

Die Daten im grün umrandeten Bereich vergebt Ihr selbst. Wähle also einen Benutzernamen nach Deinem Geschmack – aber ohne Leerzeichen und am besten nur bestehend aus Buchstaben und Zahlen. Bei Admin-Mail gibst Du Deine Mailadresse an, wo Du wichtige Infos von Deiner WordPress Webpräsenz hingeschickt haben willst – normalerweise bekommst Du keine Post von WordPress, außer, es ist was wichtiges (falls Du ein Blog hast, wirst Du per Mail benachrichtigt, wenn ein neuer Beitrag freizuschalten ist o.ä.). Dann weiter zum nächsten Schritt mit Klick auf den Weiter-Button. Hier wählt man die Datenbank für WordPress aus. Normalerweise hast Du noch keine in Deinem Webspace, daher übernimmst Du einfach die Einstellungen und klickst wieder auf den Weiter-Button:

Datenbank für WordPress
WordPress Datenbank auswählen

Der nächste Schritt ist fast genauso einfach: Hier müssen nur die Lizenzen bestätigt werden:

WordPress Lizenz
Lizenz bestätigen

Also einfach die zwei Häkchen setzen und Installation jetzt starten anklicken. Nach weniger als einer Sekunde kommt schon die Erfolgsmeldung, die auch Angaben zur WordPress-Installation enthält:

WordPress erfolgreich
WordPress wurde installiert

Fertig, nun ist WordPress installiert und kann auch schon voll genutzt werden. Wir müssen dennoch ein paar Einstellungen vornehmen und unser System einrichten:

WordPress einrichten

Dazu rufen wir die Adresse auf, die oben im Screenshot bei der Erfolgsmeldung genannt wurde. Es erscheint ein Login-Screen, in dem man als Benutzername und Passwort die ebenfalls in der Erfolgsmeldung genannte Werte ein (als Benutzername  hatten wir im Beispiel wpadmin genannt, das Passwort hat WordPress selbst generiert und wir werden es gleich ändern):

WordPress Login
Anmelden an WordPress

Nach Klick auf Anmelden sehen wir endlich die WordPress Oberfläche. Zuerst sollten wir das grundsätzliche Aussehen unserer Webseite verändern. Das hat WordPress schon vorgedacht und bietet dafür direkt eine Funktion an:

WordPress Layout
Aussehen von WordPress anpassen

Die folgende Sidebar ist wirklich einfach zu bedienen. Spielt einfach ein bisschen damit rum. Insbesondere sollte man ein anderes Theme wählen. Wie das geht, erklärt sich von selbst:

WordPress Theme Editor
Themeneditor von WordPress

Nach getaner Arbeit – oder auch direkt, wenn Du keine Lust hast, etwas zu ändern, links oben auf das x klicken, dann sind wir wieder zurück im Hauptmenü.

Weitere Einstellungen vornehmen

Im Menü auf der linken Seite den Punkt Einstellungen wählen (und dort Allgemein). Dann auf jeden Fall den Untertitel ändern, per Default steht dort nämlich Eine weitere WordPress-Seite. Auch den Titel prüfen, manche Installationen schreiben dort die Webseitenadresse rein. Danach das Speichern nicht vergessen, der Button ist ganz unten im Screen und heisst Änderungen übernehmen. Als letzte wirklich wichtige Einstellung solltest Du das Passwort ändern, falls es bei der WordPress Installation automatisch vergeben wurde (wie etwa bei All-Inkl). Dazu den Menüpunkt Benutzer anklicken und dort auf den einzigen vorhandenen User (in unserem Beispiel ist es wpadmin). Ganz am Ende der Maske (runterscrollen) kann man dann ein neues Passwort vergeben und danach die Änderungen speichern.

Inhalte erstellen

Eine WordPress Webpräsenz besteht im Wesentlichen aus vier wichtigen Bausteinen (es gibt noch ein paar mehr, aber die sind nicht ganz so wichtig):

  1. Menü
  2. Seiten
  3. Beiträge
  4. Widgets

Ein Menü ist den meisten ein Begriff. Man kann dort Absprünge in Seiten anbieten. Bevor wir ein Menü definieren, fangen wir mit dem Inhalt für die Startseite unserer Webpräsenz an. Dazu klicken wir auf Seiten und erstellen eine neue Seite (Button Erstellen anklicken). Als Titel geben wir Herzlich Willkommen ein (oder irgend einen anderen Text, der Dir sinnvoll erscheint). Im großen Eingabefeld unter dem Titelfeld geben wir den Content unserer Seite ein, schreibe das, was Du möchtest. Bilder kannst Du einfügen über den Button Dateien hinzufügen. Wenn Du fertig bist, veröffentliche die Seite mit dem Button rechts. danach kannst Du die Seite ansehen (oberen Button Seite ansehen anklicken). In unserem Beispiel sieht das so aus:

Startseite mit WordPress
Unsere Startseite

Das war doch jetzt wirklich leicht, oder? So macht das Erstellen von Webseiten richtig Spaß!

Seiten und Artikel

WordPress unterscheidet zwischen Seiten und Artikeln. Eine Seite hat quasi statischen Charakter, ein Artikel ist etwas, was man sich wie einen Blog-Beitrag vorstellen kann. Eine Seite ist insbesondere so etwas wie ein Impressum, eine Datenschutzerklärung oder eine Startseite, die anfangs auf Deiner Website erscheint. Natürlich ist der Inhalt einer Seite per se nicht statisch, aber die Position der Seite ist eher statisch: ein Impressum wird es immer geben und es soll immer an der gleichen Stelle erscheinen bzw. verlinkt werden.

Ein Artikel hingegen wird normalerweise, nachdem er von Dir veröffentlicht wurde, von WordPress auf der Startseite Deiner WordPress-Site angezeigt (das kann man in den Themen-Einstellungen ändern, aber normalerweise ist es so). Weiterhin werden die letzten Beiträge (=Artikel) von WordPress angezeigt (für gewöhnlich in der Sidebar oder Fussleiste). Artikel können Kategorien zugeordnet werden, Seiten nicht! Das ist wichtig zu beachten, wenn es beispielsweise um Suchmaschinen Marketing geht (weil Kategorien potentielle Suchbegriffe darstellen).

Wenn Du also einen Beitrag schreiben willst, der nicht gerade den Text für Deine Startseite enthält, dann ist normalerweise ein Artikel das richtige. Insbesondere, wenn die Besucher Deiner Webseite den Beitrag über eine Kategorie finden können sollen. Auch gibt es Plugins, die zu einem Artikel ähnliche Beiträge anzeigen, das geht eben nur mit Artikeln, nicht mit Seiten. Nicht zu vergessen, dass nur Artikel (nicht aber Seiten) über das integrierte WordPress RSS-Feed veröffentlicht werden! Eine Seite hingegen macht bei Impressum & Co. Sinn. Merkst Du irgendwann, dass Du eine Seite erstellt hast und es besser ein Artikel hätte sein sollen (oder umgekehrt), dann hilft Dir das kostenlose Plugin pTypeConverter.

Menüs

Jeder weiß, was ein Menü ist. Auf ERFOLGSREZEPTE ONLINE siehst Du es oben im Kopfbereich. Man kann Menüs einstufig (so wie auf dieser Webseite) oder mehrstufig gestalten. Mehrstufige Menüs enthalten eine Hierarchie von Menüpunkten.

Letztendlich ist ein Menüpunkt mit einer Seite oder einem Beitrag verknüpft, ganz einfach. Menüs erstellst Du über Design -> Menüs. Die Bedienung ist intuitiv und selbsterklärend. Extra-Tipp: Es ist auch möglich, Beiträge in ein Menü einzufügen, diese Möglichkeit muss allerdings aktiviert werden: Design -> Menü -> Optionen, dann die Beiträge-Checkbox anhaken. Nun erscheinen links auch Beiträge zur Auswahl.

Widgets

Ein Widget ist ein flexibler Bereich auf der Webseite. Widgets sind beispielsweise die Sidebar rechts von diesem Artikel oder auch der Fussbereich (Footer) ganz unten auf dieser Homepage. Widgets können ebenso einfach wie Menüs definiert werden, und zwar über Design -> Widgets. Du kannst Seiten und dynamische Bereiche (so etwas wie “Letzte Beiträge”) sogar  per Drag & Drop definieren. Probiere es einfach aus und schaue, wie sich Deine WordPress-Website verändert (dazu der Einfachheit halber ein Fenster mit der Admin-Oberfläche und ein Fenster mit der URL Deiner Webseite öffnen und letztere nach Änderung von Einstellungen oder Anpassen von Widgets oder Menüs refreshen).

Deine Installation weiter anpassen

Mit Themes das Layout beeinflussen

Themes sind Designs für Deine Websites. Sie sind in unzähliger Anzahl und meist kostenlos verfügbar, auf Google findet man leicht welche. Wir haben in einem eigene Bericht die besten Themes vorgestellt. Wenn Du als Anfänger wissen möchtest, wie man Themes installiert, dann hilft Dir unse Tutorial für Themes sicher weiter.

Plugins zur Funktionserweiterung

Ein Plugin ist eine Erweiterung für WordPress. Es gibt viele tausend solcher Plugins und auch hier sind die meisten kostenfrei, bei einigen kostet ein optionales Upgrade der Grundversion auf eine Pro-Version Geld. Für jeden Zweck gibt es ein Plugin, beispielsweise für die Suchmaschinenoptimierung, um das online Marketing Deiner Site erheblich zu erleichtern. Wenn Du dich allgemein über Plugins informieren willst, dann empfehlen wir Dir, einige der besten WordPress Plugins anzusehen oder Google für die Recherche zu verwenden, wenn Du Dir Deine eigene Meinung bilden möchtest. Diese Erweiterungen machen WordPress für Anfänger zum Kinderspiel, weil sie vorgefertigte Funktionen bieten und jegliche Programmierarbeit und weitere Anpassungen überflüssig machen!

Online Marketing

Eine tolle Webseite sollte von anderen auch gefunden werden. Daher muss man sie für Suchmaschinen wie Google optimieren. Das wird oft als SEO bezeichnet und steht für Search Engine Optimization. Für Einsteiger bedeutet SEO in erster Linie, den Inhalt und die Struktur einer Seite zu verbessern. Mehr zu diesem komplexen Thema gibt es auf unserer Tutorial-Seite zum Thema SEO. Wir empfehlen Die unbedingt, Google im Auge zu behalten, um mehr Leser für Deinen Blog oder sonstige Artikel zu gewinnen!

Weiterführende Literatur

Wir haben populäre WordPress-Bücher unter die Lupe genommen.  Darunter sind einige, die eher auf den Anfänger abzielen und andere, die mehr für Fortgeschritte und Profi WordPress User sind. Unser Review-Artikel fasst die Bücher zusammen und gibt pro Buch eine prägnante Entscheidungshilfe.

Einen Schnellstart für WordPress Anfänger liefert Profi-Website in 60 Minuten: Mit WordPress – Inklusive kostenlosem Internet-Konto: Für unter 10 Euro für Kindle zu haben.

Viel Erfolg beim Aufbauen Deiner Top Webseite! So einfach wie heutzutage war es noch nie, dank des vorgestellten Content Management Systems. Wenn Du Fragen hast, schreibe einfach einen Kommentar zu diesem Artikel und wir helfen Dir!

WordPress Praxishandbuch - Profiwissen für die Praxis

€ 40,00
9.1

Praxiswert

9.3/10

Verständlichkeit

8.9/10

Umfang

9.4/10

Preis

8.6/10

Vorteile

  • Tiefgehendes Wissen
  • Praxisorientiert
  • Geht auch auf Sicherheitsthemen ein
  • SEO Tricks
  • Neu aufgelegt und aktuell

Nachteile

  • für absolute Anfänger ungeeignet

Wie hat Dir der Artikel gefallen?

Websites erstellen mit WordPress – HowTo für Anfänger: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 8 abgegebenen Stimmen.

Merken

Weitere Beiträge

HTML Tipps

Geschätzte Lesezeit: 3 Minuten, 55 Sekunden

In diesem Artikel für Einsteiger geben wir Euch einen Überblick über HTML und stellen ein paar nützliche Tipps & Tricks zum Arbeiten mit HTML vor.
HTML Tipps
HTML ist die Beschreibungssprache für Webseiten und steht für Hypertext Markup Language. In diesem Artikel erklären wir die Grundlagen von HTML und wie man eigene HTML-Seiten baut.

HTML – Die Beschreibungssprache für Internetseiten

HTML basiert im wesentlichen auf Tags. Ein Tag ist eine Art Steueranweisung, die mit einer spitzen Klammer, die nach links zeigt, beginnt und mit einer spitzen Klammer, die nach rechts zeigt, endet.
Ein Tag kann entweder atomar sein, dann schließt er sich selbst direkt wieder. Beispielsweise
<br/>

Es gibt auch Tags, die sich schließen, indem der Tag mit vorangestelltem Slash verwendet wird, beispielsweise so:
<a href="http://www.erfolgsrezepte-online.de">Auf geht's zu ERFOLGSREZEPTE ONLINE</a>

Der br-Tag ist für einen Zeilenvorschub verantwortlich (BR steht für BReak). Dafür ist es nicht notwendig, weitere Angaben zu machen, ein zeilenumbruch bleibt ein Zeilenumbruch, er hat beispielsweise keine Farbe.

Anders sieht es bei einem Link aus, siehe das zweite Beispiel mit dem a-Tag:
Ein Link besteht aus zwei wesentlichen Teilen:

  1. Einem Linkziel, also einer Internetadresse (URL): Dieses Linkziel ist quasi unsichtbar, es wird sichtbar, wenn man den Link anklickt und sich die hinterlegte URL öffnet. Wenn man genau hinsieht, kann man das Linkziel auch in der Statuszeile des Browsers sehen, wenn man mit der Maus über einen Link fährt (sogenanntes Hovern)
  2. Einem Anzeigetext: Dieser Text wird angezeigt und diesen sieht der User. Klickt der User auf diesen Text, öffnet sich das Linkziel. Natürlich ist es auch möglich – und das wird auch öfters so gemacht – als Anzeigetext die URL aus dem Linkziel anzugeben (meist lässt man dann das http:// weg, und schreibt nur www.erfolgsrezepte-online.de)

Tabellen mit HTML erstellen

Eine Tabelle besteht aus Spalten und Zeilen sowie einer optionalen Kopfzeile. Der Tag für eine Tabelle lautet <table>. Eine Zeile deklariert man mit dem HTML Tag <tr> und eine Spalte mit <td>. Die optionale Kopfzeile einer Tabelle gibt man mit <thead> an, innerhalb dieser kann man <th> für die Spaltenüberschriften verwenden (anstatt von <td> für normale Zeilen).

Eine HTML Tabelle hat also folgenden möglichen Aufbau:


<table>
<thead>
<tr>
<th>Überschrift Spalte 1</th>
<th>Überschrift Spalte 2</th>
<th>Überschrift Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1,1</td>
<td>Zelle 2,1</td>
<td>Zelle 3,1</td>
</tr>
<tr>
<td>Zelle 1,2</td>
<td>Zelle 2,2</td>
<td>Zelle 3,2</td>
</tr>
</tbody>
</table>

Die Anzahl der Spalten und Zeilen ist beliebig, im Beispiel sind 3 Spalten und zwei Zeilen plus eine Kopfzeile angegeben. Das Ergebnis dieser Deklaration wird so dargestellt:

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Zelle 1,1 Zelle 2,1 Zelle 3,1
Zelle 1,2 Zelle 2,2 Zelle 3,2

CSS – Verpasse Deiner Webseite ein Layout

Mit HTML-Tags kann man das Grundlayout des Dokuments definieren, also Absätze, Zeilenumbrüche, Links, Listen, Tabellen. Aber auch die Grundstruktur des Dokuments wird mit Tags angegeben: Jedes Dokument besteht aus folgenden Teilen:

  • Kopf (head-Tag): Er enthält Meta-Informationen, wie den Titel des Dokuments, zu verwendende Javascript-Scripte und Suchmaschinen-relevante Dinge wie die Meta-Beschreibung des Dokuments
  • Körper (body-Tag): Hier steht der eigentliche Inhalt des Dokuments drin, also der anzuzeigende Text usw. Auch das, was Du gerade hier liest, steht im Body-Tag

Doch was ist, wenn man einem Text eine andere Farbe geben möchte, wenn der Text in einer anderen Schriftart oder fett gedruckt dargestellt werden soll? Genau solche Dinge werden mit CSS-Anweisungen ausgesteuert. Hier gibt es drei Möglichkeiten:

  1. CSS-Anweisungen inline in den HTML-Tags als style-Attribut verankern (erklären wir später)
  2. CSS-Anweisung als Klasse angeben
  3. CSS-Anweisung als Identifikator angeben

Zu Möglichkeit 1 ein Beispiel für eine Inline, also innerhalb des Tags selbst konkret angegeben CSS-Steueranweisung:

<div style="color:red">Das ist ein Text, der in roter Farbe angezeigt wird.</div>

Das Ergebnis, so wie es der User sieht, erscheint dann so:

Das ist ein Text, der in roter Farbe angezeigt wird.

Das Zusammenspiel von HTML & CSS

Wie bekommt man nun CSS-Anweisungen und HTML-Dateien zusammen?
Bei Inline deklarierten CSS-Anweisungen über das style-Attribut stellt sich die Frage nicht, denn da ist das CSS ja schon jeweils an der benötigten Stelle im HTML-Dokument.

HTML Tipps: CSS auslagern

Eleganter ist es allerdings, auch hinsichtlich der Übersichtlichkeit und Wiederverwendbarkeit, wenn man die CSS-Anweisungen in einer eigenen Datei auslagert. Das hat übrigens auch Vorteile beim Ranking (SEO und so weiter): Denn auch die Ladezeit spielt bei SEO eine Rolle, und ausgelagerte CSS-Anweisungen können gecached werden!
Also: Die beste Option ist es, eine eigene Textdatei anzulegen, die dann so aussieht:

.roterText {
color:red;
}
... weitere CSS-Anweisungen

Die Datei wird dann mit der Endung .css abgespeichert und wie folgt in die HTML-Datei innerhalb des head-Tags eingebunden:

<link rel="stylesheet" href="dateiname.css" />

Alernativ, aber nicht ganz so elegant ist es, solche CSS-Anweisungen im head-Tag des HTML-Dokuments einzubetten:

<style>
.roterText {
color:red;
}
</style>

Der style-Tag sorgt dafür, dass der davon eingeschlossene Text als CSS interpretiert wird.

HTML & CSS in der Praxis

Mehr dazu und weitere HTML Tipps erfahrt in unserem nächsten Artikel. Schaut bitte wieder rein, es lohnt sich!
Vielleicht interessiert Dich auch: Bootstrap 3, das CSS-Framework . Bootstrap erleichtert Dir das Arbeiten mit CSS enorm. Vor allem, wenn es um das Erstellen von responsiven Websites (mobil) geht.


Wie hat Dir der Artikel gefallen?

HTML Tipps: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 4 abgegebenen Stimmen.

Weitere Beiträge

SEO & SEM Tipps

Geschätzte Lesezeit: 6 Minuten, 34 Sekunden

Tipps für erfolgreiches Suchmaschinenmarketing

SEO Techniken

Eine Webseite im Ranking nach vorne bringen

Eine Webseite ist nur so gut wie ihre Bekanntheit. Das beste Design und der tollste Inhalt helfen wenig, wenn niemand Ihre Seite kennt. Die Begriffe SEO und SEM beziehen sich auf dieses Problem: SEO ist die Optimierung einzelner Seiten für Suchmaschinen, SEM ist das übergeordnete Themenfeld des Suchmaschinenmarketings. SEO ist also ein Bestandteil von SEM. Wir zeigen in dieser Einführung, was sich genau dahinter verbirgt.

SEO – Optimierung einer Webseite

SEO steht für Search Engine Optimization, zu Deutsch: Suchmaschinenoptimierung. Es geht hier nicht um die Optimierung einer Suchmaschine, sondern um die Adaption bzw. Verbesserung für eine Suchmaschine. Im Wesentlichen ist das Google (für Deutschland) sowie Bing. Alle anderen spielen eigentlich nur eine untergeordnete Rolle und werden sowieso mit abgehandelt, wenn man sich auf Google konzentriert.

SEO zielt mehr auf die Gestaltung einer einzelnen Webpräsenz ab, wohingegen SEM eine übergeordnete Maßnahme ist (siehe folgenden Abschnitt).

SEO setzt im wahrsten Sinne des Wortes an der Quelle an: Du kannst SEO mit Hilfe eines Texteditors betreiben. Wie das geht, erklären wir unten. SEO ist im Wesentlichen die inhaltliche Optimierung einer Webseite, so dass Google sie für relevant hält. Relevanz bezieht sich dabei immer auf einen Suchbegriff oder auch auf mehrere – je nach dem, wie umfangreich der Inhalt einer Webseite ist.

SEO beinhaltet übrigens auch die Wahl eines geeigneten Domänennamens. Eine Domäne ist eine Internetadresse, das wissen mittlerweile die meisten. Domänen kann man bei Providern wie 1&1 oder All-inkl günstig kaufen.

SEM – Bekanntmachen einer Webseite

SEM steht für Search Engine Marketing, also für Suchmaschinenmarketing. SEO ist Bestandteil von SEM, ebenso ist SEA ein Bestandteil. SEA heisst Search Engine Advertising bzw. Suchmaschinenwerbung. SEA wird etwa betrieben durch AdWords. Mit AdWords können Werbende ihre Zielgruppe gut erreichen, denn die Werbung wird abhängig vom Suchbegriff eingeblendet. Nachteil: Der Werbende muss recht viel Geld bezahlen, wenn ein User auf seine Anzeige klickt – ob der User danach etwas kauft ist irrelevant für die Bezahlung der Werbung! Und so ein Klick kostet schon mal ein paar Euro (manche bekommt man auch günstiger, dann ist es aber kein hart umkämpfter, als meist kein lohnender Markt).

Im Bereich SEM spielt neben der eigenen Webpräsenz insbesondere eine Rolle, wie viele andere Webseiten auf die eigene Site verlinken und auch, wie oft andere User Deine Seite aufrufen. Letzteres kann Google mittlerweile sehr gut messen, weil viele Seitenaufrufe über Suchergebnisse laufen und weil auf vielen Seiten Analytics verwendet wird, was Google wiederum auswerten kann.

SEO für Deine Webseite

Wir erklären Dir Schritt für Schritt, wie Du Deine Seite für das Suchmaschinenranking aufwertest, mit konkreten Beispielen. Du kannst mit diesen Maßnahmen Deine Website in kürzester Zeit SEO-optimieren.

Leicht umsetzbare Profi-Tipps

Es muss nicht immer Raketenwissenschaft sein. Für’s erste reichen ganz simple Maßnahmen, die aber nicht immer offensichtlich sind (siehe Tipp 0).

SEO-Tipp #0: Konzentriere Dich nicht auf den Meta-Tag keywords

Früher war es absolute Pflicht, mittlerweile wird der Meta-Tag keywords quasi nicht mehr gerankt. Wenn Du sicher gehen willst, dann pflege ihn trotzdem, aber kümmere Dich erst darum, wenn Du alles andere optimiert hast (siehe die folgenden Tipps).

SEO-Tipp #1: Der Meta-Tag description

Meta-Tags sind HTML Tags im Kopfbereich einer HTML-Seite, die normalerweise unsichtbar sind. Suchmaschinen werten sie aber aus. Hast Du solche Meta-Tags nicht gefüllt, schadest Du Dir damit selbst. So geht’s:

Einen Texteditor nach Wahl aufrufen und Deine HTML-Datei öffnen (wir empfehlen den kostenlosen Notepad++).

Dann nach dem <head>-Tag suchen. Steht dort ein Tag wie dieser?

<<span class="start-tag">meta</span> <span class="attribute-name">property</span>="<a class="attribute-value">description</a>" <span class="attribute-name">content</span>="<a class="attribute-value">Hier steht eine Beschreibung Deiner Webseite"</a>>

Ja, Du hast diesen Tag: Das ist schon mal gut, dann lies unten weiter, wo wir erklären, welche Inhalte in diesem Meta-Tag stehen sollten.

Fehlt der Tag, dann ergänze ihn jetzt. Der Tag muss zwischen <head> und </head> stehen (dem öffnenden und dem schließenden Tag des Kopfbereichs Deines HTML Dokuments).

SEO-Tipp #2: Der Meta-Tag title

Was für den description Tag gilt, gilt analog auch für den title Tag: Er ist extrem wichtig. Zudem wird er angezeigt, nämlich in der Kopfleiste oder im Karteireiter (je nach Browser) der aufgerufenen Webseite!

Also wieder den Texteditor aufrufen und die zu bearbeitende HTML-Datei öffnen.

Dann nach dem <head>-Tag suchen. Steht dort ein Tag wie dieser?

<title><a class="attribute-value">Hier steht der Titel Deiner Webseite</a></title>

Ja, Du hast diesen Tag: Das ist schon mal gut, dann lies unten weiter, wo wir erklären, welche Inhalte in diesem Meta-Tag stehen sollten.

Fehlt der Tag, dann ergänze ihn jetzt. Der Tag muss zwischen <head> und </head> stehen (dem öffnenden und dem schließenden Tag des Kopfbereichs Deines HTML Dokuments).

SEO-Tipp #3: Inhalt der Meta Tags description und title

Was in den Teil des Tags, der mit content beginnt reinkommt, erklären wir Dir jetzt. Dieser Inhalt ist von größter Wichtigkeit, also mache Dir dazu intensiv Gedanken!

Wichtig ist, dass die Schlüselworte (= Keywords = Suchbegriffe), für die Deine Seite gefunden werden soll, im Titel und im Beschreibungs-Tag vorkommen. Natürlich muss das Ganze einen sinnvollen Text ergeben, weswegen nicht x-beliebig viele Keywords in den Tag-Inhalten Platz finden. Also stelle Dir eine Liste mit den 5 wichtigsten Keywords auf. Bringe das Top-Keyword im Titel unter und alle 5 Keywords in der Beschreibung, wenn möglich.

SEO-Tipp #4: Content is King

Eine Suchmaschine schaut immer besonders genau auf den Inhalt Deiner Seite, also das, was der Aufrufer auf dem Bildschirm sieht. Verwende bitte keine versteckten Inhalte (weiße Schrift auf weißem Hintergrund, mit CSS-Attributen ausgeblendete Texte usw.), denn das bestrafen Suchmaschinen heutzutage, weil sie es eben erkennen.
Schreibe den Text so, wie Du ihn selbst als Leser gut finden würdest. Dazu gehört natürlich auch ein bisschen Recherche.

Am einfachsten schreiben sich Texte, zu Themen, die Dir liegen und wo Du sagen würdest: Ja, in diesem Gebiet bin ich Experte. Quäle Dich nicht mit Themen rum, die nicht durch Deine  Kompetenz abgedeckt sind, außer, es lässt sich nicht vermeiden. Siehe auch Content is Bundeskanzler, denn Inhalte sind wichtiger als alles andere!

SEO-Tipp #5: Verwende WordPress

WordPress ist das beliebteste Content Management System und zwar völlig zurecht. Du hast schon ein CMS im Einsatz und es ist nicht WordPress? Auch gut, hauptsache Du hast ein CMS. Wenn Du noch keins hast, dann tu’ Dir selbst einen Gefallen und verwende WordPress. In diesem HowTo erklären wir Schritt für Schritt, wie man zur professionellen Webseite mit WordPress kommt. Ach ja: WordPress ist kostenlos und es gibt viele tausend kostenlose Erweiterungen (sogenannte Plugins), die Dir die Arbeit zum Vergnügen machen!

SEO-Tipp #6: Optimiere Deine Website und verwende Tools

Vor der Optimierung und der Planung von Maßnahmen für die effektive Suchmaschinenoptimierung solltest Du Dir ein paar Fragen stellen:

  • Was sind die profitablesten Keywords, auf die Du Deine Homepage ausrichten sollst?
  • Wie viel Konkurrenz gibt es für welchen Suchbegriff?
  • Hat Deine Seite tote Links?
  • Existieren schlechte Backlinks, die negativ auf Deine Domäne abfärben?

Diese uns weitere Fragen solltest Du beantworten, indem Du Tools einsetzt. Aus langjähriger Erfahrung wissen wir, welche Tools dafür am besten sind und erklären es in diesem Artikel.

Schau’ Dir auch unseren Artikel zu WordPress Plugins an, die für SEO-Maßnahmen gut geeignet sind.

SEO-Tipp #7: Optimieren Deine Beitragsüberschrift

Angenommen, Du möchtest einen Artikel über Ferienwohnungen schreiben. Dann sollte dieser Begriff auf jeden Fall in der ersten Überschrift vorkommen, das ist ziemlich offensichtlich. Doch welche weiteren Begriffe solltest Du neben dem Hauptbegriff in der Überschrift verwenden?

Hierbei hilft Dir das SEO Tool für Keywords: Gib einfach Ferienwohnung ein und lasse Dir die häufigsten ergänzenden Begriffe anzeigen. Das wären Kroatien, Bodensee, dann noch einige andere geographische Bezeichnungen und schließlich der Term direkt. Evtl. macht es also Sinn, Deinen Artikel Ferienwohnung direkt buchen zu nennen – natürlich nur, wenn Dein Beitrag dazu thematisch passend ist.

SEO-Tipp #8: Überschriftenhierarchie

Jede HTML-Seite sollte genau eine H1-Überschrift besitzen. Danach folgen idealerweise mindestens 2 H2-Überschriften. Unterhalb jedes H2-Titels können H3-Unterüberschriften folgen usw.
H3 sollte nicht direkt auf H1 folgen und H2 nicht vor H1, H1 sollte grundsätzlich nicht fehlen.
Je größer die Überschrift dargestellt wird, desto gewichtiger ist deren Inhalt für eine Suchmaschine (H1 ist also logischerweise am relevantesten)!

Schau’ Dir doch mal unsere Beiträge an. Falls Du einen Verstoß gegen diese Regel finden solltest, ist das hoffentlich die Ausnahme und wir würden uns freuen, von Dir davon in Kenntnis gesetzt zu werden 😉

SEO-Tipp #9: Duplicate Content vermeiden

Duplicate Content heisst zu deutsch doppelter Inhalt oder auch doppelte Inhalte. Diese gilt es zu vermeiden. Damit sind zwei Dinge gemeint:

  1. Keine sich wiederholenden Inhalte auf verschiedenen Seiten derselben Webpräsenz
  2. Keine aus anderen Webpräsenzen herauskopierten und bei sich selbst eingefügte Inhalte (Copy & Paste)

Suchmaschinen erkennen das und stufen Deine Seite im Ranking deswegen ab!
Weiterführende Infos zu Duplicate Content gibt es hier.

Extra-Tipp #10: Browser Private Modus verwenden

Suchzt man im Browser mit Google probeweise nach Keywords, die für die eigene Webseite relevant sind, sollte man unbedingt den Private Modus einschalten. Denn Google erkennt sehr gut anhand von Cookies, aber auch anhand von Browser-Metriken und IP-Adressen, wer da gerade sucht und was die Historie des Suchenden ist.

Unter Internet Explorer also Shift+P drücken, dann geht der Inprivate-Modus auf. Dort dann suchen und spaßeshalber mal das Ergebnis mit der normalen Google-Suche vergleichen! In Chrome heisst das ganze übrigens Incognito Modus. Er kann über die Tastenkombination Strg + Umschalt + N aktiviert werden.


Wie hat Dir der Artikel gefallen?

SEO & SEM Tipps: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,88 von 5 Punkten, basieren auf 8 abgegebenen Stimmen.
SEO Agentur Testsieger

Weitere Beiträge

Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren

Geschätzte Lesezeit: 7 Minuten, 40 Sekunden

Mobile friendly websites

Mobilegeddon: Google straft Dich ab!

Ende April 2015 hat das sogenante Mobilegeddon (Google Abstrafung für Webseiten, die nicht fit für Smartphones & Tablets sind) für Aufsehen gesorgt. Wir erklären, wie man seine Website responsiv gestaltet und somit fit für mobile Endgeräte macht.

Das Problem herkömmlicher Webseiten auf mobilen Endgeräten

Grundsätzlich ist es möglich, eine bestehende Homepage auf einem Smartphone mit kleinerer Auflösung anzusehen. Jedoch zeigt das mobile Gerät eben nur einen Teil der gesamten Seite auf einmal an. Der Anwender muss also scrollen bzw. über den Screen wischen, um alle Inhalte sehen zu können.
Dies ist natürlich nicht optimal für die Bedienbarkeit (Usability) einer Webseite. Das hat auch Google gemerkt und sich gesagt: Jede Webseite, die nicht ordentlich auf mobile Geräten dargestellt wird, wird möglicherweise mit einer Strafe im Ranking belegt.
Da normale Computerbildschirme entweder eine wesentlich höhere Auflösung oder eine wesentlich höhere physische Größe haben als Tablets und erst recht als Smartphones, zeigen letztere eben nur einen Teil einer Webseite an, die für PC-Monitore erstellt wurde.
Selbst wenn die Auflösung eines mobilen Geräts in Pixeln genauso hoch ist wie die eines, sagen wir, 21 Zoll Monitors, kann es doch die Seite nicht vollständig darstellen: Aufgrund der kleineren Abmessungen des Displayes (eben nur beispielsweise 7 Zoll statt 21) werden Texte und Bilder herunterskaliert und kleiner dargestellt als am PC.

Die Hintergründe zum Mobilegeddon haben wir in einem eigenen Artikel zusammengestellt.

Wie macht man eine Webseite fit für die mobile Nutzung mit Smartphones und Tablets?

Vorab: Unsere Empfehlung findet ihr in einem eigenen Artikel: Professionelle Webseiten mit WordPress: Schritt für Schritt erklärt.

Es gibt grundsätzlich zwei sinnvolle Möglichkeiten:

1. Möglichkeit: Eigene mobile Webseite erstellen

Die bisherige Homepage bleibt in Ihrer Form bestehen. Zusätzlich dazu wird ein neues Layout für den bestehenden Inhalt (Content) bereitgestellt, das ist natürlich einiges an zusätzlicher Arbeit.
Dieses mobile Layout berücksichtigt von vornherein kleinere Displays und verwendet größere Schriften. Weiterhin wird weniger Inhalt auf derselben Pixelfläche platziert als auf einer herkömmlichen Webseite.
Dann muss noch gesteuert werden, wann die Desktop-Version und wann die mobile Webseite anzuzeigen ist.
Das geht folgendermaßen – vorab: Möglichkeit 2 ist die empfohlenene: Das responsive Design – wer ungeduldig ist, kann den nächsten Abschnitt überspringen!
1. Verweis auf Originalseite anbringen
Das ist technisch nicht unbedingt nötig, aber gut für das Suchmaschinenranking.
Im-Bereich des HTML-Dokuments gibt man etwa folgendes auf der mobilen Variante der Webseite an: Dieses Beispiel gilt für die mobile URL http://m.meineseite.de/startseite.

2. Verweis auf mobile Webseite von der Desktop-Version
Damit der Browser auf dem Handy nun weiß, dass es eine mobile Variante gibt, teilt man ihm dies mit Hilfe des rel-Tags mit:
Der rel-Tag steht dabei wieder im Kopfbereich des HTML-Dokuments (-Tag). Die Zahl 640px gibt die maximale Breite des Displays in Pixeln an, für die diese mobile Website vorgesehen ist. Lässt sich die Seite mobil auch auf 800 Pixeln Breite noch gut darstellen, gibt man statt dessen an:

2. Möglichkeit: Responsive Webseite erstellen

Das eben dargestellt Verfahren hat einige Nachteile. Unter anderem existieren mehrere Layouts für denselben Content parallel. Will man eine Webseite mobil machen, empfehlen wir die zukunftsträchtige Technik des responsiven Designs. Hierfür gibt es eine Reihe von Frameworks für Entwickler, die dabei unterstützen. Man muss das Rad also nicht neu erfinden.

Die Idee dahinter lässt sich am besten erklären, wenn man das populäre CSS-Framework Bootstrap betrachtet:
Bootstrap sieht vier verschiedene Bildschirmgrößen vor: XS (extra small), S (small), M (medium) und L (large).

Hinter diesen vier Größenkategorien stecken folgende Pixelgrößen (bezogen auf die Breite des Bildschirms in Pixeln):

  • XS sind Schirme kleiner als 768 Pixel Breite.
  • S sind Schirme größer gleich 768 und kleiner 992 Pixel.
  • M sind Schirme größer gleich 992 und kleiner als 1200 Pixel.
  • L sind alle Auflösungen ab 1200 Pixel aufwärts.

Die Größe L ist die normalerweise relevante für PC-Systeme und große Tablets oder auch für Notebooks oder Laptops.

Insgesamt gibt es natürlich deutlich mehr mobile Auflösungen als diese, aber vier Modi über die maximale Breite zu unterstützen ist ein sehr guter und beherrschbarer Kompromiss, der auch dem Fakt Rechnung trägt, dass ein Smartphone oder Tablet auch gedreht werden kann und Breite und Höhe sich dann vertauschen.

Bootstrap ist das populärste CSS-Framework und bietet alles, was man braucht, um eine Webseite mobil zu machen! Wie genau, das erklären wir gleich.

Die dritte Möglichkeit, die wir für wenig sinnvoll und wenig zielführend halten, ist das dynamische Erzeugen der Seite (Dynamic Serving). Daher gehen wir hier auch nicht näher darauf ein.

Wie macht man eine Webseite mobil mit responsivem Design und Bootstrap?

Das schöne: Bootstrap nimmt einem viel Arbeit ab, siehe den Abschnitt vorher! Weiterhin arbeiten wir nur mit einer Content-Quelle, denn das Layout für die verschiedenen Bildschirmgrößen wird im HTML per CSS-Anweisungen gesteuert. Konkret geht das über CSS-Klassen von Bootstrap.

Jetzt folgt ein kleiner Ausflug in Bootstrap-Interna: Wenn Du kein Programmierer werden willst, überspringe diesen Abschnitt und gehe zum nächsten!

Ein Beispiel: Du erstellt eine Webseite und fängst mit einem Layout an, das für PC-Bildschirm geeignet ist, also für Breiten von 1200 Pixeln oder mehr.
Die HTML-Seiten enthalten beispielsweise einen Bereich, in dem links ein Menü steht (was ca. 200 Pixel breit ist), in der Mitte ein Contentbereich (ca. 800 Pixel breit) und rechts eine Sidebar (wieder 200 Pixel breit). Nur der Content-Bereich sei dynamisch hinsichtlich der Breite, Menü und Sidebar sind auf 200 Pixel festgelegt.

Verkleinert man das Browserfenster, wird der Content-Bereich also immer schmaler. Spätestens bei einer Breite von, sagen wir, 400 Pixeln ist der Content nicht mehr schön anzusehen, weil er einfach zu gedrungen wirkt und eingequetscht ist zwischen Menü und Sidebar. Bei Bootstrap arbeitet man idealerweise nicht mit festen Pixelbreiten, sondern man definiert die Breite eines Bereichs in Spalten. Bootstrap definiert, dass es genau 12 Spalten gibt. Menü und Sidebar hätten also je 2 Spalten und der Hauptbereich für den Content dann 8 Spalten, macht 2 + 2 + 8 = 12 Spalten.

Namecheap
Nun kommt das Spannende: Man kann über Bootstrap nicht nur die Anzahl der Spalten definieren, sondern auch, bei welcher Bildschirmgröße ein Bereich (Menü, Contentbereich usw.) wie viele Spalten haben soll. Die Bildschirmgrößen hatten wir oben schon genannt: L (oder LG), M (oder MD), S (oder SM) und XS (ganz groß bis ganz klein).
Wie sieht das ganze im HTML-Code aus? Wir gehen mal einen Beispielcode zur Veranschaulichung (grundlegende HTML-Kenntnisse sind hierzu erforderlich):

<div id="menu" class="col-lg-2">
Hier steht das Menü
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3</div>
<div id="content" class="col-lg-8">
Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
</div>
<div id="sidebar" class="col-lg-2">
Hier steht die Sidebar
Text 1
Text 2
Bild 1</div>

Es wird schnell klar, dass die ganze Informationsmenge, die man auf einem großen Schirm (Bootstrap-Größe L) anzeigen kann, nicht auf einem kleinen Bild (Bootstrap Größe S) zur Anzeige bringen kann.
Daher müssen wir für Größe S (und für XS sowieso) eine neue Darstellungsart definieren. Größe M muss hier nicht speziell abgehandelt werden, weil für M der Contentbereich immer noch groß genug ist.

So würde das obige Beispiel auch auf kleinen Bildschirm ordentlich dargestellt – das wäre die einfachste und schnellste Maßnahme:

<div id="menu" class="col-lg-2 col-sm-12">
Hier steht das Menü
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3</div>
<div id="content" class="col-lg-8 col-sm-12">
Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
</div>
<div id="sidebar" class="col-lg-2 col-sm-12">
Hier steht die Sidebar
Text 1
Text 2
Bild 1</div>

Was haben wir gemacht: Das Menü bekommt jetzt 12 statt 2 Spalten, also die gesamte Breite. Der Content hat nun ebenfalls die volle Breite von 12 Spalten zur Verfügung. Und auch die Sidebar bekommt 12 Spalten. Das war’s, zumindest akzeptiert Google jetzt dieses Layout. Mna kann natürlich etwas feintuning betreiben, beispielsweise die Sidebar horizontal statt vertikal ausrichten, das ist aber wesentlich mehr Arbeit und soll in diesem Grundlagenartikel nicht weiter diskutiert werden (in einem anderen Artikel dann mehr dazu).

Wichtig noch: Bootstrap schaut für die aktuelle Bildgröße, etwa M, ob eine Deklaration wie col-md-6 vorhanden ist (MD steht für Größe M). Ist dies nicht der Fall, sucht Bootstrap nach der Größe S und dann nach XS. Es ist also wichtig, dass im obigen Beispiel die Deklarationen col-lg-* ersetzt werden durch col-md-*, denn dann gelten sie sowohl für L- als auch für M-Größen!

Spezialfall: Content Management Systeme wie WordPress oder Magento

Betreibst Du Deine Webseite oder Dein Blog über WordPress? Dann besteht die Möglichkeit, dass das Thema (engl.: Theme) von WordPress bereits eine responsive Variante anbietet. Das solltest Du unbedingt prüfen.Am einfachsten geht das, indem Du Deine WordPress-Webseite im Browser aufrufst und den Darstellungsbereich des Browsers einfach veränderst:

Einmal die Darstellung im Vollbildmodus auf einem PC-Bildschirm ausprobieren.

Als nächstes die Breite des Fenster reduzieren und zwar immer weiter, bis das Fenster nur noch sehr klein ist (vielleicht 600 Pixel breit). Das geht am einfachsten über die sogenannten “Handles”, die erscheinen, wenn man den Mauszeiger an den äußersten rechten Rand des Browserfensters bewegt. Aber Achtung: Das Browserfenster darf nicht im Vollbildmodus dargestellt werden, sonst funktioniert das nicht!

Ein gutes Einsteiger-Buch zum Thema WordPress ist übrigens WordPress für Dummies.

Passende Hosting Anbieter für Deine Webseite haben wir in einem extra Artikel vorgestellt – es gibt sogar Anbieter, die Hosting-Pakete für 3 Monate komplett kostenlos anbieten und Dir eine Kündigungsmöglichkeit innerhalb dieser 3 Monate geben = Kosten 0 Euro.

Ein Experte muss her

Du selbst bist kein Programmierer oder Techie und willst Deine Webseite mobil machen. Dann hast Du ein Problem, sofern Du weder auf ein responsives Blog-Theme o.ä, verfügst und auch niemanden kennst, der Dir hilft.
In dem Fall empfehlen wir Dir, einen Experten zu Rate zu ziehen bzw. diesen zu beauftragen. Sehr günstige und kompetente Programmierer findet man etwa auf oDesk. Für solche Aufgaben braucht man keinen teuren Deutschen Entwickler zu beauftragen, der um ein Vielfaches teurer ist als eine Offshore-Ressource aus dem Ausland. Und oDesk ist ohne Risiko: Erst wenn die Leistung erbracht wurde, bekommt der Programmierer sein Geld. Ist man zufrieden, schön, ansonsten bekommt man sein Geld zurück!

Möchtest Du Dich in das Thema Webseitenprogrammierung einarbeiten, such’ Dir entsprechende Fachliteratur dazu, um schnell zu einem Ergebnis zu kommen. Hier sollte man nicht am falschen Ende sparen. Ein gutes Buch ist nicht teuer und zahlt sich immer aus.

Wenn Du ein etwas umfangreicheres Vorhaben hast und doch lieber einen deutschen IT-Dienstleister beauftragen möchtest, dann kannst Du Dich gerne an uns wenden: Wir sind Experten für Webseiten und Programmierung und bieten einen kostenlosen Vorabcheck Deiner Website an. Kontakt: Siehe Impressum.


Wie hat Dir der Artikel gefallen?

Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,67 von 5 Punkten, basieren auf 9 abgegebenen Stimmen.

Weitere Beiträge

Tipps 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,80 von 5 Punkten, basieren auf 5 abgegebenen Stimmen.