Favicon in WordPress einrichten

Favicon in WordPress einrichten

Möchtest du das gewisse Tüpfelchen auf dem I mit deiner Website vermitteln? Die Extrameile gehen? Dann stell unbedingt sicher, dass du dir dein passendes Favicon eingerichtet hast! Es unterstützt den Gesamteindruck deiner Website und wirkt wesentlich professioneller, als wenn du dich und deine Marke mit dem WordPress Logo präsentierst.

Was ist ein Favicon?

Ein Favicon – zusammengesetzt aus „Favorite“ und „Icon“ – bezeichnet das kleine Bildchen oben im Browser neben deinem Website Namen. Das Bild wird dir beim Aufrufen der Website immer mit angezeigt und auch mit gespeichert, wenn du ein Lesezeichen in deiner Browser Bibliothek erstellst:
Favicon in der Bookmarks Bibliothek
Bei Facebook ist das Favicon z. B. das weiße F auf blauem Hintergrund:   

Bei meiner Website sind es die größer kleiner Zeichen mit einem Slash dazwischen, wie man es beim Programmieren verwendet:

Bei Jane von Klee ist es ihr Markenzeichen – der Hut:

Der Standard bei einer frisch installierten WordPress Website ist das klassische W: WordPress Favicon

Und das kannst und solltest du bei deiner Website ebenfalls anpassen.

Was kann ich als Favicon nehmen?

Oft ist das Favicon ein Teil deines Logos. Falls du deinen Namen als Logo verwendest und ansonsten kein Symbol hast, könntest du z. B. deine Anfangsbuchstaben zu einem Favicon zusammenziehen. Denk immer daran, dass das Icon letztlich winzig klein dargestellt wird und du darum keine detailreichen Grafiken verwenden solltest. Gut geeignet sind daher wie auch oben in den Beispielen schon gezeigt ausdrucksstarke Symbole oder einzelne Buchstaben, die du unbedingt ohne weiteren Freiraum außen einstellen solltest.

Welches Format sollte das Favicon haben?

Das Favicon sollte quadratisch sein und am besten im Format 512×512 Pixel in die WordPress Mediathek hochgeladen. Außerdem empfehle ich dir, den Hintergrund des Favicons als transparent einzustellen, damit es sich nahtlos oben in die Browserzeile einfügt. Achte darauf, dass du jeglichen Freiraum an den Seiten abschneidest, damit das Icon möglichst groß und somit besser lesbar dargestellt wird.

Wie richte ich ein Favicon in WordPress ein?

Um das Favicon einzustellen, öffnest du in deinem WordPress Administrationsbereich unter Design -> Customizer den sogenannten Theme Customizer.

Hier klickst du auf „Allgemeine Einstellungen -> Website-Identität“ und dann unten auf den Button „Website Icon auswählen“.

Website Icon auswählen

Entweder wählst du nun das Bild aus der Mediathek aus, oder du lädst es von deinem Computer in die Mediathek hoch.

Wenn das Bild größer als 512×512 Pixel ist, kannst du es im nächsten Schritt noch zuschneiden. Sobald du rechts unten auf „Auswählen“ klickst, ist das Favicon schon neben deinem Website Titel zu sehen.

Zuletzt klickst du auf den blauen „Veröffentlichen“ Button im Theme Customizer, um die Änderung auch zu speichern.

Was ist ein Pagebuilder? (und welche Pagebuilder und Editoren gibt es in WordPress?)

Was ist ein Pagebuilder? (und welche Pagebuilder und Editoren gibt es in WordPress?)

Hast du das Wort Pagebuilder auch schonmal gehört und nur Bahnhof verstanden? Kein Problem, dann gibt es hier nicht nur eine Erklärung dazu, was das überhaupt ist, sondern gleich auch eine Übersicht der bekanntesten Pagebuilder für WordPress.

Erst einmal: Wenn du deine liebevoll erarbeiteten Texte und Fotos nun endlich in WordPress einpflegen möchtest, wie machst du das? Du loggst dich in WordPress ein, erstellst eine neue Seite und … dann? Zum Eingeben deiner Inhalte brauchst du entweder einen Editor („Bearbeiter“), oder eben einen Pagebuilder („Seitenbauer“).

Beide helfen dir dabei, deine Inhalte in gewünschter Anordnung und Formatierung – also wie groß, wo genau etc. – auf die Seite einzupflegen.

Ein Editor hat dabei meist nur rudimentäre Features – du kannst den Text eingeben und ein bisschen formatieren, ein Bild hinzufügen und etwas verlinken.

Bei einem Pagebuilder kannst du viel mehr gestalten und die Inhalte oft ganz genau anordnen, ausrichten und designen. Außerdem gibt es in der Regel viel mehr Inhaltstypen, die du einfügen kannst – statt Text und Bildern gibt es auch Buttons, Kontaktformulare, Videos, ganze Blogbeiträge, Testimonials, Akkordeons (wo man Texte ausklappen kann) und allerlei fancy praktische Dinge.

Editoren

Editoren sind (noch) von der Funktionalität her eingeschränkter als Pagebuilder. Außerdem siehst du das, was du eingibst in einer bestimmten Eingabemaske im Backend (der Administrationsbereich von WordPress) – aber noch nicht so, wie es „in echt“ auf der Website aussehen würde.

Gutenberg (Block) Editor

Mit dem Gutenberg Editor, auch Block Editor genannt, fügst du deine Inhalte als Blöcke ein. Er ist seit der WordPress Version 5.0 standardmäßig installiert.
Anfangs noch verflucht, bekommt der Editor mehr und mehr nützliche Funktionen eingebaut und es lohnt sich mittlerweile, mit ihm zu arbeiten.

Gerade deine Blogartikel die meist nur Text und Bilder enthalten musst du nicht erst umständlich mit einem Pagebuilder gestalten, sondern kannst hier mit gutem Gewissen direkt mit dem Gutenberg Editor losschreiben.

Gutenberg Editor Beispiel

Classic Editor

Der Classic Editor war jahrelang der beliebteste WordPress Editor. Er ähnelt in seiner Bedienung ein wenig Word in abgespeckter Version. Du findest hier viele Möglichkeiten zur Textformatierung, er ist klar und einfach zu nutzen. Über kurz oder lang wird er mehr und mehr durch den Gutenberg Editor abgelöst.

Classic Editor Beispiel

Pagebuilder

Mit Pagebuildern hast du umfangreichere Gestaltungsmöglichkeiten als mit Editoren. Welchen genau du nimmst ist ein wenig Geschmackssache. Einige sind auch für bestimmte Themes optimiert oder mit dem Theme fest verbunden – der Divi Builder kommt z.B. mit dem Divi Theme, der WPBakery Page Builder mit dem Goya Theme etc.

Divi Builder

Der Divi Builder (mein Lieblingspagebuilder) ist vielleicht zu Beginn ein kleines bisschen gewöhnungsbedürftig (wo finde ich was?), aber nach kurzer Einarbeitungszeit eine mächtige Waffe. Es gibt nichts, was du damit nicht gestalten kannst und er bringt auch schon über 2000 Layoutvorlagen mit, falls dir mal die Inspiration fehlen sollte.

Deine Inhalte kannst du dabei entweder im Backend (Dashboard, Administrationsbereich) einpflegen, oder direkt im Frontend auf der richtigen Seite, sodass du auch siehst, was du tust (und was der Besucher sieht).

Du kannst ihn für 89$/Jahr oder einmalig 249$ kaufen.

Divi Builder Frontend (direkt auf der Seite):

Divi Builder

Divi Builder Backend:

Elementor

Einer der bekanntesten Pagebuilder, bei dem du per Drag & Drop die einzelnen Elemente aus der Seitenleiste auf die Seite ziehst und dann weiter bearbeitest.

In der Basisversion ist er kostenlos und kann schon die wichtigsten Dinge – Text, Bilder, Buttons einfügen – in der Pro Version für 49$/Jahr macht es dann aber richtig Spaß und du kannst auch unzählige dynamische Inhalte wie z.B. die neuesten Blogbeiträge einfügen.

Ein super Pagebuilder zum Starten, falls du das Divi Theme nicht nutzt!

Elementor Pagebuilder

WPBakery Page Builder

Mein persönlicher Horrorbuilder! Gibt es jemanden, der ihn sehr gerne mag? Schreib mir bitte in die Kommentare! Der Builder kann sicherlich viel und bringt auch richtig schöne Vorlagen mit, ist aber in der Bedienung umständlich und unübersichtlich.

Der WPBakery Pagebuilder hat wie der Divi Builder auch einen Backend- und einen Frontendmodus – das heißt, du kannst die Inhalte entweder im Administratorbereich über so Kästen einpflegen (siehe Screenshot), oder du kannst die Seite direkt im Frontend bearbeiten und siehst genau, wie sie „in echt“ aussieht.

WPBakery Page Builder

Thrive Architect

Thrive Architect ist der Pagebuilder von Thrive Themes und für seinen großen Funktionsumfang und seine relativ einfache Bedienung bekannt. Man kann ihn entweder einzeln für 97$/Jahr abonnieren, oder mit der gesamten Thrive Suite, die noch weitere Funktionen abdeckt (Online Kurse erstellen, E-Mail Liste aufbauen und mehr).

Es gibt natürlich noch weitere Pagebuilder und Editoren (SiteOrigin, Visual Composer, Beaver Builder und mehr), aber die oben vorgestellten sind die, die am meisten verbreitet sind.

Fazit

Wenn du gerade mit deiner WordPress Website startest und dir kein Theme kaufen willst, empfehle ich dir

  • den Pagebuilder Elementor in der kostenlosen Version für die Seitenerstellung und
  • den Gutenberg Editor für deine Blogartikel.

Langfristig ist der Divi Builder* mein absoluter Favorit, denn mit ihm kannst du einfach alles umsetzen, was du dir vorstellen kannst 🙂

Übrigens: Wenn du eine Seite mit einem Editor erstellt hast, lassen sich die Inhalte in einen Pagebuilder übernehmen. Hast du aber schon mit einem Pagebuilder wie z.B. Elementor eine Seite erstellt, kannst du diese nicht in einen anderen Pagebuilder übernehmen, sondern musst die Seite nochmal neu erstellen (z.B. unter einem neuen Namen) und die Inhalte händisch rüberkopieren.

Nutzt du schon einen Pagebuilder? Hast du einen Favoriten?

Google Fonts lokal installieren mit wenigen Klicks

Google Fonts lokal installieren mit wenigen Klicks

Wahrscheinlich hast du das Schreckensgespenst der letzten Wochen auch mal hier und da gelesen:
Eine Abmahnwelle gegen Websitebetreiber geht um, weil viele die kostenlosen Google Fonts nicht korrekt eingebunden haben.

Was steckt dahinter?
Wenn du eine Website besuchst, die Google Schriften benutzt (und das sind fast alle), müssen diese erst einmal im Hintergrund von der Google Fonts Website geladen werden. An sich kein Problem (macht die Seite ein kleines bisschen langsamer, aber nicht weiter schlimm), allerdings wird dabei immer deine IP-Adresse an den Google Font Server übertragen. Der in den USA steht. Und da ist wieder das Datenschutzproblem, weil dies laut DSGVO nicht einfach so passieren darf.
(Die Abmahnwelle ist ein bisschen aufgebauscht, weil sich hier angeblich ein österreichischer Anwalt bereichern will, der letztlich selbst abgemahnt wurde, aber generell ist es schon eine gute Idee, DSGVO-konform zu handeln).

Die Lösung ist: Google Fonts runterladen (sie sind wie gesagt kostenlos) und auf deiner Website einbinden, sodass sie immer nur direkt von deiner Seite (lokal) und nicht von der Google Fonts Seite geladen werden müssen.
Wie du das ganz super einfach mit wenigen Klicks selbst machen kannst:

1.) Prüfe mit dem kostenlosen Scanner von e-recht24.de, ob deine Website überhaupt Google Fonts unsicher eingebunden hat: https://www.e-recht24.de/google-fonts-scanner

2.) Wenn dir das angezeigt wird, mach zunächst von deiner Website ein Backup (hier findest du eine Anleitung).

3.) Installiere und aktiviere das kostenlose Plugin OMGF

4.) Öffne die Plugin Einstellungen (über Einstellungen -> Optimize Google Fonts)

5.) Klick auf den Button ganz unten „Speichern & Optimieren“

6.) Prüfe nochmal mit dem e-recht24.de Scanner, ob jetzt alles gut ist.

Falls du ein Cache Plugin nutzt, musst du ggf. den Cache leeren.

​Fertig! 🙂

Blog mit WordPress erstellen – die einfachste Anleitung

Blog mit WordPress erstellen – die einfachste Anleitung

Falls du schon eine Website in WordPress – noch ohne Blogartikel – hast und dies nun ändern möchtest, habe ich hier eine ganz einfache Anleitung für dich, wie sich das umsetzen lässt.
Doch fangen wir mal von vorne an:

Wozu brauche ich überhaupt einen Blog?

Ich möchte mit dir wetten, dass auch du schon viele Fragen und Probleme des täglichen Lebens mit Hilfe eines Blogartikels gelöst hast.

Du hast dir Tipps geholt („Wie schläft mein Baby endlich durch“), vielleicht hilfreiche Anleitungen gefunden („Spülmaschine reinigt nicht mehr richtig – was tun“) und bei persönlicheren Artikeln vielleicht auch mit der Autor*in mitgefühlt.

Fakt ist: Ein Blog ist DAS Mittel der Wahl, wenn du mit einem (Online) Unternehmen

  • gefunden werden möchtest (Suchmaschinen LIEBEN Blogs)
  • Vertrauen aufbauen möchtest (Leser*innen können dich kennenlernen und sich von deinem Wissen überzeugen)
  • Wunschkund*innen anziehen möchtest (deine ganz persönliche Art und Weise wie du schreibst, wie du die Welt siehst, wird Besucher*innen entweder ansprechen, oder eben nicht)
  • helfen möchtest

Du kannst deinen Blog auch wunderbar nutzen, um deine E-Mail-Liste aufzubauen. Und deine Blogbeiträge geben dir natürlich auch ganz viel Inhalt für eventuelle Social Media Kanäle.

Was ist der Unterschied zwischen einem Blog und einer Website?

Eine Website an sich bezeichnet den ganzen Webauftritt, also alle Seiten zusammen – die Startseite, Über mich Seite, Kontaktseite, Datenschutzerklärung etc. Du KANNST einen Blog auf deiner Website haben, das ist aber nicht zwingend notwendig. Andersherum ist ein Blog immer auf einer Website zu finden, denn auch beim Blog hast du oben einen Header (Kopfbereich), meist ein Logo, ein Menü, unten noch die Links zu Impressum und Datenschutzerklärung und vielleicht noch weitere Seiten wie die Startseite, deine Angebote & Co.

In WordPress selbst sind die normalen Seiten als Seiten angelegt, die Blogbeiträge als Beiträge (siehe folgender Screenshot). Beiträge sind im Grunde fast ganz normale Seiten, haben zusätzlich aber noch

  • eine Kategorie,
  • ein Veröffentlichungsdatum,
  • ein Vorschaubild,
  • die Möglichkeit, Kommentare anzunehmen und zu zeigen
  • und werden standardmäßig mit einer Seitenleiste rechts dargestellt („neueste Blogbeiträge“, „über die Autorin“, etc.)

Beiträge vs Seiten

Im WordPress Dashboard, deiner Verwaltungszentrale, kannst du neue Seiten über Seiten → Erstellen anlegen und neue Blogbeiträge über Beiträge -> Erstellen.

Wie oft sollte ich bloggen?

Die Frage lässt sich leider nicht pauschal beantworten und hängt komplett von deinen Lebensumständen ab! Wenn es dir möglich ist, ist 1x die Woche genial. Wenn dich das völlig stresst, fang vielleicht mit 1x im Monat an.

Generell gilt: Lieber regelmäßig posten, dafür nicht so häufig, als total euphorisch mit 5 Artikeln pro Woche anzufangen und dann wieder aufzugeben, weil es viel zu viel Arbeit ist.

Wie lang sollten meine Blogartikel sein?

Auch hier gibt es keine pauschale Antwort. „Früher“ hieß es, unter 1000 Wörtern brauchst du gar nicht erst anzufangen. Suchmaschinen lieben epische Blogposts, die 3000 Worte und mehr beinhalten und den Leser*innen ganz ausführlich alles zu einem Thema vermitteln.

Ein Richtwert von dem WordPress Suchmaschinenplugin RankMath sind mindestens 600 Wörter, um ein wenig Substanz zu haben. Aber gerade wenn du auch ein Video oder einen Podcast mit eingebaut hast, sagt dies manchmal mehr als 1000 Worte 🙂

Ich würde sagen: Die Mischung macht’s!

Erstelle ein paar richtig ausführliche Blogartikel und streu auch kurze dazwischen ein. Wenn sich eine Frage oder ein konkretes Problem in wenigen Worten beantworten lässt, musst du das Thema auch nicht künstlich in die Länge ziehen. Letztlich möchtest du mit deinem Blogartikel deiner Leserschaft helfen, und das darf auch schnell und in kurz geschehen, oder eben zu einigen Themen richtig ausführlich als komplette Übersicht, mit Grafiken, einem passenden Freebie (kostenloses Angebot für die Newsletter-Anmeldung) und allem drum und dran. Dein Blog, deine Website, deine Entscheidung 🙂

Blitzanleitung: Blog erstellen

  1. Logge dich in dein WordPress Dashboard ein (deine Adresse und dahinter /wp-admin)
  2. Klicke auf Beiträge → Kategorien und erstelle die Kategorie „Blog“
  3. Klicke auf Beiträge → Erstellen und erstelle deinen ersten Blogbeitrag. Hierzu musst du einen Titel vergeben und einen Inhalt einfügen (Texte, Bilder)
  4. In der rechten Spalte hast du dann unter Beitrag den Punkt „Kategorien“. Wähle hier „Blog“ aus und klicke auf „Veröffentlichen“, wenn du den Blogbeitrag fertig gestellt hast.Unter „Beitragsbild“ kannst du ein Blog Vorschaubild einrichten.
    Blog in WordPress erstellen
  5. Klicke im Dashboard auf Design → Menüs
  6. Füge unter Kategorien die „Blog“ Kategorie ins Menü hinzu
  7. Klicke auf „Menü speichern

Das war es schon! Du findest von jetzt an die von dir erstellten Blogbeiträge – wenn du sie der Kategorie „Blog“ zuweist – unter dem Menüpunkt „Blog“.
Wenn du die Ansicht der Blogartikel anpassen möchtest, kannst du dies in der Regel über den Theme Customizer tun (Design → Customizer).

Video: Blog erstellen in WordPress

Im Video zeige ich dir die Schritte nochmal direkt:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Lies auch mal in mein Interview mit Judith Peters (Sympatexter) rein für noch mehr Tipps rund um deinen Blog.

WordPress Glossar – alle wichtigen Begriffe rund um deine WordPress Website erklärt

WordPress Glossar – alle wichtigen Begriffe rund um deine WordPress Website erklärt

„Ich sollte bitte wo was? SFTP-Verbindung herstellen? Ein SSL Zertifikat einrichten?“ Falls du beim Lesen dieser Fragen auch nur Bahnhof verstehst, oder dir generell einen Überblick über die wichtigsten Begriffe rund um deine WordPress-Website verschaffen möchtest, habe ich hier ein Glossar für dich zusammengestellt.

Gibt es noch einen Begriff, den du vermisst? Lass es mich in den Kommentaren wissen!

Allgemeine Begriffe

CMS

steht für Content Management System, zu deutsch quasi ein „Inhaltsverwaltungssystem“. Früher musste jede einzelne Seite und Unterseite händisch am eigenen Computer in Code aufgeschrieben werden, die der Browser versteht. Und diese Seite musste dann nach jeder Bearbeitung neu auf den Webserver hochgeladen werden.

Mit der Einführung von CMS wurde es dann komfortabel – man hat eine richtige Eingabemaske, in der man direkt im Webbrowser Texte und Formatierungen einstellen kann (neben vielen anderen Features) und auch mit anderen gemeinsam an der Seite arbeiten kann. Außer WordPress gibt es z.B. noch Joomla, Typo3 und Drupal, um nur einige zu nennen.

CSS

CSS steht für Cascading Style Sheets, übersetzt also verschachtelte Stilvorlagen und ist eine Art Formatierungssprache (keine Programmiersprache) für Internetseiten.

Über CSS kannst du z.B. Schriften und Farben, aber auch Abstände, Schatten, Ränder und noch vieles mehr für bestimmte Bereiche und Elemente auf deiner Website einstellen.

Bei deiner WordPress-Website musst du in der Regel kein CSS händisch eingeben, sondern kannst über dein Theme (Begriffserklärung siehe unten) oder einen Pagebuilder alles so einstellen wie gewünscht. Falls du doch etwas noch spezifischer anpassen willst, gibt es in WordPress den sogenannten Theme Customizer, über den du immer ganz unten bei „Zusätzliches CSS“ noch etwas eintragen kannst.

Ein Beispiel für CSS Code wäre:

h1 {
  color: red;
}

Damit würdest du einstellen, dass alle Überschriften 1. Grades (h1, für heading 1) rot dargestellt wird.

Domain

Eine Domain, auch Webadresse genannt, ist der Name unter der deine Website erreichbar ist. Ein Domainname besteht normalerweise aus dem Namen selbst – z.B. google oder stefaniemotiwal – und einer Endung (Top-Level-Domain), also .de, .com, .at, etc. Du kannst eine Domain schon für wenige Euro jährlich bei einem Webhoster auf dich registrieren lassen.

FTP-Verbindung / SFTP-Verbindung

Wenn du WordPress bei einem einigermaßen modernen Webhoster nutzt, kannst du es meist mit wenigen Klicks automatisch installieren lassen und hast mit FTP & Co. nichts zu tun.

Falls das aber nicht der Fall ist und falls du mal Anpassungen an deinen Ordnern vornehmen musst oder z.B. Dateien ins Hauptverzeichnis deines Webservers hochladen musst (das kann z.B. bei der Authentifizierung für Google Analytics oder Pinterest der Fall sein), geht das via FTP.

FTP steht hierbei für File Transfer Protocol (das S bei SFTP für Secure, also quasi eine sicherere Variante von FTP). Du brauchst einfach nur ein Programm wie z. B. Filezilla und musst dort die Verbindungsdaten für deinen Webspace eingeben. Diese bekommst du bei deinem Webhoster. Wenn du eingeloggt bist, siehst du eine Ordnerstruktur – links von deinem Computer und rechts vom Webserver, wo du WordPress installiert hast. Du kannst dich dann ganz normal wie auf einem Computer selbst auch durchs Dateiverzeichnis navigieren, Dateien hochladen, verschieben, umbenennen und anpassen.

FTP Programm Filezilla

Auch wenn es auf den ersten Blick überwältigend aussehen mag, ist es im Grunde gar nicht so schwierig, sich damit zurechtzufinden 🙂

Homepage

Der Begriff „Homepage“ wird oft synonym für die komplette Website verwendet, bezeichnet streng genommen aber nur die „Home“ Seite, also die Startseite.

Hoster / Webhoster

Auch eine WordPress Website besteht letztlich aus Dateien und einer Datenbank. Da diese nicht von deinem Computer aus aufgerufen wird, muss sie irgendwo im Web gespeichert werden, damit man auf sie rund um die Uhr von überall aus zugreifen kann. Hier kommt ein Webhoster ins Spiel, der dafür hochleistungsstarke Computer (Server) bereitstellt, auf der deine Website gespeichert ist. Viele Webhoster bieten außerdem neben dem Webspace (Speicherplatz) auch gleich die Domain (Webadresse) mit an.

HTML

Hyper Text Markup Language ist eine „Sprache“ (nicht direkt eine Programmiersprache), mit der sich Internetseiten erstellen lassen. Über bestimmten Code – sogenannte Tags, die immer mit <Befehl> geöffnet und mit </Befehl> geschlossen werden, lässt sich eine Seite beschreiben. Mit <table> kann man eine Tabelle einfügen, mit <img> ein Bild usw. Die meisten Websites wurden früher rein mit HTML Code in Verbindung mit CSS erstellt – HTML bestimmt, welche Elemente an welcher Stelle auftauchen und CSS wie sie dann aussehen. Auch WordPress nutzt noch HTML und CSS, zusätzlich aber auch Programmiersprachen wie PHP und Javascript und eine Datenbank.

Responsive

Ob eine Website responsive („reagierend“) ist, besagt, ob sich ihre Darstellung auch an unterschiedliche Geräte – Handys, Tablets, verschiedene Bildschirmgrößen – anpasst. Du kennst sicher auch das Hamburger Menü mit den drei Strichen, welches in der Handyversion der meisten Websites automatisch erscheint. Aber auch andere Elemente im Layout werden (je nach Theme in WordPress) automatisch angepasst: Elemente, die am Computer nebeneinander stehen, werden auf dem Handy untereinander dargestellt.

Da Google mittlerweile nur noch anhand der mobilen Version von Websites entscheidet, wie gut sie in den Suchergebnissen auftauchen, ist es super wichtig, dass deine Website auch auf dem Handy glänzt und alles gut zu lesen und gut zu bedienen ist.

SEO

Search Engine Optimization, zu deutsch Suchmaschinenoptimierung, fasst die Optimierungsmöglichkeiten zusammen, durch die deine Website insgesamt und auch einzelne Seiten, Blogartikel etc. besser bei Suchmaschinen (meist Google) gefunden werden.

Zu SEO gehört zum Beispiel, dass deine Website technisch einwandfrei läuft und schnell geladen wird, aber vor allem auch, dass deine Inhalte dem Suchenden möglichst genau bei seiner Suchanfrage weiterhelfen. In meinem SEO Blogartikel habe ich die wichtigsten Schritte für die Suchmaschinenoptimierung zusammengefasst.

SSL-Verschlüsselung

Beim Surfen siehst du im Browser meist neben der Adresse so ein kleines Schloßsymbol. Es zeigt an, dass die Daten auf dieser Seite SSL verschlüsselt und eben nicht im Klartext übertragen werden. Dies ist mittlerweile aus datenschutzrechtlichen Gründen Pflicht und du kannst bei eigentlich allen Hostern SSL dazubuchen, wenn es nicht sowieso schon in deinem Tarif enthalten ist. Wie du das SSL Zertifikat für deine Website ganz einfach einrichten kannst, beschreibe ich in meinem SSL-Blogartikel.

Webseite

Der Begriff „Webseite“ wird im deutschsprachigen Raum oft synonym für die gesamte Website verwendet, bezeichnet aber eigentlich nur eine einzelne Unterseite, z.B. die Über mich Seite.

Website

Mit dem Begriff „Website“ wird im Gegensatz zu Homepage oder Webseite die komplette WebSITE inkl. aller Unterseiten, Blogartikel & Co. bezeichnet.

Webspace

Mit Webspace bezeichnet man den Ort, an dem die Daten deiner Website gespeichert sind. Das ist dann quasi der Festplattenspeicherplatz bei deinem Webhoster, der dir gegen Gebühren (oder Werbung) zur Verfügung gestellt wird und rund um die Uhr erreichbar ist.

WordPress

in 2003 ursprünglich als Blog Software auf den Markt gebracht, wurde es durch die stetige Weiterentwicklung so umfangreich, dass mittlerweile sogar rund 32% aller Websites weltweit (und 50% aller CMS Websites) mit WordPress gestaltet sind.

Begriffe innerhalb von WordPress

Customizer

Mit dem (Theme) Customizer kannst du in WordPress viele Grundeinstellungen vornehmen, die für alle Seiten gelten. Du kannst hier – je nachdem, welches Theme du verwendest – die Schriftarten, -größen, Farben, Buttonstyles, Blogartikeldarstellung und vieles mehr konfigurieren. Um den Customizer aufzurufen klickst du einfach im Dashboard auf Design → Customizer.

Dashboard

Das Dashboard ist sozusagen die Verwaltungszentrale von WordPress. Wenn deine richtige Website über www.beispiel.de aufzurufen ist, kannst du über www.beispiel.de/wp-admin zum Dashboard gelangen, musst dich hier einloggen und schon stehen dir alle Funktionen zur Verfügung: Seiten und Blogeinträge erstellen, Bilder hochladen, Plugins und Themes installieren und zahlreiche Einstellungen vornehmen.

Footer

Mit dem Footer ist der Fußbereich ganz unten auf allen Seiten gemeint. Hier findest du in der Regel das copyright, den Link zu Impressum und Datenschutzerklärung und gelegentlich eine Wiederholung der wichtigsten Menüpunkte oder weitere Inhalte wie eine Newsletteranmeldung, ein Kontaktformular oder Ähnliches.

Header

Mit dem Header wird der Kopfbereich einer Website bezeichnet, zu dem in der Regel auch das Logo, das Menü und der obere Inhaltsbereich zählen. Der Bereich, den man ganz oben sehen kann ohne überhaupt auch nur einmal zu scrollen heißt auch „above the fold“ – benannt nach den Zeitungen am Kiosk und dem Bereich, den man ohne die Zeitung zu falten (fold) direkt lesen kann.

Menü

Das Menü ist die Navigationsleiste, die sich auf fast jeder Website im oberen Bereich findet und auf die einzelnen Seiten oder Bereiche der Website verlinkt. Auf mobilen Endgeräten ist das Menü aus Platzgründen meist über drei Balken aufzuklappen (auch „Hamburger Menü“ genannt).

Pagebuilder

Wenn du WordPress fertig installiert und eingerichtet hast, geht es ans Erstellen oder Einfügen deiner eigentlichen Inhalte. Um die Texte, Bilder und Buttons so auf deine einzelnen Seiten zu bekommen wie du es dir wünscht, kannst du den vorinstallierten Gutenberg Editor nutzen. Über ein + Zeichen wählst du aus, welches Element (Überschrift, normaler Text, Bild) du als nächstes Einfügen möchtest.

Wenn dir das zu wenig ist, kannst du dir einen Pagebuilder – „Seitenbauer“ – installieren, mit dem das Einfügen der Inhalte noch viel fortgeschrittener funktioniert. Die bekanntesten hierbei sind Elementor, Divi, WPBakery (den ich persönlich furchtbar finde), SiteOrigin, Oxygen und Thrive Architect.

Einige Pagebuilder – wie der Divi Builder – sind beim Theme schon mit dabei und können nicht gewechselt werden.

Inhalte einfügen über den Divi Builder:

Plugin

WordPress selbst bietet nach der Installation nur grundlegende Funktionalitäten an; man kann Texte und Bilder einstellen und die Inhaltsbereiche ggf. etwas anpassen. Mit Plugins lassen sich in WordPress unzählige Funktionen hinzufügen: Galerien, Foren, Kontaktformulare, Online Shops, Newsletter, Social Media Icons, Statistiken, Cookie Banner und so weiter. Es gibt auch hier wieder kostenlose und kostenpflichtige Plugins. Kostenlose Plugins kannst du direkt über den Punkt „Plugins“ in deinem WordPress Dashboard installieren und aktivieren. Kostenpflichtige musst du erst kaufen und kannst sie dann über den Punkt „Plugins“ von deinem Computer aus hochladen. Im Blog stelle ich dir die besten kostenlosen Plugins vor.

Slider

Ein Slider ist ein Bereich, in dem die Inhalte – meist Grafiken mit Text – „weitergleiten“. Dies können z.B. Produkte, Infos oder Testimonials (Kundenstimmen) sein, die entweder automatisch nach einigen Sekunden getauscht werden, oder sich mit Pfeilen weiterklicken lassen. Auch wenn Slider oft „fesch“ aussehen, kosten sie einiges an Ladezeit und sind am Handy ggf. nicht direkt als Slider zu erkennen. Du solltest also gut abwägen, ob du auf einen Slider nicht verzichten kannst – gerade im oberen Bereich der Website.

Theme

Ein Theme bestimmt in WordPress sozusagen das Design deiner Seite. Es legt fest, wo welche Inhaltsbereiche dargestellt werden und in etwa wie sie aussehen, also quasi den groben Aufbau und Stil deiner Seite. Vieles lässt sich hier aber auch nachträglich noch weiter anpassen, meist über den Theme Customizer.

Es gibt unzählige kostenlose Themes, die größtenteils auch was hermachen. Activello, Cenote, Edge, OceanWP und Sela sind zum Beispiel gute kostenlose Exemplare.

Kostenpflichtige Themes findest du z.B. auf Themeforest (ca. 30-60$ plus MwSt.). Ich kann dir das meistgenutzte kostenpflichtige Theme Divi empfehlen (ca. 250$ plus MwSt. einmalig, oder 90$ plus MwSt. jährlich). Ein kostenpflichtiges Theme hat die Vorteile, dass es ständig weiterentwickelt wird und man Aktualisierungen zu Sicherheitslücken und für neue Features erhält, dass man Support bekommt, wenn man nicht weiter weiß, es eine gute Dokumentation zur Bedienung gibt und es meist optimiert ist für schnelles Laden und mobile Darstellung.

Widget

In WordPress gibt es sogenannte Widgets – das sind Inhaltsbereiche, die man fast beliebig mit Text, Bildern und Anderem füllen kann. Diese können an verschiedenen Positionen auftauchen, z.B. im Header (oben), an der Seite (dies ist gerade bei Blogs typisch), oder im Footer (unten). Im folgenden Screenshot siehst du, wo das Menü und die Widgets in einem typischen Blog z.B. angeordnet sein können.

Gibt es noch weitere Begriffe, die dir spanisch vorkommen? Lass es mich gern in den Kommentaren wissen!

Die 20+ besten Tools und Links für deine Website

Die 20+ besten Tools und Links für deine Website

Egal an welchem Punkt du stehst – ob du erst über eine Website nachdenkst, schon aktiv dabei bist, sie zu erstellen, oder alles schon ready ist:

Es gibt da draußen richtig geniale Tools und Services, mit denen du deine Website analysieren, aufwerten und optimieren kannst. Ob aus dem Bereich Grafik oder Technik – ich habe hier einige meiner Lieblingstools und -links gesammelt, damit du für jeden Einsatzzweck gleich das passende Werkzeug hast.

Übrigens: Wenn der Link nicht im Text angegeben ist, bringt dich ein Klick auf die Überschrift direkt zur Website des Tools/Dienstes.

Website-System

WordPress.org

Hier kannst du dir WordPress – kostenlos – herunterladen, um es beim Webhoster deiner Wahl zu installieren. Viele Webhoster bieten auch direkt die Möglichkeit an, WordPress mit wenigen Klicks zu installieren – dann kannst du dir das Runterladen natürlich sparen.

WordPress.org ist nicht zu verwechseln mit wordpress.com, wo du dir erstmal ein kostenloses Konto anlegen und direkt loslegen kannst, später dann aber für das Hosting und extra Funktionen zahlen musst – und zwar wesentlich mehr als wenn du die erste Variante wählst.

wordpress.org - hier runterladen

wordpress.org – hier kannst du dir WordPress kostenlos herunterladen

wordpress.com

wordpress.com – hier kannst du WordPress direkt nutzen mit wordpress.com als (teurem und umständlichem) Webhoster.
Nicht zu empfehlen!

Grafiken

Bilddatenbanken

Bei der Vielzahl an Bilddatenbanken ist es gar nicht so leicht, eine Auswahl zu treffen. Meine liebsten sind momentan Canva (siehe nächster Punkt), pixabay, pexels, iStockPhoto für kostenpflichtige Stockfotos (und Stockvideos!) und rawpixel.
Rawpixel lässt sich nur mit englischen Suchbegriffen bedienen, allerdings haben sie etwas richtig Cooles im Angebot: PNG Elemente, die sich also schön frei „schwebend“ auf deiner Website einbetten lassen. Du kannst außerdem nach vielen Kriterien filtern.

Bitte prüfe in jedem Fall die Lizenzbedingungen, bevor du Grafiken auf deiner Website einbettest.

rawpixel beispiel

Suchbeispiel in der Bilddatenbank rawpixel

Canva

An Canva kommst du mittlerweile im Online Business gar nicht mehr vorbei. Mit dem Online Grafikprogramm kannst du so ziemlich alles erstellen, was du brauchst: Grafiken für deine Website und Social Media in allen Größen und Formen, Workbooks/ebooks, Flyer, Präsentationen, sogar Instagram Reels.

Mit unzähligen Vorlagen, Stockfotos, nutzbaren Elementen und der Möglichkeit, dein eigenes Branding (Schriften und Farben) zu definieren und in all deinen Grafiken zu nutzen, spart Canva unheimlich viel Zeit, ist super praktisch und dabei kinderleicht zu bedienen.

canva online grafikdienst

Der Startbildschirm in Canva zeigt schon, was das Tool alles kann

FireShot

Mit der Chrome Browser Erweiterung FireShot kannst du einen Screenshot (Bildschirmfoto) einer kompletten Website von ganz oben nach ganz unten machen – vieeel praktischer, als die Teile einzeln zu fotografieren. 

Fireshot erstellt auch aus den längsten Seiten einfach ein Bild

Tinypng.com

Mein fast täglich genutzter Panda-Begleiter darf hier natürlich nicht fehlen: Auf tinypng.com lädst du deine Bilder (bis 5 MB) hoch und dann komprimiert wieder herunter. Spart Speicherplatz und lädt schneller! Besonders für .png Dateien wirkt das Tool wahre Wunder. 

tinypng beispiel

Pflicht vor dem Hochladen deiner Bilder auf die Website: über tinypng.com verkleinern

Branding / Design

ColorZilla

Für den Browser Google Chrome gibt es super praktische Erweiterungen – wie zum Beispiel ColorZilla, eine Pipette, mit der du jede Farbe auf der aktuellen Website auslesen kannst. Dazu gibt es eine „Color History“, die deine vorher schon geprüften Farben speichert.

Ein einfacher Color Picker, damit du Farbcodes aus dem Web kopieren kannst

ColorSpace

Du hast dich in eine Farbe verliebt, die UNBEDINGT in dein Branding einfließen muss? Aber weißt jetzt gar nicht, welche Farben dazu gut passen könnten? Dann hat dein Suchen ein Ende: Geht auf die ColorSpace Website, gib die Farbe deiner Wahl ein und lass dir verschiedene passende Farbpaletten generieren.

Color Space Farbpalette

ColorSpace schlägt dir anhand deiner eingegebenen Farbe 25 ganz unterschiedliche Paletten vor – mal mit 4, mal mit 6 Farben. Da ist auf jeden Fall was für dich dabei!

 

Tint & Shade Generator

Beim Tint & Shade Generator trägst du einfach eine Farbe deiner Wahl ein (bzw. den Hex Code davon – das ist die eindeutige 6-stellige Farbnummer mit einem # davor). Für jede der eingetragenen Farben wird dann eine Abstufungsskala generiert, die du prima für z.B. hellere Hintergründe und Schattierungen verwenden kannst, ohne dass der gewählte Farbton nicht zu deinem Branding passt.

Ladegeschwindigkeit

Zum Thema Ladegeschwindigkeit habe ich hier schon einen ganzen Blogartikel veröffentlicht – warum sie so wichtig ist und wie du sie verbessern kannst.

An dieser Stelle zeige ich dir die Tools, die ich zur Analyse immer verwende. Damit kannst auch du ganz einfach und kostenlos prüfen, was sich an deiner Website noch beschleunigen lässt. (Falls du übrigens Hilfe dabei brauchst, das dann auch umzusetzen, habe ich ein Support Paket genau für diesen Fall entwickelt). 

Google Page Speed Insights

Mit den Page Speed Insights werden dir neben einer Punktzahl von 1-100 (wobei 100 die beste ist) auch Details zu sogenannten „Core Web Vitals“ angezeigt. Das sind Kriterien, die auch für dein Google Ranking wichtig sind und zum Beispiel besagen, ob sich beim Laden deiner Seite das Layout im oberen Bereich nochmal verschiebt (Cumulative Layout Shift (CLS), wie lange es dauert, bis du mit der Seite reagieren kannst (First Input Delay), bis erste Elemente sichtbar werden (First contentful paint) und anderes.

Außerdem werden dir ganz unten Verbesserungsvorschläge gegeben, damit deine Seite schneller, besser, stabiler laden kann.

Leider ist die Analyse hiermit nicht immer ganz einfach, aber ohne viel Hintergrundwissen kannst du zumindest schon eine ungefähre Einschätzung sehen und prüfen, ob du deine Bilder verkleinern solltest oder evtl. zu einem anderen Webhoster wechseln solltest.

page speed insights beispiel

Mit den Google Pagespeed Insights kannst du Details über das Laden deiner Website sehen

 

Pingdom Tools

Der Pingdom Website Speed Test zeigt dir dein Ladeergebnis in (amerikanischen) Schulnoten an. Die Ergebnisse sind weniger detailliert – und damit auch weniger kompliziert – als bei den Pagespeed Insights. Wundere dich übrigens nicht, falls die Ergebnisse etwas von den PSI abweichen und stelle bei der Analyse als „Test from“ Europa ein (falls du in Europa bist), da deine Ergebnisse sonst verfälscht werden können. 

pingdom tools beispiel

Analyse & Statistiken

Google Analytics

Auch wenn datenschutztechnisch noch nicht klar ist, wo genau die Reise hingeht (siehe z.B. hier), ist Google Analytics das aktuell beste Tool am Markt, wenn es um Besucheranalyse geht.

Du kannst hiermit nicht nur genau nachschauen, wie viele Besucher du in einem bestimmten Zeitraum hattest, sondern auch wie lange sie auf welcher Seite geblieben sind. Das hilft dir z.B. dabei, technische Fehler zu entdecken (längere Seiten auf denen jeder nach 1, 2 Sekunden abspringt sind evtl. fehlerhaft) und auch inhaltlich zu optimieren (damit die Verweildauer länger wird). Du kannst prüfen, wie viele deiner Besucher mit Mobilgeräten (Handy, Tablet) und wie viele mit Desktopgeräten auf deine Website kommen. Oder aus welchen Ländern die Besucher stammen.

Für Fortgeschrittene gibt es noch viele weitere Anwendungsmöglichkeiten, z.B. Conversion Tracking (wie viele bestimmte Aktionen auf welcher Seite ausgeführt werden), um diese gezielt zu verbessern. 

Wichtig für den aktuellen Einsatz von Google Analytics ist, dass du mit einem Cookie Banner die Möglichkeit bietest, das Tracking abzulehnen. Klickt der Besucher also auf „Alle Cookies verweigern“, wird er einfach gar nicht gezählt. Außerdem musst du Google Analytics in deiner Datenschutzerklärung erwähnen und einen Auftragsverarbeitungs-Vertrag mit Google abschließen. Selbst dann ist jedoch die Nutzung momentan rechtlich noch umstritten.

google analytics beispiel

So kann die Auswertung deiner Besucher mit Google Analytics zum Beispiel aussehen

Google Search Console

Die kostenlose Google Search Console solltest du unbedingt mit deiner Website verheiraten. Hier hast du datenschutztechnisch überhaupt nichts zu befürchten, kannst aber ebenfalls sehen, wie viele Besucher deine Website hat.
Außerdem wird dir angezeigt (und du bekommst sogar eine E-Mail zugeschickt), wenn es laut der Konsole Fehler auf deiner Website gibt – Buttons zum Beispiel zu dicht beieinander liegen, um anklickbar zu sein. Dieser Fehlerbericht ist zwar nicht immer ganz zuverlässig und schlägt manchmal falschen Alarm, kann aber in vielen Fällen hilfreich sein.

Sehr praktisch ist auch der „Performance“ Bereich – dort wird dir angezeigt, für welche Suchworte deine Website in Google angezeigt wurden – und wie häufig. Und wie oft dann darauf geklickt wurde.

Bei „Removals“ kannst du angeben, dass bestimmte Unterseiten aus dem Google Index vorübergehend entfernt werden sollen. Alles in allem findest du hier also viele nützliche Funktionen für Website Administratoren. 

google search console beispiel

Übersicht der Google Search Console mit vielen nützlichen Funktionen für Website Administratoren

Suchmaschinenoptimierung

Wenn du ernsthaft (und nicht nur zufällig) bei Google gefunden werden möchtest, kommst du um eine Keyword Recherche nicht drum herum. Keyword steht hier einfach für den Suchbegriff, der aus mehreren (long tail) oder einem (short tail) Suchwort bestehen kann.

Tipps und mehr Details zur Suchmaschinenoptimierung findest du in diesem Blogartikel.

Keywords finden / analysieren

Mit Keyword Recherchetools kannst du z.B schauen,

  • wie häufig der Suchbegriff überhaupt bei Google eingegeben wird
  • wie groß hier die Konkurrenz ist / wie schwierig es ist, bei Google ganz oben zu landen
  • ob es alternative Begriffe gibt, die vielleicht größere Chancen auf Erfolg haben

 

Die beiden beliebtesten Tools zum Starten sind ubersuggest oder kwfinder.

Beide Tools sind kostenpflichtig und bieten verschiedene Preismodellen an. Ich selbst nutze ubersuggest mit einer lebenslangen Lizenz und bin ganz zufrieden mit den gebotenen Möglichkeiten.

So sieht eine Ergebnisseite in ubersuggest aus. Du siehst z.B. Statistiken zum gesuchten Keyword (wie häufig wird es gesucht, wie schwierig wird es, hierfür auf einem guten Platz zu  landen) und Content-Ideen dazu, wie du das Keyword gleich in schöne Blogartikel einbauen kannst (bzw. wie die Konkurrenz das gemacht hat). 

Super interessant ist die Analyse mit dem Tool answerthepublic. Für deinen Suchbegriff erstellt es eine Art Mindmap, in der die Äste gebündelte Frageworte / Präpositionen darstellen und die Zweige die kompletten Fragen. So kannst du sehen, auf welche Fragestellungen du z.B. mit einem Blogartikel antworten kannst. 

Answerthepublic sortiert die Keywords in eine Art Mindmap

Mit dem digitalen Unternehmer Ranking Check kannst du prüfen, ob du für ein ganz bestimmtes Keyword schon in den Top 100 bei Google landest – und falls ja, an welcher Stelle.

der digitale unternehmer ranking check

Selbsterklärend, kostenlos und praktisch: Der Google Ranking Check von derdigitaleunternehmer.de

Einen ausführlichen Testbericht über 55 kostenlose SEO-Tools findest du hier

Website (seotechnisch) analysieren

Mit Seobility kannst du bereits in der kostenlosen Version einige praktische Funktionen nutzen.

Für die Bereiche Technik & Meta, Struktur und Inhalt gibt es konkrete Verbesserungsvorschläge für deine Website aus (Achtung: Du musst dich hier nicht an alles halten, was vorgeschlagen wird!). Und z.B. für bis zu 10 Keywords kannst du wöchentlich eine Benachrichtigung erhalten, an welcher Position du damit stehst. 

seobility tool

Seobility hilft auch schon in der kostenlosen Version dabei, deine Website SEO technisch zu verbessern

Responsive Check

Mit den folgenden Tools kannst du prüfen, wie wie gut deine Seite für Mobilgeräte optimiert ist.

 

Am I Responsive

Hier wird nichts analysiert, aber deine Website wird auf verschiedenen Geräten direkt im Browser angezeigt. Du kannst hier sogar alles bedienen und z.B. auf dem winzigen Handy mal scrollen, Buttons anklicken etc. Ganz praktisch, um direkt live zu erleben, ob alles funktioniert.

amiresponsive

Auf Amiresponsive kannst du deine Website auf allen 4 Geräten direkt im Browser testen. 

Mobile Friendly Test

Beim mobile friendly test von Google wird dir deine Website nicht mobil angezeigt, sondern als Text ausgegeben, ob alles passt. Falls nicht, gibt es auch direkt Verbesserungsvorschläge. Dir wird auch angezeigt, ob deine Seite aktuell von Google „gecrawlt“ werden kann, also ganz normal im Index landet und somit in die Suchergebnisse eingeht.

Wenn du die Google Search Console eingerichtet hast, kannst du direkt unten zum entsprecehenden Mobilbereich in der Search Console wechseln. 

mobile friendly test

Der mobile friendly test zeigt dir direkt, ob noch etwas auf deiner Website für Moblgeräte optimiert werden muss

Datenschutz

e-recht24.de*

Hier kannst du dir kostenlos das Impressum generieren lassen und kostenpflichtig (z.B. mit einer Monatsmitgliedschaft) die Datenschutzerklärung.

Als Mitglied hast du außerdem Zugriff auf einen Projekt Planer, in dem du die von dir generierten Rechtstexte (auch z.B. für Facebook) speichern und im HTML-Format oder als PDF Datei für deine Website und anderen Kanäle runterladen kannst.

In der Wissensdatenbank findest du viele Artikel zur aktuellen IT-rechtlichen Lage und kannst dir bei Interesse auch Webinare zu bestimmten Themen anschauen.

Der e-recht24.de Projekt Planer für all deine Rechtstexte. 

Im Wissensbereich und bei den Webinaren hast du zudem viele weitere Infomöglichkeiten zu deinen relevanten Themen. 

Ich hoffe, dass dir das ein oder andere Tool gute Dienste leistet. 

Schreib mir gern in die Kommentare, welches du am liebsten nutzt und ob du noch einen Tipp hast, der hier noch fehlt. 

Dein Website-Fahrplan für den Überblick

Der Fahrplan zeigt dir mit welchen Schritten und in welcher Reihenfolge du deine Business-Website mit WordPress erstellst.

 

  • inklusive Checkliste
  • inklusive häufig gestellter Fragen & Antworten zum Website-Start

Vielen Dank! Bitte bestätige noch den Link in der E-Mail.