Contentpflege: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
==Contentpflege HowTo== | ==Contentpflege HowTo== | ||
Lorem Ipsum | |||
===URL=== | |||
[[File:Screen Shot 2017-09-18 at 14.42.45.png|600px]] | |||
Darauf achten, dass die URL den Inhalt der Seite repräsentiert. In der Regel erreicht der User die Seite über einen Link oder eine Google suche (Ausnahmen: URL's, die irgendwo abgetippt werden sollen). Also lieber etwas zu lang und eindeutig, als versuchen Abkürzungen oder Kurzschreibweisen zu etablieren. | |||
Auch bitte darauf achten, dass keine "{Name}-2" oder "neue-seite" im CMS bleiben und ggf. ihren Weg in den Google Index finden. | |||
===Bilder=== | ===Bilder=== | ||
====Format==== | ====Format==== | ||
Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell '''immer''' jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche. | Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell '''immer''' jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche. | ||
Mit einem CMS System sollten die Bilder beim hochladen automatisch Komprimiert werden. Hier lediglich auf das richtige Dateiformat achten. Bilder die bsp. Interface Element sind, bzw. wenn kein CMS im Einsatz ist, müssen die Bilder in der Regel selber kompremiert werden. | |||
=====jpeg===== | =====jpeg===== | ||
jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern. | jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern. | ||
| Line 27: | Line 39: | ||
====<alt> Attribut==== | ====<alt> Attribut==== | ||
Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range". | Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range". | ||
===SEO=== | |||
Man muss kein SEO Experte sein, um eine Seite zumindest grundlegend für eine Suchmaschine vorzubereiten. | |||
[[File:Screen Shot 2017-09-18 at 14.37.49.png|400px]][[File:Screen Shot 2017-09-18 at 14.42.18.png|400px]][[File:Screen Shot 2017-09-18 at 14.42.24.png|400px]][[File:Screen Shot 2017-09-18 at 14.42.45.png|400px]][[File:Screen Shot 2017-09-18 at 14.37.37.png|400px]] | |||
==Beispiele== | ==Beispiele== | ||
Revision as of 12:51, 18 September 2017
Contentpflege HowTo
Lorem Ipsum
URL
Error creating thumbnail: File missing
Darauf achten, dass die URL den Inhalt der Seite repräsentiert. In der Regel erreicht der User die Seite über einen Link oder eine Google suche (Ausnahmen: URL's, die irgendwo abgetippt werden sollen). Also lieber etwas zu lang und eindeutig, als versuchen Abkürzungen oder Kurzschreibweisen zu etablieren.
Auch bitte darauf achten, dass keine "{Name}-2" oder "neue-seite" im CMS bleiben und ggf. ihren Weg in den Google Index finden.
Bilder
Format
Das Format ist entscheidend für die Dateigröße und damit für die (schnelle) Ladegeschwindigkeit der Website. Als Faustregel gilt: Generell immer jpeg Dateien nutzen, es sei denn das Bild benötigt transparente Bereiche.
Mit einem CMS System sollten die Bilder beim hochladen automatisch Komprimiert werden. Hier lediglich auf das richtige Dateiformat achten. Bilder die bsp. Interface Element sind, bzw. wenn kein CMS im Einsatz ist, müssen die Bilder in der Regel selber kompremiert werden.
jpeg
jpeg's am besten über den "Für Web sichern" Dialog in Adobe Photoshop speichern. Die Voreinstellungen nutzen. die bps, die Farbprofil Informationen aus der Datei entfernen, und eine möglichst hohe Kompression (gleich niedrige Qualitätszahl) wählen. Nach dem Speichern die Dateigröße des Bild mit einem Bild-Optimierer, bsp. https://tinypng.com weiter verkleinern.
Folgende Einsparungen lassen sich an einem kleinen Bild (1280x852 Pixel, 72dpi) realisieren mit "Für Web sichern" erreichen (Die Beispiele sind am Ende der Seite):
Originaldatei (tiff): 3.302.600 Byte (3,3 MB)
PNG: 1.811.856 Byte (1,8 MB)
JPEG 60: 227.110 Byte (229 KB) (-87%)
JPEG 30: 114.092 Byte (115 KB) (-93%)
JPEG 10: 68.826 Byte (70 KB) (-96 %)
Nach der darauf folgenden Optimierung mit https://tinypng.com:
PNG: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)
JPEG 60: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)
Error creating thumbnail: File missing
Dateiname
Der Dateiname folgt einem Schema, also einer Nomenklatur. Bewährt hat sich {yymmdd}-{möglichst-aussagekräftiger-name}.{dateityp} also bsp. 160813-guhl-seidenglanz-maui-promotion-header.jpeg.
<alt> Attribut
Das alt="Name" Attribut ist SEO relevant und gehört mit zu einer sauber gepflegten Website. In den meisten CMS Systemen wird dieses Attribut als Name des Bild angelegt. Der Name sollte Die Marke, Das Produkt und den Inhalt des Bildes kurz und knapp beschrieben. Bsp. "John Frieda® - Sheer Blonde Range".
SEO
Man muss kein SEO Experte sein, um eine Seite zumindest grundlegend für eine Suchmaschine vorzubereiten.
Error creating thumbnail: File missingError creating thumbnail: File missingError creating thumbnail: File missingError creating thumbnail: File missingError creating thumbnail: File missing
Beispiele
PNG: 1.811.856 Byte (1,8 MB)
JPEG 60: 227.110 Byte (229 KB) (-87%)
JPEG 30: 114.092 Byte (115 KB) (-93%)
JPEG 10: 68.826 Byte (70 KB) (-96 %)
PNG Optimiert: 549.493 Byte (553 KB) (-70% im Vergleich zum Ursprungs png)
JPEG 60 Optimiert: 185.844 Byte (188 KB) (-18% im Vergleich zum Ursprungs jpeg)
