Gerade in Zeiten der DSGVO und  des Urteils des EuGH zum Thema Cookies stellen sich immer mehr Websitebesitzer die Frage: Setzt meine Website eigentlich Cookies oder nicht? Muss ich mich ggf. um einen Cookie-Banner oder ein Opt-In für Tracking-Cookies kümmern?

Eine reine Cookie-Info à la: „Diese Seite verwendet Cookies. Wenn Du sie weiter verwendest, stimmst Du der Nutzung von Cookies zu“ ist nicht mehr ausreichend. Ab sofort muss der Benutzer VOR dem Setzen von Cookies gefragt werden, ob er dem zustimmt.

HINWEIS: Ich gebe hier Ratschläge nach bestem Wissen und Gewissen. Ich bin aber keine Juristin und somit nicht berechtigt oder befähigt, qualifizierte rechtliche Beratung zu geben. Wenn Du ganz sicher gehen möchtest, wende Dich an einen Fachanwalt für Internetrecht. Ich übernehme keine Verantwortung für eventuelle Rechtsfolgen

Was ist eigentlich ein Cookie?

Ein Cookie ist eine kleine Textdatei in Deinem Browser, in der eine Information steht, die durch eine Website dort abgelegt wurde. Darin steht oft nur eine Zeile Text, die eine Information enthält. Das Cookie (habe ich extra hier nachgeschaut - Deutsch Trainer "heißt es der, die oder das Cookie?") wird dann beim nächsten Besuch ausgelesen und die Information darin verwendet, um Deinen Besuch auf der Seite komfortabler zu gestalten (oder - bei Tracking-Cookies - zu erkennen, ob Du die Seite vorher schon einmal besucht hast). Z.B.: Eine Website öffnet beim ersten Besuch ein Popup-Fenster mit einer Information. Wenn Du dieses Fenster schließt, wird ein Cookie abgelegt, in dem steht, dass Du das Popup nicht mehr sehen willst. Dieses hat eine gewisse Gültigkeitsdauer, die vom Programmierer definiert werden kann. Wenn Du nun drei Tage später wieder auf die Website kommst, schaut die Seite in Deinem Browser nach, ob es für Sie irgendwelche Infos/Cookies gibt und findet das Cookie, in dem (übersetzt) steht: "Ich will das Popup nicht sehen" und verhindert dann, dass für Dich das Popup erneut angezeigt wird.

Was Ist Ein Cookie 2
In diesem Cookie zu einem Popup steht nur der Wert "true". Damit weiß das Popup mit dem sprechenden Namen modal-xxxxx, dass es nicht geöffnet werden soll. Weiterhin gibt es ein "Verfallsdatum". Danach wird das Popup dann wieder gelöscht, bis ein neues Cookie gesetzt wird.

Diese Cookies darfst Du setzen, ohne einen Cookie-Banner zu benötigen

Einige Cookies gelten als technisch notwendig und dürfen ohne vorherige Einwilligung des Seitenbesuchers gesetzt werden. Sie sind notwendig, damit die Seite einwandfrei funktioniert.

Was sind technisch notwendige bzw. essenzielle Cookies?

Dazu gehören z.B. Warenkorb-Cookies oder Session-Cookies.

Warenkorb-Cookies sorgen dafür, dass beim Surfen durch eine Shop-Seite der Inhalt des Warenkorbes erhalten bleibt, also nicht bei jedem neuen Laden der Seite wieder „vergessen“ wird. Session-Cookies tun ähnliches. Sie enthalten Informationen über Dinge, die während einer „Sitzung“ auf einer Seite geschehen sind. In der Regel werden Session Cookies beim nächsten Schließen des Browsers automatisch gelöscht.

Dann gibt es noch funktionale Cookies, die ebenfalls ohne vorherige Einwilligung gesetzt werden dürfen. Hierzu gehören z.B. Cookies, die durch einen Sprachumschalter erzeugt werden. So „merkt“ sich die Seite, welche Sprache der Besucher gewählt hat, so dass er nicht nach jedem Klick auf einen Menüpunkt erneut die Sprache umstellen muss.

ACHTUNG: In diesen Fällen brauchst Du einen Cookie Opt-In

Wenn ein Cookie dazu dient, das Benutzerverhalten zu beobachten (Tracking-Cookies) oder ihm geeignete Werbung zu servieren (Werbe-Cookies oder Retargeting-Cookies), dann handelt es sich nicht mehr um einen notwendigen oder rein „praktischen“ Cookie, sondern dann profitiert nicht (nur) der Besucher, sondern in erster Linie DU als Seitenbetreiber. (Für mich eine recht hilfreiche Eselsbrücke – sobald der Betreiber profitiert wird es kritisch ;-)) Mit Tracking-Cookies wie denen von Google Analytics kann der Besitzer der Website Informationen über das Verhalten der Besucher seiner Seite erhalten und mit diesem Wissen Anpassungen an der Seite unternehmen um sie erfolgreicher zu machen. Mit Werbe-Cookies kann er dafür sorgen, dass Werbung passend zu zuvor getätigten Suchen oder ermittelten Interessen ausgespielt wird.

Auch Cookies von Drittanbietern wie YouTube, Facebook oder Vimeo dürfen nicht ohne vorherige Einwilligung gesetzt werden. Das tun sie häufig schon, wenn Du z.B. ein Video von YouTube in Deine Seite einbettest. Das musst Du nun verhindern und eine Abfrage für das Einverständnis Deiner Besucher vorschalten.

Ergänzung: Dienste der großen amerikanischen Anbieter wie Facebook, Youtube, Google etc. sind nach dem Fall des Privacy Shield Abkommens noch kritischer geworden. Du solltest also in jedem Fall vor der Verwendung genau abwägen ob Du die jeweilige Anwendung WIRKLICH auf Deiner Website brauchst. (Quelle: https://www.e-recht24.de/artikel/datenschutz/12236-eugh-erklaert-privacy-shield-fuer-ungueltig.html)

So findest du heraus, ob Deine Website Cookies setzt

Es gibt einen ganz einfachen Weg, herauszufinden, ob eine Website Cookies setzt oder nicht. Hier findest Du die Vorgehensweise für zwei gängige Browser, nämlich Firefox und Google Chrome.

Zuerst einmal empfiehlt es sich, die betreffende Seite im Inkognito-Fenster zu besuchen. Das öffnet man im Firefox mit Strg + Shift + P und in Chrome mit Strg + Umschalttaste + N oder jeweils über das Menü mit den drei kleinen Punkten (Chrome) oder Strichen (Firefox) oben rechts in der Ecke des Browsers. So verhinderst Du, dass noch ältere Cookies im Cookie-Speicher sind.

Cookies im Browser (Adressleiste)

Bei den meisten Browsern kannst Du direkt in der Adressleiste nachsehen, ob und welche Cookies eine Seite gesetzt hat. Dazu klickst Du links neben der URL auf das Schloss (oder auch Schild, je nach Browser). Im folgenden auf "Cookies" und siehst dann die Details zu allen gesetzten Cookies (siehe Galerie)

Hier gibt es die Cookie-Ermittlung als kurzes Video

Cookies im Entwickler-Tool

Nun müssen wir in die Entwickler-Tools des Browsers gehen um die gewünschten Informationen zu finden.

Das geht am einfachsten durch das Drücken der F12 Taste auf der Tastatur (bei beiden Browsern) , alternativ kann man aber auch mitten in der Seite (nicht auf einem Bild, Button oder Ähnlichem) einen Rechtsklick machen und „Element untersuchen“, „Inspect element“ oder „Untersuchen“ wählen.

Nun sollte sich (meist am unteren Bildschirmrand) ein Fenster öffnen.  Dieses Fenster sieht bei beiden Browsern ähnlich aus und hat am oberen Rand diverse Reiter mit Icons.

Cookies in Firefox

Bei Firefox klickst Du nun auf den Reiter „Storage“ , dort klappst Du den Eintrag „Cookies“ auf und klickst auf den Namen der Seite. Nun sollte rechts eine Liste der Cookies zu sehen sein.

Cookies Firefox Developer Tools
Im Reiter "Storage" im Entwickler-Tool siehst Du die Cookies.

Cookies in Chrome

Bei Chrome klickst Du auf den Reiter „Application“ und dort im Bereich „Storage“ auf den Baum „Cookies“. Dort findest Du die aktuelle Seiten-URL und  eine Liste der Cookies, die für diese Seite gesetzt wurden.

Cookies Chrome Developer Tools
Bei Chrome Findest Du die Cookies im Reiter "Application"

Du kannst nun mit geöffnetem Entwickler-Fenster weiter auf der Seite surfen und testen, ob auf einer der Unterseiten ein Cookie gesetzt wird. Dies geschieht in Echtzeit.

Wenn Du diesen Test im normalen und nicht im Inkognito-Fenster machst, kannst Du z.B. auch die vorhandenen Cookies löschen und dann die Seite neu laden. So erhältst Du ein realistisches Ergebnis.

Cookies löschen

Alle Cookies Loeschen Entwickler Tools
Um sicher zu sein, solltest Du die Cookies löschen und die Seite neu laden (ohne an WordPress angemeldet zu sein)

Maßnahmen für Suchmaschinenoptimierung und Benutzerfreundlichkeit

Die schlechte Nachricht gleich vorweg: Fast nichts ist so einfach, wie es auf den ersten Blick erscheint. WordPress erlaubt dir zum Beispiel auf sehr einfache Weise das Hochladen von Bildern, die Du dann auf Deiner Website verwenden kannst. 

Leider sollte man diese einfache Möglichkeit trotzdem mit etwas Hintergrundwissen verwenden um optimale Ergebnisse zu erzielen. Damit Du Deine Bilder so hochladen kannst, dass sie dem Erfolg Deiner Seite nutzen und nicht schaden, habe ich hier einige wichtige Hinweise gesammelt. 

Einige Fehler, die häufig bei der Verwendung von Bildern in WordPress Webseiten gemacht werden:

Häufiger FehlerWarum ist das so schlecht
Bildnamen sind nicht bewusst gewählt, sondern ggf. so, wie sie aus der Kamera gekommen sind (z.B. DSCF_0909870.jpg)
Auch Bildnamen tragen zu einer guten SEO (Suchmaschinenoptimierung) Deiner Seite bei. Wenn ein Bild einen sprechenden Namen hat, finden auch Suchmaschinen es zu dem passenden Suchbegriff.
Der Dateityp des Bildes ist für die dargestellten Inhalte ungünstig gewählt.Durch die Verwendung des „falschen“ Dateityps kann das Bild später deutlich größer sein, als es sein müsste.
Bilddateien sind größer, als sie sein müsstenUnnötig große Bilder können Deine Website massiv verlangsamen und auch das schadet ggf. Deiner Findbarkeit.
Bilder wurden vor dem Upload nicht optimiert.Auch ein auf optimale Pixelmaße verkleinertes Bild kann noch weiter optimiert werden und noch mehr Ladezeit sparen.
Dem Bild wurde nach dem Upload kein geeigneter ALT-Text (Alternativer Text) gegeben.Passende ALT-Texte sind nicht nur für die Gültigkeit des erzeugten Codes, sondern auch für Besucher mit Bildschirmlesegeräte und für Suchmaschinen wichtig.

Schauen wir uns diese Bereiche nun einmal im Detail an.

Bildnamen

Wenn ein Bild aus der Kamera kommt, hat es oft einen Namen wie “DSCF_234256284_35.jpg. Auch Fotos aus anderen Quellen haben häufig Namen, die nicht auf das dargestellte Motiv schließen lassen. 

Warum solltest Du die Dateinamen Deiner Bilder vor dem Upload immer kritisch hinterfragen? 

Auch Fotos, die auf Deiner Website verwendet werden, werden von Suchmaschinen wie Google “gecrawlt” und im Suchergebnis-Katalog gespeichert. Je nach Thema/Produkt verwenden Kunden auch gerne mal die Bildersuche, um passende Seiten zu finden.

Suchmaschinenoptimierung Bildnamen Optimal
Passend benannte Bilder erscheinen in den Suchergebnissen – mit Link zu Deiner Website

Das bedeutet für Dich konkret: Wenn Dein Bild nicht “DSCF_lustige1214Zahlenkombi.jpg” sondern z.B. “sonnenblume-bluete-samenstand.jpg” heißt, findet jemand evtl. Deine Seite auch, wenn er in der BILDERSUCHE von Google nach “Sonnenblume” sucht. 

Der richtige Dateityp für Deine Bilder

Über dieses Thema könnte man schon alleine mehrere Seiten schreiben, aber ich halte es hier kurz.

JPG für Fotos und detailreiche Darstellungen

Achte darauf, dass Du grundsätzlich für FOTOS (viele Farben, feine Details, Verläufe und Übergänge) das Format JPG verwendest. JPG ist ein komprimiertes Format, sorgt also dafür, dass die vielen Millionen Farben, die es darstellen kann so Speicher-sparsam wie möglich verarbeitet werden. Optisch lässt sich zwischen einem JPG und einem PNG in hoher Auflösung kaum ein Unterschied feststellen, aber die Dateigröße kann bei einem Foto im PNG-Format bei gleichen Abmessungen um ein vielfaches höher sein.

PNG bei Bildern mit geometrischen Formen oder Transparenz

Das PNG (oder auch gif) – Format eignet sich besonders für Darstellungen mit vielen scharf abgegrenzten Bereichen, Schriften o.Ä. Also z.B. Schaubilder, Grafiken etc. Hier zeigt das Format PNG seine Stärken indem es die scharfen Abgrenzungen erhält und nicht wie das JPG-Format durch Komprimierung „verwäscht“.

Artefakte Vergleich
Links sieht man, dass Texte oder scharfe Abgrenzungen durch die Komprimierung mit sog. Artefakten versehen werden und verwaschen wirken.

Auch wenn das Bild transparente Bereiche haben soll, muss es als .png abgespeichert werden. JPG kann keine Transparenz.

Bildgröße - Abmessungen und Dateigröße

Google liebt schnelle Seiten und Deine Besucher sicher auch. Daher solltest Du bei der Verwendung von Bildern darauf achten, diese nur so groß wie nötig hochzuladen, damit sie nicht Deine Seite verlangsamen. 

In den meisten Fällen ist eine Bildgröße von ca 2000- 2200 Pixeln (z.B. für Headerbilder in voller Breite) oder 800px – 1400 für Bilder im Inhalt der Seite völlig ausreichend. 

Wenn Du Dir unsicher bist, gibt es mehrere Methoden, um die passende Größe herauszufinden. 

Browser-Extensions zur Ermittlung der Darstellungsgröße

Für die meisten Browser gibt es Extensions (Erweiterungen), mit denen Elemente auf dem Bildschirm exakt gemessen werden können. Ich verwende z.B. “Page Ruler Redux” in Chrome, aber auch für alle anderen Browser lassen sich solche Helfer finden. 

Suchmaschinenoptimierung Bildabmessungen
Bildabmessungen ermitteln mit Browser-Extension Page Ruler Redux

Inspector / Developer Tools zum Ermitteln der Darstellungsgröße

Besuche eine Seite Deiner Website und klicke mit der rechten Maustaste auf ein Bild, das dort schon eingefügt ist. Klicke dann auf “Untersuchen” (klappt zumindest in Chrome und Firefox) und es öffnet sich ein weiterer Reiter in Deinem Browserfenster, der Dir mehr Informationen zu den Elementen der Seite gibt.

Wenn Du mit der Maus über die verschiedenen Elemente fährst, siehst Du, welche Größe sie als Datei haben und in welcher Größe sie eingebunden sind. In diesem Beispiel hat das Bild als Datei eine Breite von 700 Pixeln, wird aber nur in einer Breite von 427 Pixeln angezeigt. Hier könnte man also sogar noch etwas optimieren, indem man das Bild auf die exakt benötigte Größe von 427 Pixeln verkleinert. Denn auch wenn ein Bild “klein” auf der Website angezeigt wird, kann es als Datei viel größere Abmessungen haben. Das große Bild wird übermittelt, auch wenn es klein angezeigt wird.

Suchmaschinenoptimierung Bildgroesse Ermitteln Inspector 1
Anzeigegröße ermitteln mit Inspector direkt im Browser

Bildoptimierung

Nun hast Du Deine Bilder so vorbereitet, dass sie einen sprechenden Namen haben und die richtige Größe um keine unnötigen Ladezeiten zu verursachen. Leider sind wir damit noch nicht fertig, denn es geht NOCH optimaler ? 

Unser höchstes Ziel ist es, die DATEIGRÖßE, also die Menge der Daten, die beim Anzeigen des Bildes auf der Website vom Server übertragen werden muss so weit wie möglich zu reduzieren. Den ersten Schritt hast Du durch die Verkleinerung des Bildes auf die mindestens benötigten Abmessungen erledigt. 

Nun kann das Bild aber noch weiter optimiert werden. Dabei werden Bildinformationen so weit wie möglich “vereinfacht”, ohne dass die Bildqualität zu sehr darunter leiden muss. 

Bildoptimierung See
Foto @stphnwlkr auf unsplash.com

So werden z.B. große Farbflächen mit wenigen Details “vereinfacht” und dadurch Speicherplatz gespart. Bei diesem Bild gibt es große, relativ homogene Farbflächen, die sparsamer gespeichert werden können.  

Ich verwende hier gerne das Tool “TinyPNG”. https://tinypng.com

Wenn ich dort z.B. das Bild vom See hochlade, wird es von einer Dateigröße von 170 Kilobyte auf eine Größe von 106 KB optimiert. Das ist eine Einsparung von 41%. 

Seo Bildoptimierung Tinymce
Bildoptimierung vor dem Upload mit TinyPNG

Es gibt auch Tools, die man in WordPress installieren kann und die dann beim Upload bequem die Optimierung übernehmen. Viele davon sind nur bis zu einer bestimmten Bildanzahl kostenlos oder verlangen eine Anmeldung bei einem Dienstleister. Grundsätzlich aber auch eine gute Möglichkeit, wenn man keine Lust hat, alle Bilder vor dem Hochladen manuell zu optimieren.

Alt-Text und Beschreibung

Die WordPress Mediathek erlaubt Dir auf ganz einfache Weise, jedem Bild auch einen Titel, einen Alternativ-Text und eine Beschreibung hinzuzufügen. Diese “Chance” solltest Du immer nutzen, auch wenn es etwas Arbeit bedeutet. 

Alt Text Beschreibung
ALT-Text. Wichtig für SEO und Code

Auch Titel und Beschreibung sind ggf. sinnvoll. Denn all diese Dinge werden (je nach verwendetem Theme und Darstellung) auch im Quelltext angezeigt, auch wenn man sie als Besucher der Webseite nicht sieht und werden somit auch von den Bots der Suchmaschinen gelesen. Wieder eine Möglichkeit, themenrelevante Keywords unterzubringen und der Suchmaschinenfreundlichkeit Deiner Seite auf die Sprünge zu helfen. 

Webdesign Koblenz, SEO (Suchmaschinenoptimierung), WordPress Schulung, Wartung, Support aus Koblenz
Imagefilme, Werbefilme, Grafikgestaltung, Geschäftsausstattung, Drohnenvideos, Fotografie...