Persönlich

Website Tipps um deinen Food-Blog zu optimieren

Grundlegende Hilfestellungen, die dir zeigen, was bei einer guten Website wichtig ist und wie du deinen Blog verbessern kannst.

Ich koche und fotografiere gerne und bin deshalb auch immer wieder auf der Suche nach Inspiration. Es gibt so viele Foodblogs, die durch schöne Bilder oder gute Rezepte glänzen. Oft rückt dabei aber die Umsetzung der Seite in den Hintergrund. Das ist auch verständlich, denn jeder Blogger konzentriert sich in erster Linie auf das, was er auch kann und was er veröffentlichen möchte. Die Website steht dabei vielleicht nicht an erster Stelle.

Dieser Beitrag ist aus der Sicht eines Designers und Entwicklers. Trotzdem denke ich, dass du mit den Empfehlungen vielleicht hier und da etwas anfangen kannst. Es sind lange nicht genügend Punkte, um deine Seite perfekt zu machen, aber für Blogger, die sich hinsichtlich der Gestaltung und Programmierung weniger auskennen, ist es sicherlich eine Start-Hilfe.

Lange Ladezeiten vermeiden

Viele Besucher sind frustriert und springen wieder ab, wenn sich deine Seite nicht innerhalb von vier oder sogar drei Sekunden geladen hat. Heutzutage wird alles immer schneller und wir sind es gewohnt, dass alles sofort zur Verfügung steht.
Gerade bei einem Food Blog, der viel über Bilder spricht, ist es schwierig, Ladezeiten niedrig zu halten. Denn Bilder sind meistens das, was deine Seite verlangsamt, wenn sie zu groß abgespeichert werden oder zu viele in einem Beitrag eingebunden sind. Dennoch gibt es ein paar Tipps, wie man unnötige Ladezeiten verringern kann:

Bilder kleiner einbinden (Dateigröße und Format)

Ich habe schon auf vielen Blogs gesehen, dass die Bilder direkt von der Speicherkarte auf die Website hochgeladen wurden. Diese werden dann vermutlich automatisch von deinem CMS System (z.B. Contao oder Wordpress) verkleinert, sind in ihrem Format aber trotzdem riesig eingebunden und eigentlich zu groß für die tatsächlich dargestellte Größe in deinem Beitrag. Zudem verbrauchen sie unnötig Speicherplatz auf deinem Server und du musst womöglich schon bald wieder Geld für ein Upgrade ausgeben.

Du solltest also vorher schauen, wie groß die tatsächlich benötigte Pixelbreite in deinem Beitrag ist und dein Bild auch nur doppelt so groß hochladen. Doppelt so groß, damit es auch auf hochauflösenden Displays „scharf“ aussieht. Solltest du trotzdem irgendwann ein anderes Format brauchen, kannst du zur Sicherheit immer noch alle Bilder lokal auf einer Festplatte speichern oder dir einen günstigen Cloud-Service wie die Dropbox anmieten. 

Ich verwende zum Beschneiden und komprimieren Photoshop, da ich auch sonst oft damit arbeite. Dein Betriebssystem bringt sicherlich aber auch schon von Haus aus solche Funktionen mit. Bei Apple geht das z.B. mit Hilfe von Vorschau. Wer online Bilder bearbeiten möchte, dem kann ich diesen sehr guten Editor empfehlen: www.v3.polarr.co

Wieviel Komprimierung an deinem Bild noch möglich ist, kannst du mit einem Online Compressor testen: www.compressor.io oder www.tinypng.com.

Social Media Button später laden

Ich empfehle nicht zu viele Social Media Button einzubinden! Jeder Button lädt ein Skript der jeweiligen Plattform und verlangsamt so den Ladeprozess deiner Seite oder deines Beitrags. Ich habe zum Beispiel schon oft SocialCount verwendet. Dieses Skript ermöglicht es, den Button erst dann zu laden, wenn jemand Interesse zeigt, einen Beitrag zu teilen und auf einen Button klickt oder mit seinem Mauszeiger darüber fährt.

Wie schnell sich deine Seite oder einzelne Unterseiten wirklich laden, kannst du mit diesem Tool herausfinden.

Nicht zu viele verschiedene Schriftarten verwenden

Ein angenehmes Schriftbild führt dazu, dass der Besucher gerne deine Texte ließt und nicht nur deine Bilder anschaut.
Ich würde nicht empfehlen, für verschiedene Bereiche auf deinem Blog, unterschiedliche Schriften einzubinden. Das würde den Besucher nur verwirren und es wäre schwer, sich an ein Schriftbild zu gewöhnen. Zudem kommt es zu einer unnötig längeren Ladezeit, da die eingebundenen Schriften auch erstmal vom Browser geladen werden müssten.

Eine Richtlinie, die ich schon während meiner Ausbildung gelernt habe, und seitdem auch bei jedem Projekt anwende: Nicht zu viele unterschiedliche Schriften verwenden. Meistens kombiniere ich deshalb maximal 2 Schriftfamilien.
Gut ist zum Beispiel, eine Serifenschrift für Headlines, also Überschriften zu verwenden und eine serifenlose Schrift für den Fließtext.

Beispiel klare Unterscheidung von Schriftfamilien
Man sollte einfach zwischen Überschriften und Fließtext unterscheiden können

Das macht es dem Besucher einfacher, eine Trennung zwischen den Texten zu erkennen und Bereiche übersichtlich zu unterteilen. Würden wir alles in der gleichen Schriftgröße und in dem selben Schriftbild veröffentlichen, würde keiner sehen, wo ein neuer Absatz oder ein neues Thema beginnt, da alles gleich aussieht.
Man kann natürlich auch eine Schriftfamilie verwenden und innerhalb der Schriftschnitte Unterscheidungen erkennbar machen. Dann wären alle Überschriften beispielsweise Bold und der Fließtext Regular.
Man sollte generell zwischen Überschriften, Fließtext und Links unterscheiden können. Auch Farben können dabei hilfreich sein.

Wer auf seiner Seite einen Blocksatz verwendet, sollte sich bewusst sein, dass es im Browser noch kein Standard ist, Silben zu trennen. Ich finde, es erschwert das Lesen ungemein, wenn sich dadurch große Lücken zwischen den Wörtern bilden und ein ungleiches Schriftbild entsteht. Daher den Text lieber linksbündig halten.
Wer trotzdem einen Blocksatz möchte, sollte den CSS-Befehl "hyphens" verwenden. Dieser sorgt in einigen Browsern/Versionen für eine Silbentrennung.

Beispiel Blocksatz im Web
Durch einen Blocksatz entstehen Lücken im Text.

Bilder richtig benennen

Die Google Bildersuche sorgt bei vielen Blogs für neue Seitenaufrufe. Das macht auch Sinn, da gerade Foodblogs viel über Bilder kommunizieren und somit auch eine Menge davon eingebunden sind.
Wenn aber alle Bilder „IMG_2547.jpg“ heißen würden und keine Bildbeschreibung hätten, würden sie dort auch nicht auftauchen. Suchmaschinen wissen (noch) nicht, dass ein Nudelteig auf einem Bild zu sehen ist. Sie brauchen dazu eine Beschreibung, die wir ihnen im Hintergrund geben können. Dazu zählt auch, die Bilddatei richtig zu benennen. Wenn also Nudelteig darauf zu sehen ist, sollte es auch als „Nudelteig-01.jpg“ oder so ähnlich abgespeichert werden.

Wichtig für Suchmaschinen

Fügst du ein Bild in deinem Beitrag ein, wird bestimmt nach einem alternativen Text (Alt-Attribut) und einem Titel gefragt.

Alt-Attribut:

Der alternative Text wird angezeigt, wenn das Bild nicht geladen werden kann und sollte immer das Bild beschreiben. Sollte in unserem Beispiel also „Nudelteig in einer Schüssel“ zu sehen sein, sollte dort auch „Nudelteig in einer Schüssel“ eingetragen werden. Das ist für die Suchmaschinenoptimierung (SEO) enorm wichtig!

Titel-Attribut:

Das Titel-Attribut sorgt für einen sogenannten Tooltip. Es wird einem also ein ergänzender Hinweistext angezeigt, wenn man mit der Maus über das Bild fährt. Für die Suchmaschinen hat dieser aber keine besondere Relevanz.

Am besten verwendest du den alternativen Text direkt so, dass er auch wunderbar als Bildbeschreibung für z.B. Pinterest funktionieren kann. Denn wird ein Bild von einem Beitrag auf Pinterest geteilt, steht genau dieser Text darunter. Und je genauer er beschrieben ist, desto weniger Arbeit hast du oder jemand anderes damit, diesen später nochmal zu ergänzen.

Mehr Informationen zur SEO-Optimierung findest du hier: Suchmaschinenoptimierung in Contao. SEO Tipps Teil 1/2

Deine Bilder richtig zu benennen, ist aber nicht nur für ein gutes Ranking bei Suchmaschinen wichtig, die dadurch deinen Beitrag richtig interpretieren können. Auch die Barrierefreiheit spielt eine Rolle. Blinden oder schwachen Menschen kann so einfacher die Seite vorgelesen werden.

Keine Texte als Bild einbinden

Es gibt Blogger, die Schriftzüge mit ihrem Grafikprogramm auf einem Bild platzieren und dieses dann exportieren und auf der Seite einbinden.
Und damit meine ich keine Wörter wie „Fancy“, die in der Ecke stehen. Ich meine Infos wie die Gramm-Anzahl für ein Rezept oder eine Bildbeschreibung.
Der einfache Grund der dagegen spricht ist der, dass dieser Text nicht von einer Suchmaschine gelesen werden kann. Auch einem Blinden wird das nicht helfen, das Bild zu verstehen. Und skaliert man es kleiner und größer, wird der Text entweder unscharf oder zu klein zum Lesen.

Lieber eine Bildbeschreibung als reinen HTML Text formatieren und einbinden.

Deine Seitenstruktur und die Verlinkung zu Beiträgen logisch aufbauen

Wenn du deinen Blog neu aufsetzt, beginnst du vermutlich damit, Seiten anzulegen, Kategorien zu erstellen und eine Navigation festzulegen. Eine ordentliche Seitenstruktur ist für deinen Blog sehr wichtig, da dadurch ein Pfad zu einem Beitrag erstellt wird. Stell die vor, es möchte jemand deinen Artikel teilen und der Besucher muss einen ewig langen Link kopieren, schneidet dabei aber versehentlich etwas ab, da es ihm nicht wichtig erscheint.

(1) Sinnvoller wäre da doch sowas wie:

www.deinblog.de/rezept/nudeln

(2) Und nicht:

www.deinblog.de/kategorien/kurz-und-knapp/veroeffentl-april/Beitrag/1125

Man sollte also im besten Fall direkt durch den Link erkennen, was einen in diesem Beitrag erwartet und welches Thema vermutlich dahinter steckt. Auch bleibt eine schlichte und selbsterklärende URL leichter im Gedächtnis. Und teilt jemand deinen Beitrag auf einem anderen Blog, sieht ein URL wie in Beispiel 1 doch besser aus, oder nicht? Zudem wertet es die Auflistung bei Suchmaschinen auf, da dieser Pfad dort ebenfalls angezeigt wird.

Deine Rezepte zum Ausdrucken anbieten

Wenn jemand aus deinem Blog ein Rezept nachkochen möchte, schaut er sich während des Kochens im besten Fall die Zubereitung auf seinem Smartphone oder Tablet an. So hast du die Möglichkeit, ihm gleich noch weitere Dinge anzuzeigen. Trotzdem gibt es einige Besucher, die das Rezept in Papierform haben möchten.
Verwendet man dann den Standardbefehl „Seite drucken“ über den Browser, werden auch Bilder und allerhand weitere unnötige Texte mit ausgedruckt. Das verbraucht somit mehr Tinte und die Bilder braucht man auch nicht zwingend, wenn man die Zubereitung nachlesen möchte. Deshalb sollte man eine Alternative anbieten.

Ich habe dafür schon Print Friendly verwendet, das auch von vielen anderen Kochblogs genutzt wird. Es ist kostenlos und einfach einzurichten. Hier wird einem sogar selbst überlassen, ob man die Bilder mit drucken möchte oder nur den Text.

Für Mobilgeräte optimieren und deine Seite touchfähig machen

Ist deine Seite mobile-friendly? Eine mobile Version deiner Seite ist heutzutage unumgänglich. Gerade wenn es darum geht, Rezepte nachzukochen, möchte man nicht seinen Computer mit in die Küche nehmen, sondern verwendet kleinere Geräte mit kleineren Bildschirmgrößen. Darauf sollte deine Seite ebenso gut aussehen und funktionieren. Versuche also in jedem Fall deine Seite responsive zu machen.

Falls du dabei Hilfe brauchst, sende mir gerne eine Mail.

Beitrag teilen: